<!DOCTYPE html>
<div style="will-change: transform;">
<div id="chunk1" style="width:1px; height:1px; background:red;"></div>
<div id="chunk2" style="transform:translateX(0); position:absolute; z-index:0; left:0; top:0; width:1px; height:1px; background:orange;"></div>
<div id="chunk3" style="transform:translateX(0); position:absolute; z-index:1; left:400px; top:400px; width:100px; height:100px; background:yellow;"></div>
<div id="chunk4" style="transform:translateX(0); position:absolute; z-index:2; left:0; top:0; width:1px; height:1px; background:green;"></div>
<div id="chunk5" style="transform:translateX(0); position:absolute; z-index:3; left:450px; top:450px; width:100px; height:100px; background:blue;"></div>
</div>
<script src="../resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
document.getElementById("chunk2").style.zIndex = "4";
document.getElementById("chunk3").style.zIndex = "5";
}
onload = runRepaintAndPixelTest;
</script>