| <!DOCTYPE html> |
| <script src="../../../resources/js-test.js"></script> |
| <style> |
| custom-element { color: red } |
| </style> |
| <custom-element> |
| <div id="d1" slot="d1">A</div> |
| <div id="d2" slot="d2">B</div> |
| </custom-element> |
| <script> |
| description("Check that getComputedStyle causes a shadow re-distribution when necessary."); |
| |
| var green = "rgb(0, 128, 0)"; |
| var white = "rgb(0, 0, 0)"; |
| |
| var custom = document.querySelector("custom-element"); |
| var shadowRoot = custom.attachShadow({mode: 'open'}); |
| shadowRoot.innerHTML = '<style>::slotted(div) { color: green; }</style><slot name="d2"></slot>' |
| |
| var d1 = document.querySelector("#d1"); |
| var d2 = document.querySelector("#d2"); |
| |
| shouldBe("getComputedStyle(d1).color", "white"); |
| shouldBe("getComputedStyle(d2).color", "green"); |
| |
| shadowRoot.querySelector("slot").setAttribute("name", "d1"); |
| |
| shouldBe("getComputedStyle(d1).color", "green"); |
| shouldBe("getComputedStyle(d2).color", "white"); |
| |
| </script> |
