set-current-time-before-play.html (1806B)
1 <html class="reftest-wait"> 2 <title>Setting current time before play should not timeout</title> 3 <link rel="help" href="https://drafts.csswg.org/scroll-animations/"> 4 <meta name="assert" content="Regression test to make sure the ready promise is correctly resolved"> 5 <link rel="match" href="animation-ref.html"> 6 7 <script src="/web-animations/testcommon.js"></script> 8 <script src="/common/reftest-wait.js"></script> 9 10 <style> 11 #box { 12 width: 100px; 13 height: 100px; 14 background-color: green; 15 } 16 17 #covered { 18 width: 100px; 19 height: 100px; 20 background-color: red; 21 } 22 23 #scroller { 24 overflow: auto; 25 height: 100px; 26 width: 100px; 27 will-change: transform; /* force compositing */ 28 } 29 30 #contents { 31 height: 1000px; 32 width: 100%; 33 } 34 </style> 35 36 <div id="box"></div> 37 <div id="covered"></div> 38 <div id="scroller"> 39 <div id="contents"></div> 40 </div> 41 42 <script> 43 async function runTest() { 44 await waitForCompositorReady(); 45 46 const box = document.getElementById('box'); 47 const effect = new KeyframeEffect(box, 48 [ 49 { transform: 'translateY(0)', opacity: 1}, 50 { transform: 'translateY(200px)', opacity: 0} 51 ], { 52 duration: 1000, 53 } 54 ); 55 56 const scroller = document.getElementById('scroller'); 57 const timeline = new ScrollTimeline( 58 { source: scroller, orientation: 'block' }); 59 const animation = new Animation(effect, timeline); 60 animation.currentTime = CSS.percent(0); 61 animation.play(); 62 63 animation.ready.then(() => { 64 // Move the scroller to the halfway point. 65 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 66 scroller.scrollTop = 0.5 * maxScroll; 67 68 waitForAnimationFrames(2).then(_ => { 69 takeScreenshot(); 70 }); 71 }); 72 } 73 74 window.onload = runTest; 75 </script>