1804872-3.html (1035B)
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 19 #target { 20 width: 100px; 21 height: 100px; 22 position: absolute; 23 background-image: url(pinwheel_logo.svg); 24 background-size: 200px 200px; 25 background-position: -50px -50px; 26 background-color: green; 27 scale:0.1; 28 } 29 </style> 30 <div id="target"> 31 32 33 <script> 34 document.addEventListener('MozReftestInvalidate', () => { 35 // Set a bit longer animation delay to avoid painting the initial animation 36 // style on the main thread. 37 target.style.animation = "anim 100s 1s"; 38 target.addEventListener("animationstart", () => { 39 requestAnimationFrame(() => { 40 requestAnimationFrame(() => { 41 document.documentElement.classList.remove("reftest-wait"); 42 }); 43 }); 44 }); 45 }, { once: true }); 46 </script> 47 </html>