scroll-animation.html (6300B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Test basic functionality of scroll linked animation.</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/web-animations/testcommon.js"></script> 7 <script src="testcommon.js"></script> 8 <style> 9 .scroller { 10 overflow: auto; 11 height: 100px; 12 width: 100px; 13 will-change: transform; 14 } 15 .contents { 16 height: 1000px; 17 width: 100%; 18 } 19 </style> 20 <div id="log"></div> 21 <script> 22 'use strict'; 23 promise_test(async t => { 24 const animation = createScrollLinkedAnimation(t); 25 const scroller = animation.timeline.source; 26 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 27 28 // Verify initial start and current times in Idle state. 29 assert_equals(animation.currentTime, null, 30 "The current time is null in Idle state."); 31 assert_equals(animation.startTime, null, 32 "The start time is null in Idle state."); 33 animation.play(); 34 assert_true(animation.pending, "Animation is in the pending state."); 35 // Verify initial start and current times in the pending state. 36 assert_equals(animation.currentTime, null, 37 "The current time remains null while in the pending state."); 38 assert_equals(animation.startTime, null, 39 "The start time remains null while in the pending state."); 40 41 await animation.ready; 42 // Verify initial start and current times once ready. 43 assert_percents_equal(animation.currentTime, 0, 44 "The current time is resolved when ready."); 45 assert_percents_equal(animation.startTime, 0, 46 "The start time is resolved when ready."); 47 48 // Now do some scrolling and make sure that the Animation current time is 49 // correct. 50 scroller.scrollTop = 0.4 * maxScroll; 51 // Wait for new animation frame which allows the timeline to compute new 52 // current time. 53 await waitForNextFrame(); 54 assert_percents_equal(animation.currentTime, animation.timeline.currentTime, 55 "The current time corresponds to the scroll position of the scroller."); 56 assert_times_equal( 57 animation.effect.getComputedTiming().progress, 58 animation.timeline.currentTime.value / 100, 59 'Effect progress corresponds to the scroll position of the scroller.'); 60 }, 'Animation start and current times are correct for each animation state.'); 61 62 promise_test(async t => { 63 const animation = createScrollLinkedAnimation(t); 64 const scroller = animation.timeline.source; 65 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 66 67 // Advance the scroller. 68 scroller.scrollTop = 0.2 * maxScroll; 69 // Wait for new animation frame which allows the timeline to compute new 70 // current time. 71 await waitForNextFrame(); 72 73 // Verify initial start and current times in Idle state. 74 assert_equals(animation.currentTime, null, 75 "The current time is null in Idle state."); 76 assert_equals(animation.startTime, null, 77 "The start time is null in Idle state."); 78 animation.play(); 79 // Verify initial start and current times in Pending state. 80 assert_equals(animation.currentTime, null, 81 "The current time remains unresolved while play-pending."); 82 assert_equals(animation.startTime, null, 83 "The start time remains unresolved while play-pending."); 84 85 await animation.ready; 86 // Verify initial start and current times in Playing state. 87 assert_percents_equal(animation.currentTime, animation.timeline.currentTime, 88 "The current corresponds to the scroll position of the scroller."); 89 assert_percents_equal(animation.startTime, 0, 90 "The start time is zero in Playing state."); 91 }, 'Animation start and current times are correct for each animation state' + 92 ' when the animation starts playing with advanced scroller.'); 93 94 promise_test(async t => { 95 const animation = createScrollLinkedAnimation(t); 96 const scroller = animation.timeline.source; 97 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 98 99 animation.play(); 100 await animation.ready; 101 // Advance the scroller to max position. 102 scroller.scrollTop = maxScroll; 103 104 await animation.finished; 105 106 assert_equals(animation.playState, 'finished', 107 'Animation state is in finished state.'); 108 assert_percents_equal(animation.currentTime, 100, 109 'Animation current time is at 100% on reverse scrolling.'); 110 111 // Scroll back. 112 scroller.scrollTop = 0.2 * maxScroll; 113 114 // Wait for new animation frame which allows the timeline to compute new 115 // current time. 116 await waitForNextFrame(); 117 // Verify animation state and current time on reverse scrolling. 118 assert_equals(animation.playState, 'running', 119 'Animation state is playing on reverse scrolling.'); 120 assert_percents_equal(animation.currentTime, 20, 121 'Animation current time is updated on reverse scrolling.'); 122 }, 'Finished animation plays on reverse scrolling.'); 123 124 promise_test(async t => { 125 const animation = createScrollLinkedAnimation(t); 126 const scroller = animation.timeline.source; 127 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 128 129 animation.play(); 130 await animation.ready; 131 132 // Advance the scroller to max position. 133 scroller.scrollTop = maxScroll; 134 await animation.finished; 135 136 // Wait for the next animation frame for the previous "finish" 137 // event to have dispatched. 138 await waitForNextFrame(); 139 140 var sent_finish_event = false; 141 animation.onfinish = function() { 142 sent_finish_event = true; 143 }; 144 145 // Scroll back. 146 scroller.scrollTop = 0.2 * maxScroll; 147 // Wait for new animation frame which allows the timeline to compute new 148 // current time. 149 await waitForNextFrame(); 150 assert_false(sent_finish_event, 151 "No animation finished event is sent on reverse scroll."); 152 153 scroller.scrollTop = maxScroll; 154 await animation.finished; 155 156 // Wait for next frame to allow the animation to send finish events. The 157 // finished promise fires before events are sent. 158 await waitForNextFrame(); 159 160 assert_true(sent_finish_event, 161 "Animation finished event is sent on reaching max scroll."); 162 }, 'Sending animation finished events by finished animation on reverse ' + 163 'scrolling.'); 164 </script>