scroll-timeline-specified-scroller-print.html (1544B)
1 <!DOCTYPE HTML> 2 <html class="reftest-wait"> 3 <title>A scroll timeline with a specified scroller for print</title> 4 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timelines"> 5 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline"> 6 <meta name="assert" content="CSS animation correctly updates values when using a specified scroller"> 7 <link rel="match" href="scroll-timeline-specified-scroller-ref.html"> 8 9 <style> 10 @keyframes anim { 11 from { transform: translateX(0px); } 12 to { transform: translateX(100px); } 13 } 14 15 :root { 16 print-color-adjust: exact; 17 } 18 19 #scroller { 20 scroll-timeline: --timeline; 21 overflow: scroll; 22 width: 100px; 23 height: 100px; 24 scrollbar-width: none; 25 } 26 27 #contents { 28 height: 200px; 29 } 30 31 #box { 32 width: 100px; 33 height: 100px; 34 background-color: green; 35 animation: anim 1s linear; 36 animation-timeline: --timeline; 37 } 38 39 @supports not (animation-timeline:--timeline) { 40 #box { 41 animation-play-state: paused; 42 } 43 } 44 </style> 45 46 <div id="scroller"> 47 <div id="contents"></div> 48 <div id="box"></div> 49 </div> 50 51 <script> 52 window.addEventListener('load', function() { 53 const scroller = document.getElementById("scroller"); 54 // Move the scroller to the halfway point. 55 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 56 scroller.scrollTop = 0.5 * maxScroll; 57 58 window.requestAnimationFrame(() => { 59 document.documentElement.classList.remove("reftest-wait"); 60 }); 61 }); 62 </script>