<!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>