third_party/WebKit/LayoutTests/fast/css/getComputedStyle/computed-style-redistribution.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/js-test.js"></script>
   3 <style>
   4 .d1, .d2 { color: red }
   5 </style>
   6 <custom-element>
   7     <div class="d1">A</div>
   8     <div class="d2">B</div>
   9 </custom-element>
  10 <script>
  11 description("Check that getComputedStyle causes a shadow re-distribution when necessary.");
  12
  13 var red = "rgb(255, 0, 0)";
  14 var green = "rgb(0, 128, 0)";
  15
  16 var custom = document.querySelector("custom-element");
  17 var shadowRoot = custom.createShadowRoot();
  18 shadowRoot.innerHTML = '<style>::content div { color: green; }</style><content select=".d2"><content>'
  19
  20 var d1 = document.querySelector(".d1");
  21 var d2 = document.querySelector(".d2");
  22
  23 shouldBe("getComputedStyle(d1).color", "red");
  24 shouldBe("getComputedStyle(d2).color", "green");
  25
  26 document.body.offsetTop;
  27
  28 shadowRoot.querySelector("content").setAttribute("select", ".d1");
  29
  30 shouldBe("getComputedStyle(d1).color", "green");
  31 shouldBe("getComputedStyle(d2).color", "red");
  32
  33 </script>