animation-with-animatable-interface.html (1541B)
1 <html class="reftest-wait"> 2 <title>Scroll-linked animation with Animatable interface</title> 3 <link rel="help" href="https://drafts.csswg.org/scroll-animations/"> 4 <meta name="assert" content="ScrollTimeline should work with animatable 5 interface"> 6 <link rel="match" href="animation-ref.html"> 7 8 <script src="/web-animations/testcommon.js"></script> 9 <script src="/common/reftest-wait.js"></script> 10 11 <style> 12 #box { 13 width: 100px; 14 height: 100px; 15 background-color: green; 16 } 17 18 #covered { 19 width: 100px; 20 height: 100px; 21 background-color: red; 22 } 23 24 #scroller { 25 overflow: auto; 26 height: 100px; 27 width: 100px; 28 will-change: transform; 29 /* force compositing */ 30 } 31 32 #contents { 33 height: 1000px; 34 width: 100%; 35 } 36 </style> 37 38 <div id="box"></div> 39 <div id="covered"></div> 40 <div id="scroller"> 41 <div id="contents"><p>Scrolling Contents</p></div> 42 </div> 43 44 <script> 45 const scroller = document.getElementById('scroller'); 46 const scroll_timeline = new ScrollTimeline({source: scroller}); 47 const box = document.getElementById('box'); 48 const animation = box.animate( 49 [ 50 { transform: 'translateY(0)', opacity: 1 }, 51 { transform: 'translateY(200px)', opacity: 0 } 52 ], { 53 timeline: scroll_timeline 54 } 55 ); 56 57 animation.ready.then(() => { 58 // Move the scroller to the halfway point. 59 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 60 scroller.scrollTop = 0.5 * maxScroll; 61 62 waitForAnimationFrames(2).then(_ => { 63 takeScreenshot(); 64 }); 65 }); 66 </script>