animation-with-display-none.html (1820B)
1 <html class="reftest-wait"> 2 <title>Scroll timeline with Web Animation and transition from display:none to display:block</title> 3 <link rel="help" href="https://drafts.csswg.org/scroll-animations/"> 4 <meta name="assert" content="Scroll timeline should properly handle going from display:none to display:block"> 5 <link rel="match" href="animation-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: auto; 25 height: 100px; 26 width: 100px; 27 will-change: transform; /* force compositing */ 28 } 29 30 .removed { 31 display: none; 32 } 33 34 #contents { 35 height: 1000px; 36 width: 100%; 37 } 38 </style> 39 40 <div id="box"></div> 41 <div id="covered"></div> 42 <div id="scroller"> 43 <div id="contents"><p>Scrolling Contents</p></div> 44 </div> 45 46 <script> 47 const box = document.getElementById('box'); 48 const effect = new KeyframeEffect(box, 49 [ 50 { transform: 'translateY(0)', opacity: 1 }, 51 { transform: 'translateY(200px)', opacity: 0 } 52 ], { 53 duration: 1000, 54 } 55 ); 56 57 const scroller = document.getElementById('scroller'); 58 scroller.classList.add('removed'); 59 const timeline = new ScrollTimeline( 60 { source: scroller, orientation: 'block' }); 61 const animation = new Animation(effect, timeline); 62 animation.play(); 63 64 waitForAnimationFrames(2).then(_ => { 65 scroller.classList.remove('removed'); 66 animation.ready.then(() => { 67 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 68 scroller.scrollTop = 0.5 * maxScroll; 69 70 waitForAnimationFrames(2).then(_ => { 71 takeScreenshot(); 72 }); 73 }); 74 }); 75 </script>