Index: LayoutTests/fast/repaint/requestAnimation-translation-leave-traces.html |
diff --git a/LayoutTests/fast/repaint/requestAnimation-translation-leave-traces.html b/LayoutTests/fast/repaint/requestAnimation-translation-leave-traces.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..5436e7a4d28a338b5ff573220188e9ded74fb284 |
--- /dev/null |
+++ b/LayoutTests/fast/repaint/requestAnimation-translation-leave-traces.html |
@@ -0,0 +1,52 @@ |
+<!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_REPAINT_RECTS); |
+ window.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> |