view-timeline-missing-subject.html (1287B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ViewTimeline with missing subject</title> 6 <link rel="help" href="https://www.w3.org/TR/scroll-animations-1/#viewtimeline-interface"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 </head> 10 <style type="text/css"> 11 #target { 12 background: blue; 13 height: 100px; 14 width: 100px; 15 } 16 #scroller { 17 overflow: scroll; 18 } 19 #filler { 20 height: 300vh; 21 } 22 </style> 23 <body onload="runTests()"> 24 <div id="scroller"> 25 <div id="target"></div> 26 <div id="filler"></div> 27 </div> 28 </body> 29 <script type="text/javascript"> 30 function raf() { 31 return new Promise(resolve => { 32 requestAnimationFrame(() => { 33 requestAnimationFrame(resolve); 34 }) 35 }); 36 } 37 function runTests() { 38 promise_test(async t => { 39 const timeline = new ViewTimeline(); 40 const anim = 41 target.animate( 42 { backgroundColor: ['green', 'red' ] }, 43 { duration: 100, 44 timeline: timeline }); 45 await raf(); 46 scroller.scrollTop = 50; 47 await raf(); 48 assert_equals(timeline.currentTime, null, 49 'ViewTimeline with missing subject is inactive'); 50 }); 51 } 52 53 </script> 54 </html>