1804872-2.html (946B)
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 14 @keyframes anim { 15 0% { scale: 2.0; } 16 100% { scale: 2.0; } 17 } 18 #target { 19 width: 100px; 20 height: 100px; 21 position: absolute; 22 background-color: green; 23 scale:0.1; 24 } 25 </style> 26 <img id="target" src="pinwheel_logo.svg"> 27 28 29 <script> 30 document.addEventListener('MozReftestInvalidate', () => { 31 // Set a bit longer animation delay to avoid painting the initial animation 32 // style on the main thread. 33 target.style.animation = "anim 100s 1s"; 34 target.addEventListener("animationstart", () => { 35 requestAnimationFrame(() => { 36 requestAnimationFrame(() => { 37 document.documentElement.classList.remove("reftest-wait"); 38 }); 39 }); 40 }); 41 }, { once: true }); 42 </script> 43 </html>