<script src="../../resources/run-after-layout-and-paint.js"></script>
<style>
.parent {
    position: relative;
    background-color: black;
    width: 100px;
    height: 100px;
}
.child {
    background-color: red;
    width: 100px;
    height: 100px;
}
</style>
<div class=parent>
    <div class=child>
    </div>
</div>
<div class=parent>
    <div>
        <div class=child>
        </div>
    </div>
</div>
<script>
if (window.testRunner)
    testRunner.waitUntilDone();
runAfterLayoutAndPaint(function() {
    var children = document.getElementsByClassName("child");
    children[0].style.backgroundColor = "rgba(0,255,0,0.5)";
    children[1].style.backgroundColor = "rgba(0,255,0,0.5)";
    if (window.testRunner)
        testRunner.notifyDone();
});
</script>