deferred-timeline-composited.html (2011B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <link rel="help" src="https://github.com/w3c/csswg-drafts/issues/7759"> 5 <link rel="match" href="deferred-timeline-composited-ref.html"> 6 <script src="/web-animations/testcommon.js"></script> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 @keyframes anim { 10 from { translate: 0px; } 11 to { translate: 100px; } 12 } 13 main { 14 timeline-scope: --t1; 15 } 16 .scroller { 17 width: 100px; 18 height: 100px; 19 will-change: translate; 20 background-color: white; 21 /* Prevent scrollers from appearing in the screenshot. */ 22 opacity: 0; 23 } 24 .scroller > div { 25 height: 300px; 26 width: 300px; 27 } 28 #target { 29 animation: anim auto linear; 30 animation-timeline: --t1; 31 width: 50px; 32 height: 50px; 33 will-change: translate; 34 background-color: green; 35 } 36 .timeline { 37 scroll-timeline-name: --t1; 38 } 39 #scroller_block { 40 overflow-y: scroll; 41 overflow-x: hidden; 42 scroll-timeline-axis: block; 43 } 44 #scroller_inline { 45 overflow-y: hidden; 46 overflow-x: scroll; 47 scroll-timeline-axis: inline; 48 } 49 </style> 50 </head> 51 <body> 52 <main> 53 <div id=target></div> 54 <div id=scroller_block class="scroller timeline"> 55 <div></div> 56 </div> 57 <div id=scroller_inline class=scroller> 58 <div></div> 59 </div> 60 </main> 61 <script> 62 (async () => { 63 await waitForCompositorReady(); 64 // Switch out the timeline associated with timeline-scope:--t. 65 scroller_block.classList.toggle('timeline'); 66 scroller_inline.classList.toggle('timeline'); 67 await waitForNextFrame(); 68 let scrollPromise = new Promise((resolve) => { 69 scroller_inline.addEventListener('scrollend', resolve); 70 }); 71 scroller_inline.scrollTo({left: 100, behavior: "smooth"}); // 50% 72 await scrollPromise; 73 await waitForNextFrame(); 74 takeScreenshot(); 75 })(); 76 </script> 77 </body> 78 </html>