From 99da7f4267c16fc1925e1535c75d7a0fb8f76448 Mon Sep 17 00:00:00 2001 From: rjwright Date: Wed, 16 Jul 2014 17:11:19 +1000 Subject: [PATCH 1/5] THIS IS A WIP. Added more group pause tests. Found some bugs. Added child-player-pause-after-finish-bug.js tick-after-pause-bug.js group-player-skeleton-tests.js temporarily while I work on these tests and related bugs. They need to be removed and unplugged later. Added some comments to group-player.js that need to be cleaned up before landing. Bugs found: Calling pause->play->tick causes the tick to update the currentTime of the player (which it should not), but pause->tick->play->tick behaves as expected (i.e. the first tick after play restores a playing state, but doesn't touch the currentTime). Pausing a group when some of its children are finished and then playing it again causes the finished children to seek to a currentTime beyond their total duration. --- target-config.js | 2 + .../js/child-player-pause-after-finish-bug.js | 217 ++++ test/js/group-player-skeleton-tests.js | 1140 +++++++++++++++++ test/js/group-player.js | 327 ++++- test/js/tick-after-pause-bug.js | 60 + 5 files changed, 1741 insertions(+), 5 deletions(-) create mode 100644 test/js/child-player-pause-after-finish-bug.js create mode 100644 test/js/group-player-skeleton-tests.js create mode 100644 test/js/tick-after-pause-bug.js diff --git a/target-config.js b/target-config.js index 72ea2a0..2f00af2 100644 --- a/target-config.js +++ b/target-config.js @@ -75,10 +75,12 @@ var maxifillTest = minifillTest.concat( 'test/js/animation-constructor.js', + 'test/js/child-player-pause-after-finish-bug.js'); 'test/js/effect-callback.js', 'test/js/group-constructors.js', 'test/js/group-player.js', 'test/js/group-player-finish-event.js', + 'test/js/tick-after-pause-bug.js', 'test/js/timeline.js'); // This object specifies the source and test files for different Web Animation build targets. diff --git a/test/js/child-player-pause-after-finish-bug.js b/test/js/child-player-pause-after-finish-bug.js new file mode 100644 index 0000000..dd2d07a --- /dev/null +++ b/test/js/child-player-pause-after-finish-bug.js @@ -0,0 +1,217 @@ + +suite('child-player-pause-after-finish-bug', function() { + setup(function() { + document.timeline._players = []; + this.elements = []; + var animationMargin = function(target) { + return new Animation( + target, + [ + {marginLeft: '0px'}, + {marginLeft: '100px'} + ], + 500); + }; + var animationColor = function(target) { + return new Animation( + target, + [ + {backgroundColor: 'black'}, + {backgroundColor: 'white'} + ], + 500); + }; + var sequenceWithEffects = function(target) { + return new AnimationSequence( + [ + animationMargin(target), + animationColor(target) + ]); + }; + var seqSimple_target = document.createElement('div'); + this.elements.push(seqSimple_target); + var seqSimple_source = sequenceWithEffects(seqSimple_target); + + var animSimple_target = document.createElement('div'); + this.elements.push(animSimple_target); + var animSimple_source = animationColor(animSimple_target); + + this.animSimple_source = animSimple_source; + this.seqSimple_source = seqSimple_source; + }); + + teardown(function() { + for (var i = 0; i < this.elements.length; i++) { + if (this.elements[i].parent) + this.elements[i].parent.removeChild(this.elements[i]); + } + }); + + function checkTimes(player, playerState, innerPlayerStates, description) { + description = description ? (description + ' ') : ''; + _checkTimes(player, playerState, 0, description + 'top player'); + _checkTimes(player, innerPlayerStates, 0, description + 'inner player'); + } + + function _checkTimes(player, timingList, index, trace) { + assert.isDefined(player, trace + ' exists'); + if (timingList.length == 0) { + assert.equal(player._childPlayers.length, index, trace + ' no remaining players'); + return; + } + if (typeof timingList[0] == 'number') { + if (isNaN(timingList[0])) + assert.ok(isNaN(player.startTime), trace + 'expected NaN startTime'); + else + assert.equal(player.startTime, timingList[0], trace + ' startTime'); + assert.equal(player.currentTime, timingList[1], trace + ' currentTime'); + } else { + _checkTimes(player._childPlayers[index], timingList[0], 0, trace + ' ' + index); + _checkTimes(player, timingList.slice(1), index + 1, trace); + } + } + + test('Simple AnimationSequence', function() { + var player = document.timeline.play(this.seqSimple_source); + tick(0); + checkTimes(player, [0, 0], [[0, 0], [500, -500]], 't = 0'); + + // Tick so that 0 is finished and 1 is started. + tick(700); + checkTimes(player, [0, 700], [[0, 500], [500, 200]], 't = 700'); + + // Pause, and tick a small amount. + player.pause(); + tick(710); + checkTimes(player, [NaN, 700], [[NaN, 500], [NaN, 200]], 't = 710'); + + // Play and tick a small amount (this should do nothing to the currentTime). + player.play(); + tick(720); + checkTimes(player, [20, 700], [[20, 500], [520, 200]], 't = 720'); + + // Tick so that the while group is finished. + tick(1320); + checkTimes(player, [20, 1000], [[20, 500], [520, 500]], 't = 1320'); + }); + + test('AnimationSequence wrapped in an AnimationGroup', function() { + var player = document.timeline.play(new AnimationGroup([this.seqSimple_source])); + tick(0); + checkTimes(player, [0, 0], [[[0, 0], [500, -500]]], 't = 0'); + + // Tick so that 0 is finished and 1 is started. + tick(700); + checkTimes(player, [0, 700], [[[0, 500], [500, 200]]], 't = 700'); + + // Pause, and tick a small amount. + player.pause(); + tick(710); + checkTimes(player, [NaN, 700], [[[NaN, 500], [NaN, 200]]], 't = 710'); + + // Play and tick a small amount (this should do nothing to the currentTime). + player.play(); + tick(720); + checkTimes(player, [20, 700], [[[20, 500], [520, 200]]], 't = 720'); + + // Tick so that the while group is finished. + tick(1320); + checkTimes(player, [20, 1000], [[[20, 500], [520, 500]]], 't = 1320'); + }); + + test('AnimationSequence wrapped in an AnimationSequence', function() { + var player = document.timeline.play(new AnimationSequence([this.seqSimple_source])); + tick(0); + checkTimes(player, [0, 0], [[[0, 0], [500, -500]]], 't = 0'); + + // Tick so that 0 is finished and 1 is started. + tick(700); + checkTimes(player, [0, 700], [[[0, 500], [500, 200]]], 't = 700'); + + // Pause, and tick a small amount. + player.pause(); + tick(710); + checkTimes(player, [NaN, 700], [[[NaN, 500], [NaN, 200]]], 't = 710'); + + // Play and tick a small amount (this should do nothing to the currentTime). + player.play(); + tick(720); + checkTimes(player, [20, 700], [[[20, 500], [520, 200]]], 't = 720'); + + // Tick so that the while group is finished. + tick(1320); + checkTimes(player, [20, 1000], [[[20, 500], [520, 500]]], 't = 1320'); + }); + + test('AnimationSequence which is the first child in an AnimationSequence', function() { + var player = document.timeline.play(new AnimationSequence([this.seqSimple_source, this.animSimple_source])); + tick(0); + checkTimes(player, [0, 0], [[[0, 0], [500, -500]], [1000, -1000]], 't = 0'); + + // Tick so that seq is finished, and last child is started. + tick(1200); + checkTimes(player, [0, 1200], [[[0, 500], [500, 500]], [1000, 200]], 't = 1200'); + + // Pause, and tick a small amount. + player.pause(); + tick(1300); + checkTimes(player, [NaN, 1200], [[[NaN, 500], [NaN, 500]], [NaN, 200]], 't = 1300'); + + // Play and tick a small amount (this should do nothing to the currentTime). + player.play(); + tick(1400); + checkTimes(player, [200, 1200], [[[200, 500], [700, 500]], [1200, 200]], 't = 1400'); + + // Tick so that the while group is finished. + tick(1800); + checkTimes(player, [200, 1500], [[[200, 500], [700, 500]], [1200, 500]], 't = 1800'); + }); + + + test('AnimationGroup wrapped in an AnimationGroup', function() { + var target = document.createElement('div'); + var player = document.timeline.play( + new AnimationGroup( + [ + new AnimationGroup( + [ + new Animation( + target, + [ + {backgroundColor: 'blue'}, + {backgroundColor: 'red'} + ], + 500 + ), + new Animation( + target, + [ + {backgroundColor: 'blue'}, + {backgroundColor: 'red'} + ], + 1000 + ), + ]) + ])); + tick(0); + checkTimes(player, [0, 0], [[[0, 0], [0, 0]]], 't = 0'); + + // Tick so that 0 is finished and 1 is started. + tick(700); + checkTimes(player, [0, 700], [[[0, 500], [0, 700]]], 't = 700'); + + // Pause, and tick a small amount. + player.pause(); + tick(710); + checkTimes(player, [NaN, 700], [[[NaN, 500], [NaN, 700]]], 't = 710'); + + // Play and tick a small amount (this should do nothing to the currentTime). + player.play(); + tick(720); + checkTimes(player, [20, 700], [[[20, 500], [20, 700]]], 't = 720'); + + // Tick so that the while group is finished. + tick(1320); + checkTimes(player, [20, 1000], [[[20, 500], [20, 1000]]], 't = 1320'); + }); +}); diff --git a/test/js/group-player-skeleton-tests.js b/test/js/group-player-skeleton-tests.js new file mode 100644 index 0000000..34c0239 --- /dev/null +++ b/test/js/group-player-skeleton-tests.js @@ -0,0 +1,1140 @@ +suite('group-player', function() { + setup(function() { + document.timeline.players = []; + this.elements = []; + + var animationMargin = function(target) { + return new Animation( + target, + [ + {marginLeft: '0px'}, + {marginLeft: '100px'} + ], + 500); + }; + + // FIXME: Remove. Used for testing pause on simple Animations during dev of this test. + this.animationMargin = animationMargin; + + var animationColor = function(target) { + return new Animation( + target, + [ + {backgroundColor: 'black'}, + {backgroundColor: 'white'} + ], + 500); + }; + var sequenceEmpty = function() { + return new AnimationSequence(); + }; + var groupEmpty = function() { + return new AnimationGroup(); + }; + var sequenceWithEffects = function(target) { + return new AnimationSequence( + [ + animationMargin(target), + animationColor(target) + ]); + }; + var groupWithEffects = function(target) { + return new AnimationGroup( + [ + animationMargin(target), + animationColor(target) + ]); + }; + + var seqEmpty_source = sequenceEmpty(); + + var seqSimple_target = document.createElement('div'); + var seqSimple_source = sequenceWithEffects(seqSimple_target); + + var seqWithSeq_target = document.createElement('div'); + this.elements.push(seqWithSeq_target); + var seqWithSeq_source = new AnimationSequence( + [ + animationMargin(seqWithSeq_target), + animationColor(seqWithSeq_target), + sequenceWithEffects(seqWithSeq_target) + ]); + + var seqWithGroup_target = document.createElement('div'); + this.elements.push(seqWithGroup_target); + var seqWithGroup_source = new AnimationSequence( + [ + animationMargin(seqWithGroup_target), + animationColor(seqWithGroup_target), + groupWithEffects(seqWithGroup_target) + ]); + + var seqWithEmptyGroup_source = new AnimationSequence([groupEmpty()]); + var seqWithEmptySeq_source = new AnimationSequence([sequenceEmpty()]); + + var groupEmpty_source = groupEmpty(); + + var groupSimple_target = document.createElement('div'); + var groupSimple_source = groupWithEffects(groupSimple_target); + + var groupWithSeq_target = document.createElement('div'); + this.elements.push(groupWithSeq_target); + var groupWithSeq_source = new AnimationGroup( + [ + animationMargin(groupWithSeq_target), + animationColor(groupWithSeq_target), + sequenceWithEffects(groupWithSeq_target) + ]); + + var groupWithGroup_target = document.createElement('div'); + this.elements.push(groupWithGroup_target); + var groupWithGroup_source = new AnimationGroup( + [ + animationMargin(groupWithGroup_target), + animationColor(groupWithGroup_target), + groupWithEffects(groupWithGroup_target) + ]); + + var groupWithEmptyGroup_source = new AnimationGroup([groupEmpty()]); + var groupWithEmptySeq_source = new AnimationGroup([sequenceEmpty()]); + + this.seqEmpty_source = seqEmpty_source; + this.seqSimple_source = seqSimple_source; + this.seqWithSeq_source = seqWithSeq_source; + this.seqWithGroup_source = seqWithGroup_source; + this.seqWithEmptyGroup_source = seqWithEmptyGroup_source; + this.seqWithEmptySeq_source = seqWithEmptySeq_source; + + this.groupEmpty_source = groupEmpty_source; + this.groupSimple_source = groupSimple_source; + this.groupWithSeq_source = groupWithSeq_source; + this.groupWithGroup_source = groupWithGroup_source; + this.groupWithEmptyGroup_source = groupWithEmptyGroup_source; + this.groupWithEmptySeq_source = groupWithEmptySeq_source; + + var staticAnimation = function(target, value, duration) { + return new Animation(target, [{marginLeft: value}, {marginLeft: value}], duration); + }; + // The following animation structure looks like: + // 44444 + // 11 + // 33 + // 2 + // 0 + this.complexTarget = document.createElement('div'); + this.elements.push(this.complexTarget); + this.complexSource = new AnimationGroup([ + staticAnimation(this.complexTarget, '4px', 5), + new AnimationSequence([ + staticAnimation(this.complexTarget, '1px', 2), + new AnimationGroup([ + staticAnimation(this.complexTarget, '3px', 2), + staticAnimation(this.complexTarget, '2px', 1), + ]), + ]), + staticAnimation(this.complexTarget, '0px', 1), + ]); + + for (var i = 0; i < this.elements.length; i++) + document.documentElement.appendChild(this.elements[i]); + }); + + teardown(function() { + for (var i = 0; i < this.elements.length; i++) + this.elements[i].remove(); + }); + + function simpleAnimationGroup() { + return new AnimationGroup([new Animation(document.body, [], 2000), new Animation(document.body, [], 1000), new Animation(document.body, [], 3000)]); + } + + function simpleAnimationSequence() { + return new AnimationSequence([new Animation(document.body, [], 2000), new Animation(document.body, [], 1000), new Animation(document.body, [], 3000)]); + } + + // FIXME: Remove _startOffset. + // playerState is [startTime, currentTime, _startOffset?, offset?] + // innerPlayerStates is a nested array tree of playerStates e.g. [[0, 0], [[1, -1], [2, -2]]] + function checkTimes(player, playerState, innerPlayerStates, description) { + description = description ? (description + ' ') : ''; + _checkTimes(player, playerState, 0, description + 'top player'); + _checkTimes(player, innerPlayerStates, 0, description + 'inner player'); + } + + function _checkTimes(player, timingList, index, trace) { + assert.isDefined(player, trace + ' exists'); + if (timingList.length == 0) { + assert.equal(player._childPlayers.length, index, trace + ' no remaining players'); + return; + } + if (typeof timingList[0] == 'number') { + // if (isNaN(player._startTime)) + // assert.ok(isNaN(timingList[0])); + if (isNaN(timingList[0])) + assert.ok(isNaN(player._startTime), trace + 'expected NaN startTime'); + else + assert.equal(player._startTime, timingList[0], trace + ' startTime'); + assert.equal(player.currentTime, timingList[1], trace + ' currentTime'); + } else { + _checkTimes(player._childPlayers[index], timingList[0], 0, trace + ' ' + index); + _checkTimes(player, timingList.slice(1), index + 1, trace); + } + } + + test('playing an animationGroup works as expected', function() { + tick(90); + var p = document.timeline.play(simpleAnimationGroup()); + checkTimes(p, [NaN, 0], []); + tick(100); + checkTimes(p, [100, 0], [[100, 0], [100, 0], [100, 0]]); + tick(300); + checkTimes(p, [100, 200], [[100, 200], [100, 200], [100, 200]]); + tick(1200); + checkTimes(p, [100, 1100], [[100, 1100], [100, 1000], [100, 1100]]); + tick(2200); + checkTimes(p, [100, 2100], [[100, 2000], [100, 1000], [100, 2100]]); + tick(3200); + checkTimes(p, [100, 3000], [[100, 2000], [100, 1000], [100, 3000]]); + }); + + test('playing an animationSequence works as expected', function() { + tick(100); + var p = document.timeline.play(simpleAnimationSequence()); + tick(110); + checkTimes(p, [110, 0], [[110, 0], [2110, -2000], [3110, -3000]]); + tick(210); + checkTimes(p, [110, 100], [[110, 100], [2110, -1900], [3110, -2900]]); + }); + + test('complex animation tree timing while playing', function() { + tick(90); + var player = document.timeline.play(this.complexSource); + tick(100); + checkTimes(player, [100, 0], [ + [100, 0], [ // 4 + [100, 0], [ // 1 + [102, -2], // 3 + [102, -2]]], // 2 + [100, 0], // 0 + ], 't = 100'); + tick(101); + checkTimes(player, [100, 1], [ + [100, 1], [ // 4 + [100, 1], [ // 1 + [102, -1], // 3 + [102, -1]]], // 2 + [100, 1], // 0 + ], 't = 101'); + tick(102); + checkTimes(player, [100, 2], [ + [100, 2], [ // 4 + [100, 2], [ // 1 + [102, 0], // 3 + [102, 0]]], // 2 + [100, 1], // 0 + ], 't = 102'); + }); + + test('effects apply in the correct order', function() { + tick(0); + var player = document.timeline.play(this.complexSource); + player.currentTime = 0; + assert.equal(getComputedStyle(this.complexTarget).marginLeft, '0px'); + player.currentTime = 1; + checkTimes(player, [-1, 1], [[-1, 1, 0], [[-1, 1, 0], [[1, -1, 0], [1, -1, 0]]], [-1, 1, 0]]); + assert.equal(getComputedStyle(this.complexTarget).marginLeft, '1px'); + player.currentTime = 2; + // TODO: When we seek we don't limit. Is this OK? + checkTimes(player, [-2, 2], [[-2, 2, 0], [[-2, 2, 0], [[0, 0, 0], [0, 0, 0]]], [-2, 2, 0]]); + assert.equal(getComputedStyle(this.complexTarget).marginLeft, '2px'); + player.currentTime = 3; + assert.equal(getComputedStyle(this.complexTarget).marginLeft, '3px'); + player.currentTime = 4; + assert.equal(getComputedStyle(this.complexTarget).marginLeft, '4px'); + player.currentTime = 5; + assert.equal(getComputedStyle(this.complexTarget).marginLeft, '0px'); + }); + + test('cancelling group players', function() { + tick(0); + var player = document.timeline.play(this.complexSource); + tick(1); + tick(4); + assert.equal(getComputedStyle(this.complexTarget).marginLeft, '3px'); + player.cancel(); + assert.equal(player.currentTime, 0); + assert.equal(getComputedStyle(this.complexTarget).marginLeft, '0px'); + }); + + test('redundant animation node wrapping', function() { + var target = document.createElement('div'); + document.documentElement.appendChild(target); + function createAnimation(value, duration) { + return new Animation(target, [{marginLeft: value}, {marginLeft: value}], duration); + } + tick(100); + var animation = new AnimationSequence([ + createAnimation('0px', 1), + new AnimationGroup([ + new AnimationSequence([ + createAnimation('1px', 1), + createAnimation('2px', 1), + ]), + ]), + ]); + var player = document.timeline.play(animation); + assert.equal(getComputedStyle(target).marginLeft, '0px'); + checkTimes(player, [100, 0], [ + [100, 0, 0, 0], [[ // 0 + [101, -1, 0, 1], // 1 + [102, -2, 1, 2]]] // 2 + ], 't = 100'); + tick(101); + assert.equal(getComputedStyle(target).marginLeft, '1px'); + checkTimes(player, [100, 1], [ + [100, 1, 0, 0], [[ // 0 + [101, 0, 0, 1], // 1 + [102, -1, 1, 2]]] // 2 + ], 't = 101'); + tick(102); + assert.equal(getComputedStyle(target).marginLeft, '2px'); + assert.equal(document.timeline.currentTime, 102); + checkTimes(player, [100, 2], [ // FIXME: Implement limiting on group players + [100, 1, 0, 0], [[ // 0 + [101, 1, 0, 1], // 1 + [102, 0, 1, 2]]] // 2 + ], 't = 102'); + tick(103); + assert.equal(getComputedStyle(target).marginLeft, '0px'); + checkTimes(player, [100, 3], [ // FIXME: Implement limiting on group players + [100, 1, 0, 0], [[ // 0 + [101, 1, 0, 1], // 1 + [102, 1, 1, 2]]] // 2 + ], 't = 103'); + target.remove(); + }); + + // FIXME: This test can be removed when this suite is finished. + test('sources are working for basic operations', function() { + var players = []; + players.push(document.timeline.play(this.seqEmpty_source)); + players.push(document.timeline.play(this.seqSimple_source)); + players.push(document.timeline.play(this.seqWithSeq_source)); + players.push(document.timeline.play(this.seqWithGroup_source)); + players.push(document.timeline.play(this.seqWithEmptyGroup_source)); + players.push(document.timeline.play(this.seqWithEmptySeq_source)); + + players.push(document.timeline.play(this.groupEmpty_source)); + players.push(document.timeline.play(this.groupSimple_source)); + players.push(document.timeline.play(this.groupWithSeq_source)); + players.push(document.timeline.play(this.groupWithGroup_source)); + players.push(document.timeline.play(this.groupWithEmptyGroup_source)); + players.push(document.timeline.play(this.groupWithEmptySeq_source)); + + var length = players.length; + + tick(50); + for (var i = 0; i < length; i++) + players[i].pause(); + + tick(100); + for (var i = 0; i < length; i++) + players[i].play(); + + tick(200); + for (var i = 0; i < length; i++) + players[i].currentTime += 1; + + tick(300); + for (var i = 0; i < length; i++) + players[i].startTime += 1; + + tick(350); + for (var i = 0; i < length; i++) + players[i].reverse(); + + tick(400); + for (var i = 0; i < length; i++) + players[i].finish(); + + tick(500); + tick(600); + for (var i = 0; i < length; i++) + players[i].cancel(); + + for (var i = 0; i < length; i++) + players[i].play(); + }); + + test('pausing works as expected with an empty AnimationSequence', function() { + var player = document.timeline.play(this.seqEmpty_source); + tick(0); + assert.equal(player.startTime, 0); + assert.equal(player.currentTime, 0); + + player.pause(); + assert(isNaN(player.startTime)); + assert.equal(player.currentTime, 0); + }); + + test('pausing works as expected with a simple AnimationSequence', function() { + var player = document.timeline.play(this.seqSimple_source); + tick(0); + checkTimes(player, [0, 0], [[0, 0], [500, -500]], 't = 0'); + + tick(200); + checkTimes(player, [0, 200], [[0, 200], [500, -300]], 't = 200'); + + player.pause(); + checkTimes(player, [NaN, 200], [[NaN, 200], [NaN, -300]], 't = 200'); + + tick(300); + checkTimes(player, [NaN, 200], [[NaN, 200], [NaN, -300]], 't = 300'); + + player.play(); + checkTimes(player, [NaN, 200], [[NaN, 200], [NaN, -300]], 't = 300'); + + tick(301); + checkTimes(player, [101, 200], [[101, 200], [601, -300]], 't = 301'); + + tick(700); + checkTimes(player, [101, 599], [[101, 500], [601, 99]], 't = 700'); + }); + + test('pausing works as expected with an AnimationSequence inside an AnimationSequence', function() { + var player = document.timeline.play(this.seqWithSeq_source); + tick(0); + checkTimes( + player, + [0, 0], [ + [0, 0], + [500, -500], [ + [1000, -1000], + [1500, -1500]]], + 't = 0'); + + tick(200); + checkTimes( + player, + [0, 200], [ + [0, 200], + [500, -300], [ + [1000, -800], + [1500, -1300]]], + 't = 200'); + + player.pause(); + checkTimes( + player, + [NaN, 200], [ + [NaN, 200], + [NaN, -300], [ + [NaN, -800], + [NaN, -1300]]], + 't = 200'); + + tick(300); + checkTimes( + player, + [NaN, 200], [ + [NaN, 200], + [NaN, -300], [ + [NaN, -800], + [NaN, -1300]]], + 't = 300'); + + player.play(); + tick(310); + checkTimes( + player, + [110, 200], [ + [110, 200], + [610, -300], [ + [1110, -800], + [1610, -1300]]], + 't = 310'); + + tick(1300); + checkTimes( + player, + [110, 1190], [ + [110, 500], + [610, 500], [ + [1110, 190], + [1610, -310]]], + 't = 1300'); + + player.pause(); + checkTimes( + player, + [NaN, 1190], [ + [NaN, 500], + [NaN, 500], [ + [NaN, 190], + [NaN, -310]]], + 't = 1300'); + + tick(1400); + checkTimes( + player, + [NaN, 1190], [ + [NaN, 500], + [NaN, 500], [ + [NaN, 190], + [NaN, -310]]], + 't = 1400'); + + player.play(); + checkTimes( + player, + [NaN, 1190], [ + [NaN, 500], + [NaN, 500], [ + [NaN, 190], + [NaN, -310]]], + 't = 1400'); + + tick(1410); + checkTimes( + player, + [220, 1190], [ + [220, 500], + [520, 500], [ + [1220, 190], + [1720, -310]]], + 't = 1410'); + + tick(1600); + checkTimes( + player, + [220, 1380], [ + [220, 500], + [720, 500], [ + [1220, 380], + [1720, -120]]], + 't = 1600'); + + player.pause(); + checkTimes( + player, + [NaN, 1380], [ + [NaN, 500], + [NaN, 500], [ + [NaN, 380], + [NaN, -120]]], + 't = 1600'); + + tick(1700); + checkTimes( + player, + [NaN, 1380], [ + [NaN, 500], + [NaN, 500], [ + [NaN, 380], + [NaN, -120]]], + 't = 1700'); + + player.play(); + tick(1710); + checkTimes( + player, + [330, 1380], [ + [330, 500], + [830, 500], [ + [1330, 380], + [1830, -120]]], + 't = 1710'); + + tick(2400); + checkTimes( + player, + [330, 2000], [ + [330, 500], + [830, 500], [ + [1330, 500], + [1830, 500]]], + 't = 2400'); + }); + + test('pausing works as expected with an AnimationGroup inside an AnimationSequence', function() { + tick(0); + var player = document.timeline.play(this.seqWithGroup_source); + + // check: player, + // player.childPlayers[0], + // player.childPlayers[1], + // player.childPlayers[2], + // player.childPlayers[2].childPlayers[0], + // player.childPlayers[2].childPlayers[1] + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + // assert.equal(player.childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[0].currentTime, X); + // assert.equal(player.childPlayers[1].startTime, X); + // assert.equal(player.childPlayers[1].currentTime, X); + // assert.equal(player.childPlayers[2].startTime, X); + // assert.equal(player.childPlayers[2].currentTime, X); + // assert.equal(player.childPlayers[2].childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[2].childPlayers[0].currentTime, X); + // assert.equal(player.childPlayers[2].childPlayers[1].startTime, X); + // assert.equal(player.childPlayers[2].childPlayers[1].currentTime, X); + tick(200); + // check + player.pause(); + // check + tick(300); + // check + player.play(); + tick(300); + // check + tick(1300); + // check + player.pause(); + // check + tick(1400); + // check + player.play(); + tick(1400); + // check + }); + + test('pausing works as expected with an empty AnimationSequence inside an AnimationSequence', function() { + tick(0); + var player = document.timeline.play(this.seqWithEmptySeq_source); + + // check: player, + // player.childPlayers[0] + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + // assert.equal(player.childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[0].currentTime, X); + player.pause(); + // check + }); + + test('pausing works as expected with an empty AnimationGroup inside an AnimationSequence', function() { + tick(0); + var player = document.timeline.play(this.seqWithEmptyGroup_source); + // check: player, + // player.childPlayers[0] + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + // assert.equal(player.childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[0].currentTime, X); + player.pause(); + // check + }); + + test('pausing works as expected with an empty AnimationGroup', function() { + tick(0); + var player = document.timeline.play(this.groupEmpty_source); + // check: player + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + player.pause(); + // check + }); + + test('pausing works as expected with a simple AnimationGroup', function() { + tick(0); + var player = document.timeline.play(this.groupSimple_source); + // check: player, + // player.childPlayers[0], + // player.childPlayers[1] + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + // assert.equal(player.childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[0].currentTime, X); + // assert.equal(player.childPlayers[1].startTime, X); + // assert.equal(player.childPlayers[1].currentTime, X); + tick(200); + // check + player.pause(); + // check + tick(300); + // check + player.play(); + tick(300); + // check + }); + + test('pausing works as expected with an AnimationSequence inside an AnimationGroup', function() { + tick(0); + var player = document.timeline.play(this.groupWithSeq_source); + // check: player, + // player.childPlayers[0], + // player.childPlayers[1], + // player.childPlayers[2], + // player.childPlayers[2].childPlayers[0], + // player.childPlayers[2].childPlayers[1] + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + // assert.equal(player.childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[0].currentTime, X); + // assert.equal(player.childPlayers[1].startTime, X); + // assert.equal(player.childPlayers[1].currentTime, X); + // assert.equal(player.childPlayers[2].startTime, X); + // assert.equal(player.childPlayers[2].currentTime, X); + // assert.equal(player.childPlayers[2].childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[2].childPlayers[0].currentTime, X); + // assert.equal(player.childPlayers[2].childPlayers[1].startTime, X); + // assert.equal(player.childPlayers[2].childPlayers[1].currentTime, X); + tick(200); + // check + player.pause(); + // check + tick(300); + // check + player.play(); + tick(300); + // check + tick(800); + // check + player.pause(); + // check + tick(900); + // check + player.play(); + tick(900); + // check + tick(1300); + // check + player.pause(); + // check + tick(1300); + // check + player.play(); + tick(1400); + // check + }); + + test('pausing works as expected with an AnimationGroup inside an AnimationGroup', function() { + tick(0); + var player = document.timeline.play(this.groupWithGroup_source); + // check: player, + // player.childPlayers[0], + // player.childPlayers[1], + // player.childPlayers[2], + // player.childPlayers[2].childPlayers[0], + // player.childPlayers[2].childPlayers[1] + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + // assert.equal(player.childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[0].currentTime, X); + // assert.equal(player.childPlayers[1].startTime, X); + // assert.equal(player.childPlayers[1].currentTime, X); + // assert.equal(player.childPlayers[2].startTime, X); + // assert.equal(player.childPlayers[2].currentTime, X); + // assert.equal(player.childPlayers[2].childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[2].childPlayers[0].currentTime, X); + // assert.equal(player.childPlayers[2].childPlayers[1].startTime, X); + // assert.equal(player.childPlayers[2].childPlayers[1].currentTime, X); + tick(200); + // check + player.pause(); + // check + tick(300); + // check + player.play(); + tick(300); + // check + }); + + test('pausing works as expected with an empty AnimationSequence inside an AnimationGroup', function() { + tick(0); + var player = document.timeline.play(this.groupWithEmptySeq_source); + // check: player, + // player.childPlayers[0] + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + // assert.equal(player.childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[0].currentTime, X); + player.pause(); + // check + }); + + test('pausing works as expected with an empty AnimationGroup inside an AnimationGroup', function() { + tick(0); + var player = document.timeline.play(this.groupWithEmptyGroup_source); + // check: player, + // player.childPlayers[0] + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + // assert.equal(player.childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[0].currentTime, X); + player.pause(); + // check + }); + + // FIXME: This is just here as a baseline during development. REMOVE. + test('pausing works as expected with a simple Animation', function() { + tick(0); + var target = document.createElement('div'); + var player = document.timeline.play(this.animationMargin(target)); + assert.equal(player.startTime, 0); + assert.equal(player.currentTime, 0); + tick(200); + assert.equal(player.startTime, 0); + assert.equal(player.currentTime, 200); + player.pause(); + assert.equal(player.startTime, null); + assert.equal(player.currentTime, 200); + tick(300); + assert.equal(player.startTime, null); + assert.equal(player.currentTime, 200); + player.play(); + tick(300); + assert.equal(player.startTime, 100); + assert.equal(player.currentTime, 200); + tick(600); + setTicking(true); + assert.equal(player.startTime, 100); + assert.equal(player.currentTime, 500); + }); + + // Test reverse + test('reversing works as expected with an empty AnimationSequence', function() { + tick(0); + var player = document.timeline.play(this.seqEmpty_source); + // check: player + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + player.reverse(); + // check + }); + + test('reversing works as expected with a simple AnimationSequence', function() { + tick(0); + var player = document.timeline.play(this.seqSimple_source); + // check: player, + // player.childPlayers[0], + // player.childPlayers[1] + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + // assert.equal(player.childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[0].currentTime, X); + // assert.equal(player.childPlayers[1].startTime, X); + // assert.equal(player.childPlayers[1].currentTime, X); + tick(200); + // check + player.reverse(); // 200 <- + // check + tick(300); + // check + player.reverse(); // 100 -> + // check + tick(1000); + // check + player.reverse(); // 800 <- + // check + tick(1400); + // check + player.reverse(); // 400 -> + // check + tick(2200); + // check + player.reverse(); // 1000 (finished) <- + // check + tick(3300); + // check + player.reverse(); // 0 (finished) -> + // check + }); + + test('reversing works as expected with an AnimationSequence inside an AnimationSequence', function() { + tick(0); + var player = document.timeline.play(this.seqSimple_source); + // check: player, + // player.childPlayers[0], + // player.childPlayers[1], + // player.childPlayers[2], + // player.childPlayers[2].childPlayers[0], + // player.childPlayers[2].childPlayers[1] + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + // assert.equal(player.childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[0].currentTime, X); + // assert.equal(player.childPlayers[1].startTime, X); + // assert.equal(player.childPlayers[1].currentTime, X); + // assert.equal(player.childPlayers[2].startTime, X); + // assert.equal(player.childPlayers[2].currentTime, X); + // assert.equal(player.childPlayers[2].childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[2].childPlayers[0].currentTime, X); + // assert.equal(player.childPlayers[2].childPlayers[1].startTime, X); + // assert.equal(player.childPlayers[2].childPlayers[1].currentTime, X); + tick(200); + // check + player.reverse(); // 200 <- + // check + tick(300); + // check + player.reverse(); // 100 -> + // check + tick(1000); + // check + player.reverse(); // 800 <- + // check + tick(1400); + // check + player.reverse(); // 400 -> + // check + tick(2400); + // check + player.reverse(); // 1400 <- + // check + tick(2500); + // check + player.reverse(); // 1300 -> + // check + tick(3000); + // check + player.reverse(); // 1800 <- + // check + tick(3100); + // check + player.reverse(); // 1700 -> + // check + tick(3500); + // check + player.reverse(); // 2000 (finished) <- + // check + tick(5600); + // check + player.reverse(); // 0 (finished) -> + // check + }); + + test('reversing works as expected with an AnimationGroup inside an AnimationSequence', function() { + tick(0); + var player = document.timeline.play(this.seqWithGroup_source); + // check: player, + // player.childPlayers[0], + // player.childPlayers[1], + // player.childPlayers[2], + // player.childPlayers[2].childPlayers[0], + // player.childPlayers[2].childPlayers[1] + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + // assert.equal(player.childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[0].currentTime, X); + // assert.equal(player.childPlayers[1].startTime, X); + // assert.equal(player.childPlayers[1].currentTime, X); + // assert.equal(player.childPlayers[2].startTime, X); + // assert.equal(player.childPlayers[2].currentTime, X); + // assert.equal(player.childPlayers[2].childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[2].childPlayers[0].currentTime, X); + // assert.equal(player.childPlayers[2].childPlayers[1].startTime, X); + // assert.equal(player.childPlayers[2].childPlayers[1].currentTime, X); + tick(200); + // check + player.reverse(); // 200 <- + // check + tick(300); + // check + player.reverse(); // 100 -> + // check + tick(1000); + // check + player.reverse(); // 800 <- + // check + tick(1400); + // check + player.reverse(); // 400 -> + // check + tick(2400); + // check + player.reverse(); // 1400 <- + // check + tick(2500); + // check + player.reverse(); // 1300 -> + // check + tick(3000); + // check + player.reverse(); // 1500 (finished) <- + // check + tick(4600); + // check + player.reverse(); // 0 (finished) -> + // check + }); + + test('reversing works as expected with an empty AnimationSequence inside an AnimationSequence', function() { + tick(0); + var player = document.timeline.play(this.seqWithEmptySeq_source); + // check: player, + // player.childPlayers[0] + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + // assert.equal(player.childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[0].currentTime, X); + player.reverse(); + // check + }); + + test('reversing works as expected with an empty AnimationGroup inside an AnimationSequence', function() { + tick(0); + var player = document.timeline.play(this.seqWithEmptyGroup_source); + // check: player, + // player.childPlayers[0] + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + // assert.equal(player.childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[0].currentTime, X); + player.reverse(); + // check + }); + + test('reversing works as expected with an empty AnimationGroup', function() { + tick(0); + var player = document.timeline.play(this.groupEmpty_source); + // check: player + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + player.reverse(); + // check + }); + + test('reversing works as expected with a simple AnimationGroup', function() { + tick(0); + var player = document.timeline.play(this.groupSimple_source); + // check: player, + // player.childPlayers[0], + // player.childPlayers[1] + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + // assert.equal(player.childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[0].currentTime, X); + // assert.equal(player.childPlayers[1].startTime, X); + // assert.equal(player.childPlayers[1].currentTime, X); + tick(200); + // check + player.reverse(); // 200 <- + // check + tick(300); + // check + player.reverse(); // 100 -> + // check + tick(1000); + // check + player.reverse(); // 500 (finished) <- + // check + tick(1600); + // check + player.reverse(); // 0 (finished) -> + // check + }); + + test('reversing works as expected with an AnimationSequence inside an AnimationGroup', function() { + tick(0); + var player = document.timeline.play(this.groupWithSeq_source); + // check: player, + // player.childPlayers[0], + // player.childPlayers[1], + // player.childPlayers[2], + // player.childPlayers[2].childPlayers[0], + // player.childPlayers[2].childPlayers[1] + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + // assert.equal(player.childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[0].currentTime, X); + // assert.equal(player.childPlayers[1].startTime, X); + // assert.equal(player.childPlayers[1].currentTime, X); + // assert.equal(player.childPlayers[2].startTime, X); + // assert.equal(player.childPlayers[2].currentTime, X); + // assert.equal(player.childPlayers[2].childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[2].childPlayers[0].currentTime, X); + // assert.equal(player.childPlayers[2].childPlayers[1].startTime, X); + // assert.equal(player.childPlayers[2].childPlayers[1].currentTime, X); + tick(200); + // check + player.reverse(); // 200 <- + // check + tick(300); + // check + player.reverse(); // 100 -> + // check + tick(1000); + // check + player.reverse(); // 800 <- + // check + tick(1400); + // check + player.reverse(); // 400 -> + // check + tick(2200); + // check + player.reverse(); // 1000 (finished) <- + // check + tick(3300); + // check + player.reverse(); // 0 (finished) -> + // check + }); + + test('reversing works as expected with an AnimationGroup inside an AnimationGroup', function() { + tick(0); + var player = document.timeline.play(this.groupWithGroup_source); + // check: player, + // player.childPlayers[0], + // player.childPlayers[1], + // player.childPlayers[2], + // player.childPlayers[2].childPlayers[0], + // player.childPlayers[2].childPlayers[1] + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + // assert.equal(player.childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[0].currentTime, X); + // assert.equal(player.childPlayers[1].startTime, X); + // assert.equal(player.childPlayers[1].currentTime, X); + // assert.equal(player.childPlayers[2].startTime, X); + // assert.equal(player.childPlayers[2].currentTime, X); + // assert.equal(player.childPlayers[2].childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[2].childPlayers[0].currentTime, X); + // assert.equal(player.childPlayers[2].childPlayers[1].startTime, X); + // assert.equal(player.childPlayers[2].childPlayers[1].currentTime, X); + tick(200); + // check + player.reverse(); // 200 <- + // check + tick(300); + // check + player.reverse(); // 100 -> + // check + tick(1000); + // check + player.reverse(); // 500 (finished) <- + // check + tick(1600); + // check + player.reverse(); // 0 (finished) -> + // check + }); + + test('reversing works as expected with an empty AnimationSequence inside an AnimationGroup', function() { + tick(0); + var player = document.timeline.play(this.groupWithEmptySeq_source); + // check: player, + // player.childPlayers[0] + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + // assert.equal(player.childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[0].currentTime, X); + player.reverse(); + // check + }); + + test('reversing works as expected with an empty AnimationGroup inside an AnimationGroup', function() { + tick(0); + var player = document.timeline.play(this.groupWithEmptyGroup_source); + // check: player, + // player.childPlayers[0] + // assert.equal(player.startTime, X); + // assert.equal(player.currentTime, X); + // assert.equal(player.childPlayers[0].startTime, X); + // assert.equal(player.childPlayers[0].currentTime, X); + player.reverse(); + // check + }); + // FIXME: Also test reversing while paused? +}); diff --git a/test/js/group-player.js b/test/js/group-player.js index 1b343b3..90c6fcb 100644 --- a/test/js/group-player.js +++ b/test/js/group-player.js @@ -43,9 +43,14 @@ suite('group-player', function() { ]); }; + var animSimple_target = document.createElement('div'); + this.elements.push(animSimple_target); + var animSimple_source = animationColor(animSimple_target); + var seqEmpty_source = sequenceEmpty(); var seqSimple_target = document.createElement('div'); + this.elements.push(seqSimple_target); var seqSimple_source = sequenceWithEffects(seqSimple_target); var seqWithSeq_target = document.createElement('div'); @@ -72,6 +77,7 @@ suite('group-player', function() { var groupEmpty_source = groupEmpty(); var groupSimple_target = document.createElement('div'); + this.elements.push(groupSimple_target); var groupSimple_source = groupWithEffects(groupSimple_target); var groupWithSeq_target = document.createElement('div'); @@ -95,6 +101,8 @@ suite('group-player', function() { var groupWithEmptyGroup_source = new AnimationGroup([groupEmpty()]); var groupWithEmptySeq_source = new AnimationGroup([sequenceEmpty()]); + this.animSimple_source = animSimple_source; + this.seqEmpty_source = seqEmpty_source; this.seqSimple_source = seqSimple_source; this.seqWithSeq_source = seqWithSeq_source; @@ -460,6 +468,7 @@ suite('group-player', function() { // assert.equal(getComputedStyle(this.target).marginLeft, '0px'); }); + // START RENEE'S TESTS. // FIXME: This test can be removed when this suite is finished. test('sources are working for basic operations', function() { var players = []; @@ -543,10 +552,22 @@ suite('group-player', function() { tick(301); checkTimes(player, [101, 200], [[101, 200], [601, -300]], 't = 301'); - tick(700); - checkTimes(player, [101, 599], [[101, 500], [601, 99]], 't = 700'); + tick(701); + checkTimes(player, [101, 600], [[101, 500], [601, 100]], 't = 701'); + + player.pause(); + tick(711); + checkTimes(player, [NaN, 600], [[NaN, 500], [NaN, 100]], 't = 711'); + + player.play(); + tick(721); + checkTimes(player, [121, 600], [[121, 500], [621, 100]], 't = 721'); + + tick(1321); + checkTimes(player, [121, 1000], [[121, 500], [621, 500]], 't = 1321'); }); + // FIXME: This test fails because of a known issue. test('pausing works as expected with an AnimationSequence inside an AnimationSequence', function() { var player = document.timeline.play(this.seqWithSeq_source); tick(0); @@ -691,14 +712,48 @@ suite('group-player', function() { [1830, -120]]], 't = 1710'); - tick(2400); + // These steps finish (2, 0) but don't finish (2, 1). This (somehow) causes the currentTime of + // (2, 0) to advance past its duration after it has been paused and unpaused. + tick(1840); checkTimes( player, - [330, 2000], [ + [330, 1510], [ [330, 500], [830, 500], [ [1330, 500], - [1830, 500]]], + [1830, 10]]], + 't = 1840'); + + player.pause(); + tick(1850); + checkTimes( + player, + [NaN, 1510], [ + [NaN, 500], + [NaN, 500], [ + [NaN, 500], + [NaN, 10]]], + 't = 1850'); + + player.play(); + tick(1860); + checkTimes( + player, + [350, 1510], [ + [350, 500], + [850, 500], [ + [1350, 500], // FIXME: This check fails because of a known issue. + [1850, 10]]], + 't = 1850'); + + tick(2400); + checkTimes( + player, + [350, 2000], [ + [350, 500], + [850, 500], [ + [1350, 500], // FIXME: This check fails because of a known issue. + [1850, 500]]], 't = 2400'); }); @@ -914,4 +969,266 @@ suite('group-player', function() { assert.equal(p._childPlayers[0]._player.playState, 'finished'); assert.equal(p._childPlayers[1]._player.playState, 'finished'); }); + + test('pausing works as expected with an empty AnimationGroup', function() { + var player = document.timeline.play(this.groupEmpty_source); + tick(0); + assert.equal(player.startTime, 0); + assert.equal(player.currentTime, 0); + + player.pause(); + assert(isNaN(player.startTime)); + assert.equal(player.currentTime, 0); + }); + + test('pausing works as expected with a simple AnimationGroup', function() { + var player = document.timeline.play(this.groupSimple_source); + tick(0); + checkTimes(player, [0, 0], [[0, 0], [0, 0]], 't = 0'); + + tick(200); + checkTimes(player, [0, 200], [[0, 200], [0, 200]], 't = 200'); + + player.pause(); + checkTimes(player, [NaN, 200], [[NaN, 200], [NaN, 200]], 't = 200'); + + tick(300); + checkTimes(player, [NaN, 200], [[NaN, 200], [NaN, 200]], 't = 300'); + + player.play(); + tick(301); + checkTimes(player, [101, 200], [[101, 200], [101, 200]], 't = 301'); + + tick(601); + checkTimes(player, [101, 500], [[101, 500], [101, 500]], 't = 601'); + + player.pause(); + checkTimes(player, [NaN, 500], [[NaN, 500], [NaN, 500]], 't = 601'); + + player.play(); + tick(602); + checkTimes(player, [602, 0], [[602, 0], [602, 0]], 't = 602'); + }); + + // FIXME: This test fails because of a known issue. + test('pausing works as expected with an AnimationSequence inside an AnimationGroup', function() { + var player = document.timeline.play(this.groupWithSeq_source); + tick(0); + checkTimes( + player, + [0, 0], [ + [0, 0], + [0, 0], [ + [0, 0], + [500, -500]]], + 't = 0'); + + tick(200); + checkTimes( + player, + [0, 200], [ + [0, 200], + [0, 200], [ + [0, 200], + [500, -300]]], + 't = 200'); + + player.pause(); + checkTimes( + player, + [NaN, 200], [ + [NaN, 200], + [NaN, 200], [ + [NaN, 200], + [NaN, -300]]], + 't = 200'); + + tick(310); + checkTimes( + player, + [NaN, 200], [ + [NaN, 200], + [NaN, 200], [ + [NaN, 200], + [NaN, -300]]], + 't = 310'); + + player.play(); + tick(320); + checkTimes( + player, + [120, 200], [ + [120, 200], + [120, 200], [ + [120, 200], + [620, -300]]], + 't = 320'); + + tick(800); + checkTimes( + player, + [120, 680], [ + [120, 500], + [120, 500], [ + [120, 500], + [620, 180]]], + 't = 800'); + + player.pause(); + checkTimes( + player, + [NaN, 680], [ + [NaN, 500], + [NaN, 500], [ + [NaN, 500], + [NaN, 180]]], + 't = 800'); + + tick(900); + checkTimes( + player, + [NaN, 680], [ + [NaN, 500], + [NaN, 500], [ + [NaN, 500], + [NaN, 180]]], + 't = 900'); + + player.play(); + tick(910); + checkTimes( + player, + [230, 680], [ + [230, 500], + [230, 500], [ + [230, 500], // FIXME: This check fails because of a known issue. + [730, 180]]], + 't = 910'); + + tick(1300); + checkTimes( + player, + [230, 1000], [ + [230, 500], + [230, 500], [ + [230, 500], // FIXME: This check fails because of a known issue. + [730, 500]]], + 't = 1300'); + + player.pause(); + checkTimes( + player, + [NaN, 1000], [ + [NaN, 500], + [NaN, 500], [ + [NaN, 500], // FIXME: This check fails because of a known issue. + [NaN, 500]]], + 't = 1300'); + + tick(1310); + checkTimes( + player, + [NaN, 1000], [ + [NaN, 500], + [NaN, 500], [ + [NaN, 500], // FIXME: This check fails because of a known issue. + [NaN, 500]]], + 't = 1310'); + + player.play(); + tick(1400); + checkTimes( + player, + [1400, 0], [ + [1400, 0], + [1400, 0], [ + [1400, 0], + [1900, -500]]], + 't = 1400'); + }); + + // test('pausing works as expected with an AnimationGroup inside an AnimationGroup', function() { + // tick(0); + // var player = document.timeline.play(this.groupWithGroup_source); + // // check: player, + // // player.childPlayers[0], + // // player.childPlayers[1], + // // player.childPlayers[2], + // // player.childPlayers[2].childPlayers[0], + // // player.childPlayers[2].childPlayers[1] + // // assert.equal(player.startTime, X); + // // assert.equal(player.currentTime, X); + // // assert.equal(player.childPlayers[0].startTime, X); + // // assert.equal(player.childPlayers[0].currentTime, X); + // // assert.equal(player.childPlayers[1].startTime, X); + // // assert.equal(player.childPlayers[1].currentTime, X); + // // assert.equal(player.childPlayers[2].startTime, X); + // // assert.equal(player.childPlayers[2].currentTime, X); + // // assert.equal(player.childPlayers[2].childPlayers[0].startTime, X); + // // assert.equal(player.childPlayers[2].childPlayers[0].currentTime, X); + // // assert.equal(player.childPlayers[2].childPlayers[1].startTime, X); + // // assert.equal(player.childPlayers[2].childPlayers[1].currentTime, X); + // tick(200); + // // check + // player.pause(); + // // check + // tick(300); + // // check + // player.play(); + // tick(300); + // // check + // }); + + // test('pausing works as expected with an empty AnimationSequence inside an AnimationGroup', function() { + // tick(0); + // var player = document.timeline.play(this.groupWithEmptySeq_source); + // // check: player, + // // player.childPlayers[0] + // // assert.equal(player.startTime, X); + // // assert.equal(player.currentTime, X); + // // assert.equal(player.childPlayers[0].startTime, X); + // // assert.equal(player.childPlayers[0].currentTime, X); + // player.pause(); + // // check + // }); + + // test('pausing works as expected with an empty AnimationGroup inside an AnimationGroup', function() { + // tick(0); + // var player = document.timeline.play(this.groupWithEmptyGroup_source); + // // check: player, + // // player.childPlayers[0] + // // assert.equal(player.startTime, X); + // // assert.equal(player.currentTime, X); + // // assert.equal(player.childPlayers[0].startTime, X); + // // assert.equal(player.childPlayers[0].currentTime, X); + // player.pause(); + // // check + // }); + + // // FIXME: This is just here as a baseline during development. REMOVE. + // test('pausing works as expected with a simple Animation', function() { + // tick(0); + // var target = document.createElement('div'); + // var player = document.timeline.play(this.animationMargin(target)); + // assert.equal(player.startTime, 0); + // assert.equal(player.currentTime, 0); + // tick(200); + // assert.equal(player.startTime, 0); + // assert.equal(player.currentTime, 200); + // player.pause(); + // assert.equal(player.startTime, null); + // assert.equal(player.currentTime, 200); + // tick(300); + // assert.equal(player.startTime, null); + // assert.equal(player.currentTime, 200); + // player.play(); + // tick(300); + // assert.equal(player.startTime, 100); + // assert.equal(player.currentTime, 200); + // tick(600); + // setTicking(true); + // assert.equal(player.startTime, 100); + // assert.equal(player.currentTime, 500); + // }); + }); diff --git a/test/js/tick-after-pause-bug.js b/test/js/tick-after-pause-bug.js new file mode 100644 index 0000000..85a15cc --- /dev/null +++ b/test/js/tick-after-pause-bug.js @@ -0,0 +1,60 @@ +suite('tick-after-pause-bug', function() { + test('pause-tick-play-tick does not advance the current time', function() { + var player = document.timeline.play( + new Animation( + document.createElement('div'), + [ + {backgroundColor: 'black'}, + {backgroundColor: 'white'} + ], + 500 + ) + ); + tick(0); + assert.equal(player.startTime, 0); + assert.equal(player.currentTime, 0); + + player.pause(); + tick(400) // Tick! + assert(isNaN(player.startTime)); + assert.equal(player.currentTime, 0); + + player.play(); + tick(402); + assert.equal(player.startTime, 402); + assert.equal(player.currentTime, 0); // Current time has NOT changed. + + tick(410); + assert.equal(player.startTime, 402); + assert.equal(player.currentTime, 8); + }); + + test('pause-play-tick advances currentTime.', function() { + var player = document.timeline.play( + new Animation( + document.createElement('div'), + [ + {backgroundColor: 'black'}, + {backgroundColor: 'white'} + ], + 500 + ) + ); + tick(0); + assert.equal(player.startTime, 0); + assert.equal(player.currentTime, 0); + + player.pause(); // No tick. + assert(isNaN(player.startTime)); + assert.equal(player.currentTime, 0); + + player.play(); + tick(402); + assert.equal(player.startTime, 0); + assert.equal(player.currentTime, 402); // Current time has changed. + + tick(410); + assert.equal(player.startTime, 0); + assert.equal(player.currentTime, 410); + }); +}); From 8109d0dd4378a852793746bfb55d079b8d1af644 Mon Sep 17 00:00:00 2001 From: rjwright Date: Thu, 17 Jul 2014 13:18:25 +1000 Subject: [PATCH 2/5] Cleaned up after adding more group pause tests. --- .../js/child-player-pause-after-finish-bug.js | 217 ---- test/js/group-player-skeleton-tests.js | 1140 ----------------- test/js/group-player.js | 104 +- test/js/tick-after-pause-bug.js | 60 - 4 files changed, 11 insertions(+), 1510 deletions(-) delete mode 100644 test/js/child-player-pause-after-finish-bug.js delete mode 100644 test/js/group-player-skeleton-tests.js delete mode 100644 test/js/tick-after-pause-bug.js diff --git a/test/js/child-player-pause-after-finish-bug.js b/test/js/child-player-pause-after-finish-bug.js deleted file mode 100644 index dd2d07a..0000000 --- a/test/js/child-player-pause-after-finish-bug.js +++ /dev/null @@ -1,217 +0,0 @@ - -suite('child-player-pause-after-finish-bug', function() { - setup(function() { - document.timeline._players = []; - this.elements = []; - var animationMargin = function(target) { - return new Animation( - target, - [ - {marginLeft: '0px'}, - {marginLeft: '100px'} - ], - 500); - }; - var animationColor = function(target) { - return new Animation( - target, - [ - {backgroundColor: 'black'}, - {backgroundColor: 'white'} - ], - 500); - }; - var sequenceWithEffects = function(target) { - return new AnimationSequence( - [ - animationMargin(target), - animationColor(target) - ]); - }; - var seqSimple_target = document.createElement('div'); - this.elements.push(seqSimple_target); - var seqSimple_source = sequenceWithEffects(seqSimple_target); - - var animSimple_target = document.createElement('div'); - this.elements.push(animSimple_target); - var animSimple_source = animationColor(animSimple_target); - - this.animSimple_source = animSimple_source; - this.seqSimple_source = seqSimple_source; - }); - - teardown(function() { - for (var i = 0; i < this.elements.length; i++) { - if (this.elements[i].parent) - this.elements[i].parent.removeChild(this.elements[i]); - } - }); - - function checkTimes(player, playerState, innerPlayerStates, description) { - description = description ? (description + ' ') : ''; - _checkTimes(player, playerState, 0, description + 'top player'); - _checkTimes(player, innerPlayerStates, 0, description + 'inner player'); - } - - function _checkTimes(player, timingList, index, trace) { - assert.isDefined(player, trace + ' exists'); - if (timingList.length == 0) { - assert.equal(player._childPlayers.length, index, trace + ' no remaining players'); - return; - } - if (typeof timingList[0] == 'number') { - if (isNaN(timingList[0])) - assert.ok(isNaN(player.startTime), trace + 'expected NaN startTime'); - else - assert.equal(player.startTime, timingList[0], trace + ' startTime'); - assert.equal(player.currentTime, timingList[1], trace + ' currentTime'); - } else { - _checkTimes(player._childPlayers[index], timingList[0], 0, trace + ' ' + index); - _checkTimes(player, timingList.slice(1), index + 1, trace); - } - } - - test('Simple AnimationSequence', function() { - var player = document.timeline.play(this.seqSimple_source); - tick(0); - checkTimes(player, [0, 0], [[0, 0], [500, -500]], 't = 0'); - - // Tick so that 0 is finished and 1 is started. - tick(700); - checkTimes(player, [0, 700], [[0, 500], [500, 200]], 't = 700'); - - // Pause, and tick a small amount. - player.pause(); - tick(710); - checkTimes(player, [NaN, 700], [[NaN, 500], [NaN, 200]], 't = 710'); - - // Play and tick a small amount (this should do nothing to the currentTime). - player.play(); - tick(720); - checkTimes(player, [20, 700], [[20, 500], [520, 200]], 't = 720'); - - // Tick so that the while group is finished. - tick(1320); - checkTimes(player, [20, 1000], [[20, 500], [520, 500]], 't = 1320'); - }); - - test('AnimationSequence wrapped in an AnimationGroup', function() { - var player = document.timeline.play(new AnimationGroup([this.seqSimple_source])); - tick(0); - checkTimes(player, [0, 0], [[[0, 0], [500, -500]]], 't = 0'); - - // Tick so that 0 is finished and 1 is started. - tick(700); - checkTimes(player, [0, 700], [[[0, 500], [500, 200]]], 't = 700'); - - // Pause, and tick a small amount. - player.pause(); - tick(710); - checkTimes(player, [NaN, 700], [[[NaN, 500], [NaN, 200]]], 't = 710'); - - // Play and tick a small amount (this should do nothing to the currentTime). - player.play(); - tick(720); - checkTimes(player, [20, 700], [[[20, 500], [520, 200]]], 't = 720'); - - // Tick so that the while group is finished. - tick(1320); - checkTimes(player, [20, 1000], [[[20, 500], [520, 500]]], 't = 1320'); - }); - - test('AnimationSequence wrapped in an AnimationSequence', function() { - var player = document.timeline.play(new AnimationSequence([this.seqSimple_source])); - tick(0); - checkTimes(player, [0, 0], [[[0, 0], [500, -500]]], 't = 0'); - - // Tick so that 0 is finished and 1 is started. - tick(700); - checkTimes(player, [0, 700], [[[0, 500], [500, 200]]], 't = 700'); - - // Pause, and tick a small amount. - player.pause(); - tick(710); - checkTimes(player, [NaN, 700], [[[NaN, 500], [NaN, 200]]], 't = 710'); - - // Play and tick a small amount (this should do nothing to the currentTime). - player.play(); - tick(720); - checkTimes(player, [20, 700], [[[20, 500], [520, 200]]], 't = 720'); - - // Tick so that the while group is finished. - tick(1320); - checkTimes(player, [20, 1000], [[[20, 500], [520, 500]]], 't = 1320'); - }); - - test('AnimationSequence which is the first child in an AnimationSequence', function() { - var player = document.timeline.play(new AnimationSequence([this.seqSimple_source, this.animSimple_source])); - tick(0); - checkTimes(player, [0, 0], [[[0, 0], [500, -500]], [1000, -1000]], 't = 0'); - - // Tick so that seq is finished, and last child is started. - tick(1200); - checkTimes(player, [0, 1200], [[[0, 500], [500, 500]], [1000, 200]], 't = 1200'); - - // Pause, and tick a small amount. - player.pause(); - tick(1300); - checkTimes(player, [NaN, 1200], [[[NaN, 500], [NaN, 500]], [NaN, 200]], 't = 1300'); - - // Play and tick a small amount (this should do nothing to the currentTime). - player.play(); - tick(1400); - checkTimes(player, [200, 1200], [[[200, 500], [700, 500]], [1200, 200]], 't = 1400'); - - // Tick so that the while group is finished. - tick(1800); - checkTimes(player, [200, 1500], [[[200, 500], [700, 500]], [1200, 500]], 't = 1800'); - }); - - - test('AnimationGroup wrapped in an AnimationGroup', function() { - var target = document.createElement('div'); - var player = document.timeline.play( - new AnimationGroup( - [ - new AnimationGroup( - [ - new Animation( - target, - [ - {backgroundColor: 'blue'}, - {backgroundColor: 'red'} - ], - 500 - ), - new Animation( - target, - [ - {backgroundColor: 'blue'}, - {backgroundColor: 'red'} - ], - 1000 - ), - ]) - ])); - tick(0); - checkTimes(player, [0, 0], [[[0, 0], [0, 0]]], 't = 0'); - - // Tick so that 0 is finished and 1 is started. - tick(700); - checkTimes(player, [0, 700], [[[0, 500], [0, 700]]], 't = 700'); - - // Pause, and tick a small amount. - player.pause(); - tick(710); - checkTimes(player, [NaN, 700], [[[NaN, 500], [NaN, 700]]], 't = 710'); - - // Play and tick a small amount (this should do nothing to the currentTime). - player.play(); - tick(720); - checkTimes(player, [20, 700], [[[20, 500], [20, 700]]], 't = 720'); - - // Tick so that the while group is finished. - tick(1320); - checkTimes(player, [20, 1000], [[[20, 500], [20, 1000]]], 't = 1320'); - }); -}); diff --git a/test/js/group-player-skeleton-tests.js b/test/js/group-player-skeleton-tests.js deleted file mode 100644 index 34c0239..0000000 --- a/test/js/group-player-skeleton-tests.js +++ /dev/null @@ -1,1140 +0,0 @@ -suite('group-player', function() { - setup(function() { - document.timeline.players = []; - this.elements = []; - - var animationMargin = function(target) { - return new Animation( - target, - [ - {marginLeft: '0px'}, - {marginLeft: '100px'} - ], - 500); - }; - - // FIXME: Remove. Used for testing pause on simple Animations during dev of this test. - this.animationMargin = animationMargin; - - var animationColor = function(target) { - return new Animation( - target, - [ - {backgroundColor: 'black'}, - {backgroundColor: 'white'} - ], - 500); - }; - var sequenceEmpty = function() { - return new AnimationSequence(); - }; - var groupEmpty = function() { - return new AnimationGroup(); - }; - var sequenceWithEffects = function(target) { - return new AnimationSequence( - [ - animationMargin(target), - animationColor(target) - ]); - }; - var groupWithEffects = function(target) { - return new AnimationGroup( - [ - animationMargin(target), - animationColor(target) - ]); - }; - - var seqEmpty_source = sequenceEmpty(); - - var seqSimple_target = document.createElement('div'); - var seqSimple_source = sequenceWithEffects(seqSimple_target); - - var seqWithSeq_target = document.createElement('div'); - this.elements.push(seqWithSeq_target); - var seqWithSeq_source = new AnimationSequence( - [ - animationMargin(seqWithSeq_target), - animationColor(seqWithSeq_target), - sequenceWithEffects(seqWithSeq_target) - ]); - - var seqWithGroup_target = document.createElement('div'); - this.elements.push(seqWithGroup_target); - var seqWithGroup_source = new AnimationSequence( - [ - animationMargin(seqWithGroup_target), - animationColor(seqWithGroup_target), - groupWithEffects(seqWithGroup_target) - ]); - - var seqWithEmptyGroup_source = new AnimationSequence([groupEmpty()]); - var seqWithEmptySeq_source = new AnimationSequence([sequenceEmpty()]); - - var groupEmpty_source = groupEmpty(); - - var groupSimple_target = document.createElement('div'); - var groupSimple_source = groupWithEffects(groupSimple_target); - - var groupWithSeq_target = document.createElement('div'); - this.elements.push(groupWithSeq_target); - var groupWithSeq_source = new AnimationGroup( - [ - animationMargin(groupWithSeq_target), - animationColor(groupWithSeq_target), - sequenceWithEffects(groupWithSeq_target) - ]); - - var groupWithGroup_target = document.createElement('div'); - this.elements.push(groupWithGroup_target); - var groupWithGroup_source = new AnimationGroup( - [ - animationMargin(groupWithGroup_target), - animationColor(groupWithGroup_target), - groupWithEffects(groupWithGroup_target) - ]); - - var groupWithEmptyGroup_source = new AnimationGroup([groupEmpty()]); - var groupWithEmptySeq_source = new AnimationGroup([sequenceEmpty()]); - - this.seqEmpty_source = seqEmpty_source; - this.seqSimple_source = seqSimple_source; - this.seqWithSeq_source = seqWithSeq_source; - this.seqWithGroup_source = seqWithGroup_source; - this.seqWithEmptyGroup_source = seqWithEmptyGroup_source; - this.seqWithEmptySeq_source = seqWithEmptySeq_source; - - this.groupEmpty_source = groupEmpty_source; - this.groupSimple_source = groupSimple_source; - this.groupWithSeq_source = groupWithSeq_source; - this.groupWithGroup_source = groupWithGroup_source; - this.groupWithEmptyGroup_source = groupWithEmptyGroup_source; - this.groupWithEmptySeq_source = groupWithEmptySeq_source; - - var staticAnimation = function(target, value, duration) { - return new Animation(target, [{marginLeft: value}, {marginLeft: value}], duration); - }; - // The following animation structure looks like: - // 44444 - // 11 - // 33 - // 2 - // 0 - this.complexTarget = document.createElement('div'); - this.elements.push(this.complexTarget); - this.complexSource = new AnimationGroup([ - staticAnimation(this.complexTarget, '4px', 5), - new AnimationSequence([ - staticAnimation(this.complexTarget, '1px', 2), - new AnimationGroup([ - staticAnimation(this.complexTarget, '3px', 2), - staticAnimation(this.complexTarget, '2px', 1), - ]), - ]), - staticAnimation(this.complexTarget, '0px', 1), - ]); - - for (var i = 0; i < this.elements.length; i++) - document.documentElement.appendChild(this.elements[i]); - }); - - teardown(function() { - for (var i = 0; i < this.elements.length; i++) - this.elements[i].remove(); - }); - - function simpleAnimationGroup() { - return new AnimationGroup([new Animation(document.body, [], 2000), new Animation(document.body, [], 1000), new Animation(document.body, [], 3000)]); - } - - function simpleAnimationSequence() { - return new AnimationSequence([new Animation(document.body, [], 2000), new Animation(document.body, [], 1000), new Animation(document.body, [], 3000)]); - } - - // FIXME: Remove _startOffset. - // playerState is [startTime, currentTime, _startOffset?, offset?] - // innerPlayerStates is a nested array tree of playerStates e.g. [[0, 0], [[1, -1], [2, -2]]] - function checkTimes(player, playerState, innerPlayerStates, description) { - description = description ? (description + ' ') : ''; - _checkTimes(player, playerState, 0, description + 'top player'); - _checkTimes(player, innerPlayerStates, 0, description + 'inner player'); - } - - function _checkTimes(player, timingList, index, trace) { - assert.isDefined(player, trace + ' exists'); - if (timingList.length == 0) { - assert.equal(player._childPlayers.length, index, trace + ' no remaining players'); - return; - } - if (typeof timingList[0] == 'number') { - // if (isNaN(player._startTime)) - // assert.ok(isNaN(timingList[0])); - if (isNaN(timingList[0])) - assert.ok(isNaN(player._startTime), trace + 'expected NaN startTime'); - else - assert.equal(player._startTime, timingList[0], trace + ' startTime'); - assert.equal(player.currentTime, timingList[1], trace + ' currentTime'); - } else { - _checkTimes(player._childPlayers[index], timingList[0], 0, trace + ' ' + index); - _checkTimes(player, timingList.slice(1), index + 1, trace); - } - } - - test('playing an animationGroup works as expected', function() { - tick(90); - var p = document.timeline.play(simpleAnimationGroup()); - checkTimes(p, [NaN, 0], []); - tick(100); - checkTimes(p, [100, 0], [[100, 0], [100, 0], [100, 0]]); - tick(300); - checkTimes(p, [100, 200], [[100, 200], [100, 200], [100, 200]]); - tick(1200); - checkTimes(p, [100, 1100], [[100, 1100], [100, 1000], [100, 1100]]); - tick(2200); - checkTimes(p, [100, 2100], [[100, 2000], [100, 1000], [100, 2100]]); - tick(3200); - checkTimes(p, [100, 3000], [[100, 2000], [100, 1000], [100, 3000]]); - }); - - test('playing an animationSequence works as expected', function() { - tick(100); - var p = document.timeline.play(simpleAnimationSequence()); - tick(110); - checkTimes(p, [110, 0], [[110, 0], [2110, -2000], [3110, -3000]]); - tick(210); - checkTimes(p, [110, 100], [[110, 100], [2110, -1900], [3110, -2900]]); - }); - - test('complex animation tree timing while playing', function() { - tick(90); - var player = document.timeline.play(this.complexSource); - tick(100); - checkTimes(player, [100, 0], [ - [100, 0], [ // 4 - [100, 0], [ // 1 - [102, -2], // 3 - [102, -2]]], // 2 - [100, 0], // 0 - ], 't = 100'); - tick(101); - checkTimes(player, [100, 1], [ - [100, 1], [ // 4 - [100, 1], [ // 1 - [102, -1], // 3 - [102, -1]]], // 2 - [100, 1], // 0 - ], 't = 101'); - tick(102); - checkTimes(player, [100, 2], [ - [100, 2], [ // 4 - [100, 2], [ // 1 - [102, 0], // 3 - [102, 0]]], // 2 - [100, 1], // 0 - ], 't = 102'); - }); - - test('effects apply in the correct order', function() { - tick(0); - var player = document.timeline.play(this.complexSource); - player.currentTime = 0; - assert.equal(getComputedStyle(this.complexTarget).marginLeft, '0px'); - player.currentTime = 1; - checkTimes(player, [-1, 1], [[-1, 1, 0], [[-1, 1, 0], [[1, -1, 0], [1, -1, 0]]], [-1, 1, 0]]); - assert.equal(getComputedStyle(this.complexTarget).marginLeft, '1px'); - player.currentTime = 2; - // TODO: When we seek we don't limit. Is this OK? - checkTimes(player, [-2, 2], [[-2, 2, 0], [[-2, 2, 0], [[0, 0, 0], [0, 0, 0]]], [-2, 2, 0]]); - assert.equal(getComputedStyle(this.complexTarget).marginLeft, '2px'); - player.currentTime = 3; - assert.equal(getComputedStyle(this.complexTarget).marginLeft, '3px'); - player.currentTime = 4; - assert.equal(getComputedStyle(this.complexTarget).marginLeft, '4px'); - player.currentTime = 5; - assert.equal(getComputedStyle(this.complexTarget).marginLeft, '0px'); - }); - - test('cancelling group players', function() { - tick(0); - var player = document.timeline.play(this.complexSource); - tick(1); - tick(4); - assert.equal(getComputedStyle(this.complexTarget).marginLeft, '3px'); - player.cancel(); - assert.equal(player.currentTime, 0); - assert.equal(getComputedStyle(this.complexTarget).marginLeft, '0px'); - }); - - test('redundant animation node wrapping', function() { - var target = document.createElement('div'); - document.documentElement.appendChild(target); - function createAnimation(value, duration) { - return new Animation(target, [{marginLeft: value}, {marginLeft: value}], duration); - } - tick(100); - var animation = new AnimationSequence([ - createAnimation('0px', 1), - new AnimationGroup([ - new AnimationSequence([ - createAnimation('1px', 1), - createAnimation('2px', 1), - ]), - ]), - ]); - var player = document.timeline.play(animation); - assert.equal(getComputedStyle(target).marginLeft, '0px'); - checkTimes(player, [100, 0], [ - [100, 0, 0, 0], [[ // 0 - [101, -1, 0, 1], // 1 - [102, -2, 1, 2]]] // 2 - ], 't = 100'); - tick(101); - assert.equal(getComputedStyle(target).marginLeft, '1px'); - checkTimes(player, [100, 1], [ - [100, 1, 0, 0], [[ // 0 - [101, 0, 0, 1], // 1 - [102, -1, 1, 2]]] // 2 - ], 't = 101'); - tick(102); - assert.equal(getComputedStyle(target).marginLeft, '2px'); - assert.equal(document.timeline.currentTime, 102); - checkTimes(player, [100, 2], [ // FIXME: Implement limiting on group players - [100, 1, 0, 0], [[ // 0 - [101, 1, 0, 1], // 1 - [102, 0, 1, 2]]] // 2 - ], 't = 102'); - tick(103); - assert.equal(getComputedStyle(target).marginLeft, '0px'); - checkTimes(player, [100, 3], [ // FIXME: Implement limiting on group players - [100, 1, 0, 0], [[ // 0 - [101, 1, 0, 1], // 1 - [102, 1, 1, 2]]] // 2 - ], 't = 103'); - target.remove(); - }); - - // FIXME: This test can be removed when this suite is finished. - test('sources are working for basic operations', function() { - var players = []; - players.push(document.timeline.play(this.seqEmpty_source)); - players.push(document.timeline.play(this.seqSimple_source)); - players.push(document.timeline.play(this.seqWithSeq_source)); - players.push(document.timeline.play(this.seqWithGroup_source)); - players.push(document.timeline.play(this.seqWithEmptyGroup_source)); - players.push(document.timeline.play(this.seqWithEmptySeq_source)); - - players.push(document.timeline.play(this.groupEmpty_source)); - players.push(document.timeline.play(this.groupSimple_source)); - players.push(document.timeline.play(this.groupWithSeq_source)); - players.push(document.timeline.play(this.groupWithGroup_source)); - players.push(document.timeline.play(this.groupWithEmptyGroup_source)); - players.push(document.timeline.play(this.groupWithEmptySeq_source)); - - var length = players.length; - - tick(50); - for (var i = 0; i < length; i++) - players[i].pause(); - - tick(100); - for (var i = 0; i < length; i++) - players[i].play(); - - tick(200); - for (var i = 0; i < length; i++) - players[i].currentTime += 1; - - tick(300); - for (var i = 0; i < length; i++) - players[i].startTime += 1; - - tick(350); - for (var i = 0; i < length; i++) - players[i].reverse(); - - tick(400); - for (var i = 0; i < length; i++) - players[i].finish(); - - tick(500); - tick(600); - for (var i = 0; i < length; i++) - players[i].cancel(); - - for (var i = 0; i < length; i++) - players[i].play(); - }); - - test('pausing works as expected with an empty AnimationSequence', function() { - var player = document.timeline.play(this.seqEmpty_source); - tick(0); - assert.equal(player.startTime, 0); - assert.equal(player.currentTime, 0); - - player.pause(); - assert(isNaN(player.startTime)); - assert.equal(player.currentTime, 0); - }); - - test('pausing works as expected with a simple AnimationSequence', function() { - var player = document.timeline.play(this.seqSimple_source); - tick(0); - checkTimes(player, [0, 0], [[0, 0], [500, -500]], 't = 0'); - - tick(200); - checkTimes(player, [0, 200], [[0, 200], [500, -300]], 't = 200'); - - player.pause(); - checkTimes(player, [NaN, 200], [[NaN, 200], [NaN, -300]], 't = 200'); - - tick(300); - checkTimes(player, [NaN, 200], [[NaN, 200], [NaN, -300]], 't = 300'); - - player.play(); - checkTimes(player, [NaN, 200], [[NaN, 200], [NaN, -300]], 't = 300'); - - tick(301); - checkTimes(player, [101, 200], [[101, 200], [601, -300]], 't = 301'); - - tick(700); - checkTimes(player, [101, 599], [[101, 500], [601, 99]], 't = 700'); - }); - - test('pausing works as expected with an AnimationSequence inside an AnimationSequence', function() { - var player = document.timeline.play(this.seqWithSeq_source); - tick(0); - checkTimes( - player, - [0, 0], [ - [0, 0], - [500, -500], [ - [1000, -1000], - [1500, -1500]]], - 't = 0'); - - tick(200); - checkTimes( - player, - [0, 200], [ - [0, 200], - [500, -300], [ - [1000, -800], - [1500, -1300]]], - 't = 200'); - - player.pause(); - checkTimes( - player, - [NaN, 200], [ - [NaN, 200], - [NaN, -300], [ - [NaN, -800], - [NaN, -1300]]], - 't = 200'); - - tick(300); - checkTimes( - player, - [NaN, 200], [ - [NaN, 200], - [NaN, -300], [ - [NaN, -800], - [NaN, -1300]]], - 't = 300'); - - player.play(); - tick(310); - checkTimes( - player, - [110, 200], [ - [110, 200], - [610, -300], [ - [1110, -800], - [1610, -1300]]], - 't = 310'); - - tick(1300); - checkTimes( - player, - [110, 1190], [ - [110, 500], - [610, 500], [ - [1110, 190], - [1610, -310]]], - 't = 1300'); - - player.pause(); - checkTimes( - player, - [NaN, 1190], [ - [NaN, 500], - [NaN, 500], [ - [NaN, 190], - [NaN, -310]]], - 't = 1300'); - - tick(1400); - checkTimes( - player, - [NaN, 1190], [ - [NaN, 500], - [NaN, 500], [ - [NaN, 190], - [NaN, -310]]], - 't = 1400'); - - player.play(); - checkTimes( - player, - [NaN, 1190], [ - [NaN, 500], - [NaN, 500], [ - [NaN, 190], - [NaN, -310]]], - 't = 1400'); - - tick(1410); - checkTimes( - player, - [220, 1190], [ - [220, 500], - [520, 500], [ - [1220, 190], - [1720, -310]]], - 't = 1410'); - - tick(1600); - checkTimes( - player, - [220, 1380], [ - [220, 500], - [720, 500], [ - [1220, 380], - [1720, -120]]], - 't = 1600'); - - player.pause(); - checkTimes( - player, - [NaN, 1380], [ - [NaN, 500], - [NaN, 500], [ - [NaN, 380], - [NaN, -120]]], - 't = 1600'); - - tick(1700); - checkTimes( - player, - [NaN, 1380], [ - [NaN, 500], - [NaN, 500], [ - [NaN, 380], - [NaN, -120]]], - 't = 1700'); - - player.play(); - tick(1710); - checkTimes( - player, - [330, 1380], [ - [330, 500], - [830, 500], [ - [1330, 380], - [1830, -120]]], - 't = 1710'); - - tick(2400); - checkTimes( - player, - [330, 2000], [ - [330, 500], - [830, 500], [ - [1330, 500], - [1830, 500]]], - 't = 2400'); - }); - - test('pausing works as expected with an AnimationGroup inside an AnimationSequence', function() { - tick(0); - var player = document.timeline.play(this.seqWithGroup_source); - - // check: player, - // player.childPlayers[0], - // player.childPlayers[1], - // player.childPlayers[2], - // player.childPlayers[2].childPlayers[0], - // player.childPlayers[2].childPlayers[1] - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - // assert.equal(player.childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[0].currentTime, X); - // assert.equal(player.childPlayers[1].startTime, X); - // assert.equal(player.childPlayers[1].currentTime, X); - // assert.equal(player.childPlayers[2].startTime, X); - // assert.equal(player.childPlayers[2].currentTime, X); - // assert.equal(player.childPlayers[2].childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[2].childPlayers[0].currentTime, X); - // assert.equal(player.childPlayers[2].childPlayers[1].startTime, X); - // assert.equal(player.childPlayers[2].childPlayers[1].currentTime, X); - tick(200); - // check - player.pause(); - // check - tick(300); - // check - player.play(); - tick(300); - // check - tick(1300); - // check - player.pause(); - // check - tick(1400); - // check - player.play(); - tick(1400); - // check - }); - - test('pausing works as expected with an empty AnimationSequence inside an AnimationSequence', function() { - tick(0); - var player = document.timeline.play(this.seqWithEmptySeq_source); - - // check: player, - // player.childPlayers[0] - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - // assert.equal(player.childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[0].currentTime, X); - player.pause(); - // check - }); - - test('pausing works as expected with an empty AnimationGroup inside an AnimationSequence', function() { - tick(0); - var player = document.timeline.play(this.seqWithEmptyGroup_source); - // check: player, - // player.childPlayers[0] - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - // assert.equal(player.childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[0].currentTime, X); - player.pause(); - // check - }); - - test('pausing works as expected with an empty AnimationGroup', function() { - tick(0); - var player = document.timeline.play(this.groupEmpty_source); - // check: player - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - player.pause(); - // check - }); - - test('pausing works as expected with a simple AnimationGroup', function() { - tick(0); - var player = document.timeline.play(this.groupSimple_source); - // check: player, - // player.childPlayers[0], - // player.childPlayers[1] - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - // assert.equal(player.childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[0].currentTime, X); - // assert.equal(player.childPlayers[1].startTime, X); - // assert.equal(player.childPlayers[1].currentTime, X); - tick(200); - // check - player.pause(); - // check - tick(300); - // check - player.play(); - tick(300); - // check - }); - - test('pausing works as expected with an AnimationSequence inside an AnimationGroup', function() { - tick(0); - var player = document.timeline.play(this.groupWithSeq_source); - // check: player, - // player.childPlayers[0], - // player.childPlayers[1], - // player.childPlayers[2], - // player.childPlayers[2].childPlayers[0], - // player.childPlayers[2].childPlayers[1] - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - // assert.equal(player.childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[0].currentTime, X); - // assert.equal(player.childPlayers[1].startTime, X); - // assert.equal(player.childPlayers[1].currentTime, X); - // assert.equal(player.childPlayers[2].startTime, X); - // assert.equal(player.childPlayers[2].currentTime, X); - // assert.equal(player.childPlayers[2].childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[2].childPlayers[0].currentTime, X); - // assert.equal(player.childPlayers[2].childPlayers[1].startTime, X); - // assert.equal(player.childPlayers[2].childPlayers[1].currentTime, X); - tick(200); - // check - player.pause(); - // check - tick(300); - // check - player.play(); - tick(300); - // check - tick(800); - // check - player.pause(); - // check - tick(900); - // check - player.play(); - tick(900); - // check - tick(1300); - // check - player.pause(); - // check - tick(1300); - // check - player.play(); - tick(1400); - // check - }); - - test('pausing works as expected with an AnimationGroup inside an AnimationGroup', function() { - tick(0); - var player = document.timeline.play(this.groupWithGroup_source); - // check: player, - // player.childPlayers[0], - // player.childPlayers[1], - // player.childPlayers[2], - // player.childPlayers[2].childPlayers[0], - // player.childPlayers[2].childPlayers[1] - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - // assert.equal(player.childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[0].currentTime, X); - // assert.equal(player.childPlayers[1].startTime, X); - // assert.equal(player.childPlayers[1].currentTime, X); - // assert.equal(player.childPlayers[2].startTime, X); - // assert.equal(player.childPlayers[2].currentTime, X); - // assert.equal(player.childPlayers[2].childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[2].childPlayers[0].currentTime, X); - // assert.equal(player.childPlayers[2].childPlayers[1].startTime, X); - // assert.equal(player.childPlayers[2].childPlayers[1].currentTime, X); - tick(200); - // check - player.pause(); - // check - tick(300); - // check - player.play(); - tick(300); - // check - }); - - test('pausing works as expected with an empty AnimationSequence inside an AnimationGroup', function() { - tick(0); - var player = document.timeline.play(this.groupWithEmptySeq_source); - // check: player, - // player.childPlayers[0] - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - // assert.equal(player.childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[0].currentTime, X); - player.pause(); - // check - }); - - test('pausing works as expected with an empty AnimationGroup inside an AnimationGroup', function() { - tick(0); - var player = document.timeline.play(this.groupWithEmptyGroup_source); - // check: player, - // player.childPlayers[0] - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - // assert.equal(player.childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[0].currentTime, X); - player.pause(); - // check - }); - - // FIXME: This is just here as a baseline during development. REMOVE. - test('pausing works as expected with a simple Animation', function() { - tick(0); - var target = document.createElement('div'); - var player = document.timeline.play(this.animationMargin(target)); - assert.equal(player.startTime, 0); - assert.equal(player.currentTime, 0); - tick(200); - assert.equal(player.startTime, 0); - assert.equal(player.currentTime, 200); - player.pause(); - assert.equal(player.startTime, null); - assert.equal(player.currentTime, 200); - tick(300); - assert.equal(player.startTime, null); - assert.equal(player.currentTime, 200); - player.play(); - tick(300); - assert.equal(player.startTime, 100); - assert.equal(player.currentTime, 200); - tick(600); - setTicking(true); - assert.equal(player.startTime, 100); - assert.equal(player.currentTime, 500); - }); - - // Test reverse - test('reversing works as expected with an empty AnimationSequence', function() { - tick(0); - var player = document.timeline.play(this.seqEmpty_source); - // check: player - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - player.reverse(); - // check - }); - - test('reversing works as expected with a simple AnimationSequence', function() { - tick(0); - var player = document.timeline.play(this.seqSimple_source); - // check: player, - // player.childPlayers[0], - // player.childPlayers[1] - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - // assert.equal(player.childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[0].currentTime, X); - // assert.equal(player.childPlayers[1].startTime, X); - // assert.equal(player.childPlayers[1].currentTime, X); - tick(200); - // check - player.reverse(); // 200 <- - // check - tick(300); - // check - player.reverse(); // 100 -> - // check - tick(1000); - // check - player.reverse(); // 800 <- - // check - tick(1400); - // check - player.reverse(); // 400 -> - // check - tick(2200); - // check - player.reverse(); // 1000 (finished) <- - // check - tick(3300); - // check - player.reverse(); // 0 (finished) -> - // check - }); - - test('reversing works as expected with an AnimationSequence inside an AnimationSequence', function() { - tick(0); - var player = document.timeline.play(this.seqSimple_source); - // check: player, - // player.childPlayers[0], - // player.childPlayers[1], - // player.childPlayers[2], - // player.childPlayers[2].childPlayers[0], - // player.childPlayers[2].childPlayers[1] - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - // assert.equal(player.childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[0].currentTime, X); - // assert.equal(player.childPlayers[1].startTime, X); - // assert.equal(player.childPlayers[1].currentTime, X); - // assert.equal(player.childPlayers[2].startTime, X); - // assert.equal(player.childPlayers[2].currentTime, X); - // assert.equal(player.childPlayers[2].childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[2].childPlayers[0].currentTime, X); - // assert.equal(player.childPlayers[2].childPlayers[1].startTime, X); - // assert.equal(player.childPlayers[2].childPlayers[1].currentTime, X); - tick(200); - // check - player.reverse(); // 200 <- - // check - tick(300); - // check - player.reverse(); // 100 -> - // check - tick(1000); - // check - player.reverse(); // 800 <- - // check - tick(1400); - // check - player.reverse(); // 400 -> - // check - tick(2400); - // check - player.reverse(); // 1400 <- - // check - tick(2500); - // check - player.reverse(); // 1300 -> - // check - tick(3000); - // check - player.reverse(); // 1800 <- - // check - tick(3100); - // check - player.reverse(); // 1700 -> - // check - tick(3500); - // check - player.reverse(); // 2000 (finished) <- - // check - tick(5600); - // check - player.reverse(); // 0 (finished) -> - // check - }); - - test('reversing works as expected with an AnimationGroup inside an AnimationSequence', function() { - tick(0); - var player = document.timeline.play(this.seqWithGroup_source); - // check: player, - // player.childPlayers[0], - // player.childPlayers[1], - // player.childPlayers[2], - // player.childPlayers[2].childPlayers[0], - // player.childPlayers[2].childPlayers[1] - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - // assert.equal(player.childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[0].currentTime, X); - // assert.equal(player.childPlayers[1].startTime, X); - // assert.equal(player.childPlayers[1].currentTime, X); - // assert.equal(player.childPlayers[2].startTime, X); - // assert.equal(player.childPlayers[2].currentTime, X); - // assert.equal(player.childPlayers[2].childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[2].childPlayers[0].currentTime, X); - // assert.equal(player.childPlayers[2].childPlayers[1].startTime, X); - // assert.equal(player.childPlayers[2].childPlayers[1].currentTime, X); - tick(200); - // check - player.reverse(); // 200 <- - // check - tick(300); - // check - player.reverse(); // 100 -> - // check - tick(1000); - // check - player.reverse(); // 800 <- - // check - tick(1400); - // check - player.reverse(); // 400 -> - // check - tick(2400); - // check - player.reverse(); // 1400 <- - // check - tick(2500); - // check - player.reverse(); // 1300 -> - // check - tick(3000); - // check - player.reverse(); // 1500 (finished) <- - // check - tick(4600); - // check - player.reverse(); // 0 (finished) -> - // check - }); - - test('reversing works as expected with an empty AnimationSequence inside an AnimationSequence', function() { - tick(0); - var player = document.timeline.play(this.seqWithEmptySeq_source); - // check: player, - // player.childPlayers[0] - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - // assert.equal(player.childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[0].currentTime, X); - player.reverse(); - // check - }); - - test('reversing works as expected with an empty AnimationGroup inside an AnimationSequence', function() { - tick(0); - var player = document.timeline.play(this.seqWithEmptyGroup_source); - // check: player, - // player.childPlayers[0] - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - // assert.equal(player.childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[0].currentTime, X); - player.reverse(); - // check - }); - - test('reversing works as expected with an empty AnimationGroup', function() { - tick(0); - var player = document.timeline.play(this.groupEmpty_source); - // check: player - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - player.reverse(); - // check - }); - - test('reversing works as expected with a simple AnimationGroup', function() { - tick(0); - var player = document.timeline.play(this.groupSimple_source); - // check: player, - // player.childPlayers[0], - // player.childPlayers[1] - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - // assert.equal(player.childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[0].currentTime, X); - // assert.equal(player.childPlayers[1].startTime, X); - // assert.equal(player.childPlayers[1].currentTime, X); - tick(200); - // check - player.reverse(); // 200 <- - // check - tick(300); - // check - player.reverse(); // 100 -> - // check - tick(1000); - // check - player.reverse(); // 500 (finished) <- - // check - tick(1600); - // check - player.reverse(); // 0 (finished) -> - // check - }); - - test('reversing works as expected with an AnimationSequence inside an AnimationGroup', function() { - tick(0); - var player = document.timeline.play(this.groupWithSeq_source); - // check: player, - // player.childPlayers[0], - // player.childPlayers[1], - // player.childPlayers[2], - // player.childPlayers[2].childPlayers[0], - // player.childPlayers[2].childPlayers[1] - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - // assert.equal(player.childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[0].currentTime, X); - // assert.equal(player.childPlayers[1].startTime, X); - // assert.equal(player.childPlayers[1].currentTime, X); - // assert.equal(player.childPlayers[2].startTime, X); - // assert.equal(player.childPlayers[2].currentTime, X); - // assert.equal(player.childPlayers[2].childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[2].childPlayers[0].currentTime, X); - // assert.equal(player.childPlayers[2].childPlayers[1].startTime, X); - // assert.equal(player.childPlayers[2].childPlayers[1].currentTime, X); - tick(200); - // check - player.reverse(); // 200 <- - // check - tick(300); - // check - player.reverse(); // 100 -> - // check - tick(1000); - // check - player.reverse(); // 800 <- - // check - tick(1400); - // check - player.reverse(); // 400 -> - // check - tick(2200); - // check - player.reverse(); // 1000 (finished) <- - // check - tick(3300); - // check - player.reverse(); // 0 (finished) -> - // check - }); - - test('reversing works as expected with an AnimationGroup inside an AnimationGroup', function() { - tick(0); - var player = document.timeline.play(this.groupWithGroup_source); - // check: player, - // player.childPlayers[0], - // player.childPlayers[1], - // player.childPlayers[2], - // player.childPlayers[2].childPlayers[0], - // player.childPlayers[2].childPlayers[1] - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - // assert.equal(player.childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[0].currentTime, X); - // assert.equal(player.childPlayers[1].startTime, X); - // assert.equal(player.childPlayers[1].currentTime, X); - // assert.equal(player.childPlayers[2].startTime, X); - // assert.equal(player.childPlayers[2].currentTime, X); - // assert.equal(player.childPlayers[2].childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[2].childPlayers[0].currentTime, X); - // assert.equal(player.childPlayers[2].childPlayers[1].startTime, X); - // assert.equal(player.childPlayers[2].childPlayers[1].currentTime, X); - tick(200); - // check - player.reverse(); // 200 <- - // check - tick(300); - // check - player.reverse(); // 100 -> - // check - tick(1000); - // check - player.reverse(); // 500 (finished) <- - // check - tick(1600); - // check - player.reverse(); // 0 (finished) -> - // check - }); - - test('reversing works as expected with an empty AnimationSequence inside an AnimationGroup', function() { - tick(0); - var player = document.timeline.play(this.groupWithEmptySeq_source); - // check: player, - // player.childPlayers[0] - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - // assert.equal(player.childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[0].currentTime, X); - player.reverse(); - // check - }); - - test('reversing works as expected with an empty AnimationGroup inside an AnimationGroup', function() { - tick(0); - var player = document.timeline.play(this.groupWithEmptyGroup_source); - // check: player, - // player.childPlayers[0] - // assert.equal(player.startTime, X); - // assert.equal(player.currentTime, X); - // assert.equal(player.childPlayers[0].startTime, X); - // assert.equal(player.childPlayers[0].currentTime, X); - player.reverse(); - // check - }); - // FIXME: Also test reversing while paused? -}); diff --git a/test/js/group-player.js b/test/js/group-player.js index 90c6fcb..d2755ed 100644 --- a/test/js/group-player.js +++ b/test/js/group-player.js @@ -468,7 +468,6 @@ suite('group-player', function() { // assert.equal(getComputedStyle(this.target).marginLeft, '0px'); }); - // START RENEE'S TESTS. // FIXME: This test can be removed when this suite is finished. test('sources are working for basic operations', function() { var players = []; @@ -567,7 +566,8 @@ suite('group-player', function() { checkTimes(player, [121, 1000], [[121, 500], [621, 500]], 't = 1321'); }); - // FIXME: This test fails because of a known issue. + // FIXME: This test fails because of a known bug. + // github.com/web-animations/web-animations-next/issues/133 test('pausing works as expected with an AnimationSequence inside an AnimationSequence', function() { var player = document.timeline.play(this.seqWithSeq_source); tick(0); @@ -714,6 +714,7 @@ suite('group-player', function() { // These steps finish (2, 0) but don't finish (2, 1). This (somehow) causes the currentTime of // (2, 0) to advance past its duration after it has been paused and unpaused. + // See: github.com/web-animations/web-animations-next/issues/133 tick(1840); checkTimes( player, @@ -742,7 +743,7 @@ suite('group-player', function() { [350, 1510], [ [350, 500], [850, 500], [ - [1350, 500], // FIXME: This check fails because of a known issue. + [1350, 500], [1850, 10]]], 't = 1850'); @@ -752,7 +753,7 @@ suite('group-player', function() { [350, 2000], [ [350, 500], [850, 500], [ - [1350, 500], // FIXME: This check fails because of a known issue. + [1350, 500], [1850, 500]]], 't = 2400'); }); @@ -1010,7 +1011,8 @@ suite('group-player', function() { checkTimes(player, [602, 0], [[602, 0], [602, 0]], 't = 602'); }); - // FIXME: This test fails because of a known issue. + // FIXME: This test fails because of a known bug. + // github.com/web-animations/web-animations-next/issues/133 test('pausing works as expected with an AnimationSequence inside an AnimationGroup', function() { var player = document.timeline.play(this.groupWithSeq_source); tick(0); @@ -1101,7 +1103,7 @@ suite('group-player', function() { [230, 680], [ [230, 500], [230, 500], [ - [230, 500], // FIXME: This check fails because of a known issue. + [230, 500], [730, 180]]], 't = 910'); @@ -1111,7 +1113,7 @@ suite('group-player', function() { [230, 1000], [ [230, 500], [230, 500], [ - [230, 500], // FIXME: This check fails because of a known issue. + [230, 500], [730, 500]]], 't = 1300'); @@ -1121,7 +1123,7 @@ suite('group-player', function() { [NaN, 1000], [ [NaN, 500], [NaN, 500], [ - [NaN, 500], // FIXME: This check fails because of a known issue. + [NaN, 500], [NaN, 500]]], 't = 1300'); @@ -1131,7 +1133,7 @@ suite('group-player', function() { [NaN, 1000], [ [NaN, 500], [NaN, 500], [ - [NaN, 500], // FIXME: This check fails because of a known issue. + [NaN, 500], [NaN, 500]]], 't = 1310'); @@ -1147,88 +1149,4 @@ suite('group-player', function() { 't = 1400'); }); - // test('pausing works as expected with an AnimationGroup inside an AnimationGroup', function() { - // tick(0); - // var player = document.timeline.play(this.groupWithGroup_source); - // // check: player, - // // player.childPlayers[0], - // // player.childPlayers[1], - // // player.childPlayers[2], - // // player.childPlayers[2].childPlayers[0], - // // player.childPlayers[2].childPlayers[1] - // // assert.equal(player.startTime, X); - // // assert.equal(player.currentTime, X); - // // assert.equal(player.childPlayers[0].startTime, X); - // // assert.equal(player.childPlayers[0].currentTime, X); - // // assert.equal(player.childPlayers[1].startTime, X); - // // assert.equal(player.childPlayers[1].currentTime, X); - // // assert.equal(player.childPlayers[2].startTime, X); - // // assert.equal(player.childPlayers[2].currentTime, X); - // // assert.equal(player.childPlayers[2].childPlayers[0].startTime, X); - // // assert.equal(player.childPlayers[2].childPlayers[0].currentTime, X); - // // assert.equal(player.childPlayers[2].childPlayers[1].startTime, X); - // // assert.equal(player.childPlayers[2].childPlayers[1].currentTime, X); - // tick(200); - // // check - // player.pause(); - // // check - // tick(300); - // // check - // player.play(); - // tick(300); - // // check - // }); - - // test('pausing works as expected with an empty AnimationSequence inside an AnimationGroup', function() { - // tick(0); - // var player = document.timeline.play(this.groupWithEmptySeq_source); - // // check: player, - // // player.childPlayers[0] - // // assert.equal(player.startTime, X); - // // assert.equal(player.currentTime, X); - // // assert.equal(player.childPlayers[0].startTime, X); - // // assert.equal(player.childPlayers[0].currentTime, X); - // player.pause(); - // // check - // }); - - // test('pausing works as expected with an empty AnimationGroup inside an AnimationGroup', function() { - // tick(0); - // var player = document.timeline.play(this.groupWithEmptyGroup_source); - // // check: player, - // // player.childPlayers[0] - // // assert.equal(player.startTime, X); - // // assert.equal(player.currentTime, X); - // // assert.equal(player.childPlayers[0].startTime, X); - // // assert.equal(player.childPlayers[0].currentTime, X); - // player.pause(); - // // check - // }); - - // // FIXME: This is just here as a baseline during development. REMOVE. - // test('pausing works as expected with a simple Animation', function() { - // tick(0); - // var target = document.createElement('div'); - // var player = document.timeline.play(this.animationMargin(target)); - // assert.equal(player.startTime, 0); - // assert.equal(player.currentTime, 0); - // tick(200); - // assert.equal(player.startTime, 0); - // assert.equal(player.currentTime, 200); - // player.pause(); - // assert.equal(player.startTime, null); - // assert.equal(player.currentTime, 200); - // tick(300); - // assert.equal(player.startTime, null); - // assert.equal(player.currentTime, 200); - // player.play(); - // tick(300); - // assert.equal(player.startTime, 100); - // assert.equal(player.currentTime, 200); - // tick(600); - // setTicking(true); - // assert.equal(player.startTime, 100); - // assert.equal(player.currentTime, 500); - // }); - }); diff --git a/test/js/tick-after-pause-bug.js b/test/js/tick-after-pause-bug.js deleted file mode 100644 index 85a15cc..0000000 --- a/test/js/tick-after-pause-bug.js +++ /dev/null @@ -1,60 +0,0 @@ -suite('tick-after-pause-bug', function() { - test('pause-tick-play-tick does not advance the current time', function() { - var player = document.timeline.play( - new Animation( - document.createElement('div'), - [ - {backgroundColor: 'black'}, - {backgroundColor: 'white'} - ], - 500 - ) - ); - tick(0); - assert.equal(player.startTime, 0); - assert.equal(player.currentTime, 0); - - player.pause(); - tick(400) // Tick! - assert(isNaN(player.startTime)); - assert.equal(player.currentTime, 0); - - player.play(); - tick(402); - assert.equal(player.startTime, 402); - assert.equal(player.currentTime, 0); // Current time has NOT changed. - - tick(410); - assert.equal(player.startTime, 402); - assert.equal(player.currentTime, 8); - }); - - test('pause-play-tick advances currentTime.', function() { - var player = document.timeline.play( - new Animation( - document.createElement('div'), - [ - {backgroundColor: 'black'}, - {backgroundColor: 'white'} - ], - 500 - ) - ); - tick(0); - assert.equal(player.startTime, 0); - assert.equal(player.currentTime, 0); - - player.pause(); // No tick. - assert(isNaN(player.startTime)); - assert.equal(player.currentTime, 0); - - player.play(); - tick(402); - assert.equal(player.startTime, 0); - assert.equal(player.currentTime, 402); // Current time has changed. - - tick(410); - assert.equal(player.startTime, 0); - assert.equal(player.currentTime, 410); - }); -}); From b370c3778a81b76a69e7efd1df868f6d68b6c9c1 Mon Sep 17 00:00:00 2001 From: rjwright Date: Thu, 13 Nov 2014 14:18:34 +1100 Subject: [PATCH 3/5] Stray bracket after rebase --- target-config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/target-config.js b/target-config.js index 2f00af2..62a8aa6 100644 --- a/target-config.js +++ b/target-config.js @@ -75,7 +75,7 @@ var maxifillTest = minifillTest.concat( 'test/js/animation-constructor.js', - 'test/js/child-player-pause-after-finish-bug.js'); + 'test/js/child-player-pause-after-finish-bug.js', 'test/js/effect-callback.js', 'test/js/group-constructors.js', 'test/js/group-player.js', From f6b22c8ea02fc852781d4f94dceb43cec20be4a8 Mon Sep 17 00:00:00 2001 From: rjwright Date: Thu, 13 Nov 2014 15:00:25 +1100 Subject: [PATCH 4/5] Removed tests that specifically demonstrate bugs. Will write up bugs instead. --- target-config.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/target-config.js b/target-config.js index 62a8aa6..72ea2a0 100644 --- a/target-config.js +++ b/target-config.js @@ -75,12 +75,10 @@ var maxifillTest = minifillTest.concat( 'test/js/animation-constructor.js', - 'test/js/child-player-pause-after-finish-bug.js', 'test/js/effect-callback.js', 'test/js/group-constructors.js', 'test/js/group-player.js', 'test/js/group-player-finish-event.js', - 'test/js/tick-after-pause-bug.js', 'test/js/timeline.js'); // This object specifies the source and test files for different Web Animation build targets. From 94788fd91867df1ab38c62c5fce2eefd2ad1f274 Mon Sep 17 00:00:00 2001 From: rjwright Date: Thu, 13 Nov 2014 15:05:39 +1100 Subject: [PATCH 5/5] Replace nans with nulls --- test/js/group-player.js | 80 ++++++++++++++++++++--------------------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/test/js/group-player.js b/test/js/group-player.js index d2755ed..c4314b9 100644 --- a/test/js/group-player.js +++ b/test/js/group-player.js @@ -556,7 +556,7 @@ suite('group-player', function() { player.pause(); tick(711); - checkTimes(player, [NaN, 600], [[NaN, 500], [NaN, 100]], 't = 711'); + checkTimes(player, [null, 600], [[null, 500], [null, 100]], 't = 711'); player.play(); tick(721); @@ -729,11 +729,11 @@ suite('group-player', function() { tick(1850); checkTimes( player, - [NaN, 1510], [ - [NaN, 500], - [NaN, 500], [ - [NaN, 500], - [NaN, 10]]], + [null, 1510], [ + [null, 500], + [null, 500], [ + [null, 500], + [null, 10]]], 't = 1850'); player.play(); @@ -978,7 +978,7 @@ suite('group-player', function() { assert.equal(player.currentTime, 0); player.pause(); - assert(isNaN(player.startTime)); + assert.equal(player.startTime, null); assert.equal(player.currentTime, 0); }); @@ -991,10 +991,10 @@ suite('group-player', function() { checkTimes(player, [0, 200], [[0, 200], [0, 200]], 't = 200'); player.pause(); - checkTimes(player, [NaN, 200], [[NaN, 200], [NaN, 200]], 't = 200'); + checkTimes(player, [null, 200], [[null, 200], [null, 200]], 't = 200'); tick(300); - checkTimes(player, [NaN, 200], [[NaN, 200], [NaN, 200]], 't = 300'); + checkTimes(player, [null, 200], [[null, 200], [null, 200]], 't = 300'); player.play(); tick(301); @@ -1004,7 +1004,7 @@ suite('group-player', function() { checkTimes(player, [101, 500], [[101, 500], [101, 500]], 't = 601'); player.pause(); - checkTimes(player, [NaN, 500], [[NaN, 500], [NaN, 500]], 't = 601'); + checkTimes(player, [null, 500], [[null, 500], [null, 500]], 't = 601'); player.play(); tick(602); @@ -1038,21 +1038,21 @@ suite('group-player', function() { player.pause(); checkTimes( player, - [NaN, 200], [ - [NaN, 200], - [NaN, 200], [ - [NaN, 200], - [NaN, -300]]], + [null, 200], [ + [null, 200], + [null, 200], [ + [null, 200], + [null, -300]]], 't = 200'); tick(310); checkTimes( player, - [NaN, 200], [ - [NaN, 200], - [NaN, 200], [ - [NaN, 200], - [NaN, -300]]], + [null, 200], [ + [null, 200], + [null, 200], [ + [null, 200], + [null, -300]]], 't = 310'); player.play(); @@ -1079,21 +1079,21 @@ suite('group-player', function() { player.pause(); checkTimes( player, - [NaN, 680], [ - [NaN, 500], - [NaN, 500], [ - [NaN, 500], - [NaN, 180]]], + [null, 680], [ + [null, 500], + [null, 500], [ + [null, 500], + [null, 180]]], 't = 800'); tick(900); checkTimes( player, - [NaN, 680], [ - [NaN, 500], - [NaN, 500], [ - [NaN, 500], - [NaN, 180]]], + [null, 680], [ + [null, 500], + [null, 500], [ + [null, 500], + [null, 180]]], 't = 900'); player.play(); @@ -1120,21 +1120,21 @@ suite('group-player', function() { player.pause(); checkTimes( player, - [NaN, 1000], [ - [NaN, 500], - [NaN, 500], [ - [NaN, 500], - [NaN, 500]]], + [null, 1000], [ + [null, 500], + [null, 500], [ + [null, 500], + [null, 500]]], 't = 1300'); tick(1310); checkTimes( player, - [NaN, 1000], [ - [NaN, 500], - [NaN, 500], [ - [NaN, 500], - [NaN, 500]]], + [null, 1000], [ + [null, 500], + [null, 500], [ + [null, 500], + [null, 500]]], 't = 1310'); player.play();