From 6a55d47596d5fb557723acb6783fc38f845c79b4 Mon Sep 17 00:00:00 2001 From: Sam Thorogood Date: Thu, 13 Nov 2014 09:55:35 +1100 Subject: [PATCH 1/8] added timing constructor test --- test/js/animation-constructor.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/test/js/animation-constructor.js b/test/js/animation-constructor.js index 7c88d05..f71538f 100644 --- a/test/js/animation-constructor.js +++ b/test/js/animation-constructor.js @@ -47,4 +47,20 @@ suite('animation-constructor', function() { assert.closeTo(leftAsNumber(target2), 15.25, 1); }); + test('Timing is always converted to AnimationTimingInput', function() { + var target = document.createElement('div'); + document.body.appendChild(target); + + var steps = [{background: 'blue'}, {background: 'red'}]; + + var animation = new Animation(target, steps, 200); + assert.equal(animation.timing.duration, 200); + + animation = new Animation(target, steps); + assert.isDefined(animation.timing); + + animation = new Animation(target, steps, {duration: 200}); + var group = new AnimationGroup([animation]); + assert.equal(group.timing.duration, 'auto'); + }); }); From c5821bac8b67b24875860568a8c9bf685ebd6960 Mon Sep 17 00:00:00 2001 From: Sam Thorogood Date: Thu, 13 Nov 2014 10:09:07 +1100 Subject: [PATCH 2/8] confusing timing tests --- target-config.js | 1 + test/js/timing.js | 27 +++++++++++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 test/js/timing.js diff --git a/target-config.js b/target-config.js index 1bd2ba8..8ae28dc 100644 --- a/target-config.js +++ b/target-config.js @@ -51,6 +51,7 @@ 'test/js/player-finish-event.js', 'test/js/property-interpolation.js', 'test/js/tick.js', + 'test/js/timing.js', 'test/js/transform-handler.js']; var maxifillTest = minifillTest.concat( diff --git a/test/js/timing.js b/test/js/timing.js new file mode 100644 index 0000000..c1270d4 --- /dev/null +++ b/test/js/timing.js @@ -0,0 +1,27 @@ +suite('timing-tests', function() { + setup(function() { + document.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); + assert(!player.paused); + assert.equal(player.currentTime, 0); + tick(300); + assert.equal(player.startTime, 300); // why does this pass? the anim is running? + assert.equal(player.currentTime, 300, 'after 300ms tick, currentTime should be 300ms'); // this fails -- what, what? + + timing.iterations = 0.5; + animation.timing.iterations = 0.5; + tick(300); + assert.equal(player.currentTime, 500); + }); +}); From f6e1dd25de305af3c91e2a5a6db197d1a044a13e Mon Sep 17 00:00:00 2001 From: Sam Thorogood Date: Thu, 13 Nov 2014 11:28:02 +1100 Subject: [PATCH 3/8] moved timing test to maxifill; fixed test (understanding of tick++) --- target-config.js | 4 ++-- test/js/timing.js | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/target-config.js b/target-config.js index 8ae28dc..844c3f6 100644 --- a/target-config.js +++ b/target-config.js @@ -51,7 +51,6 @@ 'test/js/player-finish-event.js', 'test/js/property-interpolation.js', 'test/js/tick.js', - 'test/js/timing.js', 'test/js/transform-handler.js']; var maxifillTest = minifillTest.concat( @@ -60,7 +59,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 c1270d4..7bca5e2 100644 --- a/test/js/timing.js +++ b/test/js/timing.js @@ -13,15 +13,15 @@ suite('timing-tests', function() { assert.equal(timing.iterations, 1.0); var player = document.timeline.play(animation); - assert(!player.paused); + tick(50); assert.equal(player.currentTime, 0); - tick(300); - assert.equal(player.startTime, 300); // why does this pass? the anim is running? - assert.equal(player.currentTime, 300, 'after 300ms tick, currentTime should be 300ms'); // this fails -- what, what? + + tick(350); + assert.equal(player.currentTime, 300); timing.iterations = 0.5; animation.timing.iterations = 0.5; - tick(300); + tick(850); assert.equal(player.currentTime, 500); }); }); From 60c8702f3be14ab82444e94a52b9940fc7beab42 Mon Sep 17 00:00:00 2001 From: Sam Thorogood Date: Thu, 13 Nov 2014 13:01:20 +1100 Subject: [PATCH 4/8] more timing tests --- test/js/timing.js | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/test/js/timing.js b/test/js/timing.js index 7bca5e2..6195d00 100644 --- a/test/js/timing.js +++ b/test/js/timing.js @@ -24,4 +24,47 @@ suite('timing-tests', function() { tick(850); assert.equal(player.currentTime, 500); }); + + test('immediate pause iteration', 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('pause and scrub', function() { + var target = document.createElement('div'); + document.body.appendChild(target); + + var animation = new Animation(target, [ + { background: 'blue' }, + { background: 'red' } + ], { duration: 1000 }); + var player = document.timeline.play(animation); + tick(100); + player.pause(); + + player.currentTime = 200; + // http://www.w3.org/TR/web-animations/#the-current-time-of-a-player + // currentTime should now mean 'hold time'? + assert.equal(player.currentTime, 500); + player.play(); + + tick(200); + assert.equal(player.currentTime, 300); + assert.equal(player.startTime, -100); + }); }); From fe27436f5e7f5548bc1976db99e9d7b4fbc15ff7 Mon Sep 17 00:00:00 2001 From: Sam Thorogood Date: Thu, 13 Nov 2014 13:11:03 +1100 Subject: [PATCH 5/8] 'fixed' test, updated comment --- test/js/timing.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/js/timing.js b/test/js/timing.js index 6195d00..de36ad5 100644 --- a/test/js/timing.js +++ b/test/js/timing.js @@ -59,8 +59,8 @@ suite('timing-tests', function() { player.currentTime = 200; // http://www.w3.org/TR/web-animations/#the-current-time-of-a-player - // currentTime should now mean 'hold time'? - assert.equal(player.currentTime, 500); + // currentTime should now mean 'hold time' - this allows scrubbing. + assert.equal(player.currentTime, 200); player.play(); tick(200); From 0ac11ea3290658b706258ada5abc0992971bba39 Mon Sep 17 00:00:00 2001 From: Sam Thorogood Date: Thu, 13 Nov 2014 13:32:18 +1100 Subject: [PATCH 6/8] composing playbackRate is broken --- test/js/timing.js | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/test/js/timing.js b/test/js/timing.js index de36ad5..4b2e0db 100644 --- a/test/js/timing.js +++ b/test/js/timing.js @@ -45,6 +45,53 @@ suite('timing-tests', function() { 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 target = document.createElement('div'); document.body.appendChild(target); From 21c2ea9262bd9d5688d7e432661ec9bd75ac0a8f Mon Sep 17 00:00:00 2001 From: Sam Thorogood Date: Thu, 13 Nov 2014 15:17:33 +1100 Subject: [PATCH 7/8] updated test naming, added pause/scrub tests --- test/js/timing.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/test/js/timing.js b/test/js/timing.js index 4b2e0db..0aa1f97 100644 --- a/test/js/timing.js +++ b/test/js/timing.js @@ -25,7 +25,7 @@ suite('timing-tests', function() { assert.equal(player.currentTime, 500); }); - test('immediate pause iteration', function() { + test('immediate pause and play later', function() { var animation = new Animation(document.body, [], { duration: 1000 }); var player = document.timeline.play(animation); player.pause(); @@ -93,6 +93,17 @@ suite('timing-tests', function() { }); test('pause and scrub', 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 player = document.timeline.play(animation); + player.pause(); + + player.currentTime = 500; + assert.equal(player.currentTime, 500); + }); + + test('pause, scrub and play', function() { var target = document.createElement('div'); document.body.appendChild(target); From a01ea58c2b9d46a6fb2fd9bc49342f546bf7b961 Mon Sep 17 00:00:00 2001 From: Sam Thorogood Date: Thu, 13 Nov 2014 17:24:03 +1100 Subject: [PATCH 8/8] scrub group test --- test/js/timing.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/test/js/timing.js b/test/js/timing.js index 0aa1f97..d2b6592 100644 --- a/test/js/timing.js +++ b/test/js/timing.js @@ -103,6 +103,18 @@ suite('timing-tests', function() { 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; + assert.equal(player.currentTime, 500); + }); + test('pause, scrub and play', function() { var target = document.createElement('div'); document.body.appendChild(target);