1714763-2.html (1160B)
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 clip-path: polygon(0 0,100% 0,50% 100%); 32 } 33 </style> 34 <body> 35 <div id="target"> 36 <div id="rotate"> 37 <img id="theimg" src="repeatable-diagonal-gradient.png"> 38 </div> 39 </div> 40 41 42 <script> 43 document.addEventListener('MozReftestInvalidate', () => { 44 // Set a bit longer animation delay to avoid painting the initial animation 45 // style on the main thread. 46 target.style.animation = "anim 100s 1s"; 47 target.addEventListener("animationstart", () => { 48 requestAnimationFrame(() => { 49 requestAnimationFrame(() => { 50 document.documentElement.classList.remove("reftest-wait"); 51 }); 52 }); 53 }); 54 }, { once: true }); 55 </script> 56 </body> 57 </html>