scroll-timeline-in-delay-omta.html (1955B)
1 <!DOCTYPE html> 2 <html class="reftest-wait reftest-no-flush"> 3 <head> 4 <title>Scroll the scroll-driven animation from the active phase to delay</title> 5 <style> 6 @keyframes anim { 7 from { translate: 100px; } 8 to { translate: 200px; } 9 } 10 #scroller { 11 width: 100px; 12 height: 100px; 13 overflow: scroll; 14 scrollbar-width: none; 15 scroll-timeline: --scroll_timeline; 16 } 17 #target { 18 width: 100px; 19 height: 100px; 20 background: green; 21 rotate: 45deg; 22 translate: 50px; 23 animation-name: anim; 24 animation-duration: 5s; 25 animation-timing-function: linear; 26 animation-delay: 5s; 27 animation-timeline: --scroll_timeline; 28 } 29 </style> 30 <script> 31 window.addEventListener("MozReftestInvalidate", async () => { 32 const scroller = document.getElementById("scroller"); 33 scroller.scrollTop = 75; 34 35 // Wait for the MozAfterPaint to make the view id of |scroller| gets ready. 36 window.addEventListener('MozAfterPaint', async () => { 37 let utils = SpecialPowers.wrap(window).windowUtils; 38 utils.setAsyncScrollOffset(scroller, 0, -50); 39 40 await new Promise(function(resolve, reject) { 41 let repaintDone = function() { 42 SpecialPowers.Services.obs.removeObserver( 43 repaintDone, 44 "apz-repaints-flushed" 45 ); 46 resolve(); 47 }; 48 SpecialPowers.Services.obs.addObserver(repaintDone, 49 "apz-repaints-flushed"); 50 if (!utils.flushApzRepaints()) { 51 repaintDone(); 52 } 53 }); 54 55 // Wait for composition and then take the snapshot. 56 await new Promise(resolve => { requestAnimationFrame(resolve); }); 57 await new Promise(resolve => { requestAnimationFrame(resolve); }); 58 59 document.documentElement.classList.remove('reftest-wait'); 60 }, {once: true}); 61 }); 62 63 </script> 64 </head> 65 <body> 66 <div id="scroller"> 67 <div style="height: 100px; padding-bottom: 100px;"></div> 68 </div> 69 <div id="target"></div> 70 </body> 71 </html>