third_party/WebKit/LayoutTests/fast/css/invalidation/shadow-add-sheet-host.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"></div>
   8     <div></div>
   9     <div></div>
  10 </div>
  11 <script>
  12     description("Insert a style element into a shadow tree affecting the host.");
  13
  14     var outerRoot = outerHost.createShadowRoot();
  15     outerRoot.innerHTML = "<div><div id='host1'></div></div><div></div>";
  16
  17     var host1 = outerRoot.querySelector("#host1");
  18     var root1 = host1.createShadowRoot();
  19     root1.innerHTML = "<div><div id='host2'></div></div><div></div>";
  20
  21     var host2 = root1.querySelector("#host2");
  22     var root2 = host2.createShadowRoot();
  23     root2.innerHTML = "This text should be green";
  24
  25     shouldBeEqualToString("getComputedStyle(host2).color", "rgb(255, 0, 0)");
  26
  27     document.body.offsetTop;
  28     var sheet = document.createElement("style");
  29     sheet.appendChild(document.createTextNode(":host { color: green }"));
  30     root2.appendChild(sheet);
  31
  32     if (window.internals)
  33         shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");
  34
  35     shouldBeEqualToString("getComputedStyle(host2).color", "rgb(0, 128, 0)");
  36 </script>