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