<!DOCTYPE html>
<script>
// Two frames are required in order to set up the squashing, for some reason.
onload = requestAnimationFrame(function() {
debugger;
requestAnimationFrame(function() {
document.getElementById('badlayer').style.zIndex = "1"
if (window.testRunner)
testRunner.notifyDone();
});
});
if (window.testRunner)
testRunner.waitUntilDone();
</script>
<!-- Tests an obscure invalidaiton situation in which changing the z-index of a element results in a reshuffle of squashed content,
yet avoiding many of the invalidation paths to update the contents correctly. -->
<div style="float:right;position:relative;z-index:3">
This test is broken if this text shows up twice
</div>
<div style="width: 0">
<div style="height:220px;position:relative" id="badlayer">
<div style="transform: translate3d(325px, 0px, 0px);">
</div>
</div>
<div style="height:220px;position:relative">
<div style="position: absolute; top: 0px; left: 0px; width:10px;height:10px; transform: translate3d(1px, 1px, 1px); background: lightgray"></div>
<div style="position: absolute; top: 0px; left: 0px; background: lightblue; width:10px;height:10px;" ></div>
</div>
a
</div>
<br>
<div style="position:relative; height: 500px;">
</div>