Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(51)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: polymer_0.5.0/bower_components/web-animations-js/test/js/group-player.js

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Created 5 years, 12 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « polymer_0.5.0/bower_components/web-animations-js/test/js/group-constructors.js ('k') | polymer_0.5.0/bower_components/web-animations-js/test/js/group-player-finish-event.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: polymer_0.5.0/bower_components/web-animations-js/test/js/group-player.js
diff --git a/polymer_0.5.0/bower_components/web-animations-js/test/js/group-player.js b/polymer_0.5.0/bower_components/web-animations-js/test/js/group-player.js
new file mode 100644
index 0000000000000000000000000000000000000000..1b343b30e60b77f9935eed29787a44138a24cf9b
--- /dev/null
+++ b/polymer_0.5.0/bower_components/web-animations-js/test/js/group-player.js
@@ -0,0 +1,917 @@
+suite('group-player', function() {
+ setup(function() {
+ document.timeline._players = [];
+ webAnimationsMinifill.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 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;
+
+ this.staticAnimation = function(target, value, duration) {
+ var animation = new Animation(target, [{marginLeft: value}, {marginLeft: value}], duration);
+ animation.testValue = value;
+ return animation;
+ };
+ // 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([
+ this.staticAnimation(this.complexTarget, '4px', 5),
+ new AnimationSequence([
+ this.staticAnimation(this.complexTarget, '1px', 2),
+ new AnimationGroup([
+ this.staticAnimation(this.complexTarget, '3px', 2),
+ this.staticAnimation(this.complexTarget, '2px', 1),
+ ]),
+ ]),
+ this.staticAnimation(this.complexTarget, '0px', 1),
+ ]);
+
+ this.target = document.createElement('div');
+ this.elements.push(this.target);
+
+ 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++) {
+ if (this.elements[i].parent)
+ this.elements[i].parent.removeChild(this.elements[i]);
+ }
+ });
+
+ 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 (timingList[0] === null || typeof timingList[0] == 'number') {
+ 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, [null, 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('can seek an animationGroup', function() {
+ tick(90);
+ var p = document.timeline.play(simpleAnimationGroup());
+ tick(100);
+ checkTimes(p, [100, 0], [[100, 0], [100, 0], [100, 0]]);
+ p.currentTime = 200;
+ checkTimes(p, [-100, 200], [[-100, 200], [-100, 200], [-100, 200]]);
+ p.currentTime = 1100;
+ checkTimes(p, [-1000, 1100], [[-1000, 1100], [-1000, 1100], [-1000, 1100]]);
+ p.currentTime = 2100;
+ checkTimes(p, [-2000, 2100], [[-2000, 2100], [-2000, 2100], [-2000, 2100]]);
+ p.currentTime = 3100;
+ checkTimes(p, [-3000, 3100], [[-3000, 3100], [-3000, 3100], [-3000, 3100]]);
+ });
+
+ test('can startTime seek an animationGroup', function() {
+ tick(90);
+ var p = document.timeline.play(simpleAnimationGroup());
+ tick(100);
+ checkTimes(p, [100, 0], [[100, 0], [100, 0], [100, 0]]);
+ p.startTime = -100;
+ checkTimes(p, [-100, 200], [[-100, 200], [-100, 200], [-100, 200]]);
+ p.startTime = -1000;
+ checkTimes(p, [-1000, 1100], [[-1000, 1100], [-1000, 1000], [-1000, 1100]]);
+ p.startTime = -2000;
+ checkTimes(p, [-2000, 2100], [[-2000, 2000], [-2000, 1000], [-2000, 2100]]);
+ p.startTime = -3000;
+ checkTimes(p, [-3000, 3000], [[-3000, 2000], [-3000, 1000], [-3000, 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]]);
+ tick(2210);
+ checkTimes(p, [110, 2100], [[110, 2000], [2110, 100], [3110, -900]]);
+ tick(3210);
+ checkTimes(p, [110, 3100], [[110, 2000], [2110, 1000], [3110, 100]]);
+ tick(6210);
+ checkTimes(p, [110, 6000], [[110, 2000], [2110, 1000], [3110, 3000]]);
+ });
+
+ test('can seek an animationSequence', function() {
+ tick(100);
+ var p = document.timeline.play(simpleAnimationSequence());
+ tick(110);
+ checkTimes(p, [110, 0], [[110, 0], [2110, -2000], [3110, -3000]]);
+ p.currentTime = 100;
+ checkTimes(p, [10, 100], [[10, 100], [2010, -1900], [3010, -2900]]);
+ p.currentTime = 2100;
+ checkTimes(p, [-1990, 2100], [[-1990, 2100], [10, 100], [1010, -900]]);
+ p.currentTime = 3100;
+ checkTimes(p, [-2990, 3100], [[-2990, 3100], [-990, 1100], [10, 100]]);
+ p.currentTime = 6100;
+ checkTimes(p, [-5990, 6100], [[-5990, 6100], [-3990, 4100], [-2990, 3100]]);
+ });
+
+ test('can startTime seek an animationSequence', function() {
+ tick(100);
+ var p = document.timeline.play(simpleAnimationSequence());
+ tick(110);
+ checkTimes(p, [110, 0], [[110, 0], [2110, -2000], [3110, -3000]]);
+ p.startTime = 10;
+ checkTimes(p, [10, 100], [[10, 100], [2010, -1900], [3010, -2900]]);
+ p.startTime = -1990;
+ checkTimes(p, [-1990, 2100], [[-1990, 2000], [10, 100], [1010, -900]]);
+ p.startTime = -2990;
+ checkTimes(p, [-2990, 3100], [[-2990, 2000], [-990, 1000], [10, 100]]);
+ p.startTime = -5990;
+ checkTimes(p, [-5990, 6000], [[-5990, 2000], [-3990, 1000], [-2990, 3000]]);
+ });
+
+ 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, null);
+ assert.equal(getComputedStyle(this.complexTarget).marginLeft, '0px');
+ });
+
+ test('redundant animation node wrapping', function() {
+ tick(100);
+ var animation = new AnimationSequence([
+ this.staticAnimation(this.target, '0px', 1),
+ new AnimationGroup([
+ new AnimationSequence([
+ this.staticAnimation(this.target, '1px', 1),
+ this.staticAnimation(this.target, '2px', 1),
+ ]),
+ ]),
+ ]);
+ var player = document.timeline.play(animation);
+ assert.equal(getComputedStyle(this.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(this.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(this.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(this.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');
+ if (this.target.parent)
+ this.target.parent.removeChild(target);
+ });
+
+ test('delays on groups work correctly', function() {
+ // 444
+ // 1
+ // 0
+ // 33
+ // 2
+ var animation = new AnimationGroup([
+ new AnimationGroup([
+ this.staticAnimation(this.target, '4px', {duration: 3, delay: 1}),
+ this.staticAnimation(this.target, '1px', {duration: 1, delay: 0}),
+ ], {delay: 1}),
+ new AnimationSequence([
+ this.staticAnimation(this.target, '0px', {duration: 1, delay: 0}),
+ this.staticAnimation(this.target, '3px', {duration: 2, delay: 1}),
+ this.staticAnimation(this.target, '2px', {duration: 1, delay: -2}),
+ ]),
+ ]);
+ var player = document.timeline.play(animation);
+ tick(100);
+ checkTimes(player, [100, 0], [
+ [
+ [101, -1],
+ [101, -1],
+ ], [
+ [100, 0],
+ [101, -1],
+ [104, -4],
+ ]
+ ]);
+ assert.equal(getComputedStyle(this.target).marginLeft, '0px');
+ tick(101);
+ assert.equal(getComputedStyle(this.target).marginLeft, '1px');
+ tick(102);
+ assert.equal(getComputedStyle(this.target).marginLeft, '2px');
+ tick(103);
+ assert.equal(getComputedStyle(this.target).marginLeft, '3px');
+ tick(104);
+ assert.equal(getComputedStyle(this.target).marginLeft, '4px');
+ tick(105);
+ assert.equal(getComputedStyle(this.target).marginLeft, '0px');
+ });
+
+ test('end delays on groups work correctly', function() {
+ // 11
+ // 4
+ // 0
+ // 33
+ // 2
+ var animation = new AnimationSequence([
+ new AnimationSequence([
+ this.staticAnimation(this.target, '1px', {duration: 2, endDelay: 2}),
+ this.staticAnimation(this.target, '4px', {duration: 1, endDelay: 1}),
+ ], {endDelay: -6}),
+ new AnimationSequence([
+ this.staticAnimation(this.target, '0px', {duration: 1, endDelay: 1}),
+ this.staticAnimation(this.target, '3px', {duration: 2, endDelay: -2}),
+ this.staticAnimation(this.target, '2px', {duration: 1, endDelay: 2}),
+ ]),
+ ]);
+ var player = document.timeline.play(animation);
+ tick(100);
+ checkTimes(player, [100, 0], [
+ [
+ [100, 0],
+ [104, -4],
+ ], [
+ [100, 0],
+ [102, -2],
+ [102, -2],
+ ]
+ ]);
+ assert.equal(getComputedStyle(this.target).marginLeft, '0px');
+ tick(101);
+ assert.equal(getComputedStyle(this.target).marginLeft, '1px');
+ tick(102);
+ assert.equal(getComputedStyle(this.target).marginLeft, '2px');
+ tick(103);
+ assert.equal(getComputedStyle(this.target).marginLeft, '3px');
+ tick(104);
+ // FIXME: Group child player limiting bounds should match the parent player's limiting bounds.
+ // assert.equal(getComputedStyle(this.target).marginLeft, '4px');
+ // tick(105);
+ // assert.equal(getComputedStyle(this.target).marginLeft, '0px');
+ });
+
+ // 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.equal(player.startTime, null);
+ 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, [null, null], [[null, null], [null, null]], 't = 200');
+
+ tick(300);
+ checkTimes(player, [null, 200], [[null, 200], [null, -300]], 't = 300');
+
+ player.play();
+ checkTimes(player, [null, 200], [[null, 200], [null, -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,
+ [null, null], [
+ [null, null],
+ [null, null], [
+ [null, null],
+ [null, null]]],
+ 't = 200');
+
+ tick(300);
+ checkTimes(
+ player,
+ [null, 200], [
+ [null, 200],
+ [null, -300], [
+ [null, -800],
+ [null, -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,
+ [null, null], [
+ [null, 500],
+ [null, 500], [
+ [null, null],
+ [null, null]]],
+ 't = 1300');
+
+ tick(1400);
+ checkTimes(
+ player,
+ [null, 1190], [
+ [null, 500],
+ [null, 500], [
+ [null, 190],
+ [null, -310]]],
+ 't = 1400');
+
+ player.play();
+ checkTimes(
+ player,
+ [null, 1190], [
+ [null, 500],
+ [null, 500], [
+ [null, 190],
+ [null, -310]]],
+ 't = 1400');
+
+ tick(1410);
+ checkTimes(
+ player,
+ [220, 1190], [
+ [220, 500],
+ [720, 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,
+ [null, null], [
+ [null, 500],
+ [null, 500], [
+ [null, null],
+ [null, null]]],
+ 't = 1600');
+
+ tick(1700);
+ checkTimes(
+ player,
+ [null, 1380], [
+ [null, 500],
+ [null, 500], [
+ [null, 380],
+ [null, -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() {
+ var player = document.timeline.play(this.seqWithGroup_source);
+ tick(0);
+ checkTimes(
+ player,
+ [0, 0], [
+ [0, 0],
+ [500, -500], [
+ [1000, -1000],
+ [1000, -1000]]],
+ 't = 0');
+
+ tick(200);
+ checkTimes(
+ player,
+ [0, 200], [
+ [0, 200],
+ [500, -300], [
+ [1000, -800],
+ [1000, -800]]],
+ 't = 200');
+
+ player.pause();
+ checkTimes(
+ player,
+ [null, null], [
+ [null, null],
+ [null, null], [
+ [null, null],
+ [null, null]]],
+ 't = 200');
+
+ tick(300);
+ checkTimes(
+ player,
+ [null, 200], [
+ [null, 200],
+ [null, -300], [
+ [null, -800],
+ [null, -800]]],
+ 't = 300');
+
+ player.play();
+ tick(310);
+ checkTimes(
+ player,
+ [110, 200], [
+ [110, 200],
+ [610, -300], [
+ [1110, -800],
+ [1110, -800]]],
+ 't = 310');
+
+ tick(1310);
+ checkTimes(
+ player,
+ [110, 1200], [
+ [110, 500],
+ [610, 500], [
+ [1110, 200],
+ [1110, 200]]],
+ 't = 1310');
+
+ player.pause();
+ checkTimes(
+ player,
+ [null, null], [
+ [null, 500],
+ [null, 500], [
+ [null, null],
+ [null, null]]],
+ 't = 1310');
+
+ tick(1400);
+ checkTimes(
+ player,
+ [null, 1200], [
+ [null, 500],
+ [null, 500], [
+ [null, 200],
+ [null, 200]]],
+ 't = 1410');
+
+ player.play();
+ tick(1410);
+ checkTimes(
+ player,
+ [210, 1200], [
+ [210, 500],
+ [710, 500], [
+ [1210, 200],
+ [1210, 200]]],
+ 't = 1410');
+
+ tick(1610);
+ checkTimes(
+ player,
+ [210, 1400], [
+ [210, 500],
+ [710, 500], [
+ [1210, 400],
+ [1210, 400]]],
+ 't = 1610');
+
+ player.pause();
+ tick(1810);
+ checkTimes(
+ player,
+ [null, 1400], [
+ [null, 500],
+ [null, 500], [
+ [null, 400],
+ [null, 400]]],
+ 't = 1810');
+
+ player.play();
+ tick(1820);
+ checkTimes(
+ player,
+ [420, 1400], [
+ [420, 500],
+ [920, 500], [
+ [1420, 400],
+ [1420, 400]]],
+ 't = 1820');
+
+ tick(2020);
+ checkTimes(
+ player,
+ [420, 1500], [
+ [420, 500],
+ [920, 500], [
+ [1420, 500],
+ [1420, 500]]],
+ 't = 2020');
+
+ player.pause();
+ checkTimes(
+ player,
+ [null, 1500], [
+ [null, 500],
+ [null, 500], [
+ [null, 500],
+ [null, 500]]],
+ 't = 2020');
+ });
+
+ test('pausing works as expected with an empty AnimationSequence inside an AnimationSequence', function() {
+ var player = document.timeline.play(this.seqWithEmptySeq_source);
+ tick(0);
+ checkTimes(
+ player,
+ [0, 0], [0, 0],
+ 't = 0');
+
+ player.pause();
+ checkTimes(
+ player,
+ [null, 0], [null, 0],
+ 't = 0 after pause');
+ });
+
+ test('pausing works as expected with an empty AnimationGroup inside an AnimationSequence', function() {
+ var player = document.timeline.play(this.seqWithEmptyGroup_source);
+ tick(0);
+ checkTimes(
+ player,
+ [0, 0], [0, 0],
+ 't = 0');
+
+ player.pause();
+ checkTimes(
+ player,
+ [null, 0], [null, 0],
+ 't = 0 after pause');
+ });
+
+ test('playState works for groups', function() {
+ var target = document.createElement('div');
+ document.body.appendChild(target);
+ var anim = new AnimationSequence([new Animation(target, [], 100), new Animation(target, [], 100)]);
+ var p = document.timeline.play(anim);
+ assert.equal(p.playState, 'pending');
+ tick(1);
+ assert.equal(p.playState, 'running');
+ assert.equal(p._childPlayers[0]._player.playState, 'running');
+ assert.equal(p._childPlayers[1]._player.playState, 'running');
+ tick(101);
+ assert.equal(p.playState, 'running');
+ assert.equal(p._childPlayers[0]._player.playState, 'finished');
+ assert.equal(p._childPlayers[1]._player.playState, 'running');
+ p.pause();
+ assert.equal(p.playState, 'pending');
+ assert.equal(p._childPlayers[0]._player.playState, 'paused');
+ assert.equal(p._childPlayers[1]._player.playState, 'pending');
+ tick(102);
+ assert.equal(p.playState, 'paused');
+ assert.equal(p._childPlayers[0]._player.playState, 'paused');
+ assert.equal(p._childPlayers[1]._player.playState, 'paused');
+ p.play();
+ assert.equal(p.playState, 'pending');
+ assert.equal(p._childPlayers[0]._player.playState, 'pending');
+ assert.equal(p._childPlayers[1]._player.playState, 'pending');
+ tick(103);
+ assert.equal(p.playState, 'running');
+ assert.equal(p._childPlayers[0]._player.playState, 'finished');
+ assert.equal(p._childPlayers[1]._player.playState, 'running');
+ tick(204);
+ assert.equal(p.playState, 'finished');
+ assert.equal(p._childPlayers[0]._player.playState, 'finished');
+ assert.equal(p._childPlayers[1]._player.playState, 'finished');
+ });
+});
« no previous file with comments | « polymer_0.5.0/bower_components/web-animations-js/test/js/group-constructors.js ('k') | polymer_0.5.0/bower_components/web-animations-js/test/js/group-player-finish-event.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698