requestAnimation-translation-leave-traces.html

<!DOCTYPE html>
<style>
body {
    margin: 0px;
}

#box {
    background-color: purple;
    height: 100px;
    width: 100px;
}
</style>
<script>
if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

window.onload = function() {
    var i = 0;
    var finalIteration = 6;
    var startTrackingRectIteration = 3; // We need to put out a few frames before reproducing the bug.
    var testedLocations = [];
    function tick(t) {
        var x = 300 * i;
        if (i > startTrackingRectIteration) {
            testedLocations.push(x);
            if (window.internals)
                internals.startTrackingRepaints(document);
        }

        box.style.transform = "translate(" + x + "px, 0px)";
        if (++i < finalIteration) {
            requestAnimationFrame(tick);
        } else {
            if (window.internals) {
                var layerTree = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS);
                internals.stopTrackingRepaints(document);
                document.getElementById("result").textContent = "Tested locations: " + testedLocations + '\n' + layerTree;
            }
            if (window.testRunner)
                testRunner.notifyDone();
        }
    }

    requestAnimationFrame(tick);
};
</script>
<div id="box"></div>
This test checks that changing the transform on an element triggers a correct invalidation.<br>
The paint invalidations below should match the transformed element's coordinates.
<pre id="result"></pre>
chromium/third_party/blink/web_tests/paint/invalidation/requestAnimation-translation-leave-traces.html
