reftest-no-flush.html (948B)
1 <!DOCTYPE html> 2 <html class="reftest-wait reftest-no-flush"> 3 <style> 4 html { 5 /* Suppress scrollbars to avoid periodical unthrottling for transform */ 6 /* animations on the compositor. */ 7 overflow: hidden; 8 } 9 body { 10 margin: 0px; 11 padding: 0px; 12 } 13 @keyframes anim { 14 0% { transform: translateX(100px); } 15 100% { transform: translateX(100px); } 16 } 17 #target { 18 width: 100px; 19 height: 100px; 20 position: absolute; 21 background-color: green; 22 } 23 </style> 24 <div id="target"></div> 25 <script> 26 document.addEventListener('MozReftestInvalidate', () => { 27 // Set a bit longer animation delay to avoid painting the initial animation 28 // style on the main thread. 29 target.style.animation = "anim 100s 1s"; 30 target.addEventListener("animationstart", () => { 31 requestAnimationFrame(() => { 32 requestAnimationFrame(() => { 33 document.documentElement.classList.remove("reftest-wait"); 34 }); 35 }); 36 }); 37 }, { once: true }); 38 </script> 39 </html>