| <!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_PAINT_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> |
