intermediate-transform.html (1500B)
1 <!DOCTYPE html> 2 <html id="top"> 3 <meta charset="utf-8"> 4 <title>View timeline delay</title> 5 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#viewtimeline-interface"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/web-animations/testcommon.js"></script> 9 <script src="/scroll-animations/scroll-timelines/testcommon.js"></script> 10 <script src="/scroll-animations/view-timelines/testcommon.js"></script> 11 <style> 12 #container { 13 overflow-x: scroll; 14 height: 200px; 15 width: 200px; 16 } 17 #content { 18 translate: 50px; 19 width: 1800px; 20 margin: 0; 21 } 22 .spacer { 23 width: 800px; 24 display: inline-block; 25 } 26 #target { 27 background-color: green; 28 height: 100px; 29 width: 100px; 30 display: inline-block; 31 font-size: 10px; 32 } 33 </style> 34 <body> 35 <div id="container"> 36 <div id="content"> 37 <div class="spacer"></div> 38 <div id="target"></div> 39 <div class="spacer"></div> 40 </div> 41 </div> 42 </body> 43 <script type="text/javascript"> 44 promise_test(async t => { 45 const timeline = new ViewTimeline({ 46 subject: target, 47 axis: "inline" 48 }); 49 const anim = target.animate({ backgroundColor: ['green', 'red' ] }, 50 { timeline: timeline }); 51 await new Promise(requestAnimationFrame); 52 assert_px_equals(timeline.startOffset, 604, 'startOffset'); 53 assert_px_equals(timeline.endOffset, 904, 'endOffset'); 54 }); 55 </script>