<!DOCTYPE html>
<html>
<head>
<style>
.outerx .mid .inner {
    background-color: red;
}
.outery .mid .inner {
    background-color: green;
}
.inner {
    width: 50px;
    height: 50px;
}
</style>
<script>
function test() {
    if (window.testRunner)
        testRunner.dumpAsText();

    var x = document.getElementById("x");
    x.classList.add("outerx");

    var y = document.getElementById("y");
    y.classList.add("outery");

    var colorX = getComputedStyle(x.children[0].children[0]).backgroundColor;
    var colorY = getComputedStyle(y.children[0].children[0]).backgroundColor;

    var result = document.getElementById("result")
    if (colorX == colorY)
        result.innerHTML = "FAIL";
    else
        result.innerHTML = "SUCCESS";
}
</script>
</head>
<body onload="test()">
This test succeeds if the two blocks show red and green repectively: <span id="result"></span>
<div id="x">
    <div class="mid">
        <div class="inner">
        </div>
    </div>
</div>
<div id="y">
    <div class="mid">
        <div class="inner">
        </div>
    </div>
</div>
</body>
</html>