OLD | NEW |
(Empty) | |
| 1 suite('player', function() { |
| 2 setup(function() { |
| 3 webAnimationsMinifill.timeline._players = []; |
| 4 }); |
| 5 test('zero duration animation works', function() { |
| 6 tick(90); |
| 7 var p = document.body.animate([], 0); |
| 8 tick(100); |
| 9 assert.equal(p.startTime, 100); |
| 10 assert.equal(p.currentTime, 0); |
| 11 }); |
| 12 test('playing works as expected', function() { |
| 13 tick(90); |
| 14 var p = document.body.animate([], 2000); |
| 15 tick(100); |
| 16 assert.equal(p.startTime, 100); |
| 17 assert.equal(p.currentTime, 0); |
| 18 tick(300); |
| 19 assert.equal(p.startTime, 100); |
| 20 assert.equal(p.currentTime, 200); |
| 21 }); |
| 22 test('pause at start of play', function() { |
| 23 tick(90); |
| 24 var p = document.body.animate([], 2000); |
| 25 p.pause(); |
| 26 tick(100); |
| 27 assert.equal(p.currentTime, 0); |
| 28 tick(300); |
| 29 p.play(); |
| 30 assert.equal(p.currentTime, 0); |
| 31 tick(310); |
| 32 assert.equal(p.currentTime, 0); |
| 33 assert.equal(p.startTime, 310); |
| 34 |
| 35 var p = document.body.animate([], 2000); |
| 36 p.startTime = -690; |
| 37 p.pause(); |
| 38 assert.equal(p.currentTime, null); |
| 39 tick(700); |
| 40 p.play(); |
| 41 tick(701); |
| 42 assert.equal(p.currentTime, 1000); |
| 43 tick(800); |
| 44 assert.equal(p.currentTime, 1099); |
| 45 assert.equal(p.startTime, -299); |
| 46 }); |
| 47 test('pausing works as expected', function() { |
| 48 tick(190); |
| 49 var p = document.body.animate([], 3000); |
| 50 tick(200); |
| 51 tick(1500); |
| 52 assert.equal(p.startTime, 200); |
| 53 assert.equal(p.currentTime, 1300); |
| 54 p.pause(); |
| 55 assert.equal(p.startTime, null); |
| 56 assert.equal(p.currentTime, null); |
| 57 tick(2500); |
| 58 assert.equal(p.startTime, null); |
| 59 assert.equal(p.currentTime, 1300); |
| 60 p.play(); |
| 61 tick(2510); |
| 62 assert.equal(p.startTime, 1210); |
| 63 assert.equal(p.currentTime, 1300); |
| 64 tick(3500); |
| 65 assert.equal(p.startTime, 1210); |
| 66 assert.equal(p.currentTime, 2290); |
| 67 }); |
| 68 test('reversing works as expected', function() { |
| 69 tick(290); |
| 70 var p = document.body.animate([], 1000); |
| 71 tick(300); |
| 72 assert.equal(p.startTime, 300); |
| 73 assert.equal(p.currentTime, 0); |
| 74 tick(600); |
| 75 assert.equal(p.startTime, 300); |
| 76 assert.equal(p.currentTime, 300); |
| 77 assert.equal(p.playbackRate, 1); |
| 78 p.reverse(); |
| 79 tick(600); |
| 80 assert.equal(p.startTime, 900); |
| 81 assert.equal(p.currentTime, 300); |
| 82 assert.equal(p.playbackRate, -1); |
| 83 tick(700); |
| 84 assert.equal(p.startTime, 900); |
| 85 assert.equal(p.currentTime, 200); |
| 86 }); |
| 87 test('reversing after pausing', function() { |
| 88 tick(90); |
| 89 var p = document.body.animate([], 1000); |
| 90 tick(100); |
| 91 tick(600); |
| 92 p.reverse(); |
| 93 tick(601); |
| 94 tick(700); |
| 95 assert.equal(p.startTime, 1101); |
| 96 assert.equal(p.currentTime, 401); |
| 97 }); |
| 98 test('reversing after finishing works as expected', function() { |
| 99 tick(90); |
| 100 var p = document.body.animate([], 1000); |
| 101 tick(100); |
| 102 tick(1200); |
| 103 assert.equal(p.finished, true); |
| 104 assert.equal(p.startTime, 100); |
| 105 assert.equal(p.currentTime, 1000); |
| 106 tick(1500); |
| 107 assert.equal(p.currentTime, 1000); |
| 108 assert.equal(isTicking(), false); |
| 109 p.reverse(); |
| 110 assert.equal(p._startTime, null); |
| 111 assert.equal(p.currentTime, 1000); |
| 112 tick(1600); |
| 113 assert.equal(p.startTime, 2600); |
| 114 assert.equal(p.currentTime, 1000); |
| 115 }); |
| 116 test('playing after finishing works as expected', function() { |
| 117 tick(90); |
| 118 var p = document.body.animate([], 1000); |
| 119 tick(100); |
| 120 tick(1200); |
| 121 assert.equal(p.finished, true); |
| 122 assert.equal(p.startTime, 100); |
| 123 assert.equal(p.currentTime, 1000); |
| 124 tick(1500); |
| 125 assert.equal(p.currentTime, 1000); |
| 126 assert.equal(isTicking(), false); |
| 127 p.play(); |
| 128 assert.equal(p.startTime, null); |
| 129 assert.equal(p.currentTime, 0); |
| 130 tick(1600); |
| 131 assert.equal(p.startTime, 1600); |
| 132 assert.equal(p.currentTime, 0); |
| 133 }); |
| 134 test('limiting works as expected', function() { |
| 135 tick(390); |
| 136 var p = document.body.animate([], 1000); |
| 137 tick(400); |
| 138 assert.equal(p.startTime, 400); |
| 139 assert.equal(p.currentTime, 0); |
| 140 tick(900); |
| 141 assert.equal(p.startTime, 400); |
| 142 assert.equal(p.currentTime, 500); |
| 143 tick(1400); |
| 144 assert.equal(p.startTime, 400); |
| 145 assert.equal(p.currentTime, 1000); |
| 146 tick(1500); |
| 147 assert.equal(p.startTime, 400); |
| 148 assert.equal(p.currentTime, 1000); |
| 149 p.reverse(); |
| 150 assert.equal(p.playbackRate, -1); |
| 151 assert.equal(p.currentTime, 1000); |
| 152 assert.equal(p._startTime, null); |
| 153 tick(2000); |
| 154 assert.equal(p.currentTime, 1000); |
| 155 assert.equal(p.startTime, 3000); |
| 156 tick(2200); |
| 157 assert.equal(p.currentTime, 800); |
| 158 assert.equal(p.startTime, 3000); |
| 159 tick(3200); |
| 160 assert.equal(p.currentTime, 0); |
| 161 assert.equal(p.startTime, 3000); |
| 162 tick(3500); |
| 163 assert.equal(p.currentTime, 0); |
| 164 assert.equal(p.startTime, 3000); |
| 165 }); |
| 166 test('play after limit works as expected', function() { |
| 167 tick(490); |
| 168 var p = document.body.animate([], 2000); |
| 169 tick(500); |
| 170 tick(2600); |
| 171 assert.equal(p.currentTime, 2000); |
| 172 assert.equal(p.startTime, 500); |
| 173 assert.equal(p.finished, true); |
| 174 assert.equal(p.playbackRate, 1); |
| 175 setTicking(true); |
| 176 p.play(); |
| 177 tick(2700); |
| 178 assert.equal(p.startTime, 2700); |
| 179 assert.equal(p.currentTime, 0); |
| 180 assert.equal(p.finished, false); |
| 181 assert.equal(p.playbackRate, 1); |
| 182 }); |
| 183 test('play after limit works as expected (reversed)', function() { |
| 184 tick(590); |
| 185 var p = document.body.animate([], 3000); |
| 186 tick(600); |
| 187 tick(700); |
| 188 p.reverse(); |
| 189 tick(701); |
| 190 tick(900); |
| 191 assert.equal(p.startTime, 801); |
| 192 assert.equal(p.currentTime, 0); |
| 193 assert.equal(p.finished, true); |
| 194 assert.equal(p.playbackRate, -1); |
| 195 setTicking(true); |
| 196 p.play(); |
| 197 tick(1000); |
| 198 assert.equal(p.startTime, 4000); |
| 199 assert.equal(p.currentTime, 3000); |
| 200 assert.equal(p.finished, false); |
| 201 assert.equal(p.playbackRate, -1); |
| 202 }); |
| 203 test('seeking works as expected', function() { |
| 204 tick(690); |
| 205 var p = document.body.animate([], 2000); |
| 206 tick(700); |
| 207 tick(900); |
| 208 assert.equal(p.currentTime, 200); |
| 209 p.currentTime = 600; |
| 210 assert.equal(p.currentTime, 600); |
| 211 assert.equal(p.startTime, 300); |
| 212 p.reverse(); |
| 213 tick(1000); |
| 214 assert.equal(p.startTime, 1600); |
| 215 p.currentTime = 300; |
| 216 assert.equal(p.currentTime, 300); |
| 217 assert.equal(p.startTime, 1300); |
| 218 }); |
| 219 test('seeking while paused works as expected', function() { |
| 220 tick(790); |
| 221 var p = document.body.animate([], 1000); |
| 222 tick(800); |
| 223 tick(1000); |
| 224 p.pause(); |
| 225 assert.equal(p.currentTime, null); |
| 226 assert.equal(p.startTime, null); |
| 227 assert.equal(p.paused, true); |
| 228 p.currentTime = 500; |
| 229 assert.equal(p.startTime, null); |
| 230 assert.equal(p.paused, true); |
| 231 }); |
| 232 test('setting start time while paused is ignored', function() { |
| 233 tick(900); |
| 234 var p = document.body.animate([], 1234); |
| 235 p.pause(); |
| 236 assert.equal(p.startTime, null); |
| 237 assert.equal(p.currentTime, null); |
| 238 p.startTime = 2232; |
| 239 assert.equal(p.startTime, null); |
| 240 assert.equal(p.currentTime, null); |
| 241 }); |
| 242 test('finishing works as expected', function() { |
| 243 tick(1000); |
| 244 var p = document.body.animate([], 2000); |
| 245 p.finish(); |
| 246 assert.equal(p.startTime, 0); |
| 247 assert.equal(p.currentTime, 2000); |
| 248 p.reverse(); |
| 249 p.finish(); |
| 250 assert.equal(p.currentTime, 0); |
| 251 assert.equal(p.startTime, 2000); |
| 252 tick(2000); |
| 253 }); |
| 254 test('cancelling clears all effects', function() { |
| 255 tick(0); |
| 256 var target = document.createElement('div'); |
| 257 document.documentElement.appendChild(target); |
| 258 var player = target.animate([{marginLeft: '50px'}, {marginLeft: '50px'}], 10
00); |
| 259 tick(10); |
| 260 tick(110); |
| 261 assert.equal(getComputedStyle(target).marginLeft, '50px'); |
| 262 player.cancel(); |
| 263 // getComputedStyle forces a tick. |
| 264 assert.equal(getComputedStyle(target).marginLeft, '0px'); |
| 265 assert.deepEqual(webAnimationsMinifill.timeline._players, []); |
| 266 tick(120); |
| 267 assert.equal(getComputedStyle(target).marginLeft, '0px'); |
| 268 assert.deepEqual(webAnimationsMinifill.timeline._players, []); |
| 269 document.documentElement.removeChild(target); |
| 270 }); |
| 271 test('startTime is set on first tick if timeline hasn\'t started', function()
{ |
| 272 webAnimationsMinifill.timeline.currentTime = undefined; |
| 273 var p = document.body.animate([], 1000); |
| 274 tick(0); |
| 275 tick(100); |
| 276 assert.equal(p.startTime, 0); |
| 277 }); |
| 278 test('players which are finished and not filling get discarded', function() { |
| 279 tick(90); |
| 280 var nofill = document.body.animate([], 100); |
| 281 var fill = document.body.animate([], {duration: 100, fill: 'forwards'}); |
| 282 assert.deepEqual(webAnimationsMinifill.timeline._players, [nofill._player ||
nofill, fill._player || fill]); |
| 283 tick(100); |
| 284 assert.deepEqual(webAnimationsMinifill.timeline._players, [nofill._player ||
nofill, fill._player || fill]); |
| 285 tick(400); |
| 286 assert.deepEqual(webAnimationsMinifill.timeline._players, [fill._player || f
ill]); |
| 287 }); |
| 288 test('discarded players get re-added on modification', function() { |
| 289 tick(90); |
| 290 var player = document.body.animate([], 100); |
| 291 tick(100); |
| 292 tick(400); |
| 293 assert.deepEqual(webAnimationsMinifill.timeline._players, []); |
| 294 player.currentTime = 0; |
| 295 assert.deepEqual(webAnimationsMinifill.timeline._players, [player._player ||
player]); |
| 296 }); |
| 297 test('players in the before phase are not discarded', function() { |
| 298 tick(100); |
| 299 var player = document.body.animate([], 100); |
| 300 player.currentTime = -50; |
| 301 tick(110); |
| 302 assert.deepEqual(webAnimationsMinifill.timeline._players, [player._player ||
player]); |
| 303 }); |
| 304 test('players that go out of effect should not clear the effect of players tha
t are in effect', function() { |
| 305 var target = document.createElement('div'); |
| 306 document.body.appendChild(target); |
| 307 tick(0); |
| 308 var playerBehind = target.animate([{marginLeft: '200px'}, {marginLeft: '200p
x'}], 200); |
| 309 var playerInfront = target.animate([{marginLeft: '100px'}, {marginLeft: '100
px'}], 100); |
| 310 tick(50); |
| 311 assert.equal(getComputedStyle(target).marginLeft, '100px', 't = 50'); |
| 312 tick(150); |
| 313 assert.equal(getComputedStyle(target).marginLeft, '200px', 't = 150'); |
| 314 tick(250); |
| 315 assert.equal(getComputedStyle(target).marginLeft, '0px', 't = 250'); |
| 316 document.body.removeChild(target); |
| 317 }); |
| 318 test('player modifications should update CSS effects immediately', function()
{ |
| 319 var target = document.createElement('div'); |
| 320 document.body.appendChild(target); |
| 321 tick(0); |
| 322 var playerBehind = target.animate([{width: '1234px'}, {width: '1234px'}], {d
uration: 1, fill: 'both'}); |
| 323 var playerInfront = target.animate([{width: '0px'}, {width: '100px'}], 100); |
| 324 assert.equal(getComputedStyle(target).width, '0px'); |
| 325 playerInfront.currentTime = 50; |
| 326 assert.equal(getComputedStyle(target).width, '50px'); |
| 327 playerInfront.currentTime = 100; |
| 328 assert.equal(getComputedStyle(target).width, '1234px'); |
| 329 playerInfront.play(); |
| 330 assert.equal(getComputedStyle(target).width, '0px'); |
| 331 playerInfront.startTime = -50; |
| 332 assert.equal(getComputedStyle(target).width, '50px'); |
| 333 document.body.removeChild(target); |
| 334 }); |
| 335 test('Player that hasn\'t been played has playState \'idle\'', function() { |
| 336 var source = new minifillAnimation(document.body, [], 1000); |
| 337 var p = new Player(source); |
| 338 assert.equal(p.playState, 'idle'); |
| 339 }); |
| 340 test('playState works for a simple animation', function() { |
| 341 var p = document.body.animate([], 1000); |
| 342 tick(0); |
| 343 assert.equal(p.playState, 'running'); |
| 344 tick(100); |
| 345 assert.equal(p.playState, 'running'); |
| 346 p.pause(); |
| 347 assert.equal(p.playState, 'pending'); |
| 348 tick(101); |
| 349 assert.equal(p.playState, 'paused'); |
| 350 p.play(); |
| 351 assert.equal(p.playState, 'pending'); |
| 352 tick(102); |
| 353 assert.equal(p.playState, 'running'); |
| 354 tick(1002); |
| 355 assert.equal(p.playState, 'finished'); |
| 356 }); |
| 357 test('Play after cancel', function() { |
| 358 var p = document.body.animate([], 1000); |
| 359 assert.equal(p.playState, 'pending'); |
| 360 tick(0); |
| 361 p.cancel(); |
| 362 assert.equal(p.playState, 'idle'); |
| 363 assert.equal(p.currentTime, null); |
| 364 assert.equal(p.startTime, null); |
| 365 tick(1); |
| 366 assert.equal(p.playState, 'idle'); |
| 367 assert.equal(p.currentTime, null); |
| 368 assert.equal(p.startTime, null); |
| 369 p.play(); |
| 370 assert.equal(p.playState, 'pending'); |
| 371 assert.equal(p.currentTime, 0); |
| 372 assert.equal(p.startTime, null); |
| 373 tick(10); |
| 374 assert.equal(p.playState, 'running'); |
| 375 assert.equal(p.currentTime, 0); |
| 376 assert.equal(p.startTime, 10); |
| 377 }); |
| 378 test('Reverse after cancel', function() { |
| 379 var p = document.body.animate([], 300); |
| 380 tick(0); |
| 381 p.cancel(); |
| 382 assert.equal(p.playState, 'idle'); |
| 383 assert.equal(p.currentTime, null); |
| 384 assert.equal(p.startTime, null); |
| 385 tick(1); |
| 386 p.reverse(); |
| 387 assert.equal(p.playState, 'pending'); |
| 388 assert.equal(p.currentTime, 300); |
| 389 assert.equal(p.startTime, null); |
| 390 tick(100); |
| 391 assert.equal(p.playState, 'running'); |
| 392 assert.equal(p.currentTime, 300); |
| 393 assert.equal(p.startTime, 400); |
| 394 tick(300); |
| 395 assert.equal(p.playState, 'running'); |
| 396 assert.equal(p.currentTime, 100); |
| 397 assert.equal(p.startTime, 400); |
| 398 tick(400); |
| 399 assert.equal(p.playState, 'finished'); |
| 400 assert.equal(p.currentTime, 0); |
| 401 assert.equal(p.startTime, 400); |
| 402 }); |
| 403 test('Finish after cancel', function() { |
| 404 var p = document.body.animate([], 300); |
| 405 tick(0); |
| 406 p.cancel(); |
| 407 assert.equal(p.playState, 'idle'); |
| 408 assert.equal(p.currentTime, null); |
| 409 assert.equal(p.startTime, null); |
| 410 tick(1); |
| 411 p.finish(); |
| 412 assert.equal(p.playState, 'idle'); |
| 413 assert.equal(p.currentTime, null); |
| 414 assert.equal(p.startTime, null); |
| 415 tick(2); |
| 416 assert.equal(p.playState, 'idle'); |
| 417 assert.equal(p.currentTime, null); |
| 418 assert.equal(p.startTime, null); |
| 419 }); |
| 420 test('Pause after cancel', function() { |
| 421 var p = document.body.animate([], 300); |
| 422 tick(0); |
| 423 p.cancel(); |
| 424 assert.equal(p.playState, 'idle'); |
| 425 assert.equal(p.currentTime, null); |
| 426 assert.equal(p.startTime, null); |
| 427 tick(1); |
| 428 p.pause(); |
| 429 assert.equal(p.playState, 'idle'); |
| 430 assert.equal(p.currentTime, null); |
| 431 assert.equal(p.startTime, null); |
| 432 }); |
| 433 test('Players ignore NaN times', function() { |
| 434 var p = document.body.animate([], 300); |
| 435 p.startTime = 100; |
| 436 tick(110); |
| 437 assert.equal(p.currentTime, 10); |
| 438 p.startTime = NaN; |
| 439 assert.equal(p.startTime, 100); |
| 440 p.currentTime = undefined; |
| 441 assert.equal(p.currentTime, 10); |
| 442 }); |
| 443 test('play() should not set a start time', function() { |
| 444 var p = document.body.animate([], 1000); |
| 445 p.cancel(); |
| 446 assert.equal(p.startTime, null); |
| 447 assert.equal(p.playState, 'idle'); |
| 448 p.play(); |
| 449 assert.equal(p.startTime, null); |
| 450 assert.equal(p.playState, 'pending'); |
| 451 }); |
| 452 test('reverse() should not set a start time', function() { |
| 453 var p = document.body.animate([], 1000); |
| 454 p.cancel(); |
| 455 assert.equal(p.startTime, null); |
| 456 assert.equal(p.playState, 'idle'); |
| 457 p.reverse(); |
| 458 assert.equal(p.startTime, null); |
| 459 assert.equal(p.playState, 'pending'); |
| 460 }); |
| 461 }); |
OLD | NEW |