replace-with-new-positive-delay-animation.html (1200B)
1 <!DOCTYPE html> 2 <html class="reftest-wait reftest-no-flush"> 3 <meta name="viewport" content="width=device-width,initial-scale=1"> 4 <style> 5 @keyframes first { 6 0% { opacity: 0; } 7 100% { opacity: 0; } 8 } 9 @keyframes second { 10 0% { opacity: 0.5; } 11 100% { opacity: 0.5; } 12 } 13 #target { 14 width: 100px; 15 height: 100px; 16 opacity: 1; 17 background-color: green; 18 } 19 </style> 20 <div id="target"></div> 21 <script> 22 document.addEventListener("MozReftestInvalidate", async () => { 23 target.style.animation = "first 100s"; 24 await new Promise(resolve => { 25 target.addEventListener("animationstart", resolve); 26 }); 27 28 // Wait two frames to make sure the animation is composited. 29 await new Promise(resolve => { requestAnimationFrame(resolve); }); 30 await new Promise(resolve => { requestAnimationFrame(resolve); }); 31 32 target.style.animation = "second 100s 100s"; 33 34 // To take a snapshot in the delay phase, wait two frames instead of 35 // wait for the animationstart event. 36 await new Promise(resolve => { requestAnimationFrame(resolve); }); 37 await new Promise(resolve => { requestAnimationFrame(resolve); }); 38 39 document.documentElement.classList.remove("reftest-wait"); 40 }, { once: true }); 41 </script> 42 </html>