incremental-destruction.html | Explore in Territory

<!DOCTYPE html>
<style>
#target {
    transition: opacity 10ms;
    opacity: 0.5;
}
#target.dim {
    opacity: 0.2;
}
</style>
<script>
if (window.testRunner)
    testRunner.waitUntilDone();

window.addEventListener('load', function() {
    requestAnimationFrame(function() {
        requestAnimationFrame(function() {
            var target = document.getElementById('target');
            target.classList.remove('dim');
            target.addEventListener('transitionend', function() {
                requestAnimationFrame(function() {
                    requestAnimationFrame(function() {
                        if (window.testRunner)
                            testRunner.notifyDone();
                    });
                });
            });
        });
    });
});
</script>
<div id="target" class="dim" style="width: 500px; height: 500px; background-color: blue;"></div>
<div style="width: 300px; height: 300px; position: absolute; left: 20px; top: 400px; background-color: purple; z-index:1000">
    <div style="width:100px; height:100px; position:relative; left:10px; top:10px; will-change:transform; background-color:yellow"></div>
</div>

chromium/third_party/blink/web_tests/compositing/layer-creation/incremental-destruction.html