1714763-3.html (1168B)
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: 1.9; } 16 100% { scale: 1.9; } 17 } 18 #target { 19 position: absolute; 20 left:100px; 21 top:100px; 22 scale:0.05; 23 } 24 #rotate { 25 transform: rotate(180deg); 26 transform-origin: 50% 50%; 27 } 28 </style> 29 <body> 30 <div id="target"> 31 <div id="rotate"> 32 <svg width="100" height="100"> 33 <g id="g"> 34 <circle cx="100" cy="100" r="40" style="fill: rgb(200, 20, 20);"></circle> 35 </g> 36 </svg> 37 </div> 38 </div> 39 40 41 <script> 42 document.addEventListener('MozReftestInvalidate', () => { 43 // Set a bit longer animation delay to avoid painting the initial animation 44 // style on the main thread. 45 target.style.animation = "anim 100s 1s"; 46 target.addEventListener("animationstart", () => { 47 requestAnimationFrame(() => { 48 requestAnimationFrame(() => { 49 document.documentElement.classList.remove("reftest-wait"); 50 }); 51 }); 52 }); 53 }, { once: true }); 54 </script> 55 </body> 56 </html>