OLD | NEW |
(Empty) | |
| 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 selector
s."); |
| 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-colo
r: green }</style><div id="i2"><div><content></content></div><div></div><div></d
iv></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()", "4"); |
| 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> |
OLD | NEW |