<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
.b .c { background-color: pink }
.a * { background-color: green }
</style>
<div id="outer">
<div id="inner">
<div>
<div></div>
<div></div>
</div>
</div>
</div>
<script>
description("Check that all children of inner are recalculated.");
var transparent = "rgba(0, 0, 0, 0)";
var green = "rgb(0, 128, 0)";
var inner = document.getElementById("inner");
var outer = document.getElementById("outer");
var innerDivs = inner.querySelectorAll("div");
for (var i=0; i < innerDivs.length; i++)
shouldBe("getComputedStyle(innerDivs[i], null).backgroundColor", "transparent");
document.body.offsetTop; // Force style recalc.
outer.className = "b";
inner.className = "a";
if (window.internals)
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "4");
for (var i=0; i < innerDivs.length; i++)
shouldBe("getComputedStyle(innerDivs[i], null).backgroundColor", "green");
</script>