src/third_party/WebKit/LayoutTests/fast/selectors/style-sharing-shadow.html

   1 <!doctype html>
   2 <style>
   3   div {
   4     border: 1px solid black;
   5   }
   6   div.foo {
   7     background: red;
   8   }
   9 </style>
  10 <script src="../../resources/js-test.js"></script>
  11 <script>
  12   if (window.testRunner)
  13     testRunner.dumpAsText();
  14
  15   function createElementWithShadow(style) {
  16     var host = document.createElement('div');
  17     var root = host.createShadowRoot();
  18     root.innerHTML = '<style>' + (style ? style : 'span {color:blue;}') + '</style><span>item</span>';
  19     return host;
  20   }
  21
  22   function querySelectorInShadow(host, selector) {
  23     return host.shadowRoot.querySelector(selector);
  24   }
  25
  26   window.onload = function() {
  27     var container = document.querySelector('#container');
  28     var host1 = createElementWithShadow();
  29     var host2 = createElementWithShadow();
  30     container.appendChild(host1);
  31     container.appendChild(host2);
  32     document.body.offsetHeight;
  33     shouldBeTrue(String(internals.isSharingStyle(host1, host2)));
  34     shouldBeTrue(String(internals.isSharingStyle(querySelectorInShadow(host1, 'span'), querySelectorInShadow(host2, 'span'))));
  35
  36     var host3 = createElementWithShadow();
  37     host3.createShadowRoot();
  38     container.appendChild(host3);
  39     document.body.offsetHeight;
  40     shouldBeFalse(String(internals.isSharingStyle(host1, host3)));
  41
  42     var host4 = createElementWithShadow('span {font-size: 20px;}');
  43     container.appendChild(host4);
  44     document.body.offsetHeight;
  45     shouldBeFalse(String(internals.isSharingStyle(host1, host4)));
  46
  47     host2.classList.add('foo');
  48     document.body.offsetHeight;
  49     shouldBeFalse(String(internals.isSharingStyle(host1, host2)));
  50   }
  51 </script>
  52 <div id="container"></div>