blob: 76fd2c47e5edfe47cdd973e8573396e55c3b642f [file] [log] [blame]
<style>
.composited {
-webkit-transform: translateZ(0);
}
.box {
width: 100px;
height: 100px;
background-color: blue;
}
img {
background-color: black;
width: 50px;
height: 50px;
}
img.to-visible {
visibility: hidden;
}
body.changed img.to-visible {
visibility: visible;
}
img.to-hidden {
visibility: visible;
}
body.changed img.to-hidden {
visibility: hidden;
}
#layers {
opacity: 0; /* hide from pixel result */
}
</style>
<script>
if (window.testRunner) {
testRunner.dumpAsText(true);
testRunner.waitUntilDone();
}
function doTest()
{
window.setTimeout(function() {
document.body.classList.add('changed');
if (window.testRunner) {
document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
testRunner.notifyDone();
}
}, 0);
}
window.addEventListener('load', doTest, false);
</script>
<body>
<div style="position: absolute; left: 0px; top: 0px; z-index: 106; " class="composited">
<img style="position: absolute; left: 10px; top: 10px; z-index: 0;">
<img style="position: absolute; left: 500px; top: 200px; z-index: 0;" class="to-visible">
</div>
<div style="position: absolute; left: 0px; top: 250px; z-index: 106; " class="composited">
<img style="position: absolute; left: 10px; top: 10px; z-index: 0;">
<img style="position: absolute; left: 500px; top: 200px; z-index: 0;" class="to-hidden">
</div>
<pre id="layers">Layer tree goes here in DRT</pre>
</body>