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