start-time-compat.html (3001B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Start time compatibility</title> 4 <link rel="help" 5 href="https://www.w3.org/TR/web-animations-1/#waiting-for-the-associated-effect"> 6 <!-- Strictly speaking, this test is asserting timing behavior that is more 7 strict than required by spec. It tests that the start time of animations 8 created during a page rendering update match that update's timeline time. 9 This behavior is now consistent across browsers. 10 See https://bugs.webkit.org/show_bug.cgi?id=290993 --> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="/web-animations/testcommon.js"></script> 14 <script src="/web-animations/resources/timing-override.js"></script> 15 <body> 16 <div id="log"></div> 17 <script> 18 'use strict'; 19 20 promise_test(async t => { 21 await waitForCompositorReady(); 22 23 const timeout_promise = () => { 24 return new Promise(resolve => setTimeout(resolve)); 25 }; 26 27 const expected_start_this_frame = () => { 28 return document.timeline.currentTime; 29 } 30 31 const expected_start_next_frame = () => { 32 return new Promise(resolve => { 33 requestAnimationFrame(() => { 34 resolve(document.timeline.currentTime); 35 }) 36 }); 37 } 38 39 const promises = []; 40 41 const make_animation = (description, expected_start_time) => { 42 const anim = createDiv(t).animate(null, 100 * MS_PER_SEC); 43 promises.push( 44 new Promise(resolve => { 45 Promise.all([anim.ready, expected_start_time]).then(responses => { 46 assert_times_equal(anim.startTime, responses[1], description); 47 resolve(); 48 }); 49 })); 50 } 51 52 // rAF align the start of the test. 53 await waitForAnimationFrames(2); 54 55 // Create an animation during the page rendering update. 56 // This animation should be aligned with the rAF time. 57 make_animation('during the first page rendering update', 58 expected_start_this_frame()); 59 60 // Wait for a new JS call frame and start another animation. This animation 61 // should have its start time set to the timeline time of the next page 62 // rendering update. 63 await timeout_promise(); 64 make_animation('after waiting for a new JS call frame', 65 expected_start_next_frame()); 66 67 // Wait for another new JS call frame and start another animation. This 68 // animation, like the previous one, should have its start time set to 69 // the timeline time of the next page rendering update. 70 await timeout_promise(); 71 make_animation('after waiting for a another JS call frame', 72 expected_start_next_frame()); 73 74 75 // Now wait until the next page rendering update and ensure we are aligned 76 // with the rAF time. 77 await waitForAnimationFrames(1); 78 make_animation('during the second page rendering update', 79 expected_start_this_frame()); 80 81 await Promise.all(promises); 82 }, `Checking the start time of animations started at various times between ` + 83 'two page rendering updates'); 84 </script>