scroll-animation-inactive-timeline.html (7130B)
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 16 .contents { 17 height: 1000px; 18 width: 100%; 19 } 20 </style> 21 <div id="log"></div> 22 <script> 23 'use strict'; 24 25 promise_test(async t => { 26 const animation = createScrollLinkedAnimation(t); 27 const scroller = animation.timeline.source; 28 29 // Ensure we have a valid animation frame time before continuing the test. 30 // This is so that we can properly determine frame advancement after the 31 // style change. 32 await waitForNextFrame(); 33 34 // Make the scroll timeline inactive. 35 scroller.style.overflow = 'visible'; 36 // Wait for new animation frame which allows the timeline to compute new 37 // current time. 38 await waitForNextFrame(); 39 await waitForNextFrame(); 40 assert_equals(animation.timeline.currentTime, null, 41 'Sanity check the timeline is inactive.'); 42 // Play the animation when the timeline is inactive. 43 animation.play(); 44 assert_equals(animation.currentTime, null, 45 'The current time is null when the timeline is inactive.'); 46 assert_equals(animation.startTime, null, 47 'The start time is unresolved while play-pending.'); 48 await waitForNextFrame(); 49 assert_true(animation.pending, 50 'Animation has play pending task while timeline is inactive.'); 51 assert_equals(animation.playState, 'running', 52 `State is 'running' in Pending state.`); 53 }, `Play pending task doesn't run when the timeline is inactive.`); 54 55 promise_test(async t => { 56 const animation = createScrollLinkedAnimation(t); 57 const scroller = animation.timeline.source; 58 59 await waitForNextFrame(); 60 61 // Make the scroll timeline inactive. 62 scroller.style.overflow = 'visible'; 63 // Wait for new animation frame which allows the timeline to compute new 64 // current time. 65 await waitForNextFrame(); 66 await waitForNextFrame(); 67 assert_equals(animation.timeline.currentTime, null, 68 'Sanity check the timeline is inactive.'); 69 // Play the animation when the timeline is inactive. 70 animation.play(); 71 72 // Make the scroll timeline active. 73 scroller.style.overflow = 'auto'; 74 await animation.ready; 75 // Ready promise is resolved as a result of the timeline becoming active. 76 assert_percents_equal(animation.currentTime, 0, 77 'Animation current time is resolved when the animation is ready.'); 78 assert_percents_equal(animation.startTime, 0, 79 'Animation start time is resolved when the animation is ready.'); 80 }, 'Animation start and current times are correct if scroll timeline is ' + 81 'activated after animation.play call.'); 82 83 promise_test(async t => { 84 const animation = createScrollLinkedAnimation(t); 85 const scroller = animation.timeline.source; 86 const target = animation.effect.target; 87 88 await waitForNextFrame(); 89 90 // Make the scroll timeline inactive. 91 scroller.style.overflow = 'visible'; 92 scroller.scrollTop; 93 // Wait for new animation frame which allows the timeline to compute new 94 // current time. 95 await waitForNextFrame(); 96 await waitForNextFrame(); 97 assert_equals(animation.timeline.currentTime, null, 98 'Sanity check the timeline is inactive.'); 99 // Set start time when the timeline is inactive. 100 animation.startTime = CSSNumericValue.parse("0%"); 101 assert_equals(animation.currentTime, null, 102 'Sanity check current time is unresolved when the timeline ' + 103 'is inactive.'); 104 105 // Make the scroll timeline active. 106 scroller.style.overflow = 'auto'; 107 // Wait for new animation frame which allows the timeline to compute new 108 // current time. 109 await waitForNextFrame(); 110 111 assert_percents_equal(animation.currentTime, 0, 112 'Animation current time is resolved when the timeline is active.'); 113 assert_percents_equal(animation.startTime, 0, 114 'Animation start time is resolved.'); 115 assert_percents_equal(animation.effect.getComputedTiming().localTime, 0, 116 'Effect local time is resolved when the timeline is active.'); 117 assert_equals(Number(getComputedStyle(target).opacity), 0, 118 'Animation has an effect when the timeline is active.'); 119 }, 'Animation start and current times are correct if scroll timeline is ' + 120 'activated after setting start time.'); 121 122 promise_test(async t => { 123 const animation = createScrollLinkedAnimation(t); 124 const scroller = animation.timeline.source; 125 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 126 const target = animation.effect.target; 127 128 await waitForNextFrame(); 129 130 // Advance the scroller. 131 scroller.scrollTop = 0.2 * maxScroll; 132 133 // Wait for new animation frame which allows the timeline to compute new 134 // current time. 135 await waitForNextFrame(); 136 // Play the animation when the timeline is active. 137 animation.play(); 138 await animation.ready; 139 140 // Make the scroll timeline inactive. 141 scroller.style.overflow = 'visible'; 142 scroller.scrollTop; 143 await waitForNextFrame(); 144 await waitForNextFrame(); 145 assert_equals(animation.timeline.currentTime, null, 146 'Sanity check the timeline is inactive.'); 147 assert_equals(animation.playState, 'running', 148 `State is 'running' when the timeline is inactive.`); 149 assert_equals(animation.currentTime, null, 150 'Current time is unresolved when the timeline is inactive.'); 151 assert_percents_equal(animation.startTime, 0, 152 'Start time is zero when the timeline is inactive.'); 153 assert_equals(animation.effect.getComputedTiming().localTime, null, 154 'Effect local time is null when the timeline is inactive.'); 155 assert_equals(Number(getComputedStyle(target).opacity), 1, 156 'Animation does not have an effect when the timeline is inactive.'); 157 158 // Make the scroll timeline active. 159 scroller.style.overflow = 'auto'; 160 await waitForNextFrame(); 161 162 assert_equals(animation.playState, 'running', 163 `State is 'running' when the timeline is active.`); 164 assert_percents_equal(animation.currentTime, 20, 165 'Current time is resolved when the timeline is active.'); 166 assert_percents_equal(animation.startTime, 0, 167 'Start time is zero when the timeline is active.'); 168 assert_percents_equal(animation.effect.getComputedTiming().localTime, 20, 169 'Effect local time is resolved when the timeline is active.'); 170 assert_equals(Number(getComputedStyle(target).opacity), 0.2, 171 'Animation has an effect when the timeline is active.'); 172 }, 'Animation current time is correct when the timeline becomes newly ' + 173 'inactive and then active again.'); 174 </script>