diff --git a/target-config.js b/target-config.js index 8aef7bf..178b72f 100644 --- a/target-config.js +++ b/target-config.js @@ -80,7 +80,8 @@ 'test/js/group-constructors.js', 'test/js/group-player.js', 'test/js/group-player-finish-event.js', - 'test/js/timeline.js'); + 'test/js/timeline.js', + 'test/js/timing.js'); // This object specifies the source and test files for different Web Animation build targets. var targetConfig = { diff --git a/test/js/timing.js b/test/js/timing.js index 7f4fb67..0bc0436 100644 --- a/test/js/timing.js +++ b/test/js/timing.js @@ -3,8 +3,112 @@ suite('timing-tests', function() { webAnimationsMinifill.timeline._players = []; }); + test('changing timing iterations mid-animation', function() { + var animation = new Animation(document.body, [], { duration: 1000 }); + + // TODO: access internal _timing for now, until .timing is properly generated + var timing = animation._timing; + + assert.equal(timing.duration, 1000); + assert.equal(timing.iterations, 1.0); + + var player = document.timeline.play(animation); + tick(50); + assert.equal(player.currentTime, 0); + + tick(350); + assert.equal(player.currentTime, 300); + + timing.iterations = 0.5; + animation.timing.iterations = 0.5; + tick(850); + assert.equal(player.currentTime, 500); + }); + + test('immediate pause and play later', function() { + var animation = new Animation(document.body, [], { duration: 1000 }); + var player = document.timeline.play(animation); + player.pause(); + + tick(50); + assert(!player.currentTime); + assert(!player.startTime); + + tick(150); + assert(!player.currentTime); + assert(!player.startTime); + + player.play(); + + tick(250); + assert.equal(player.currentTime, 100); + assert.equal(player.startTime, 150); + }); + + test('composing playbackRate', function() { + var target = document.createElement('div'); + target.style.position = 'absolute'; + document.body.appendChild(target); + + var timing = { duration: 1000, playbackRate: 0.5 }; + var animation = new Animation(target, [ + { left: '0px' }, + { left: '1000px' } + ], timing); + + // 0.5 * 2.0 == 1, so offsetLeft==currentTime + var group = new AnimationGroup([animation], { playbackRate: 2.0 }); + var player = document.timeline.play(animation); + + tick(50); + assert.equal(player.startTime, 50); + + tick(150); + assert.equal(player.currentTime, 100); + assert.equal(target.offsetLeft, 100); + }); + + test('player playbackRate', function() { + var target = document.createElement('div'); + target.style.position = 'absolute'; + document.body.appendChild(target); + + var timing = { duration: 1000, playbackRate: 0.5 }; + var animation = new Animation(target, [ + { left: '0px' }, + { left: '1000px' } + ], timing); + + var player = document.timeline.play(animation); + + // 0.5 * 2.0 == 1, so offsetLeft==currentTime + player.playbackRate = 2.0; + + tick(50); + assert.equal(player.startTime, 50); + + tick(150); + assert.equal(player.currentTime, 100); + assert.equal(target.offsetLeft, 100); + }); + test('pause and scrub', function() { - var player = document.body.animate([], { duration: 1000 }); + // note that this functions natively. However, note that AnimationGroup + // is not native on M41, so it still fails there. + var animation = new Animation(document.body, [], { duration: 1000 }); + var player = document.timeline.play(animation); + player.pause(); + + player.currentTime = 500; + assert.equal(player.currentTime, 500); + }); + + test('pause and scrub group', function() { + // note that this functions natively. However, note that AnimationGroup + // is not native on M41, so it still fails there. + var animation = new Animation(document.body, [], { duration: 1000 }); + var group = new AnimationGroup([animation]); + var player = document.timeline.play(group); player.pause(); player.currentTime = 500;