animation-with-overflow-hidden.html (1646B)
1 <html class="reftest-wait"> 2 <title>Scroll timeline with Web Animation using a scroller with overflow hidden</title> 3 <link rel="help" href="https://drafts.csswg.org/scroll-animations/"> 4 <meta name="assert" content="Web animation correctly updates values when using a overflow: hidden on the scroller being used as the source for the ScrollTimeline"> 5 <link rel="match" href="animation-with-overflow-hidden-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: hidden; 25 height: 100px; 26 width: 100px; 27 } 28 29 #contents { 30 height: 1000px; 31 width: 100%; 32 } 33 </style> 34 35 <div id="box"></div> 36 <div id="covered"></div> 37 <div id="scroller"> 38 <div id="contents"></div> 39 </div> 40 41 <script> 42 const box = document.getElementById('box'); 43 const effect = new KeyframeEffect(box, 44 [ 45 {transform: 'translateY(0)', opacity: 1}, 46 {transform: 'translateY(200px)', opacity: 0} 47 ] 48 ); 49 50 const scroller = document.getElementById('scroller'); 51 const timeline = new ScrollTimeline( 52 { source: scroller, orientation: 'block' }); 53 const animation = new Animation(effect, timeline); 54 animation.play(); 55 56 animation.ready.then(() => { 57 // Move the scroller to the halfway point. 58 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 59 scroller.scrollTop = 0.5 * maxScroll; 60 waitForAnimationFrames(2).then(_ => { 61 takeScreenshot(); 62 }); 63 }); 64 </script>