setting-the-timeline-of-an-animation.html (9108B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Setting the timeline of an animation</title> 4 <link rel="help" href="https://drafts.csswg.org/web-animations/#setting-the-timeline"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="../../testcommon.js"></script> 8 <body> 9 <div id="log"></div> 10 <script> 11 'use strict'; 12 13 // --------------------------------------------------------------------- 14 // 15 // Tests from no timeline to timeline 16 // 17 // --------------------------------------------------------------------- 18 19 test(t => { 20 const animation = 21 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), 22 null); 23 animation.currentTime = 50 * MS_PER_SEC; 24 assert_equals(animation.playState, 'paused'); 25 26 animation.timeline = document.timeline; 27 28 assert_equals(animation.playState, 'paused'); 29 assert_time_equals_literal(animation.currentTime, 50 * MS_PER_SEC); 30 }, 'After setting timeline on paused animation it is still paused'); 31 32 test(t => { 33 const animation = 34 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), 35 null); 36 animation.currentTime = 200 * MS_PER_SEC; 37 assert_equals(animation.playState, 'paused'); 38 39 animation.timeline = document.timeline; 40 41 assert_equals(animation.playState, 'paused'); 42 assert_time_equals_literal(animation.currentTime, 200 * MS_PER_SEC); 43 }, 'After setting timeline on animation paused outside active interval' 44 + ' it is still paused'); 45 46 test(t => { 47 const animation = 48 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), 49 null); 50 assert_equals(animation.playState, 'idle'); 51 52 animation.timeline = document.timeline; 53 54 assert_equals(animation.playState, 'idle'); 55 }, 'After setting timeline on an idle animation without a start time' 56 + ' it is still idle'); 57 58 test(t => { 59 const animation = 60 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), 61 null); 62 animation.startTime = document.timeline.currentTime; 63 assert_equals(animation.playState, 'running'); 64 65 animation.timeline = document.timeline; 66 67 assert_equals(animation.playState, 'running'); 68 }, 'After transitioning from a null timeline on an animation with a start time' 69 + ' it is still running'); 70 71 test(t => { 72 const animation = 73 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), 74 null); 75 animation.startTime = document.timeline.currentTime - 200 * MS_PER_SEC; 76 assert_equals(animation.playState, 'running'); 77 78 animation.timeline = document.timeline; 79 80 assert_equals(animation.playState, 'finished'); 81 }, 'After transitioning from a null timeline on an animation with a ' + 82 'sufficiently ancient start time it is finished'); 83 84 promise_test(async t => { 85 const animation = 86 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), 87 null); 88 animation.play(); 89 assert_true(animation.pending && animation.playState === 'running', 90 'Animation is initially play-pending'); 91 92 animation.timeline = document.timeline; 93 94 assert_true(animation.pending && animation.playState === 'running', 95 'Animation is still play-pending after setting timeline'); 96 97 await animation.ready; 98 assert_true(!animation.pending && animation.playState === 'running', 99 'Animation plays after it finishes pending'); 100 }, 'After setting timeline on a play-pending animation it begins playing' 101 + ' after pending'); 102 103 promise_test(async t => { 104 const animation = 105 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), 106 null); 107 animation.startTime = document.timeline.currentTime; 108 animation.pause(); 109 animation.timeline = null; 110 assert_true(animation.pending && animation.playState === 'paused', 111 'Animation is initially pause-pending'); 112 113 animation.timeline = document.timeline; 114 115 assert_true(animation.pending && animation.playState === 'paused', 116 'Animation is still pause-pending after setting timeline'); 117 118 await animation.ready; 119 assert_true(!animation.pending && animation.playState === 'paused', 120 'Animation pauses after it finishes pending'); 121 }, 'After setting timeline on a pause-pending animation it becomes paused' 122 + ' after pending'); 123 124 // --------------------------------------------------------------------- 125 // 126 // Tests from timeline to no timeline 127 // 128 // --------------------------------------------------------------------- 129 130 test(t => { 131 const animation = 132 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), 133 document.timeline); 134 animation.currentTime = 50 * MS_PER_SEC; 135 assert_false(animation.pending); 136 assert_equals(animation.playState, 'paused'); 137 138 animation.timeline = null; 139 140 assert_false(animation.pending); 141 assert_equals(animation.playState, 'paused'); 142 assert_time_equals_literal(animation.currentTime, 50 * MS_PER_SEC); 143 }, 'After clearing timeline on paused animation it is still paused'); 144 145 test(t => { 146 const animation = 147 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), 148 document.timeline); 149 const initialStartTime = document.timeline.currentTime - 200 * MS_PER_SEC; 150 animation.startTime = initialStartTime; 151 assert_equals(animation.playState, 'finished'); 152 153 animation.timeline = null; 154 155 assert_equals(animation.playState, 'running'); 156 assert_times_equal(animation.startTime, initialStartTime); 157 }, 'After clearing timeline on finished animation it is running'); 158 159 test(t => { 160 const animation = 161 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), 162 document.timeline); 163 const initialStartTime = document.timeline.currentTime - 50 * MS_PER_SEC; 164 animation.startTime = initialStartTime; 165 assert_equals(animation.playState, 'running'); 166 167 animation.timeline = null; 168 169 assert_equals(animation.playState, 'running'); 170 assert_times_equal(animation.startTime, initialStartTime); 171 }, 'After clearing timeline on running animation it is still running'); 172 173 test(t => { 174 const animation = 175 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), 176 document.timeline); 177 assert_equals(animation.playState, 'idle'); 178 179 animation.timeline = null; 180 181 assert_equals(animation.playState, 'idle'); 182 assert_equals(animation.startTime, null); 183 }, 'After clearing timeline on idle animation it is still idle'); 184 185 test(t => { 186 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 187 assert_true(animation.pending && animation.playState === 'running'); 188 189 animation.timeline = null; 190 191 assert_true(animation.pending && animation.playState === 'running'); 192 }, 'After clearing timeline on play-pending animation it is still pending'); 193 194 promise_test(async t => { 195 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 196 assert_true(animation.pending && animation.playState === 'running'); 197 198 animation.timeline = null; 199 animation.timeline = document.timeline; 200 201 assert_true(animation.pending && animation.playState === 'running'); 202 await animation.ready; 203 assert_true(!animation.pending && animation.playState === 'running'); 204 }, 'After clearing and re-setting timeline on play-pending animation it' 205 + ' begins to play'); 206 207 test(t => { 208 const animation = 209 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), 210 document.timeline); 211 animation.startTime = document.timeline.currentTime; 212 animation.pause(); 213 assert_true(animation.pending && animation.playState === 'paused'); 214 215 animation.timeline = null; 216 217 assert_true(animation.pending && animation.playState === 'paused'); 218 }, 'After clearing timeline on a pause-pending animation it is still pending'); 219 220 promise_test(async t => { 221 const animation = 222 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), 223 document.timeline); 224 animation.startTime = document.timeline.currentTime; 225 animation.pause(); 226 assert_true(animation.pending && animation.playState === 'paused'); 227 228 animation.timeline = null; 229 animation.timeline = document.timeline; 230 231 assert_true(animation.pending && animation.playState === 'paused'); 232 await animation.ready; 233 assert_true(!animation.pending && animation.playState === 'paused'); 234 }, 'After clearing and re-setting timeline on a pause-pending animation it' 235 + ' completes pausing'); 236 237 promise_test(async t => { 238 const animation = 239 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), 240 document.timeline); 241 const initialStartTime = document.timeline.currentTime - 50 * MS_PER_SEC; 242 animation.startTime = initialStartTime; 243 animation.pause(); 244 animation.play(); 245 246 animation.timeline = null; 247 animation.timeline = document.timeline; 248 249 await animation.ready; 250 assert_times_equal(animation.startTime, initialStartTime); 251 }, 'After clearing and re-setting timeline on an animation in the middle of' 252 + ' an aborted pause, it continues playing using the same start time'); 253 254 </script> 255 </body>