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

   1 <!doctype html>
   2 <style>
   3   .foo {
   4     background: red;
   5   }
   6   div {
   7     border: 1px solid black;
   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 createElementWithShadowAndInsertionPoint(style) {
  23     var host = document.createElement('ul');
  24     var root = host.createShadowRoot();
  25     root.innerHTML = '<style>' + (style ? style : 'div {border: 1px solid green;}') + '</style><div>shadow</div><content></content>';
  26     return host;
  27   }
  28
  29   function querySelectorInShadow(host, selector) {
  30     return host.shadowRoot.querySelector(selector);
  31   }
  32
  33   window.onload = function() {
  34     var container = document.querySelector('#container');
  35     var host1 = createElementWithShadow();
  36     var host2 = createElementWithShadow();
  37     container.appendChild(host1);
  38     container.appendChild(host2);
  39     document.body.offsetHeight;
  40     shouldBeTrue(String(internals.isSharingStyle(host1, host2)));
  41     shouldBeTrue(String(internals.isSharingStyle(querySelectorInShadow(host1, 'span'), querySelectorInShadow(host2, 'span'))));
  42
  43     var host3 = createElementWithShadow();
  44     host3.createShadowRoot();
  45     container.appendChild(host3);
  46     document.body.offsetHeight;
  47     shouldBeFalse(String(internals.isSharingStyle(host1, host3)));
  48
  49     var host4 = createElementWithShadow('span {font-size: 20px;}');
  50     container.appendChild(host4);
  51     document.body.offsetHeight;
  52     shouldBeFalse(String(internals.isSharingStyle(host1, host4)));
  53
  54     host2.classList.add('foo');
  55     document.body.offsetHeight;
  56     shouldBeFalse(String(internals.isSharingStyle(host1, host2)));
  57
  58     var host5 = createElementWithShadowAndInsertionPoint();
  59     host5.innerHTML = '<div>item 1</div><div>item 2</div>';
  60     container.appendChild(host5);
  61     document.body.offsetHeight;
  62     var light = host5.querySelectorAll('div');
  63     var shadow = querySelectorInShadow(host5, 'div');
  64     shouldBeTrue(String(internals.isSharingStyle(light[0], light[1])));
  65     shouldBeFalse(String(internals.isSharingStyle(light[0], shadow)));
  66
  67     var host6 = document.createElement('div');
  68     var root1 = host6.createShadowRoot();
  69     root1.innerHTML = '<style>.foo::content > p { color: red; }</style><content class="foo" select=".a"></content><content></content>';
  70     var root2 = host6.createShadowRoot();
  71     root2.innerHTML = '<shadow></shadow>';
  72     host6.innerHTML = '<p class="a">A</p><p>B</p>';
  73     container.appendChild(host6);
  74     document.body.offsetHeight;
  75     light = host6.querySelectorAll('p');
  76     shouldBeFalse(String(internals.isSharingStyle(light[0], light[1])));
  77   }
  78 </script>
  79 <div id="container"></div>