1425243-1.html (975B)
1 <html class="reftest-wait"> 2 <style> 3 .logo { 4 display: flex; 5 align-items: center; 6 background-color: #4a4a4a; 7 mask: url(pinwheel_logo.svg) center center/contain no-repeat; 8 width: 60px; 9 height: 60px; 10 } 11 .logo .background { 12 background-image: linear-gradient(red, green); 13 width: 65px; 14 height: 65px; 15 background-size: cover; 16 background-position: 50%; 17 will-change: transform; 18 } 19 </style> 20 <a class="logo"> 21 <span class="background"></span> 22 </a> 23 <script> 24 function doTest() { 25 var i = 0; 26 var e = document.getElementsByClassName("background")[0]; 27 var rotator = function() { 28 var rotation = i / 60; 29 e.style.transform = "rotate(" + rotation + "turn)"; 30 if (i < 45) { 31 i += 1; 32 window.requestAnimationFrame(rotator); 33 } else { 34 document.documentElement.removeAttribute("class"); 35 } 36 }; 37 window.requestAnimationFrame(rotator); 38 }; 39 window.addEventListener("MozReftestInvalidate", doTest); 40 </script> 41 </html>