<!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)
            window.testRunner.notifyDone();
    });
});

if (window.testRunner)
    window.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>
