worklet-animation-with-scroll-timeline-root-scroller.https.html (1934B)
1 <html class="reftest-wait"> 2 <title>Scroll timeline with WorkletAnimation using the root scroller</title> 3 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> 4 <meta name="assert" 5 content="Worklet animation correctly updates values when using the root scroller as the source for the ScrollTimeline"> 6 <link rel="match" href="worklet-animation-with-scroll-timeline-root-scroller-ref.html"> 7 8 <script src="/web-animations/testcommon.js"></script> 9 <script src="/common/reftest-wait.js"></script> 10 <script src="common.js"></script> 11 12 <style> 13 /* Hide scrollbars to avoid unnecessary visual issues related to them */ 14 html::-webkit-scrollbar { 15 display: none; 16 } 17 18 html { 19 scrollbar-width: none; 20 min-height: 100%; 21 min-width: 100%; 22 padding-bottom: 100px; 23 padding-right: 100px; 24 } 25 26 #box { 27 width: 100px; 28 height: 100px; 29 background-color: green; 30 } 31 32 #covered { 33 width: 100px; 34 height: 100px; 35 background-color: red; 36 } 37 </style> 38 39 <div id="box"></div> 40 <div id="covered"></div> 41 42 <script> 43 registerPassthroughAnimator().then(() => { 44 const box = document.getElementById('box'); 45 const effect = new KeyframeEffect(box, 46 [ 47 { transform: 'translateY(0)', opacity: 1 }, 48 { transform: 'translateY(200px)', opacity: 0 } 49 ], { 50 duration: 1000, 51 } 52 ); 53 54 const scroller = document.scrollingElement; 55 const timeline = new ScrollTimeline({ scrollSource: scroller, orientation: 'block' }); 56 const animation = new WorkletAnimation('passthrough', effect, timeline); 57 animation.play(); 58 59 // Move the scroller to the halfway point. 60 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 61 scroller.scrollTop = 0.5 * maxScroll; 62 63 waitForAnimationFrameWithCondition(_ => { 64 return getComputedStyle(box).transform != 'matrix(1, 0, 0, 1, 0, 0)'; 65 }).then(_ => { 66 takeScreenshot(); 67 }); 68 }); 69 </script>