third_party/WebKit/LayoutTests/fast/css/invalidation/targeted-class-content-pseudo.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/js-test.js"></script>
   3 <div id="host1">
   4     <div id="r1">
   5         <div></div>
   6         <div></div>
   7     </div>
   8     <div></div>
   9     <div></div>
  10 </div>
  11 <div id="host2">
  12     <div>
  13         <div id="r2"></div>
  14     </div>
  15     <div></div>
  16 </div>
  17 <div id="host3">
  18     <div id="r3"></div>
  19 </div>
  20 <script>
  21 description("Check that targeted class invalidation works for ::content selectors.");
  22
  23 // Create shadow trees
  24
  25 host1.createShadowRoot().innerHTML = '<style>.c1::content #r1 { background-color: green }</style><content id="i1"></content>';
  26 host2.createShadowRoot().innerHTML = '<style>.c2 ::content #r2 { background-color: green }</style><div id="i2"><div><content></content></div><div></div><div></div></div>';
  27 host3.createShadowRoot().innerHTML = '<style>.c3::content * { background-color: green }</style><content id="i3"></content>';
  28
  29 var transparent = "rgba(0, 0, 0, 0)";
  30 var green = "rgb(0, 128, 0)";
  31
  32
  33 shouldBe("getComputedStyle(r1, null).backgroundColor", "transparent");
  34
  35 document.body.offsetTop; // Force style recalc.
  36 var i1 = host1.shadowRoot.getElementById("i1");
  37 i1.className = "c1";
  38
  39 if (window.internals)
  40     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "5");
  41
  42 shouldBe("getComputedStyle(r1, null).backgroundColor", "green");
  43
  44 shouldBe("getComputedStyle(r2, null).backgroundColor", "transparent");
  45
  46 document.body.offsetTop; // Force style recalc.
  47 var i2 = host2.shadowRoot.getElementById("i2");
  48 i2.className = "c2";
  49
  50 if (window.internals)
  51     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "3");
  52
  53 shouldBe("getComputedStyle(r2, null).backgroundColor", "green");
  54
  55 shouldBe("getComputedStyle(r3, null).backgroundColor", "transparent");
  56
  57 document.body.offsetTop; // Force style recalc.
  58 var i3 = host3.shadowRoot.getElementById("i3");
  59 i3.className = "c3";
  60
  61 if (window.internals)
  62     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
  63
  64 shouldBe("getComputedStyle(r3, null).backgroundColor", "green");
  65
  66 </script>