<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
custom-element { color: red }
</style>
<custom-element>
<div class="d1">A</div>
<div class="d2">B</div>
</custom-element>
<script>
description("Check that getComputedStyle causes a shadow re-distribution when necessary.");
var red = "rgb(255, 0, 0)";
var green = "rgb(0, 128, 0)";
var custom = document.querySelector("custom-element");
var shadowRoot = custom.createShadowRoot();
shadowRoot.innerHTML = '<style>::content div { color: green; }</style><content select=".d2"></content>'
var d1 = document.querySelector(".d1");
var d2 = document.querySelector(".d2");
shouldBe("getComputedStyle(d1).color", "red");
shouldBe("getComputedStyle(d2).color", "green");
document.body.offsetTop;
shadowRoot.querySelector("content").setAttribute("select", ".d1");
shouldBe("getComputedStyle(d1).color", "green");
shouldBe("getComputedStyle(d2).color", "red");
</script>