third_party/WebKit/LayoutTests/fast/repaint/requestAnimation-translation-leave-traces.html

   1 <!DOCTYPE html>
   2 <style>
   3 body {
   4     margin: 0px;
   5 }
   6
   7 #box {
   8     background-color: purple;
   9     height: 100px;
  10     width: 100px;
  11 }
  12 </style>
  13 <script>
  14 if (window.testRunner) {
  15     testRunner.dumpAsText();
  16     testRunner.waitUntilDone();
  17 }
  18
  19 window.onload = function() {
  20     var i = 0;
  21     var finalIteration = 6;
  22     var startTrackingRectIteration = 3; // We need to put out a few frames before reproducing the bug.
  23     var testedLocations = [];
  24     function tick(t) {
  25         var x = 300 * i;
  26         if (i > startTrackingRectIteration) {
  27             testedLocations.push(x);
  28             if (window.internals)
  29                 internals.startTrackingRepaints(document);
  30         }
  31
  32         box.style.transform = "translate(" + x + "px, 0px)";
  33         if (++i < finalIteration) {
  34             requestAnimationFrame(tick);
  35         } else {
  36             if (window.internals) {
  37                 var layerTree = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  38                 window.internals.stopTrackingRepaints(document);
  39                 document.getElementById("result").textContent = "Tested locations: " + testedLocations + '\n' + layerTree;
  40             }
  41             if (window.testRunner)
  42                 testRunner.notifyDone();
  43         }
  44     }
  45
  46     requestAnimationFrame(tick);
  47 };
  48 </script>
  49 <div id="box"></div>
  50 This test checks that changing the transform on an element triggers a correct invalidation.<br>
  51 The paint invalidations below should match the transformed element's coordinates.
  52 <pre id="result"></pre>