1714763-1.html (1117B)
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.1; } 16 100% { scale: 2.1; } 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 #theimg { 29 width: 100px; 30 height: 100px; 31 } 32 </style> 33 <body> 34 <div id="target"> 35 <div id="rotate"> 36 <img id="theimg" src="repeatable-diagonal-gradient.png"> 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>