third_party/WebKit/LayoutTests/fast/css/invalidation/shadow-add-sheet-content.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/js-test.js"></script>
   3 <style>
   4     #outerHost { color: red }
   5 </style>
   6 <div>
   7     <div id="outerHost">
   8         <span id="outerSpan"></span>
   9     </div>
  10     <div></div>
  11     <div></div>
  12     <div></div>
  13     <div></div>
  14     <div></div>
  15     <div></div>
  16     <div></div>
  17     <div></div>
  18 </div>
  19 <script>
  20     description("Insert a style element into a shadow tree affecting a distributed node.");
  21
  22     var outerRoot = outerHost.createShadowRoot();
  23     outerRoot.innerHTML = "<div id='host1'><content/></div>";
  24
  25     var host1 = outerRoot.querySelector("#host1");
  26     var root1 = host1.createShadowRoot();
  27     root1.innerHTML = "<div id='host2'><content/></div>";
  28
  29     var host2 = root1.querySelector("#host2");
  30     var root2 = host2.createShadowRoot();
  31     root2.innerHTML = "<content/>";
  32
  33     shouldBeEqualToString("getComputedStyle(outerSpan).color", "rgb(255, 0, 0)");
  34
  35     document.body.offsetTop;
  36     var sheet = document.createElement("style");
  37     sheet.appendChild(document.createTextNode("::content #outerSpan { color: green }"));
  38     root2.appendChild(sheet);
  39
  40     if (window.internals)
  41         shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "5");
  42
  43     shouldBeEqualToString("getComputedStyle(outerSpan).color", "rgb(0, 128, 0)");
  44 </script>