requestAnimation-translation-leave-traces.html 1.5 KB

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