worklet-animation-with-scroll-timeline-and-display-none.https.html (2332B)
1 <html class="reftest-wait"> 2 <title>Scroll timeline with WorkletAnimation and transition from display:none to display:block</title> 3 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> 4 <meta name="assert" content="Scroll timeline should properly handle going from display:none to display:block"> 5 <link rel="match" href="worklet-animation-with-scroll-timeline-ref.html"> 6 7 <script src="/web-animations/testcommon.js"></script> 8 <script src="/common/reftest-wait.js"></script> 9 <script src="common.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 /* Hide scrollbars to avoid unnecessary visual issues related to them */ 25 #scroller::-webkit-scrollbar { 26 display: none; 27 } 28 29 #scroller { 30 scrollbar-width: none; 31 overflow: auto; 32 height: 100px; 33 width: 100px; 34 will-change: transform; /* force compositing */ 35 } 36 37 .removed { 38 display: none; 39 } 40 41 #contents { 42 height: 1000px; 43 width: 100%; 44 } 45 </style> 46 47 <div id="box"></div> 48 <div id="covered"></div> 49 <div id="scroller"> 50 <div id="contents"></div> 51 </div> 52 53 <script> 54 registerPassthroughAnimator().then(()=>{ 55 const box = document.getElementById('box'); 56 const effect = new KeyframeEffect(box, 57 [ 58 { transform: 'translateY(0)', opacity: 1 }, 59 { transform: 'translateY(200px)', opacity: 0 } 60 ], { 61 duration: 1000, 62 } 63 ); 64 65 const scroller = document.getElementById('scroller'); 66 scroller.classList.add('removed'); 67 const timeline = new ScrollTimeline({ scrollSource: scroller, orientation: 'block' }); 68 const animation = new WorkletAnimation('passthrough', effect, timeline); 69 animation.play(); 70 71 // Ensure that the WorkletAnimation will have been started on the compositor. 72 waitForAsyncAnimationFrames(1).then(_ => { 73 // Now return the scroller to the world, which will cause it to be composited 74 // and the animation should update on the compositor side. 75 scroller.classList.remove('removed'); 76 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 77 scroller.scrollTop = 0.5 * maxScroll; 78 79 waitForAsyncAnimationFrames(1).then(_ => { 80 takeScreenshot(); 81 }); 82 }); 83 }); 84 </script>