diff --git a/test/js/group-player.js b/test/js/group-player.js index 1b343b3..c4314b9 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; @@ -543,10 +551,23 @@ 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, [null, 600], [[null, 500], [null, 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 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); @@ -691,14 +712,49 @@ 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. + // See: github.com/web-animations/web-animations-next/issues/133 + 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, + [null, 1510], [ + [null, 500], + [null, 500], [ + [null, 500], + [null, 10]]], + 't = 1850'); + + player.play(); + tick(1860); + checkTimes( + player, + [350, 1510], [ + [350, 500], + [850, 500], [ + [1350, 500], + [1850, 10]]], + 't = 1850'); + + tick(2400); + checkTimes( + player, + [350, 2000], [ + [350, 500], + [850, 500], [ + [1350, 500], + [1850, 500]]], 't = 2400'); }); @@ -914,4 +970,183 @@ 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.equal(player.startTime, null); + 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, [null, 200], [[null, 200], [null, 200]], 't = 200'); + + tick(300); + checkTimes(player, [null, 200], [[null, 200], [null, 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, [null, 500], [[null, 500], [null, 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 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); + 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, + [null, 200], [ + [null, 200], + [null, 200], [ + [null, 200], + [null, -300]]], + 't = 200'); + + tick(310); + checkTimes( + player, + [null, 200], [ + [null, 200], + [null, 200], [ + [null, 200], + [null, -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, + [null, 680], [ + [null, 500], + [null, 500], [ + [null, 500], + [null, 180]]], + 't = 800'); + + tick(900); + checkTimes( + player, + [null, 680], [ + [null, 500], + [null, 500], [ + [null, 500], + [null, 180]]], + 't = 900'); + + player.play(); + tick(910); + checkTimes( + player, + [230, 680], [ + [230, 500], + [230, 500], [ + [230, 500], + [730, 180]]], + 't = 910'); + + tick(1300); + checkTimes( + player, + [230, 1000], [ + [230, 500], + [230, 500], [ + [230, 500], + [730, 500]]], + 't = 1300'); + + player.pause(); + checkTimes( + player, + [null, 1000], [ + [null, 500], + [null, 500], [ + [null, 500], + [null, 500]]], + 't = 1300'); + + tick(1310); + checkTimes( + player, + [null, 1000], [ + [null, 500], + [null, 500], [ + [null, 500], + [null, 500]]], + 't = 1310'); + + player.play(); + tick(1400); + checkTimes( + player, + [1400, 0], [ + [1400, 0], + [1400, 0], [ + [1400, 0], + [1900, -500]]], + 't = 1400'); + }); + });