diff --git a/test/js/group-player.js b/test/js/group-player.js index 7bceab7..1237252 100644 --- a/test/js/group-player.js +++ b/test/js/group-player.js @@ -12,6 +12,10 @@ suite('group-player', function() { ], 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, @@ -21,7 +25,6 @@ suite('group-player', function() { ], 500); }; - var sequenceEmpty = function() { return new AnimationSequence(); }; @@ -254,6 +257,54 @@ suite('group-player', function() { 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 = []; @@ -316,51 +367,323 @@ suite('group-player', function() { players[i].play(); }); - test('redundant animation node wrapping', function() { + test('pausing 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.pause(); + // check + }); + + test('pausing 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.pause(); + // check + tick(300); + // check + player.play(); + tick(300); + // check + tick(700); + // check + }); + + test('pausing works as expected with an AnimationSequence inside an AnimationSequence', function() { + tick(0); + var player = document.timeline.play(this.seqWithSeq_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 + tick(1600); + // check + player.pause(); + // check + tick(1700); + // check + player.play(); + tick(1700); + // check + }); + + 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); + console.log(this.groupSimple_source); + 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'); - 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(); + 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); }); });