| <!DOCTYPE html> |
| <script src="../../../resources/js-test.js"></script> |
| <div id="host"> |
| <div> |
| <span></span> |
| <span></span> |
| </div> |
| <div id="slotted"> |
| <span></span> |
| <span></span> |
| </div> |
| <div> |
| <span></span> |
| <span></span> |
| </div> |
| </host> |
| <script> |
| description("Style invalidation of slotted elements."); |
| |
| var root = host.attachShadow({"mode":"open"}); |
| root.innerHTML = '<style>.outer ::slotted(#slotted) { background-color: red } .outer .inner::slotted(#slotted) { background-color: green }</style><div id="outer"><slot id="inner"></slot></div>'; |
| |
| shouldBeEqualToString("getComputedStyle(slotted).backgroundColor", "rgba(0, 0, 0, 0)"); |
| |
| host.offsetTop; // force recalc |
| |
| root.querySelector("#outer").className = "outer"; |
| if (window.internals) |
| shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1"); |
| shouldBeEqualToString("getComputedStyle(slotted).backgroundColor", "rgb(255, 0, 0)"); |
| |
| host.offsetTop; // force recalc |
| |
| root.querySelector("#inner").className = "inner"; |
| if (window.internals) |
| shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1"); |
| shouldBeEqualToString("getComputedStyle(slotted).backgroundColor", "rgb(0, 128, 0)"); |
| </script> |
