animation-on-empty-height-frame.html (1209B)
1 <!DOCTYPE html> 2 <html class="reftest-wait reftest-no-flush"> 3 <style> 4 @keyframes anim { 5 from { background-color: white; } 6 to { background-color: red; } 7 } 8 </style> 9 <body> 10 </body> 11 <script> 12 window.addEventListener('load', () => { 13 const body = document.querySelector('body'); 14 body.style.animation = 'anim 100s step-end reverse'; 15 body.addEventListener('animationstart', () => { 16 // This MozAfterPaint event corresponds to the white background paint. 17 // (The animation will initially paint the background red since it is playing 18 // a step-end animation in reverse.) 19 window.addEventListener('MozAfterPaint', () => { 20 // FIXME: Bug 1341294. We need to wait for one more frame in the case 21 // the MozAfterPaint we received is not the one what we were waiting for. 22 // Note that we can't just wait for one more MozAfterPaint since in the 23 // case where everything works correctly, we won't get another 24 // MozAfterPaint for a long time due to the step-end timing function 25 // applied to the animation. 26 requestAnimationFrame(() => { 27 document.documentElement.classList.remove('reftest-wait'); 28 }); 29 }, {once: true}); 30 }); 31 }); 32 </script> 33 </html>