animation-with-root-scroller.html (1568B)
1 <html class="reftest-wait"> 2 <title>Scroll timeline with Web Animation using the root scroller</title> 3 <link rel="help" href="https://drafts.csswg.org/scroll-animations/"> 4 <meta name="assert" content="Web animation correctly updates values when using the root scroller as the source for the ScrollTimeline"> 5 <link rel="match" href="animation-with-root-scroller-ref.html"> 6 7 <script src="/web-animations/testcommon.js"></script> 8 <script src="/common/reftest-wait.js"></script> 9 10 <style> 11 html { 12 min-height: 100%; 13 min-width: 100%; 14 padding-bottom: 100px; 15 padding-right: 100px; 16 } 17 18 #box { 19 width: 100px; 20 height: 100px; 21 background-color: green; 22 } 23 24 #covered { 25 width: 100px; 26 height: 100px; 27 background-color: red; 28 } 29 </style> 30 31 <div id="box"></div> 32 <div id="covered"><p>Covered Contents</p></div> 33 34 <script> 35 const box = document.getElementById('box'); 36 const effect = new KeyframeEffect(box, 37 [ 38 {transform: 'translateY(0)', opacity: 1}, 39 {transform: 'translateY(200px)', opacity: 0} 40 ], { 41 duration: 1000, 42 } 43 ); 44 45 const scroller = document.scrollingElement; 46 const timeline = new ScrollTimeline( 47 { source: scroller, orientation: 'block' }); 48 const animation = new Animation(effect, timeline); 49 animation.play(); 50 51 animation.ready.then(() => { 52 // Move the scroller to the halfway point. 53 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 54 scroller.scrollTop = 0.5 * maxScroll; 55 56 waitForAnimationFrames(2).then(_ => { 57 takeScreenshot(); 58 }); 59 }); 60 </script>