transform-gained-3d.html | Explore in Territory

<!DOCTYPE html>
<div style="width:100px; height:100px; background:red; perspective:2px;">
  <div id="bug" style="position:absolute; left:25px; top:25px; width:50px; height:50px; background:green; will-change:transform;"></div>
</div>
The test verifies the compositing system picks up elements that gained depth from transform mutation. This test succeeds if a green box fully occludes the red box below.
<script src="../resources/run-after-layout-and-paint.js"></script>
<script>
runAfterLayoutAndPaint(function(){
    document.getElementById("bug").style.transform = "translateZ(1px)";
}, true);
</script>

chromium/third_party/blink/web_tests/compositing/transform-gained-3d.html