OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <meta charset=utf-8> |
| 3 <title>Setting the timeline tests</title> |
| 4 <link rel="help" href="https://w3c.github.io/web-animations/#setting-the-timelin
e"> |
| 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(function(t) { |
| 20 var 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_times_equal(animation.currentTime, 50 * MS_PER_SEC); |
| 30 }, 'After setting timeline on paused animation it is still paused'); |
| 31 |
| 32 test(function(t) { |
| 33 var 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_times_equal(animation.currentTime, 200 * MS_PER_SEC); |
| 43 }, 'After setting timeline on animation paused outside active interval' |
| 44 + ' it is still paused'); |
| 45 |
| 46 test(function(t) { |
| 47 var 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(function(t) { |
| 59 var 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, 'idle'); |
| 64 |
| 65 animation.timeline = document.timeline; |
| 66 |
| 67 assert_equals(animation.playState, 'running'); |
| 68 }, 'After setting timeline on an idle animation with a start time' |
| 69 + ' it is running'); |
| 70 |
| 71 test(function(t) { |
| 72 var 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, 'idle'); |
| 77 |
| 78 animation.timeline = document.timeline; |
| 79 |
| 80 assert_equals(animation.playState, 'finished'); |
| 81 }, 'After setting timeline on an idle animation with a sufficiently ancient' |
| 82 + ' start time it is finished'); |
| 83 |
| 84 test(function(t) { |
| 85 var animation = |
| 86 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
| 87 null); |
| 88 animation.play(); |
| 89 assert_equals(animation.playState, 'pending'); |
| 90 |
| 91 animation.timeline = document.timeline; |
| 92 |
| 93 assert_equals(animation.playState, 'pending'); |
| 94 }, 'After setting timeline on a play-pending animation it is still pending'); |
| 95 |
| 96 promise_test(function(t) { |
| 97 var animation = |
| 98 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
| 99 null); |
| 100 animation.play(); |
| 101 assert_equals(animation.playState, 'pending'); |
| 102 |
| 103 animation.timeline = document.timeline; |
| 104 |
| 105 return animation.ready.then(function() { |
| 106 assert_equals(animation.playState, 'running'); |
| 107 }); |
| 108 }, 'After setting timeline on a play-pending animation it begins playing' |
| 109 + ' after pending'); |
| 110 |
| 111 test(function(t) { |
| 112 var animation = |
| 113 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
| 114 null); |
| 115 animation.startTime = document.timeline.currentTime; |
| 116 animation.pause(); |
| 117 animation.timeline = null; |
| 118 assert_equals(animation.playState, 'pending'); |
| 119 |
| 120 animation.timeline = document.timeline; |
| 121 |
| 122 assert_equals(animation.playState, 'pending'); |
| 123 }, 'After setting timeline on a pause-pending animation it is still pending'); |
| 124 |
| 125 promise_test(function(t) { |
| 126 var animation = |
| 127 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
| 128 null); |
| 129 animation.startTime = document.timeline.currentTime; |
| 130 animation.pause(); |
| 131 animation.timeline = null; |
| 132 assert_equals(animation.playState, 'pending'); |
| 133 |
| 134 animation.timeline = document.timeline; |
| 135 |
| 136 return animation.ready.then(function() { |
| 137 assert_equals(animation.playState, 'paused'); |
| 138 }); |
| 139 }, 'After setting timeline on a pause-pending animation it becomes paused' |
| 140 + ' after pending'); |
| 141 |
| 142 // --------------------------------------------------------------------- |
| 143 // |
| 144 // Tests from timeline to no timeline |
| 145 // |
| 146 // --------------------------------------------------------------------- |
| 147 |
| 148 test(function(t) { |
| 149 var animation = |
| 150 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
| 151 document.timeline); |
| 152 animation.currentTime = 50 * MS_PER_SEC; |
| 153 assert_equals(animation.playState, 'paused'); |
| 154 |
| 155 animation.timeline = null; |
| 156 |
| 157 assert_equals(animation.playState, 'paused'); |
| 158 assert_times_equal(animation.currentTime, 50 * MS_PER_SEC); |
| 159 }, 'After clearing timeline on paused animation it is still paused'); |
| 160 |
| 161 test(function(t) { |
| 162 var animation = |
| 163 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
| 164 document.timeline); |
| 165 var initialStartTime = document.timeline.currentTime - 200 * MS_PER_SEC; |
| 166 animation.startTime = initialStartTime; |
| 167 assert_equals(animation.playState, 'finished'); |
| 168 |
| 169 animation.timeline = null; |
| 170 |
| 171 assert_equals(animation.playState, 'idle'); |
| 172 assert_times_equal(animation.startTime, initialStartTime); |
| 173 }, 'After clearing timeline on finished animation it is idle'); |
| 174 |
| 175 test(function(t) { |
| 176 var animation = |
| 177 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
| 178 document.timeline); |
| 179 var initialStartTime = document.timeline.currentTime - 50 * MS_PER_SEC; |
| 180 animation.startTime = initialStartTime; |
| 181 assert_equals(animation.playState, 'running'); |
| 182 |
| 183 animation.timeline = null; |
| 184 |
| 185 assert_equals(animation.playState, 'idle'); |
| 186 assert_times_equal(animation.startTime, initialStartTime); |
| 187 }, 'After clearing timeline on running animation it is idle'); |
| 188 |
| 189 test(function(t) { |
| 190 var animation = |
| 191 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
| 192 document.timeline); |
| 193 assert_equals(animation.playState, 'idle'); |
| 194 |
| 195 animation.timeline = null; |
| 196 |
| 197 assert_equals(animation.playState, 'idle'); |
| 198 assert_equals(animation.startTime, null); |
| 199 }, 'After clearing timeline on idle animation it is still idle'); |
| 200 |
| 201 test(function(t) { |
| 202 var animation = createDiv(t).animate(null, 100 * MS_PER_SEC); |
| 203 assert_equals(animation.playState, 'pending'); |
| 204 |
| 205 animation.timeline = null; |
| 206 |
| 207 assert_equals(animation.playState, 'pending'); |
| 208 }, 'After clearing timeline on play-pending animation it is still pending'); |
| 209 |
| 210 promise_test(function(t) { |
| 211 var animation = createDiv(t).animate(null, 100 * MS_PER_SEC); |
| 212 assert_equals(animation.playState, 'pending'); |
| 213 |
| 214 animation.timeline = null; |
| 215 animation.timeline = document.timeline; |
| 216 |
| 217 assert_equals(animation.playState, 'pending'); |
| 218 return animation.ready.then(function() { |
| 219 assert_equals(animation.playState, 'running'); |
| 220 }); |
| 221 }, 'After clearing and re-setting timeline on play-pending animation it' |
| 222 + ' begins to play'); |
| 223 |
| 224 test(function(t) { |
| 225 var animation = |
| 226 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
| 227 document.timeline); |
| 228 animation.startTime = document.timeline.currentTime; |
| 229 animation.pause(); |
| 230 assert_equals(animation.playState, 'pending'); |
| 231 |
| 232 animation.timeline = null; |
| 233 |
| 234 assert_equals(animation.playState, 'pending'); |
| 235 }, 'After clearing timeline on a pause-pending animation it is still pending'); |
| 236 |
| 237 promise_test(function(t) { |
| 238 var animation = |
| 239 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
| 240 document.timeline); |
| 241 animation.startTime = document.timeline.currentTime; |
| 242 animation.pause(); |
| 243 assert_equals(animation.playState, 'pending'); |
| 244 |
| 245 animation.timeline = null; |
| 246 animation.timeline = document.timeline; |
| 247 |
| 248 assert_equals(animation.playState, 'pending'); |
| 249 return animation.ready.then(function() { |
| 250 assert_equals(animation.playState, 'paused'); |
| 251 }); |
| 252 }, 'After clearing and re-setting timeline on a pause-pending animation it' |
| 253 + ' becomes paused'); |
| 254 |
| 255 promise_test(function(t) { |
| 256 var animation = |
| 257 new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC), |
| 258 document.timeline); |
| 259 var initialStartTime = document.timeline.currentTime - 50 * MS_PER_SEC; |
| 260 animation.startTime = initialStartTime; |
| 261 animation.pause(); |
| 262 animation.play(); |
| 263 |
| 264 animation.timeline = null; |
| 265 animation.timeline = document.timeline; |
| 266 assert_equals(animation.playState, 'pending'); |
| 267 |
| 268 return animation.ready.then(function() { |
| 269 assert_equals(animation.playState, 'running'); |
| 270 assert_times_equal(animation.startTime, initialStartTime); |
| 271 }); |
| 272 }, 'After clearing and re-setting timeline on an animation in the middle of' |
| 273 + ' an aborted pause, it continues playing using the same start time'); |
| 274 |
| 275 </script> |
| 276 </body> |
OLD | NEW |