blob: c9f7520f3e53b4ef6cc21cd1b8ab7ac071f48659 [file] [log] [blame]
<!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>