| <!DOCTYPE html> |
| <script src="../../../resources/js-test.js"></script> |
| <div id="host1"> |
| <div id="r1"> |
| <div></div> |
| <div></div> |
| </div> |
| <div></div> |
| <div></div> |
| </div> |
| <div id="host2"> |
| <div> |
| <div id="r2"></div> |
| </div> |
| <div></div> |
| </div> |
| <div id="host3"> |
| <div id="r3"></div> |
| </div> |
| <script> |
| description("Check that targeted class invalidation works for ::content selectors."); |
| |
| // Create shadow trees |
| |
| host1.createShadowRoot().innerHTML = '<style>.c1::content #r1 { background-color: green }</style><content id="i1"></content>'; |
| host2.createShadowRoot().innerHTML = '<style>.c2 ::content #r2 { background-color: green }</style><div id="i2"><div><content></content></div><div></div><div></div></div>'; |
| host3.createShadowRoot().innerHTML = '<style>.c3::content * { background-color: green }</style><content id="i3"></content>'; |
| |
| var transparent = "rgba(0, 0, 0, 0)"; |
| var green = "rgb(0, 128, 0)"; |
| |
| |
| shouldBe("getComputedStyle(r1, null).backgroundColor", "transparent"); |
| |
| document.body.offsetTop; // Force style recalc. |
| var i1 = host1.shadowRoot.getElementById("i1"); |
| i1.className = "c1"; |
| |
| if (window.internals) |
| shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "5"); |
| |
| shouldBe("getComputedStyle(r1, null).backgroundColor", "green"); |
| |
| shouldBe("getComputedStyle(r2, null).backgroundColor", "transparent"); |
| |
| document.body.offsetTop; // Force style recalc. |
| var i2 = host2.shadowRoot.getElementById("i2"); |
| i2.className = "c2"; |
| |
| if (window.internals) |
| shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "3"); |
| |
| shouldBe("getComputedStyle(r2, null).backgroundColor", "green"); |
| |
| shouldBe("getComputedStyle(r3, null).backgroundColor", "transparent"); |
| |
| document.body.offsetTop; // Force style recalc. |
| var i3 = host3.shadowRoot.getElementById("i3"); |
| i3.className = "c3"; |
| |
| if (window.internals) |
| shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1"); |
| |
| shouldBe("getComputedStyle(r3, null).backgroundColor", "green"); |
| |
| </script> |
