From 70d8f9e745e1cd7e2b4a7bb2f609dd79c891accb Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 9 Mar 2015 08:09:37 +1100 Subject: [PATCH 01/91] Intial value for time fraction should be null, not undef. --- src/effect-callback.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/effect-callback.js b/src/effect-callback.js index 57a14180..ff1a2db8 100644 --- a/src/effect-callback.js +++ b/src/effect-callback.js @@ -20,7 +20,7 @@ var target = player.source.target; var effect = player.source.effect; var timing = player.source.timing; - var last = undefined; + var last = null; timing = shared.normalizeTimingInput(timing); var callback = function() { var t = callback._player ? callback._player.currentTime : null; From 10dccd402f46c34bd8ebe484ff9b8028fcdc0a90 Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 9 Mar 2015 11:26:04 +1100 Subject: [PATCH 02/91] animations that are starting in the future should not be called back --- test/js/effect-callback.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/js/effect-callback.js b/test/js/effect-callback.js index 2a242458..c51e0819 100644 --- a/test/js/effect-callback.js +++ b/test/js/effect-callback.js @@ -12,7 +12,7 @@ suite('effect-callback', function() { tick(200); tick(1000); tick(1100); - assert.deepEqual(fractions, [null, 0, 0.1]); + assert.deepEqual(fractions, [0, 0.1]); }); test('duration 0 players get sampled at least once', function() { From 4597d9feababec716885766e100f924f248c3830 Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 16 Mar 2015 13:20:18 +1100 Subject: [PATCH 03/91] Arrange children based on parent timing --- src/web-animations-next-player.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/web-animations-next-player.js b/src/web-animations-next-player.js index d081f4c5..41e1eed3 100644 --- a/src/web-animations-next-player.js +++ b/src/web-animations-next-player.js @@ -50,7 +50,6 @@ _updateChildren: function() { if (!this.source || this.playState == 'idle') return; - var offset = this.source._timing.delay; this._childPlayers.forEach(function(childPlayer) { this._arrangeChildren(childPlayer, offset); @@ -86,7 +85,7 @@ }, _arrangeChildren: function(childPlayer, offset) { if (this.startTime === null) { - childPlayer.currentTime = this.source.player.currentTime - offset; + childPlayer.currentTime = this.currentTime - offset; childPlayer._startTime = null; } else if (childPlayer.startTime !== this.startTime + offset) { childPlayer.startTime = this.startTime + offset; From 3794c65c840ddd565c408908e2ed24ebd4bb369b Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 16 Mar 2015 13:22:57 +1100 Subject: [PATCH 04/91] Fixed up whitespace --- src/web-animations-next-player.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/web-animations-next-player.js b/src/web-animations-next-player.js index 41e1eed3..61aae015 100644 --- a/src/web-animations-next-player.js +++ b/src/web-animations-next-player.js @@ -50,6 +50,7 @@ _updateChildren: function() { if (!this.source || this.playState == 'idle') return; + var offset = this.source._timing.delay; this._childPlayers.forEach(function(childPlayer) { this._arrangeChildren(childPlayer, offset); From 69b5b5a13f1433024ab5e6b4a3636796aed141ce Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 13:06:23 +1100 Subject: [PATCH 05/91] renamed files in src animation.js --------------> keyframe-effect.js animation-constructor.js --> keyframe-effect-constructor.js animation-node.js ---------> effect-node.js animation.js --------------> player.js renamed constructors in keyframe-effect-constructor.js KeyframeEffect --------------> KeyframeList webAnimationsNext.Animation -> webAnimationsNext.KeyframeEffect renamed some local variables and functions in keyframe-effect-constructor.js --- src/animation.js | 221 +++++++++++++---- src/{animation-node.js => effect-node.js} | 10 +- ...ctor.js => keyframe-effect-constructor.js} | 26 +- src/keyframe-effect.js | 65 +++++ src/player.js | 202 ---------------- src/web-animations-next-player.js | 224 ------------------ 6 files changed, 264 insertions(+), 484 deletions(-) rename src/{animation-node.js => effect-node.js} (80%) rename src/{animation-constructor.js => keyframe-effect-constructor.js} (76%) create mode 100644 src/keyframe-effect.js delete mode 100644 src/player.js delete mode 100644 src/web-animations-next-player.js diff --git a/src/animation.js b/src/animation.js index 233217d4..e1d30f0b 100644 --- a/src/animation.js +++ b/src/animation.js @@ -12,54 +12,191 @@ // See the License for the specific language governing permissions and // limitations under the License. -(function(shared, scope, testing) { +(function(scope, testing) { - scope.Animation = function(target, effectInput, timingInput) { - var animationNode = scope.AnimationNode(shared.normalizeTimingInput(timingInput)); - var effect = scope.convertEffectInput(effectInput); - var timeFraction; - var animation = function() { - WEB_ANIMATIONS_TESTING && console.assert(typeof timeFraction !== 'undefined'); - effect(target, timeFraction); - }; - // Returns whether the animation is in effect or not after the timing update. - animation._update = function(localTime) { - timeFraction = animationNode(localTime); - return timeFraction !== null; - }; - animation._clear = function() { - effect(target, null); - }; - animation._hasSameTarget = function(otherTarget) { - return target === otherTarget; - }; - animation._isCurrent = animationNode._isCurrent; - animation._totalDuration = animationNode._totalDuration; - return animation; + var sequenceNumber = 0; + + var AnimationPlayerEvent = function(target, currentTime, timelineTime) { + this.target = target; + this.currentTime = currentTime; + this.timelineTime = timelineTime; + + this.type = 'finish'; + this.bubbles = false; + this.cancelable = false; + this.currentTarget = target; + this.defaultPrevented = false; + this.eventPhase = Event.AT_TARGET; + this.timeStamp = Date.now(); + }; + + scope.Player = function(source) { + this._sequenceNumber = sequenceNumber++; + this._currentTime = 0; + this._startTime = null; + this.paused = false; + this._playbackRate = 1; + this._inTimeline = true; + this._finishedFlag = false; + this.onfinish = null; + this._finishHandlers = []; + this._source = source; + this._inEffect = this._source._update(0); + this._idle = true; + this._currentTimePending = false; }; - scope.NullAnimation = function(clear) { - var nullAnimation = function() { - if (clear) { - clear(); - clear = null; + scope.Player.prototype = { + _ensureAlive: function() { + this._inEffect = this._source._update(this.currentTime); + if (!this._inTimeline && (this._inEffect || !this._finishedFlag)) { + this._inTimeline = true; + scope.timeline._players.push(this); + } + }, + _tickCurrentTime: function(newTime, ignoreLimit) { + if (newTime != this._currentTime) { + this._currentTime = newTime; + if (this.finished && !ignoreLimit) + this._currentTime = this._playbackRate > 0 ? this._totalDuration : 0; + this._ensureAlive(); + } + }, + get currentTime() { + if (this._idle || this._currentTimePending) + return null; + return this._currentTime; + }, + set currentTime(newTime) { + newTime = +newTime; + if (isNaN(newTime)) + return; + scope.restart(); + if (!this.paused && this._startTime != null) { + this._startTime = this._timeline.currentTime - newTime / this._playbackRate; } - }; - nullAnimation._update = function() { - return null; - }; - nullAnimation._totalDuration = 0; - nullAnimation._isCurrent = function() { - return false; - }; - nullAnimation._hasSameTarget = function() { - return false; - }; - return nullAnimation; + this._currentTimePending = false; + if (this._currentTime == newTime) + return; + this._tickCurrentTime(newTime, true); + scope.invalidateEffects(); + }, + get startTime() { + return this._startTime; + }, + set startTime(newTime) { + newTime = +newTime; + if (isNaN(newTime)) + return; + if (this.paused || this._idle) + return; + this._startTime = newTime; + this._tickCurrentTime((this._timeline.currentTime - this._startTime) * this.playbackRate); + scope.invalidateEffects(); + }, + get playbackRate() { + return this._playbackRate; + }, + set playbackRate(value) { + var oldCurrentTime = this.currentTime; + this._playbackRate = value; + if (oldCurrentTime != null) { + this.currentTime = oldCurrentTime; + } + }, + get finished() { + return !this._idle && (this._playbackRate > 0 && this._currentTime >= this._totalDuration || + this._playbackRate < 0 && this._currentTime <= 0); + }, + get _totalDuration() { return this._source._totalDuration; }, + get playState() { + if (this._idle) + return 'idle'; + if ((this._startTime == null && !this.paused && this.playbackRate != 0) || this._currentTimePending) + return 'pending'; + if (this.paused) + return 'paused'; + if (this.finished) + return 'finished'; + return 'running'; + }, + play: function() { + this.paused = false; + if (this.finished || this._idle) { + this._currentTime = this._playbackRate > 0 ? 0 : this._totalDuration; + this._startTime = null; + scope.invalidateEffects(); + } + this._finishedFlag = false; + scope.restart(); + this._idle = false; + this._ensureAlive(); + }, + pause: function() { + if (!this.finished && !this.paused && !this._idle) { + this._currentTimePending = true; + } + this._startTime = null; + this.paused = true; + }, + finish: function() { + if (this._idle) + return; + this.currentTime = this._playbackRate > 0 ? this._totalDuration : 0; + this._startTime = this._totalDuration - this.currentTime; + this._currentTimePending = false; + }, + cancel: function() { + this._inEffect = false; + this._idle = true; + this.currentTime = 0; + this._startTime = null; + }, + reverse: function() { + this._playbackRate *= -1; + this._startTime = null; + this.play(); + }, + addEventListener: function(type, handler) { + if (typeof handler == 'function' && type == 'finish') + this._finishHandlers.push(handler); + }, + removeEventListener: function(type, handler) { + if (type != 'finish') + return; + var index = this._finishHandlers.indexOf(handler); + if (index >= 0) + this._finishHandlers.splice(index, 1); + }, + _fireEvents: function(baseTime) { + var finished = this.finished; + if ((finished || this._idle) && !this._finishedFlag) { + var event = new AnimationPlayerEvent(this, this._currentTime, baseTime); + var handlers = this._finishHandlers.concat(this.onfinish ? [this.onfinish] : []); + setTimeout(function() { + handlers.forEach(function(handler) { + handler.call(event.target, event); + }); + }, 0); + } + this._finishedFlag = finished; + }, + _tick: function(timelineTime) { + if (!this._idle && !this.paused) { + if (this._startTime == null) + this.startTime = timelineTime - this._currentTime / this.playbackRate; + else if (!this.finished) + this._tickCurrentTime((timelineTime - this._startTime) * this.playbackRate); + } + + this._currentTimePending = false; + this._fireEvents(timelineTime); + return !this._idle && (this._inEffect || !this._finishedFlag); + }, }; if (WEB_ANIMATIONS_TESTING) { - testing.webAnimations1Animation = scope.Animation; + testing.Player = scope.Player; } -})(webAnimationsShared, webAnimations1, webAnimationsTesting); +})(webAnimations1, webAnimationsTesting); diff --git a/src/animation-node.js b/src/effect-node.js similarity index 80% rename from src/animation-node.js rename to src/effect-node.js index 390402c3..907b281b 100644 --- a/src/animation-node.js +++ b/src/effect-node.js @@ -14,18 +14,18 @@ (function(shared, scope) { - scope.AnimationNode = function(timing) { + scope.EffectNode = function(timing) { var timeFraction = 0; var activeDuration = shared.calculateActiveDuration(timing); - var animationNode = function(localTime) { + var effectNode = function(localTime) { return shared.calculateTimeFraction(activeDuration, localTime, timing); }; - animationNode._totalDuration = timing.delay + activeDuration + timing.endDelay; - animationNode._isCurrent = function(localTime) { + effectNode._totalDuration = timing.delay + activeDuration + timing.endDelay; + effectNode._isCurrent = function(localTime) { var phase = shared.calculatePhase(activeDuration, localTime, timing); return phase === PhaseActive || phase === PhaseBefore; }; - return animationNode; + return effectNode; }; })(webAnimationsShared, webAnimations1); diff --git a/src/animation-constructor.js b/src/keyframe-effect-constructor.js similarity index 76% rename from src/animation-constructor.js rename to src/keyframe-effect-constructor.js index 93496be6..3baa0003 100644 --- a/src/animation-constructor.js +++ b/src/keyframe-effect-constructor.js @@ -14,15 +14,19 @@ (function(shared, scope, testing) { - function KeyframeEffect(effect) { + // FIXME: Make this shareable and rename to SharedKeyframeList. + function KeyframeList(effect) { this._frames = shared.normalizeKeyframes(effect); } - KeyframeEffect.prototype = { + KeyframeList.prototype = { getFrames: function() { return this._frames; } }; - scope.Animation = function(target, effect, timingInput) { + // FIXME: This constructor is also used for custom effects (including in groups/sequences). + // Rename to Effect & add scope.KeyframeEffect alias? Won't matter once changes to custom effects + // are added, so prob not worth it. + scope.KeyframeEffect = function(target, effect, timingInput) { this.target = target; // TODO: Store a clone, not the same instance. @@ -36,7 +40,7 @@ if (typeof effect == 'function') this.effect = effect; else - this.effect = new KeyframeEffect(effect); + this.effect = new KeyframeList(effect); this._effect = effect; this.activeDuration = shared.calculateActiveDuration(this._timing); return this; @@ -44,20 +48,20 @@ var originalElementAnimate = Element.prototype.animate; Element.prototype.animate = function(effect, timing) { - return scope.timeline.play(new scope.Animation(this, effect, timing)); + return scope.timeline.play(new scope.KeyframeEffect(this, effect, timing)); }; var nullTarget = document.createElementNS('http://www.w3.org/1999/xhtml', 'div'); - scope.newUnderlyingPlayerForAnimation = function(animation) { - var target = animation.target || nullTarget; - var effect = animation._effect; + scope.newUnderlyingPlayerForKeyframeEffect = function(keyframeEffect) { + var target = keyframeEffect.target || nullTarget; + var effect = keyframeEffect._effect; if (typeof effect == 'function') { effect = []; } - return originalElementAnimate.apply(target, [effect, animation._timingInput]); + return originalElementAnimate.apply(target, [effect, keyframeEffect._timingInput]); }; - scope.bindPlayerForAnimation = function(player) { + scope.bindPlayerForKeyframeEffect = function(player) { if (player.source && typeof player.source.effect == 'function') { scope.bindPlayerForCustomEffect(player); } @@ -92,7 +96,7 @@ }, }); - window.Animation = scope.Animation; + window.KeyframeEffect = scope.KeyframeEffect; window.Element.prototype.getAnimationPlayers = function() { return document.timeline.getAnimationPlayers().filter(function(player) { return player.source !== null && player.source.target == this; diff --git a/src/keyframe-effect.js b/src/keyframe-effect.js new file mode 100644 index 00000000..233217d4 --- /dev/null +++ b/src/keyframe-effect.js @@ -0,0 +1,65 @@ +// Copyright 2014 Google Inc. All rights reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +(function(shared, scope, testing) { + + scope.Animation = function(target, effectInput, timingInput) { + var animationNode = scope.AnimationNode(shared.normalizeTimingInput(timingInput)); + var effect = scope.convertEffectInput(effectInput); + var timeFraction; + var animation = function() { + WEB_ANIMATIONS_TESTING && console.assert(typeof timeFraction !== 'undefined'); + effect(target, timeFraction); + }; + // Returns whether the animation is in effect or not after the timing update. + animation._update = function(localTime) { + timeFraction = animationNode(localTime); + return timeFraction !== null; + }; + animation._clear = function() { + effect(target, null); + }; + animation._hasSameTarget = function(otherTarget) { + return target === otherTarget; + }; + animation._isCurrent = animationNode._isCurrent; + animation._totalDuration = animationNode._totalDuration; + return animation; + }; + + scope.NullAnimation = function(clear) { + var nullAnimation = function() { + if (clear) { + clear(); + clear = null; + } + }; + nullAnimation._update = function() { + return null; + }; + nullAnimation._totalDuration = 0; + nullAnimation._isCurrent = function() { + return false; + }; + nullAnimation._hasSameTarget = function() { + return false; + }; + return nullAnimation; + }; + + if (WEB_ANIMATIONS_TESTING) { + testing.webAnimations1Animation = scope.Animation; + } + +})(webAnimationsShared, webAnimations1, webAnimationsTesting); diff --git a/src/player.js b/src/player.js deleted file mode 100644 index e1d30f0b..00000000 --- a/src/player.js +++ /dev/null @@ -1,202 +0,0 @@ -// Copyright 2014 Google Inc. All rights reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -(function(scope, testing) { - - var sequenceNumber = 0; - - var AnimationPlayerEvent = function(target, currentTime, timelineTime) { - this.target = target; - this.currentTime = currentTime; - this.timelineTime = timelineTime; - - this.type = 'finish'; - this.bubbles = false; - this.cancelable = false; - this.currentTarget = target; - this.defaultPrevented = false; - this.eventPhase = Event.AT_TARGET; - this.timeStamp = Date.now(); - }; - - scope.Player = function(source) { - this._sequenceNumber = sequenceNumber++; - this._currentTime = 0; - this._startTime = null; - this.paused = false; - this._playbackRate = 1; - this._inTimeline = true; - this._finishedFlag = false; - this.onfinish = null; - this._finishHandlers = []; - this._source = source; - this._inEffect = this._source._update(0); - this._idle = true; - this._currentTimePending = false; - }; - - scope.Player.prototype = { - _ensureAlive: function() { - this._inEffect = this._source._update(this.currentTime); - if (!this._inTimeline && (this._inEffect || !this._finishedFlag)) { - this._inTimeline = true; - scope.timeline._players.push(this); - } - }, - _tickCurrentTime: function(newTime, ignoreLimit) { - if (newTime != this._currentTime) { - this._currentTime = newTime; - if (this.finished && !ignoreLimit) - this._currentTime = this._playbackRate > 0 ? this._totalDuration : 0; - this._ensureAlive(); - } - }, - get currentTime() { - if (this._idle || this._currentTimePending) - return null; - return this._currentTime; - }, - set currentTime(newTime) { - newTime = +newTime; - if (isNaN(newTime)) - return; - scope.restart(); - if (!this.paused && this._startTime != null) { - this._startTime = this._timeline.currentTime - newTime / this._playbackRate; - } - this._currentTimePending = false; - if (this._currentTime == newTime) - return; - this._tickCurrentTime(newTime, true); - scope.invalidateEffects(); - }, - get startTime() { - return this._startTime; - }, - set startTime(newTime) { - newTime = +newTime; - if (isNaN(newTime)) - return; - if (this.paused || this._idle) - return; - this._startTime = newTime; - this._tickCurrentTime((this._timeline.currentTime - this._startTime) * this.playbackRate); - scope.invalidateEffects(); - }, - get playbackRate() { - return this._playbackRate; - }, - set playbackRate(value) { - var oldCurrentTime = this.currentTime; - this._playbackRate = value; - if (oldCurrentTime != null) { - this.currentTime = oldCurrentTime; - } - }, - get finished() { - return !this._idle && (this._playbackRate > 0 && this._currentTime >= this._totalDuration || - this._playbackRate < 0 && this._currentTime <= 0); - }, - get _totalDuration() { return this._source._totalDuration; }, - get playState() { - if (this._idle) - return 'idle'; - if ((this._startTime == null && !this.paused && this.playbackRate != 0) || this._currentTimePending) - return 'pending'; - if (this.paused) - return 'paused'; - if (this.finished) - return 'finished'; - return 'running'; - }, - play: function() { - this.paused = false; - if (this.finished || this._idle) { - this._currentTime = this._playbackRate > 0 ? 0 : this._totalDuration; - this._startTime = null; - scope.invalidateEffects(); - } - this._finishedFlag = false; - scope.restart(); - this._idle = false; - this._ensureAlive(); - }, - pause: function() { - if (!this.finished && !this.paused && !this._idle) { - this._currentTimePending = true; - } - this._startTime = null; - this.paused = true; - }, - finish: function() { - if (this._idle) - return; - this.currentTime = this._playbackRate > 0 ? this._totalDuration : 0; - this._startTime = this._totalDuration - this.currentTime; - this._currentTimePending = false; - }, - cancel: function() { - this._inEffect = false; - this._idle = true; - this.currentTime = 0; - this._startTime = null; - }, - reverse: function() { - this._playbackRate *= -1; - this._startTime = null; - this.play(); - }, - addEventListener: function(type, handler) { - if (typeof handler == 'function' && type == 'finish') - this._finishHandlers.push(handler); - }, - removeEventListener: function(type, handler) { - if (type != 'finish') - return; - var index = this._finishHandlers.indexOf(handler); - if (index >= 0) - this._finishHandlers.splice(index, 1); - }, - _fireEvents: function(baseTime) { - var finished = this.finished; - if ((finished || this._idle) && !this._finishedFlag) { - var event = new AnimationPlayerEvent(this, this._currentTime, baseTime); - var handlers = this._finishHandlers.concat(this.onfinish ? [this.onfinish] : []); - setTimeout(function() { - handlers.forEach(function(handler) { - handler.call(event.target, event); - }); - }, 0); - } - this._finishedFlag = finished; - }, - _tick: function(timelineTime) { - if (!this._idle && !this.paused) { - if (this._startTime == null) - this.startTime = timelineTime - this._currentTime / this.playbackRate; - else if (!this.finished) - this._tickCurrentTime((timelineTime - this._startTime) * this.playbackRate); - } - - this._currentTimePending = false; - this._fireEvents(timelineTime); - return !this._idle && (this._inEffect || !this._finishedFlag); - }, - }; - - if (WEB_ANIMATIONS_TESTING) { - testing.Player = scope.Player; - } - -})(webAnimations1, webAnimationsTesting); diff --git a/src/web-animations-next-player.js b/src/web-animations-next-player.js deleted file mode 100644 index 61aae015..00000000 --- a/src/web-animations-next-player.js +++ /dev/null @@ -1,224 +0,0 @@ -// Copyright 2014 Google Inc. All rights reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -(function(shared, scope, testing) { - scope.Player = function(source) { - this.source = source; - if (source) { - // FIXME: detach existing player. - source.player = this; - } - this._isGroup = false; - this._player = null; - this._childPlayers = []; - this._callback = null; - this._rebuildUnderlyingPlayer(); - // Players are constructed in the idle state. - this._player.cancel(); - }; - - // TODO: add a source getter/setter - scope.Player.prototype = { - _rebuildUnderlyingPlayer: function() { - if (this._player) { - this._player.cancel(); - this._player = null; - } - - if (!this.source || this.source instanceof window.Animation) { - this._player = scope.newUnderlyingPlayerForAnimation(this.source); - scope.bindPlayerForAnimation(this); - } - if (this.source instanceof window.AnimationSequence || this.source instanceof window.AnimationGroup) { - this._player = scope.newUnderlyingPlayerForGroup(this.source); - scope.bindPlayerForGroup(this); - } - - // FIXME: move existing currentTime/startTime/playState to new player - }, - _updateChildren: function() { - if (!this.source || this.playState == 'idle') - return; - - var offset = this.source._timing.delay; - this._childPlayers.forEach(function(childPlayer) { - this._arrangeChildren(childPlayer, offset); - if (this.source instanceof window.AnimationSequence) - offset += scope.groupChildDuration(childPlayer.source); - }.bind(this)); - }, - _setExternalPlayer: function(player) { - if (!this.source || !this._isGroup) - return; - for (var i = 0; i < this.source.children.length; i++) { - this.source.children[i].player = player; - this._childPlayers[i]._setExternalPlayer(player); - } - }, - _constructChildren: function() { - if (!this.source || !this._isGroup) - return; - var offset = this.source._timing.delay; - this.source.children.forEach(function(child) { - var childPlayer = window.document.timeline.play(child); - this._childPlayers.push(childPlayer); - childPlayer.playbackRate = this.playbackRate; - if (this.paused) - childPlayer.pause(); - child.player = this.source.player; - - this._arrangeChildren(childPlayer, offset); - - if (this.source instanceof window.AnimationSequence) - offset += scope.groupChildDuration(child); - }.bind(this)); - }, - _arrangeChildren: function(childPlayer, offset) { - if (this.startTime === null) { - childPlayer.currentTime = this.currentTime - offset; - childPlayer._startTime = null; - } else if (childPlayer.startTime !== this.startTime + offset) { - childPlayer.startTime = this.startTime + offset; - } - }, - get paused() { - return this._player.paused; - }, - get playState() { - return this._player.playState; - }, - get onfinish() { - return this._onfinish; - }, - set onfinish(v) { - if (typeof v == 'function') { - this._onfinish = v; - this._player.onfinish = (function(e) { - e.target = this; - v.call(this, e); - }).bind(this); - } else { - this._player.onfinish = v; - this.onfinish = this._player.onfinish; - } - }, - get currentTime() { - return this._player.currentTime; - }, - set currentTime(v) { - this._player.currentTime = v; - this._register(); - this._forEachChild(function(child, offset) { - child.currentTime = v - offset; - }); - }, - get startTime() { - return this._player.startTime; - }, - set startTime(v) { - this._player.startTime = v; - this._register(); - this._forEachChild(function(child, offset) { - child.startTime = v + offset; - }); - }, - get playbackRate() { - return this._player.playbackRate; - }, - set playbackRate(value) { - this._player.playbackRate = value; - this._forEachChild(function(childPlayer) { - childPlayer.playbackRate = value; - }); - }, - get finished() { - return this._player.finished; - }, - play: function() { - this._player.play(); - this._register(); - scope.awaitStartTime(this); - this._forEachChild(function(child) { - var time = child.currentTime; - child.play(); - child.currentTime = time; - }); - }, - pause: function() { - this._player.pause(); - this._register(); - this._forEachChild(function(child) { - child.pause(); - }); - }, - finish: function() { - this._player.finish(); - this._register(); - // TODO: child players?? - }, - cancel: function() { - this._player.cancel(); - this._register(); - this._removePlayers(); - }, - reverse: function() { - this._player.reverse(); - scope.awaitStartTime(this); - this._register(); - this._forEachChild(function(child, offset) { - child.reverse(); - child.startTime = this.startTime + offset * this.playbackRate; - child.currentTime = this.currentTime + offset * this.playbackRate; - }); - }, - addEventListener: function(type, handler) { - var wrapped = handler; - if (typeof handler == 'function') { - wrapped = (function(e) { - e.target = this; - handler.call(this, e); - }).bind(this); - handler._wrapper = wrapped; - } - this._player.addEventListener(type, wrapped); - }, - removeEventListener: function(type, handler) { - this._player.removeEventListener(type, (handler && handler._wrapper) || handler); - }, - _removePlayers: function() { - while (this._childPlayers.length) - this._childPlayers.pop().cancel(); - }, - _forEachChild: function(f) { - var offset = 0; - if (this.source.children && this._childPlayers.length < this.source.children.length) - this._constructChildren(); - this._childPlayers.forEach(function(child) { - f.call(this, child, offset); - if (this.source instanceof window.AnimationSequence) - offset += child.source.activeDuration; - }.bind(this)); - - if (this._player.playState == 'pending') - return; - var timing = this.source._timing; - var t = this._player.currentTime; - if (t !== null) - t = shared.calculateTimeFraction(shared.calculateActiveDuration(timing), t, timing); - if (t == null || isNaN(t)) - this._removePlayers(); - }, - }; - -})(webAnimationsShared, webAnimationsNext, webAnimationsTesting); From d43cb85bb121081d992c5e1fc2b0fb463be832cb Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 13:22:37 +1100 Subject: [PATCH 06/91] Rename animation-constructor test to keyframe-effect --- test/js/animation-constructor.js | 80 -------------------------------- 1 file changed, 80 deletions(-) delete mode 100644 test/js/animation-constructor.js diff --git a/test/js/animation-constructor.js b/test/js/animation-constructor.js deleted file mode 100644 index d7f521f1..00000000 --- a/test/js/animation-constructor.js +++ /dev/null @@ -1,80 +0,0 @@ -suite('animation-constructor', function() { - setup(function() { - document.timeline.getAnimationPlayers().forEach(function(player) { - player.cancel(); - }); - }); - - test('Playing an Animation makes a Player', function() { - var animation = new Animation(document.body, [], 1000); - assert.equal(document.body.getAnimationPlayers().length, 0); - - var player = document.timeline.play(animation); - tick(200); - assert.equal(document.body.getAnimationPlayers().length, 1); - - tick(1600); - assert.equal(document.body.getAnimationPlayers().length, 0); - }); - - test('Setting the timing function on an Animation works', function() { - function leftAsNumber(target) { - left = getComputedStyle(target).left; - return Number(left.substring(0, left.length - 2)); - } - - var target1 = document.createElement('div'); - var target2 = document.createElement('div'); - target1.style.position = 'absolute'; - target2.style.position = 'absolute'; - document.body.appendChild(target1); - document.body.appendChild(target2); - - var animation1 = new Animation(target1, [{left: '0px'}, {left: '50px'}], 1000); - var animation2 = new Animation(target2, [{left: '0px'}, {left: '50px'}], {duration: 1000, easing: 'ease-in'}); - - var player1 = document.timeline.play(animation1); - var player2 = document.timeline.play(animation2); - - tick(0); - assert.equal(leftAsNumber(target1), 0); - assert.equal(leftAsNumber(target2), 0); - - tick(250); - assert.closeTo(leftAsNumber(target1), 12.5, 1); - assert.closeTo(leftAsNumber(target2), 4.65, 1); - - tick(500); - assert.closeTo(leftAsNumber(target1), 25, 1); - assert.closeTo(leftAsNumber(target2), 15.25, 1); - }); - - test('Timing is always converted to AnimationTimingInput', function() { - var target = document.createElement('div'); - document.body.appendChild(target); - - var keyframes = [{background: 'blue'}, {background: 'red'}]; - - var animation = new Animation(target, keyframes, 200); - assert.equal(animation.timing.duration, 200); - - animation = new Animation(target, keyframes); - assert.isDefined(animation.timing); - - animation = new Animation(target, keyframes, {duration: 200}); - var group = new AnimationGroup([animation]); - assert.equal(group.timing.duration, 'auto'); - }); - - test('Handle null target on Animation', function() { - var animation = new Animation(null, function(tf) { - // noop - }, 200); - - var player = document.timeline.play(animation); - assert.isNotNull(player); - tick(50); - tick(150); - assert.equal(player.currentTime, 100); - }); -}); From 00965e1db301fb0dfda1226ad7cadcbd2fcf527e Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 13:46:41 +1100 Subject: [PATCH 07/91] renamed test files --- src/web-animations-next-animation.js | 224 ++++++++++++++++++ target-config.js | 4 +- ...ish-event.js => animation-finish-event.js} | 0 test/js/{player.js => animation.js} | 0 test/js/{animation-node.js => effect-node.js} | 0 ...ent.js => group-animation-finish-event.js} | 0 .../{group-player.js => group-animation.js} | 0 test/js/keyframe-effect-constructor.js | 80 +++++++ test/runner-web-animations-next-lite.html | 26 -- test/runner-web-animations-next.html | 26 -- test/runner-web-animations.html | 26 -- web-animations-next-lite.dev.html | 44 ---- web-animations-next-lite.dev.js | 21 -- web-animations-next.dev.html | 49 ---- web-animations-next.dev.js | 21 -- web-animations.dev.html | 44 ---- web-animations.dev.js | 21 -- web-animations.html | 50 ---- 18 files changed, 306 insertions(+), 330 deletions(-) create mode 100644 src/web-animations-next-animation.js rename test/js/{player-finish-event.js => animation-finish-event.js} (100%) rename test/js/{player.js => animation.js} (100%) rename test/js/{animation-node.js => effect-node.js} (100%) rename test/js/{group-player-finish-event.js => group-animation-finish-event.js} (100%) rename test/js/{group-player.js => group-animation.js} (100%) create mode 100644 test/js/keyframe-effect-constructor.js delete mode 100644 test/runner-web-animations-next-lite.html delete mode 100644 test/runner-web-animations-next.html delete mode 100644 test/runner-web-animations.html delete mode 100644 web-animations-next-lite.dev.html delete mode 100644 web-animations-next-lite.dev.js delete mode 100644 web-animations-next.dev.html delete mode 100644 web-animations-next.dev.js delete mode 100644 web-animations.dev.html delete mode 100644 web-animations.dev.js delete mode 100644 web-animations.html diff --git a/src/web-animations-next-animation.js b/src/web-animations-next-animation.js new file mode 100644 index 00000000..61aae015 --- /dev/null +++ b/src/web-animations-next-animation.js @@ -0,0 +1,224 @@ +// Copyright 2014 Google Inc. All rights reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +(function(shared, scope, testing) { + scope.Player = function(source) { + this.source = source; + if (source) { + // FIXME: detach existing player. + source.player = this; + } + this._isGroup = false; + this._player = null; + this._childPlayers = []; + this._callback = null; + this._rebuildUnderlyingPlayer(); + // Players are constructed in the idle state. + this._player.cancel(); + }; + + // TODO: add a source getter/setter + scope.Player.prototype = { + _rebuildUnderlyingPlayer: function() { + if (this._player) { + this._player.cancel(); + this._player = null; + } + + if (!this.source || this.source instanceof window.Animation) { + this._player = scope.newUnderlyingPlayerForAnimation(this.source); + scope.bindPlayerForAnimation(this); + } + if (this.source instanceof window.AnimationSequence || this.source instanceof window.AnimationGroup) { + this._player = scope.newUnderlyingPlayerForGroup(this.source); + scope.bindPlayerForGroup(this); + } + + // FIXME: move existing currentTime/startTime/playState to new player + }, + _updateChildren: function() { + if (!this.source || this.playState == 'idle') + return; + + var offset = this.source._timing.delay; + this._childPlayers.forEach(function(childPlayer) { + this._arrangeChildren(childPlayer, offset); + if (this.source instanceof window.AnimationSequence) + offset += scope.groupChildDuration(childPlayer.source); + }.bind(this)); + }, + _setExternalPlayer: function(player) { + if (!this.source || !this._isGroup) + return; + for (var i = 0; i < this.source.children.length; i++) { + this.source.children[i].player = player; + this._childPlayers[i]._setExternalPlayer(player); + } + }, + _constructChildren: function() { + if (!this.source || !this._isGroup) + return; + var offset = this.source._timing.delay; + this.source.children.forEach(function(child) { + var childPlayer = window.document.timeline.play(child); + this._childPlayers.push(childPlayer); + childPlayer.playbackRate = this.playbackRate; + if (this.paused) + childPlayer.pause(); + child.player = this.source.player; + + this._arrangeChildren(childPlayer, offset); + + if (this.source instanceof window.AnimationSequence) + offset += scope.groupChildDuration(child); + }.bind(this)); + }, + _arrangeChildren: function(childPlayer, offset) { + if (this.startTime === null) { + childPlayer.currentTime = this.currentTime - offset; + childPlayer._startTime = null; + } else if (childPlayer.startTime !== this.startTime + offset) { + childPlayer.startTime = this.startTime + offset; + } + }, + get paused() { + return this._player.paused; + }, + get playState() { + return this._player.playState; + }, + get onfinish() { + return this._onfinish; + }, + set onfinish(v) { + if (typeof v == 'function') { + this._onfinish = v; + this._player.onfinish = (function(e) { + e.target = this; + v.call(this, e); + }).bind(this); + } else { + this._player.onfinish = v; + this.onfinish = this._player.onfinish; + } + }, + get currentTime() { + return this._player.currentTime; + }, + set currentTime(v) { + this._player.currentTime = v; + this._register(); + this._forEachChild(function(child, offset) { + child.currentTime = v - offset; + }); + }, + get startTime() { + return this._player.startTime; + }, + set startTime(v) { + this._player.startTime = v; + this._register(); + this._forEachChild(function(child, offset) { + child.startTime = v + offset; + }); + }, + get playbackRate() { + return this._player.playbackRate; + }, + set playbackRate(value) { + this._player.playbackRate = value; + this._forEachChild(function(childPlayer) { + childPlayer.playbackRate = value; + }); + }, + get finished() { + return this._player.finished; + }, + play: function() { + this._player.play(); + this._register(); + scope.awaitStartTime(this); + this._forEachChild(function(child) { + var time = child.currentTime; + child.play(); + child.currentTime = time; + }); + }, + pause: function() { + this._player.pause(); + this._register(); + this._forEachChild(function(child) { + child.pause(); + }); + }, + finish: function() { + this._player.finish(); + this._register(); + // TODO: child players?? + }, + cancel: function() { + this._player.cancel(); + this._register(); + this._removePlayers(); + }, + reverse: function() { + this._player.reverse(); + scope.awaitStartTime(this); + this._register(); + this._forEachChild(function(child, offset) { + child.reverse(); + child.startTime = this.startTime + offset * this.playbackRate; + child.currentTime = this.currentTime + offset * this.playbackRate; + }); + }, + addEventListener: function(type, handler) { + var wrapped = handler; + if (typeof handler == 'function') { + wrapped = (function(e) { + e.target = this; + handler.call(this, e); + }).bind(this); + handler._wrapper = wrapped; + } + this._player.addEventListener(type, wrapped); + }, + removeEventListener: function(type, handler) { + this._player.removeEventListener(type, (handler && handler._wrapper) || handler); + }, + _removePlayers: function() { + while (this._childPlayers.length) + this._childPlayers.pop().cancel(); + }, + _forEachChild: function(f) { + var offset = 0; + if (this.source.children && this._childPlayers.length < this.source.children.length) + this._constructChildren(); + this._childPlayers.forEach(function(child) { + f.call(this, child, offset); + if (this.source instanceof window.AnimationSequence) + offset += child.source.activeDuration; + }.bind(this)); + + if (this._player.playState == 'pending') + return; + var timing = this.source._timing; + var t = this._player.currentTime; + if (t !== null) + t = shared.calculateTimeFraction(shared.calculateActiveDuration(timing), t, timing); + if (t == null || isNaN(t)) + this._removePlayers(); + }, + }; + +})(webAnimationsShared, webAnimationsNext, webAnimationsTesting); diff --git a/target-config.js b/target-config.js index 26ae6163..899f1f9b 100644 --- a/target-config.js +++ b/target-config.js @@ -21,7 +21,7 @@ 'src/animation-node.js', 'src/effect.js', 'src/property-interpolation.js', - 'src/animation.js', + 'src/keyframe-effect.js', 'src/apply-preserving-inline-style.js', 'src/element-animatable.js', 'src/interpolation.js', @@ -47,7 +47,7 @@ 'src/animation-node.js', 'src/effect.js', 'src/property-interpolation.js', - 'src/animation.js', + 'src/keyframe-effect.js', 'src/apply.js', 'src/element-animatable.js', 'src/interpolation.js', diff --git a/test/js/player-finish-event.js b/test/js/animation-finish-event.js similarity index 100% rename from test/js/player-finish-event.js rename to test/js/animation-finish-event.js diff --git a/test/js/player.js b/test/js/animation.js similarity index 100% rename from test/js/player.js rename to test/js/animation.js diff --git a/test/js/animation-node.js b/test/js/effect-node.js similarity index 100% rename from test/js/animation-node.js rename to test/js/effect-node.js diff --git a/test/js/group-player-finish-event.js b/test/js/group-animation-finish-event.js similarity index 100% rename from test/js/group-player-finish-event.js rename to test/js/group-animation-finish-event.js diff --git a/test/js/group-player.js b/test/js/group-animation.js similarity index 100% rename from test/js/group-player.js rename to test/js/group-animation.js diff --git a/test/js/keyframe-effect-constructor.js b/test/js/keyframe-effect-constructor.js new file mode 100644 index 00000000..920282c9 --- /dev/null +++ b/test/js/keyframe-effect-constructor.js @@ -0,0 +1,80 @@ +suite('keyframe-effect-constructor', function() { + setup(function() { + document.timeline.getAnimationPlayers().forEach(function(player) { + player.cancel(); + }); + }); + + test('Playing an Animation makes a Player', function() { + var animation = new Animation(document.body, [], 1000); + assert.equal(document.body.getAnimationPlayers().length, 0); + + var player = document.timeline.play(animation); + tick(200); + assert.equal(document.body.getAnimationPlayers().length, 1); + + tick(1600); + assert.equal(document.body.getAnimationPlayers().length, 0); + }); + + test('Setting the timing function on an Animation works', function() { + function leftAsNumber(target) { + left = getComputedStyle(target).left; + return Number(left.substring(0, left.length - 2)); + } + + var target1 = document.createElement('div'); + var target2 = document.createElement('div'); + target1.style.position = 'absolute'; + target2.style.position = 'absolute'; + document.body.appendChild(target1); + document.body.appendChild(target2); + + var animation1 = new Animation(target1, [{left: '0px'}, {left: '50px'}], 1000); + var animation2 = new Animation(target2, [{left: '0px'}, {left: '50px'}], {duration: 1000, easing: 'ease-in'}); + + var player1 = document.timeline.play(animation1); + var player2 = document.timeline.play(animation2); + + tick(0); + assert.equal(leftAsNumber(target1), 0); + assert.equal(leftAsNumber(target2), 0); + + tick(250); + assert.closeTo(leftAsNumber(target1), 12.5, 1); + assert.closeTo(leftAsNumber(target2), 4.65, 1); + + tick(500); + assert.closeTo(leftAsNumber(target1), 25, 1); + assert.closeTo(leftAsNumber(target2), 15.25, 1); + }); + + test('Timing is always converted to AnimationTimingInput', function() { + var target = document.createElement('div'); + document.body.appendChild(target); + + var keyframes = [{background: 'blue'}, {background: 'red'}]; + + var animation = new Animation(target, keyframes, 200); + assert.equal(animation.timing.duration, 200); + + animation = new Animation(target, keyframes); + assert.isDefined(animation.timing); + + animation = new Animation(target, keyframes, {duration: 200}); + var group = new AnimationGroup([animation]); + assert.equal(group.timing.duration, 'auto'); + }); + + test('Handle null target on Animation', function() { + var animation = new Animation(null, function(tf) { + // noop + }, 200); + + var player = document.timeline.play(animation); + assert.isNotNull(player); + tick(50); + tick(150); + assert.equal(player.currentTime, 100); + }); +}); diff --git a/test/runner-web-animations-next-lite.html b/test/runner-web-animations-next-lite.html deleted file mode 100644 index 41f267a6..00000000 --- a/test/runner-web-animations-next-lite.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - -
diff --git a/test/runner-web-animations-next.html b/test/runner-web-animations-next.html deleted file mode 100644 index 9bc9f785..00000000 --- a/test/runner-web-animations-next.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - -
diff --git a/test/runner-web-animations.html b/test/runner-web-animations.html deleted file mode 100644 index 0a9500f1..00000000 --- a/test/runner-web-animations.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - -
diff --git a/web-animations-next-lite.dev.html b/web-animations-next-lite.dev.html deleted file mode 100644 index 82bb8aeb..00000000 --- a/web-animations-next-lite.dev.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/web-animations-next-lite.dev.js b/web-animations-next-lite.dev.js deleted file mode 100644 index 8cc77540..00000000 --- a/web-animations-next-lite.dev.js +++ /dev/null @@ -1,21 +0,0 @@ -// Copyright 2014 Google Inc. All rights reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -var webAnimationsSourceTarget = 'web-animations-next-lite'; -var WEB_ANIMATIONS_TESTING = false; -(function() { - var scripts = document.getElementsByTagName('script'); - var location = scripts[scripts.length - 1].src.replace(/[^\/]+$/, ''); - document.write(''); - document.write(''); -})(); diff --git a/web-animations-next.dev.html b/web-animations-next.dev.html deleted file mode 100644 index d608ef4e..00000000 --- a/web-animations-next.dev.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/web-animations-next.dev.js b/web-animations-next.dev.js deleted file mode 100644 index 8f2a4e29..00000000 --- a/web-animations-next.dev.js +++ /dev/null @@ -1,21 +0,0 @@ -// Copyright 2014 Google Inc. All rights reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -var webAnimationsSourceTarget = 'web-animations-next'; -var WEB_ANIMATIONS_TESTING = false; -(function() { - var scripts = document.getElementsByTagName('script'); - var location = scripts[scripts.length - 1].src.replace(/[^\/]+$/, ''); - document.write(''); - document.write(''); -})(); diff --git a/web-animations.dev.html b/web-animations.dev.html deleted file mode 100644 index c0c5ff32..00000000 --- a/web-animations.dev.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/web-animations.dev.js b/web-animations.dev.js deleted file mode 100644 index 7f2b4571..00000000 --- a/web-animations.dev.js +++ /dev/null @@ -1,21 +0,0 @@ -// Copyright 2014 Google Inc. All rights reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -var webAnimationsSourceTarget = 'web-animations'; -var WEB_ANIMATIONS_TESTING = false; -(function() { - var scripts = document.getElementsByTagName('script'); - var location = scripts[scripts.length - 1].src.replace(/[^\/]+$/, ''); - document.write(''); - document.write(''); -})(); diff --git a/web-animations.html b/web-animations.html deleted file mode 100644 index b5de36c8..00000000 --- a/web-animations.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - From 386ec8fd79e4b4e1cb284626a89156a70c91bf78 Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 13:51:12 +1100 Subject: [PATCH 08/91] Updated target-config. --- target-config.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/target-config.js b/target-config.js index 899f1f9b..c0deadfa 100644 --- a/target-config.js +++ b/target-config.js @@ -18,7 +18,7 @@ 'src/scope.js']; var webAnimations1Src = [ - 'src/animation-node.js', + 'src/effect-node.js', 'src/effect.js', 'src/property-interpolation.js', 'src/keyframe-effect.js', @@ -26,7 +26,7 @@ 'src/element-animatable.js', 'src/interpolation.js', 'src/matrix-interpolation.js', - 'src/player.js', + 'src/animation.js', 'src/tick.js', 'src/matrix-decomposition.js', 'src/handler-utils.js', @@ -44,14 +44,14 @@ ]; var liteWebAnimations1Src = [ - 'src/animation-node.js', + 'src/effect-node.js', 'src/effect.js', 'src/property-interpolation.js', 'src/keyframe-effect.js', 'src/apply.js', 'src/element-animatable.js', 'src/interpolation.js', - 'src/player.js', + 'src/animation.js', 'src/tick.js', 'src/handler-utils.js', 'src/shadow-handler.js', @@ -73,13 +73,13 @@ var webAnimationsNextSrc = [ 'src/timeline.js', - 'src/web-animations-next-player.js', - 'src/animation-constructor.js', + 'src/web-animations-next-animation.js', + 'src/keyframe-effect-constructor.js', 'src/effect-callback.js', 'src/group-constructors.js']; var webAnimations1Test = [ - 'test/js/animation-node.js', + 'test/js/effect-node.js', 'test/js/apply-preserving-inline-style.js', 'test/js/box-handler.js', 'test/js/color-handler.js', @@ -88,19 +88,19 @@ 'test/js/interpolation.js', 'test/js/matrix-interpolation.js', 'test/js/number-handler.js', - 'test/js/player.js', - 'test/js/player-finish-event.js', + 'test/js/animation.js', + 'test/js/animation-finish-event.js', 'test/js/property-interpolation.js', 'test/js/tick.js', 'test/js/timing.js', 'test/js/transform-handler.js']; var webAnimationsNextTest = webAnimations1Test.concat( - 'test/js/animation-constructor.js', + 'test/js/keyframe-effect-constructor.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/group-animation.js', + 'test/js/group-animation-finish-event.js', 'test/js/timeline.js'); // This object specifies the source and test files for different Web Animation build targets. From f560505c8409dad551f524322c77d14bedd10a60 Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 14:11:51 +1100 Subject: [PATCH 09/91] Rename vars in animation.js (formerly player.js) --- src/animation.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/animation.js b/src/animation.js index e1d30f0b..5ab1ece3 100644 --- a/src/animation.js +++ b/src/animation.js @@ -16,7 +16,7 @@ var sequenceNumber = 0; - var AnimationPlayerEvent = function(target, currentTime, timelineTime) { + var AnimationEvent = function(target, currentTime, timelineTime) { this.target = target; this.currentTime = currentTime; this.timelineTime = timelineTime; @@ -30,7 +30,7 @@ this.timeStamp = Date.now(); }; - scope.Player = function(source) { + scope.Animation = function(source) { this._sequenceNumber = sequenceNumber++; this._currentTime = 0; this._startTime = null; @@ -46,12 +46,12 @@ this._currentTimePending = false; }; - scope.Player.prototype = { + scope.Animation.prototype = { _ensureAlive: function() { this._inEffect = this._source._update(this.currentTime); if (!this._inTimeline && (this._inEffect || !this._finishedFlag)) { this._inTimeline = true; - scope.timeline._players.push(this); + scope.timeline._animations.push(this); } }, _tickCurrentTime: function(newTime, ignoreLimit) { @@ -171,7 +171,7 @@ _fireEvents: function(baseTime) { var finished = this.finished; if ((finished || this._idle) && !this._finishedFlag) { - var event = new AnimationPlayerEvent(this, this._currentTime, baseTime); + var event = new AnimationEvent(this, this._currentTime, baseTime); var handlers = this._finishHandlers.concat(this.onfinish ? [this.onfinish] : []); setTimeout(function() { handlers.forEach(function(handler) { @@ -196,7 +196,7 @@ }; if (WEB_ANIMATIONS_TESTING) { - testing.Player = scope.Player; + testing.Animation = scope.Animation; } })(webAnimations1, webAnimationsTesting); From 1c346e6d8852247ef2a2a69e4241bf6b6f57ed92 Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 14:16:39 +1100 Subject: [PATCH 10/91] AnimationNode -> AnimationEffect everywhere in src. --- src/keyframe-effect.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/keyframe-effect.js b/src/keyframe-effect.js index 233217d4..6e7695e4 100644 --- a/src/keyframe-effect.js +++ b/src/keyframe-effect.js @@ -15,7 +15,7 @@ (function(shared, scope, testing) { scope.Animation = function(target, effectInput, timingInput) { - var animationNode = scope.AnimationNode(shared.normalizeTimingInput(timingInput)); + var animationNode = scope.EffectNode(shared.normalizeTimingInput(timingInput)); var effect = scope.convertEffectInput(effectInput); var timeFraction; var animation = function() { From 280fccaeaefb848e0b5b01b611e262ebc32f07ce Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 14:19:42 +1100 Subject: [PATCH 11/91] AnimationNode -> EffectNode everywhere in test/ --- test/js/effect-node.js | 8 ++++---- test/js/group-animation.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/test/js/effect-node.js b/test/js/effect-node.js index f5860707..f41482e0 100644 --- a/test/js/effect-node.js +++ b/test/js/effect-node.js @@ -1,4 +1,4 @@ -suite('animation-node', function() { +suite('effect-node', function() { test('normalize timing input', function() { assert.equal(normalizeTimingInput(1).duration, 1); assert.equal(normalizeTimingInput(1).easing(0.2), 0.2); @@ -90,11 +90,11 @@ suite('animation-node', function() { assert.closeTo(calculateTransformedTime(4, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate-reverse'}), 160, 0.0001); assert.closeTo(calculateTransformedTime(3, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate-reverse'}), 360, 0.0001); }); - test('Animation Node', function() { + test('Effect Node', function() { var timing = normalizeTimingInput({duration: 1000, iterations: 4, iterationStart: 0.5, easing: 'linear', direction: 'alternate', delay: 100, fill: 'forwards'}); var timing2 = normalizeTimingInput({duration: 1000, iterations: 4, iterationStart: 0.5, easing: 'ease', direction: 'alternate', delay: 100, fill: 'forwards'}); - var node = webAnimations1.AnimationNode(timing); - var node2 = webAnimations1.AnimationNode(timing2); + var node = webAnimations1.EffectNode(timing); + var node2 = webAnimations1.EffectNode(timing2); assert.equal(node(0), null); assert.equal(node(100), 0.5); assert.closeTo(node2(100), 0.8, 0.005); diff --git a/test/js/group-animation.js b/test/js/group-animation.js index 6bec878d..2a2c30ed 100644 --- a/test/js/group-animation.js +++ b/test/js/group-animation.js @@ -343,7 +343,7 @@ suite('group-player', function() { assert.equal(getComputedStyle(this.complexTarget).marginLeft, '0px'); }); - test('redundant animation node wrapping', function() { + test('redundant effect node wrapping', function() { tick(100); var animation = new AnimationSequence([ this.staticAnimation(this.target, '0px', 1), From 89e26747db1615557e8b0729f83b5f5794b336a2 Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 14:22:23 +1100 Subject: [PATCH 12/91] animationNode -> effectNode everywhere in src. --- src/keyframe-effect.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/keyframe-effect.js b/src/keyframe-effect.js index 6e7695e4..ddc17987 100644 --- a/src/keyframe-effect.js +++ b/src/keyframe-effect.js @@ -15,7 +15,7 @@ (function(shared, scope, testing) { scope.Animation = function(target, effectInput, timingInput) { - var animationNode = scope.EffectNode(shared.normalizeTimingInput(timingInput)); + var effectNode = scope.EffectNode(shared.normalizeTimingInput(timingInput)); var effect = scope.convertEffectInput(effectInput); var timeFraction; var animation = function() { @@ -24,7 +24,7 @@ }; // Returns whether the animation is in effect or not after the timing update. animation._update = function(localTime) { - timeFraction = animationNode(localTime); + timeFraction = effectNode(localTime); return timeFraction !== null; }; animation._clear = function() { @@ -33,8 +33,8 @@ animation._hasSameTarget = function(otherTarget) { return target === otherTarget; }; - animation._isCurrent = animationNode._isCurrent; - animation._totalDuration = animationNode._totalDuration; + animation._isCurrent = effectNode._isCurrent; + animation._totalDuration = effectNode._totalDuration; return animation; }; From 06d6be297fc683e39728f16e844258f557470c38 Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 15:01:53 +1100 Subject: [PATCH 13/91] renames done for effect-callback.js --- src/effect-callback.js | 20 ++++++++++---------- src/keyframe-effect-constructor.js | 2 +- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/effect-callback.js b/src/effect-callback.js index ff1a2db8..3aa012e6 100644 --- a/src/effect-callback.js +++ b/src/effect-callback.js @@ -16,14 +16,14 @@ var nullTarget = document.createElementNS('http://www.w3.org/1999/xhtml', 'div'); var sequenceNumber = 0; - scope.bindPlayerForCustomEffect = function(player) { - var target = player.source.target; - var effect = player.source.effect; - var timing = player.source.timing; + scope.bindAnimationForCustomEffect = function(animation) { + var target = animation.source.target; + var effect = animation.source.effect; + var timing = animation.source.timing; var last = null; timing = shared.normalizeTimingInput(timing); var callback = function() { - var t = callback._player ? callback._player.currentTime : null; + var t = callback._animation ? callback._animation.currentTime : null; if (t !== null) { t = shared.calculateTimeFraction(shared.calculateActiveDuration(timing), t, timing); if (isNaN(t)) @@ -32,14 +32,14 @@ // FIXME: There are actually more conditions under which the effect // should be called. if (t !== last) - effect(t, target, player.source); + effect(t, target, animation.source); last = t; }; - callback._player = player; + callback._animation = animation; callback._registered = false; callback._sequenceNumber = sequenceNumber++; - player._callback = callback; + animation._callback = callback; register(callback); }; @@ -64,7 +64,7 @@ }); updating = updating.filter(function(callback) { callback(); - var playState = callback._player ? callback._player.playState : 'idle'; + var playState = callback._animation ? callback._animation.playState : 'idle'; if (playState != 'running' && playState != 'pending') callback._registered = false; return callback._registered; @@ -79,7 +79,7 @@ } } - scope.Player.prototype._register = function() { + scope.Animation.prototype._register = function() { if (this._callback) register(this._callback); }; diff --git a/src/keyframe-effect-constructor.js b/src/keyframe-effect-constructor.js index 3baa0003..815644ee 100644 --- a/src/keyframe-effect-constructor.js +++ b/src/keyframe-effect-constructor.js @@ -63,7 +63,7 @@ scope.bindPlayerForKeyframeEffect = function(player) { if (player.source && typeof player.source.effect == 'function') { - scope.bindPlayerForCustomEffect(player); + scope.bindAnimationForCustomEffect(player); } }; From a3c4ac3668ecfc48b3bbeef3344419ed6924ea72 Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 15:31:47 +1100 Subject: [PATCH 14/91] Change back test file names in target-config till after renaming source. --- target-config.js | 12 +- test/js/animation-constructor.js | 80 ++ test/js/animation-node.js | 114 +++ test/js/group-player-finish-event.js | 87 ++ test/js/group-player.js | 1044 +++++++++++++++++++++ test/js/player-finish-event.js | 79 ++ test/js/player.js | 470 ++++++++++ test/runner-web-animations-next-lite.html | 26 + test/runner-web-animations-next.html | 26 + test/runner-web-animations.html | 26 + 10 files changed, 1958 insertions(+), 6 deletions(-) create mode 100644 test/js/animation-constructor.js create mode 100644 test/js/animation-node.js create mode 100644 test/js/group-player-finish-event.js create mode 100644 test/js/group-player.js create mode 100644 test/js/player-finish-event.js create mode 100644 test/js/player.js create mode 100644 test/runner-web-animations-next-lite.html create mode 100644 test/runner-web-animations-next.html create mode 100644 test/runner-web-animations.html diff --git a/target-config.js b/target-config.js index c0deadfa..74877803 100644 --- a/target-config.js +++ b/target-config.js @@ -79,7 +79,7 @@ 'src/group-constructors.js']; var webAnimations1Test = [ - 'test/js/effect-node.js', + 'test/js/animation-node.js', 'test/js/apply-preserving-inline-style.js', 'test/js/box-handler.js', 'test/js/color-handler.js', @@ -88,19 +88,19 @@ 'test/js/interpolation.js', 'test/js/matrix-interpolation.js', 'test/js/number-handler.js', - 'test/js/animation.js', - 'test/js/animation-finish-event.js', + 'test/js/player.js', + 'test/js/player-finish-event.js', 'test/js/property-interpolation.js', 'test/js/tick.js', 'test/js/timing.js', 'test/js/transform-handler.js']; var webAnimationsNextTest = webAnimations1Test.concat( - 'test/js/keyframe-effect-constructor.js', + 'test/js/animation-constructor.js', 'test/js/effect-callback.js', 'test/js/group-constructors.js', - 'test/js/group-animation.js', - 'test/js/group-animation-finish-event.js', + 'test/js/group-player.js', + 'test/js/group-player-finish-event.js', 'test/js/timeline.js'); // This object specifies the source and test files for different Web Animation build targets. diff --git a/test/js/animation-constructor.js b/test/js/animation-constructor.js new file mode 100644 index 00000000..d7f521f1 --- /dev/null +++ b/test/js/animation-constructor.js @@ -0,0 +1,80 @@ +suite('animation-constructor', function() { + setup(function() { + document.timeline.getAnimationPlayers().forEach(function(player) { + player.cancel(); + }); + }); + + test('Playing an Animation makes a Player', function() { + var animation = new Animation(document.body, [], 1000); + assert.equal(document.body.getAnimationPlayers().length, 0); + + var player = document.timeline.play(animation); + tick(200); + assert.equal(document.body.getAnimationPlayers().length, 1); + + tick(1600); + assert.equal(document.body.getAnimationPlayers().length, 0); + }); + + test('Setting the timing function on an Animation works', function() { + function leftAsNumber(target) { + left = getComputedStyle(target).left; + return Number(left.substring(0, left.length - 2)); + } + + var target1 = document.createElement('div'); + var target2 = document.createElement('div'); + target1.style.position = 'absolute'; + target2.style.position = 'absolute'; + document.body.appendChild(target1); + document.body.appendChild(target2); + + var animation1 = new Animation(target1, [{left: '0px'}, {left: '50px'}], 1000); + var animation2 = new Animation(target2, [{left: '0px'}, {left: '50px'}], {duration: 1000, easing: 'ease-in'}); + + var player1 = document.timeline.play(animation1); + var player2 = document.timeline.play(animation2); + + tick(0); + assert.equal(leftAsNumber(target1), 0); + assert.equal(leftAsNumber(target2), 0); + + tick(250); + assert.closeTo(leftAsNumber(target1), 12.5, 1); + assert.closeTo(leftAsNumber(target2), 4.65, 1); + + tick(500); + assert.closeTo(leftAsNumber(target1), 25, 1); + assert.closeTo(leftAsNumber(target2), 15.25, 1); + }); + + test('Timing is always converted to AnimationTimingInput', function() { + var target = document.createElement('div'); + document.body.appendChild(target); + + var keyframes = [{background: 'blue'}, {background: 'red'}]; + + var animation = new Animation(target, keyframes, 200); + assert.equal(animation.timing.duration, 200); + + animation = new Animation(target, keyframes); + assert.isDefined(animation.timing); + + animation = new Animation(target, keyframes, {duration: 200}); + var group = new AnimationGroup([animation]); + assert.equal(group.timing.duration, 'auto'); + }); + + test('Handle null target on Animation', function() { + var animation = new Animation(null, function(tf) { + // noop + }, 200); + + var player = document.timeline.play(animation); + assert.isNotNull(player); + tick(50); + tick(150); + assert.equal(player.currentTime, 100); + }); +}); diff --git a/test/js/animation-node.js b/test/js/animation-node.js new file mode 100644 index 00000000..f5860707 --- /dev/null +++ b/test/js/animation-node.js @@ -0,0 +1,114 @@ +suite('animation-node', function() { + test('normalize timing input', function() { + assert.equal(normalizeTimingInput(1).duration, 1); + assert.equal(normalizeTimingInput(1).easing(0.2), 0.2); + assert.equal(normalizeTimingInput(undefined).duration, 0); + }); + test('calculating active duration', function() { + assert.equal(calculateActiveDuration({duration: 1000, playbackRate: 4, iterations: 20}), 5000); + assert.equal(calculateActiveDuration({duration: 500, playbackRate: 0.1, iterations: 300}), 1500000); + }); + test('conversion of timing functions', function() { + var f = toTimingFunction('ease'); + var g = toTimingFunction('cubic-bezier(.25, 0.1, 0.25, 1.)'); + for (var i = 0; i < 1; i += 0.1) { + assert.equal(f(i), g(i)); + } + assert.closeTo(f(0.1844), 0.2601, 0.01); + assert.closeTo(g(0.1844), 0.2601, 0.01); + + f = toTimingFunction('cubic-bezier(0, 1, 1, 0)'); + assert.closeTo(f(0.104), 0.392, 0.01); + + function isLinear(f) { + assert.equal(f(0.1), 0.1); + assert.equal(f(0.4), 0.4); + assert.equal(f(0.9), 0.9); + } + + f = toTimingFunction('cubic-bezier(0, 1, -1, 1)'); + isLinear(f); + + f = toTimingFunction('an elephant'); + isLinear(f); + + f = toTimingFunction('cubic-bezier(-1, 1, 1, 1)'); + isLinear(f); + + f = toTimingFunction('cubic-bezier(1, 1, 1)'); + isLinear(f); + + f = toTimingFunction('steps(10, end)'); + assert.equal(f(0), 0); + assert.equal(f(0.09), 0); + assert.equal(f(0.1), 0.1); + assert.equal(f(0.25), 0.2); + }); + test('calculating phase', function() { + // calculatePhase(activeDuration, localTime, timing); + assert.equal(calculatePhase(1000, 100, {delay: 0}), PhaseActive); + assert.equal(calculatePhase(1000, 100, {delay: 200}), PhaseBefore); + assert.equal(calculatePhase(1000, 2000, {delay: 200}), PhaseAfter); + assert.equal(calculatePhase(1000, null, {delay: 200}), PhaseNone); + }); + test('calculating active time', function() { + // calculateActiveTime(activeDuration, fillMode, localTime, phase, delay); + assert.equal(calculateActiveTime(1000, 'forwards', 100, PhaseActive, 0), 100); + assert.equal(calculateActiveTime(1000, 'forwards', 100, PhaseBefore, 200), null); + assert.equal(calculateActiveTime(1000, 'both', 100, PhaseBefore, 200), 0); + assert.equal(calculateActiveTime(1000, 'forwards', 500, PhaseActive, 200), 300); + assert.equal(calculateActiveTime(1000, 'forwards', 1100, PhaseAfter, 200), 1000); + assert.equal(calculateActiveTime(1000, 'none', 1100, PhaseAfter, 200), null); + assert.equal(calculateActiveTime(Infinity, 'both', 5000000, PhaseActive, 2000000), 3000000); + assert.equal(calculateActiveTime(Infinity, 'both', 50000, PhaseBefore, 2000000), 0); + }); + test('calculating scaled active time', function() { + // calculateScaledActiveTime(activeDuration, activeTime, startOffset, timingInput); + assert.equal(calculateScaledActiveTime(1000, 200, 300, {playbackRate: 1.5}), 600); + assert.equal(calculateScaledActiveTime(1000, 200, 300, {playbackRate: -4}), 3500); + assert.equal(calculateScaledActiveTime(Infinity, 400, 200, {playbackRate: 1}), 600); + assert.equal(calculateScaledActiveTime(Infinity, 400, 200, {playbackRate: -4}), Infinity); + }); + test('calculating iteration time', function() { + // calculateIterationTime(iterationDuration, repeatedDuration, scaledActiveTime, startOffset, timingInput); + assert.equal(calculateIterationTime(500, 5000, 600, 100, {iterations: 10, iterationStart: 0}), 100); + assert.equal(calculateIterationTime(500, 5000, Infinity, 100, {iterations: 10, iterationStart: 0}), 500); + assert.equal(calculateIterationTime(500, 5000, 5100, 100, {iterations: 3.2, iterationStart: 0.8}), 500); + }); + test('calculating current iteration', function() { + // calculateCurrentIteration(iterationDuration, iterationTime, scaledActiveTime, timingInput); + assert.equal(calculateCurrentIteration(1000, 400, 4400, {iterations: 50, iterationStart: 0.8}), 4); + assert.equal(calculateCurrentIteration(1000, 1000, 4400, {iterations: 50.2, iterationStart: 0.8}), 50); + }); + test('calculating transformed time', function() { + // calculateTransformedTime(currentIteration, iterationDuration, iterationTime, timingInput); + assert.equal(calculateTransformedTime(4, 1000, 200, {easing: function(x) { return x; }, direction: 'normal'}), 200); + assert.equal(calculateTransformedTime(4, 1000, 200, {easing: function(x) { return x; }, direction: 'reverse'}), 800); + assert.closeTo(calculateTransformedTime(4, 1000, 200, {easing: function(x) { return x * x; }, direction: 'reverse'}), 640, 0.0001); + assert.closeTo(calculateTransformedTime(4, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate'}), 360, 0.0001); + assert.closeTo(calculateTransformedTime(3, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate'}), 160, 0.0001); + assert.closeTo(calculateTransformedTime(4, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate-reverse'}), 160, 0.0001); + assert.closeTo(calculateTransformedTime(3, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate-reverse'}), 360, 0.0001); + }); + test('Animation Node', function() { + var timing = normalizeTimingInput({duration: 1000, iterations: 4, iterationStart: 0.5, easing: 'linear', direction: 'alternate', delay: 100, fill: 'forwards'}); + var timing2 = normalizeTimingInput({duration: 1000, iterations: 4, iterationStart: 0.5, easing: 'ease', direction: 'alternate', delay: 100, fill: 'forwards'}); + var node = webAnimations1.AnimationNode(timing); + var node2 = webAnimations1.AnimationNode(timing2); + assert.equal(node(0), null); + assert.equal(node(100), 0.5); + assert.closeTo(node2(100), 0.8, 0.005); + assert.equal(node(600), 1); + assert.closeTo(node2(600), 1, 0.005); + assert.equal(node(700), 0.9); + assert.closeTo(node2(700), 0.99, 0.005); + assert.equal(node(1600), 0); + assert.closeTo(node2(1600), 0, 0.005); + assert.equal(node(4000), 0.4); + assert.closeTo(node2(4000), 0.68, 0.005); + assert.equal(node(4100), 0.5); + assert.closeTo(node2(4100), 0.8, 0.005); + assert.equal(node(6000), 0.5); + assert.closeTo(node2(6000), 0.8, 0.005); + }); +}); diff --git a/test/js/group-player-finish-event.js b/test/js/group-player-finish-event.js new file mode 100644 index 00000000..5fedd7eb --- /dev/null +++ b/test/js/group-player-finish-event.js @@ -0,0 +1,87 @@ +suite('group-player-finish-event', function() { + setup(function() { + document.timeline.currentTime = undefined; + this.element = document.createElement('div'); + document.documentElement.appendChild(this.element); + var animation = new AnimationSequence([ + new Animation(this.element, [], 500), + new AnimationGroup([ + new Animation(this.element, [], 250), + new Animation(this.element, [], 500), + ]), + ]); + this.player = document.timeline.play(animation, 1000); + }); + teardown(function() { + if (this.element.parent) + this.element.removeChild(this.element); + }); + + test('fire when player completes', function(done) { + var ready = false; + var fired = false; + var player = this.player; + player.onfinish = function(event) { + assert(ready, 'must not be called synchronously'); + assert.equal(this, player); + assert.equal(event.target, player); + assert.equal(event.currentTime, 1000); + assert.equal(event.timelineTime, 1100); + if (fired) + assert(false, 'must not get fired twice'); + fired = true; + done(); + }; + tick(100); + tick(1100); + tick(2100); + ready = true; + }); + + test('fire when reversed player completes', function(done) { + this.player.onfinish = function(event) { + assert.equal(event.currentTime, 0); + assert.equal(event.timelineTime, 1001); + done(); + }; + tick(0); + tick(500); + this.player.reverse(); + tick(501); + tick(1001); + }); + + test('fire after player is cancelled', function(done) { + this.player.onfinish = function(event) { + assert.equal(event.currentTime, 0); + assert.equal(event.timelineTime, 1, 'event must be fired on next sample'); + done(); + }; + tick(0); + this.player.cancel(); + tick(1); + }); + + test('multiple event listeners', function(done) { + var count = 0; + function createHandler(expectedCount) { + return function() { + count++; + assert.equal(count, expectedCount); + }; + } + var toRemove = createHandler(0); + this.player.addEventListener('finish', createHandler(1)); + this.player.addEventListener('finish', createHandler(2)); + this.player.addEventListener('finish', toRemove); + this.player.addEventListener('finish', createHandler(3)); + this.player.removeEventListener('finish', toRemove); + this.player.onfinish = function() { + assert.equal(count, 3); + done(); + }; + tick(0); + this.player.cancel(); + tick(1000); + }); +}); diff --git a/test/js/group-player.js b/test/js/group-player.js new file mode 100644 index 00000000..6bec878d --- /dev/null +++ b/test/js/group-player.js @@ -0,0 +1,1044 @@ +suite('group-player', function() { + setup(function() { + document.timeline._players = []; + webAnimations1.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'); + this.elements.push(seqSimple_target); + 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], [[null, 0], [null, 0], [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('cancelling group players before tick', function() { + tick(0); + var player = document.timeline.play(this.complexSource); + player.cancel(); + assert.equal(player.currentTime, null); + assert.equal(getComputedStyle(this.complexTarget).marginLeft, '0px'); + tick(4); + 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('setting the playbackRate on group players', function() { + var group = new AnimationGroup([ + new Animation(null, [], 1234), + new Animation(null, [], 1234), + ]); + var p = document.timeline.play(group); + p.playbackRate = 2; + assert.equal(p._player.playbackRate, 2, 'Updates the playbackRate of the inner player'); + p._childPlayers.forEach(function(childPlayer) { + assert.equal(childPlayer.playbackRate, 2, 'It also updates the child players'); + }); + }); + + 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); + var target = this.seqSimple_source.children[0].target; + 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'); + assert.equal(getComputedStyle(target).marginLeft, '40px'); + + tick(300); + checkTimes(player, [null, 200], [[null, 200], [null, -300]], 't = 300'); + assert.equal(getComputedStyle(target).marginLeft, '40px'); + + player.play(); + checkTimes(player, [null, 200], [[null, 200], [null, -300]], 't = 300'); + assert.equal(getComputedStyle(target).marginLeft, '40px'); + + tick(301); + checkTimes(player, [101, 200], [[101, 200], [601, -300]], 't = 301'); + assert.equal(getComputedStyle(target).marginLeft, '40px'); + + tick(401); + checkTimes(player, [101, 300], [[101, 300], [601, -200]], 't = 401'); + assert.equal(getComputedStyle(target).marginLeft, '60px'); + + tick(700); + checkTimes(player, [101, 599], [[101, 500], [601, 99]], 't = 700'); + assert.equal(getComputedStyle(target).marginLeft, '0px'); + }); + + test('pausing before tick works as expected with a simple AnimationSequence', function() { + var player = document.timeline.play(this.seqSimple_source); + var target = this.seqSimple_source.children[0].target; + checkTimes(player, [null, 0], [[null, 0], [null, -500]], 't = 0'); + + player.pause(); + checkTimes(player, [null, null], [[null, null], [null, null]], 't = 0'); + assert.equal(getComputedStyle(target).marginLeft, '0px'); + + tick(10); + checkTimes(player, [null, 0], [[null, 0], [null, -500]], 't = 10'); + assert.equal(getComputedStyle(target).marginLeft, '0px'); + + tick(20); + checkTimes(player, [null, 0], [[null, 0], [null, -500]], 't = 10'); + assert.equal(getComputedStyle(target).marginLeft, '0px'); + }); + + test('pausing and seeking before tick works as expected with a simple AnimationSequence', function() { + var player = document.timeline.play(this.seqSimple_source); + player.pause(); + + player.currentTime = 0; + checkTimes(player, [null, 0], [[null, 0], [null, -500]], 't = 10'); + + player.currentTime = 250; + checkTimes(player, [null, 250], [[null, 250], [null, -250]], 't = 10'); + + player.currentTime = 500; + checkTimes(player, [null, 500], [[null, 500], [null, 0]], 't = 10'); + + // FIXME: Expectation should be [null, 1000], [[null, 500], [null, 500]]. + player.currentTime = 1000; + checkTimes(player, [null, 1000], [[null, 1000], [null, 500]], 't = 10'); + }); + + 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'); + }); + + test('pausing then seeking out of range then seeking into range works', function() { + var target = document.createElement('div'); + var anim = new Animation(target, [], {duration: 2000, fill: 'both'}); + var group = new AnimationGroup([anim], {fill: 'none'}); + var player = document.timeline.play(group); + + player.pause(); + player.currentTime = 3000; + assert.equal(player._childPlayers.length, 0); + tick(100); + player.currentTime = 1000; + assert.equal(player._childPlayers.length, 1); + assert.equal(player._childPlayers[0]._player.playState, 'paused'); + assert.equal(player._childPlayers[0]._player.currentTime, 1000); + + }); + + test('reversing then seeking out of range then seeking into range works', function() { + var target = document.createElement('div'); + var anim = new Animation(target, [], {duration: 2000, fill: 'both'}); + var group = new AnimationGroup([anim], {fill: 'none'}); + var player = document.timeline.play(group); + + player.currentTime = 1000; + tick(100); + player.reverse(); + tick(105); + player.currentTime = 3000; + assert.equal(player._childPlayers.length, 0); + tick(110); + player.currentTime = 1000; + assert.equal(player.playbackRate, -1); + assert.equal(player._childPlayers.length, 1); + assert.equal(player._childPlayers[0]._player.playState, 'running'); + assert.equal(player._childPlayers[0]._player.currentTime, 1000); + assert.equal(player._childPlayers[0]._player.playbackRate, -1); + + }); + + test('fill none groups with fill none children do not fill', function() { + var anim = new Animation( + this.target, + [{marginLeft: '0px'}, {marginLeft: '100px'}], + {duration: 500, fill: 'none'}); + var group = new AnimationGroup([anim], {fill: 'none'}); + var player = document.timeline.play(group); + + tick(0); + assert.equal(getComputedStyle(this.target).marginLeft, '0px'); + tick(250); + assert.equal(getComputedStyle(this.target).marginLeft, '50px'); + tick(501); + assert.equal(getComputedStyle(this.target).marginLeft, '0px'); + tick(502); + }); +}); diff --git a/test/js/player-finish-event.js b/test/js/player-finish-event.js new file mode 100644 index 00000000..6365d913 --- /dev/null +++ b/test/js/player-finish-event.js @@ -0,0 +1,79 @@ +suite('player-finish-event', function() { + setup(function() { + this.element = document.createElement('div'); + document.documentElement.appendChild(this.element); + this.player = this.element.animate([], 1000); + }); + teardown(function() { + if (this.element.parent) + this.element.removeChild(this.target); + }); + + test('fire when player completes', function(done) { + var ready = false; + var fired = false; + var player = this.player; + player.onfinish = function(event) { + assert(ready, 'must not be called synchronously'); + assert.equal(this, player); + assert.equal(event.target, player); + assert.equal(event.currentTime, 1000); + assert.equal(event.timelineTime, 1100); + if (fired) + assert(false, 'must not get fired twice'); + fired = true; + done(); + }; + tick(100); + tick(1100); + tick(2100); + ready = true; + }); + + test('fire when reversed player completes', function(done) { + this.player.onfinish = function(event) { + assert.equal(event.currentTime, 0); + assert.equal(event.timelineTime, 1001); + done(); + }; + tick(0); + tick(500); + this.player.reverse(); + tick(501); + tick(1001); + }); + + test('fire after player is cancelled', function(done) { + this.player.onfinish = function(event) { + assert.equal(event.currentTime, 0); + assert.equal(event.timelineTime, 1, 'event must be fired on next sample'); + done(); + }; + tick(0); + this.player.cancel(); + tick(1); + }); + + test('multiple event listeners', function(done) { + var count = 0; + function createHandler(expectedCount) { + return function() { + count++; + assert.equal(count, expectedCount); + }; + } + var toRemove = createHandler(0); + this.player.addEventListener('finish', createHandler(1)); + this.player.addEventListener('finish', createHandler(2)); + this.player.addEventListener('finish', toRemove); + this.player.addEventListener('finish', createHandler(3)); + this.player.removeEventListener('finish', toRemove); + this.player.onfinish = function() { + assert.equal(count, 3); + done(); + }; + tick(0); + this.player.cancel(); + tick(1000); + }); +}); diff --git a/test/js/player.js b/test/js/player.js new file mode 100644 index 00000000..4e5405e0 --- /dev/null +++ b/test/js/player.js @@ -0,0 +1,470 @@ +suite('player', function() { + setup(function() { + webAnimations1.timeline._players = []; + }); + test('zero duration animation works', function() { + tick(90); + var p = document.body.animate([], 0); + tick(100); + assert.equal(p.startTime, 100); + assert.equal(p.currentTime, 0); + }); + test('playing works as expected', function() { + tick(90); + var p = document.body.animate([], 2000); + tick(100); + assert.equal(p.startTime, 100); + assert.equal(p.currentTime, 0); + tick(300); + assert.equal(p.startTime, 100); + assert.equal(p.currentTime, 200); + }); + test('pause at start of play', function() { + tick(90); + var p = document.body.animate([], 2000); + p.pause(); + tick(100); + assert.equal(p.currentTime, 0); + tick(300); + p.play(); + assert.equal(p.currentTime, 0); + tick(310); + assert.equal(p.currentTime, 0); + assert.equal(p.startTime, 310); + + var p = document.body.animate([], 2000); + p.startTime = -690; + p.pause(); + assert.equal(p.currentTime, null); + tick(700); + p.play(); + tick(701); + assert.equal(p.currentTime, 1000); + tick(800); + assert.equal(p.currentTime, 1099); + assert.equal(p.startTime, -299); + }); + test('pausing works as expected', function() { + tick(190); + var p = document.body.animate([], 3000); + tick(200); + tick(1500); + assert.equal(p.startTime, 200); + assert.equal(p.currentTime, 1300); + p.pause(); + assert.equal(p.startTime, null); + assert.equal(p.currentTime, null); + tick(2500); + assert.equal(p.startTime, null); + assert.equal(p.currentTime, 1300); + p.play(); + tick(2510); + assert.equal(p.startTime, 1210); + assert.equal(p.currentTime, 1300); + tick(3500); + assert.equal(p.startTime, 1210); + assert.equal(p.currentTime, 2290); + }); + test('reversing works as expected', function() { + tick(290); + var p = document.body.animate([], 1000); + tick(300); + assert.equal(p.startTime, 300); + assert.equal(p.currentTime, 0); + tick(600); + assert.equal(p.startTime, 300); + assert.equal(p.currentTime, 300); + assert.equal(p.playbackRate, 1); + p.reverse(); + tick(600); + assert.equal(p.startTime, 900); + assert.equal(p.currentTime, 300); + assert.equal(p.playbackRate, -1); + tick(700); + assert.equal(p.startTime, 900); + assert.equal(p.currentTime, 200); + }); + test('reversing after pausing', function() { + tick(90); + var p = document.body.animate([], 1000); + tick(100); + tick(600); + p.reverse(); + tick(601); + tick(700); + assert.equal(p.startTime, 1101); + assert.equal(p.currentTime, 401); + }); + test('reversing after finishing works as expected', function() { + tick(90); + var p = document.body.animate([], 1000); + tick(100); + tick(1200); + assert.equal(p.finished, true); + assert.equal(p.startTime, 100); + assert.equal(p.currentTime, 1000); + tick(1500); + assert.equal(p.currentTime, 1000); + assert.equal(isTicking(), false); + p.reverse(); + assert.equal(p._startTime, null); + assert.equal(p.currentTime, 1000); + tick(1600); + assert.equal(p.startTime, 2600); + assert.equal(p.currentTime, 1000); + }); + test('playing after finishing works as expected', function() { + tick(90); + var p = document.body.animate([], 1000); + tick(100); + tick(1200); + assert.equal(p.finished, true); + assert.equal(p.startTime, 100); + assert.equal(p.currentTime, 1000); + tick(1500); + assert.equal(p.currentTime, 1000); + assert.equal(isTicking(), false); + p.play(); + assert.equal(p.startTime, null); + assert.equal(p.currentTime, 0); + tick(1600); + assert.equal(p.startTime, 1600); + assert.equal(p.currentTime, 0); + }); + test('limiting works as expected', function() { + tick(390); + var p = document.body.animate([], 1000); + tick(400); + assert.equal(p.startTime, 400); + assert.equal(p.currentTime, 0); + tick(900); + assert.equal(p.startTime, 400); + assert.equal(p.currentTime, 500); + tick(1400); + assert.equal(p.startTime, 400); + assert.equal(p.currentTime, 1000); + tick(1500); + assert.equal(p.startTime, 400); + assert.equal(p.currentTime, 1000); + p.reverse(); + assert.equal(p.playbackRate, -1); + assert.equal(p.currentTime, 1000); + assert.equal(p._startTime, null); + tick(2000); + assert.equal(p.currentTime, 1000); + assert.equal(p.startTime, 3000); + tick(2200); + assert.equal(p.currentTime, 800); + assert.equal(p.startTime, 3000); + tick(3200); + assert.equal(p.currentTime, 0); + assert.equal(p.startTime, 3000); + tick(3500); + assert.equal(p.currentTime, 0); + assert.equal(p.startTime, 3000); + }); + test('play after limit works as expected', function() { + tick(490); + var p = document.body.animate([], 2000); + tick(500); + tick(2600); + assert.equal(p.currentTime, 2000); + assert.equal(p.startTime, 500); + assert.equal(p.finished, true); + assert.equal(p.playbackRate, 1); + setTicking(true); + p.play(); + tick(2700); + assert.equal(p.startTime, 2700); + assert.equal(p.currentTime, 0); + assert.equal(p.finished, false); + assert.equal(p.playbackRate, 1); + }); + test('play after limit works as expected (reversed)', function() { + tick(590); + var p = document.body.animate([], 3000); + tick(600); + tick(700); + p.reverse(); + tick(701); + tick(900); + assert.equal(p.startTime, 801); + assert.equal(p.currentTime, 0); + assert.equal(p.finished, true); + assert.equal(p.playbackRate, -1); + setTicking(true); + p.play(); + tick(1000); + assert.equal(p.startTime, 4000); + assert.equal(p.currentTime, 3000); + assert.equal(p.finished, false); + assert.equal(p.playbackRate, -1); + }); + test('seeking works as expected', function() { + tick(690); + var p = document.body.animate([], 2000); + tick(700); + tick(900); + assert.equal(p.currentTime, 200); + p.currentTime = 600; + assert.equal(p.currentTime, 600); + assert.equal(p.startTime, 300); + p.reverse(); + tick(1000); + assert.equal(p.startTime, 1600); + p.currentTime = 300; + assert.equal(p.currentTime, 300); + assert.equal(p.startTime, 1300); + }); + test('seeking while paused works as expected', function() { + tick(790); + var p = document.body.animate([], 1000); + tick(800); + tick(1000); + p.pause(); + assert.equal(p.currentTime, null); + assert.equal(p.startTime, null); + assert.equal(p.paused, true); + p.currentTime = 500; + assert.equal(p.startTime, null); + assert.equal(p.paused, true); + }); + test('setting start time while paused is ignored', function() { + tick(900); + var p = document.body.animate([], 1234); + p.pause(); + assert.equal(p.startTime, null); + assert.equal(p.currentTime, null); + p.startTime = 2232; + assert.equal(p.startTime, null); + assert.equal(p.currentTime, null); + }); + test('setting playbackRate does preserves the current time', function() { + tick(900); + var p = document.body.animate([], 1000); + tick(1100); + var oldCurrentTime = p.currentTime; + p.playbackRate = 2; + assert.equal(p.playbackRate, 2); + assert.equal(p.currentTime, oldCurrentTime); + }); + test('finishing works as expected', function() { + tick(1000); + var p = document.body.animate([], 2000); + p.finish(); + assert.equal(p.startTime, 0); + assert.equal(p.currentTime, 2000); + p.reverse(); + p.finish(); + assert.equal(p.currentTime, 0); + assert.equal(p.startTime, 2000); + tick(2000); + }); + test('cancelling clears all effects', function() { + tick(0); + var target = document.createElement('div'); + document.documentElement.appendChild(target); + var player = target.animate([{marginLeft: '50px'}, {marginLeft: '50px'}], 1000); + tick(10); + tick(110); + assert.equal(getComputedStyle(target).marginLeft, '50px'); + player.cancel(); + // getComputedStyle forces a tick. + assert.equal(getComputedStyle(target).marginLeft, '0px'); + assert.deepEqual(webAnimations1.timeline._players, []); + tick(120); + assert.equal(getComputedStyle(target).marginLeft, '0px'); + assert.deepEqual(webAnimations1.timeline._players, []); + document.documentElement.removeChild(target); + }); + test('startTime is set on first tick if timeline hasn\'t started', function() { + webAnimations1.timeline.currentTime = undefined; + var p = document.body.animate([], 1000); + tick(0); + tick(100); + assert.equal(p.startTime, 0); + }); + test('players which are finished and not filling get discarded', function() { + tick(90); + var nofill = document.body.animate([], 100); + var fill = document.body.animate([], {duration: 100, fill: 'forwards'}); + assert.deepEqual(webAnimations1.timeline._players, [nofill._player || nofill, fill._player || fill]); + tick(100); + assert.deepEqual(webAnimations1.timeline._players, [nofill._player || nofill, fill._player || fill]); + tick(400); + assert.deepEqual(webAnimations1.timeline._players, [fill._player || fill]); + }); + test('discarded players get re-added on modification', function() { + tick(90); + var player = document.body.animate([], 100); + tick(100); + tick(400); + assert.deepEqual(webAnimations1.timeline._players, []); + player.currentTime = 0; + assert.deepEqual(webAnimations1.timeline._players, [player._player || player]); + }); + test('players in the before phase are not discarded', function() { + tick(100); + var player = document.body.animate([], 100); + player.currentTime = -50; + tick(110); + assert.deepEqual(webAnimations1.timeline._players, [player._player || player]); + }); + test('players that go out of effect should not clear the effect of players that are in effect', function() { + var target = document.createElement('div'); + document.body.appendChild(target); + tick(0); + var playerBehind = target.animate([{marginLeft: '200px'}, {marginLeft: '200px'}], 200); + var playerInfront = target.animate([{marginLeft: '100px'}, {marginLeft: '100px'}], 100); + tick(50); + assert.equal(getComputedStyle(target).marginLeft, '100px', 't = 50'); + tick(150); + assert.equal(getComputedStyle(target).marginLeft, '200px', 't = 150'); + tick(250); + assert.equal(getComputedStyle(target).marginLeft, '0px', 't = 250'); + document.body.removeChild(target); + }); + test('player modifications should update CSS effects immediately', function() { + var target = document.createElement('div'); + document.body.appendChild(target); + tick(0); + var playerBehind = target.animate([{width: '1234px'}, {width: '1234px'}], {duration: 1, fill: 'both'}); + var playerInfront = target.animate([{width: '0px'}, {width: '100px'}], 100); + assert.equal(getComputedStyle(target).width, '0px'); + playerInfront.currentTime = 50; + assert.equal(getComputedStyle(target).width, '50px'); + playerInfront.currentTime = 100; + assert.equal(getComputedStyle(target).width, '1234px'); + playerInfront.play(); + assert.equal(getComputedStyle(target).width, '0px'); + playerInfront.startTime = -50; + assert.equal(getComputedStyle(target).width, '50px'); + document.body.removeChild(target); + }); + test('Player that hasn\'t been played has playState \'idle\'', function() { + var source = new webAnimations1Animation(document.body, [], 1000); + var p = new Player(source); + assert.equal(p.playState, 'idle'); + }); + test('playState works for a simple animation', function() { + var p = document.body.animate([], 1000); + tick(0); + assert.equal(p.playState, 'running'); + tick(100); + assert.equal(p.playState, 'running'); + p.pause(); + assert.equal(p.playState, 'pending'); + tick(101); + assert.equal(p.playState, 'paused'); + p.play(); + assert.equal(p.playState, 'pending'); + tick(102); + assert.equal(p.playState, 'running'); + tick(1002); + assert.equal(p.playState, 'finished'); + }); + test('Play after cancel', function() { + var p = document.body.animate([], 1000); + assert.equal(p.playState, 'pending'); + tick(0); + p.cancel(); + assert.equal(p.playState, 'idle'); + assert.equal(p.currentTime, null); + assert.equal(p.startTime, null); + tick(1); + assert.equal(p.playState, 'idle'); + assert.equal(p.currentTime, null); + assert.equal(p.startTime, null); + p.play(); + assert.equal(p.playState, 'pending'); + assert.equal(p.currentTime, 0); + assert.equal(p.startTime, null); + tick(10); + assert.equal(p.playState, 'running'); + assert.equal(p.currentTime, 0); + assert.equal(p.startTime, 10); + }); + test('Reverse after cancel', function() { + var p = document.body.animate([], 300); + tick(0); + p.cancel(); + assert.equal(p.playState, 'idle'); + assert.equal(p.currentTime, null); + assert.equal(p.startTime, null); + tick(1); + p.reverse(); + assert.equal(p.playState, 'pending'); + assert.equal(p.currentTime, 300); + assert.equal(p.startTime, null); + tick(100); + assert.equal(p.playState, 'running'); + assert.equal(p.currentTime, 300); + assert.equal(p.startTime, 400); + tick(300); + assert.equal(p.playState, 'running'); + assert.equal(p.currentTime, 100); + assert.equal(p.startTime, 400); + tick(400); + assert.equal(p.playState, 'finished'); + assert.equal(p.currentTime, 0); + assert.equal(p.startTime, 400); + }); + test('Finish after cancel', function() { + var p = document.body.animate([], 300); + tick(0); + p.cancel(); + assert.equal(p.playState, 'idle'); + assert.equal(p.currentTime, null); + assert.equal(p.startTime, null); + tick(1); + p.finish(); + assert.equal(p.playState, 'idle'); + assert.equal(p.currentTime, null); + assert.equal(p.startTime, null); + tick(2); + assert.equal(p.playState, 'idle'); + assert.equal(p.currentTime, null); + assert.equal(p.startTime, null); + }); + test('Pause after cancel', function() { + var p = document.body.animate([], 300); + tick(0); + p.cancel(); + assert.equal(p.playState, 'idle'); + assert.equal(p.currentTime, null); + assert.equal(p.startTime, null); + tick(1); + p.pause(); + assert.equal(p.playState, 'idle'); + assert.equal(p.currentTime, null); + assert.equal(p.startTime, null); + }); + test('Players ignore NaN times', function() { + var p = document.body.animate([], 300); + p.startTime = 100; + tick(110); + assert.equal(p.currentTime, 10); + p.startTime = NaN; + assert.equal(p.startTime, 100); + p.currentTime = undefined; + assert.equal(p.currentTime, 10); + }); + test('play() should not set a start time', function() { + var p = document.body.animate([], 1000); + p.cancel(); + assert.equal(p.startTime, null); + assert.equal(p.playState, 'idle'); + p.play(); + assert.equal(p.startTime, null); + assert.equal(p.playState, 'pending'); + }); + test('reverse() should not set a start time', function() { + var p = document.body.animate([], 1000); + p.cancel(); + assert.equal(p.startTime, null); + assert.equal(p.playState, 'idle'); + p.reverse(); + assert.equal(p.startTime, null); + assert.equal(p.playState, 'pending'); + }); +}); diff --git a/test/runner-web-animations-next-lite.html b/test/runner-web-animations-next-lite.html new file mode 100644 index 00000000..41f267a6 --- /dev/null +++ b/test/runner-web-animations-next-lite.html @@ -0,0 +1,26 @@ + + + + + + + + + +
diff --git a/test/runner-web-animations-next.html b/test/runner-web-animations-next.html new file mode 100644 index 00000000..9bc9f785 --- /dev/null +++ b/test/runner-web-animations-next.html @@ -0,0 +1,26 @@ + + + + + + + + + +
diff --git a/test/runner-web-animations.html b/test/runner-web-animations.html new file mode 100644 index 00000000..0a9500f1 --- /dev/null +++ b/test/runner-web-animations.html @@ -0,0 +1,26 @@ + + + + + + + + + +
From a92159be1cc33c303efcd27b4b6644ab199beee2 Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 15:36:47 +1100 Subject: [PATCH 15/91] Timeline._players -> Timeline._animations --- src/tick.js | 12 ++++++------ src/timeline.js | 10 +++++----- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/tick.js b/src/tick.js index c70ac9de..68473c9a 100644 --- a/src/tick.js +++ b/src/tick.js @@ -49,7 +49,7 @@ } function InternalTimeline() { - this._players = []; + this._animations = []; // Android 4.3 browser has window.performance, but not window.performance.now this.currentTime = window.performance && performance.now ? performance.now() : 0; }; @@ -60,7 +60,7 @@ var player = new scope.Player(source); player._idle = false; player._timeline = this; - this._players.push(player); + this._animations.push(player); scope.restart(); scope.invalidateEffects(); return player; @@ -105,10 +105,10 @@ hasRestartedThisFrame = false; var timeline = scope.timeline; timeline.currentTime = t; - timeline._players.sort(comparePlayers); + timeline._animations.sort(comparePlayers); ticking = false; - var updatingPlayers = timeline._players; - timeline._players = []; + var updatingPlayers = timeline._animations; + timeline._animations = []; var newPendingClears = []; var newPendingEffects = []; @@ -130,7 +130,7 @@ pendingEffects.push.apply(pendingEffects, newPendingClears); pendingEffects.push.apply(pendingEffects, newPendingEffects); - timeline._players.push.apply(timeline._players, updatingPlayers); + timeline._animations.push.apply(timeline._animations, updatingPlayers); needsRetick = false; if (ticking) diff --git a/src/timeline.js b/src/timeline.js index 358db94e..c94192b5 100644 --- a/src/timeline.js +++ b/src/timeline.js @@ -16,7 +16,7 @@ (function(shared, scope, testing) { scope.AnimationTimeline = function() { - this._players = []; + this._animations = []; this.currentTime = undefined; }; @@ -26,16 +26,16 @@ // TODO: Do we need to consider needsRetick? getAnimationPlayers: function() { this._discardPlayers(); - return this._players.slice(); + return this._animations.slice(); }, _discardPlayers: function() { - this._players = this._players.filter(function(player) { + this._animations = this._animations.filter(function(player) { return player.playState != 'finished' && player.playState != 'idle'; }); }, play: function(source) { var player = new scope.Player(source); - this._players.push(player); + this._animations.push(player); scope.restartWebAnimationsNextTick(); // Use player._player.play() here, NOT player.play(). // @@ -60,7 +60,7 @@ var timeline = window.document.timeline; timeline.currentTime = t; timeline._discardPlayers(); - if (timeline._players.length == 0) + if (timeline._animations.length == 0) ticking = false; else requestAnimationFrame(webAnimationsNextTick); From 7c1c51f0a9330cc296601c9e5b4576c862b93177 Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 15:43:45 +1100 Subject: [PATCH 16/91] Rename done for element-animatable --- src/element-animatable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/element-animatable.js b/src/element-animatable.js index 694389a1..6bcf1dce 100644 --- a/src/element-animatable.js +++ b/src/element-animatable.js @@ -14,6 +14,6 @@ (function(scope) { window.Element.prototype.animate = function(effectInput, timingInput) { - return scope.timeline._play(scope.Animation(this, effectInput, timingInput)); + return scope.timeline._play(scope.KeyframeEffect(this, effectInput, timingInput)); }; })(webAnimations1); From c8ebfe1c95dbf4e3d07284c6dd5b5c63ca609ce6 Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 15:54:06 +1100 Subject: [PATCH 17/91] Rename done for group-constructors.js --- src/group-constructors.js | 36 ++++++++++++++-------------- src/web-animations-next-animation.js | 6 ++--- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/group-constructors.js b/src/group-constructors.js index 568c9a3a..d8e6525f 100644 --- a/src/group-constructors.js +++ b/src/group-constructors.js @@ -27,15 +27,15 @@ this._timing.duration = this.activeDuration; } - window.AnimationSequence = function() { + window.SequenceEffect = function() { constructor.apply(this, arguments); }; - window.AnimationGroup = function() { + window.GroupEffect = function() { constructor.apply(this, arguments); }; - window.AnimationSequence.prototype = { + window.SequenceEffect.prototype = { get activeDuration() { var total = 0; this.children.forEach(function(child) { @@ -45,7 +45,7 @@ } }; - window.AnimationGroup.prototype = { + window.GroupEffect.prototype = { get activeDuration() { var max = 0; this.children.forEach(function(child) { @@ -55,30 +55,30 @@ } }; - scope.newUnderlyingPlayerForGroup = function(group) { - var underlyingPlayer; + scope.newUnderlyingAnimationForGroup = function(group) { + var underlyingAnimation; var ticker = function(tf) { - var player = underlyingPlayer._wrapper; - if (player.playState == 'pending') return; + var animation = underlyingAnimation._wrapper; + if (animation.playState == 'pending') return; - if (!player.source) + if (!animation.source) return; if (tf == null) { - player._removePlayers(); + animation._removeChildren(); return; } }; - underlyingPlayer = scope.timeline.play(new scope.Animation(null, ticker, group._timing)); - return underlyingPlayer; + underlyingAnimation = scope.timeline.play(new scope.KeyframeEffect(null, ticker, group._timing)); + return underlyingAnimation; }; - scope.bindPlayerForGroup = function(player) { - player._player._wrapper = player; - player._isGroup = true; - scope.awaitStartTime(player); - player._constructChildren(); - player._setExternalPlayer(player); + scope.bindAnimationForGroup = function(animation) { + animation._animation._wrapper = animation; + animation._isGroup = true; + scope.awaitStartTime(animation); + animation._constructChildren(); + animation._setExternalAnimation(animation); }; scope.groupChildDuration = groupChildDuration; diff --git a/src/web-animations-next-animation.js b/src/web-animations-next-animation.js index 61aae015..b74fe106 100644 --- a/src/web-animations-next-animation.js +++ b/src/web-animations-next-animation.js @@ -170,7 +170,7 @@ cancel: function() { this._player.cancel(); this._register(); - this._removePlayers(); + this._removeChildren(); }, reverse: function() { this._player.reverse(); @@ -196,7 +196,7 @@ removeEventListener: function(type, handler) { this._player.removeEventListener(type, (handler && handler._wrapper) || handler); }, - _removePlayers: function() { + _removeChildren: function() { while (this._childPlayers.length) this._childPlayers.pop().cancel(); }, @@ -217,7 +217,7 @@ if (t !== null) t = shared.calculateTimeFraction(shared.calculateActiveDuration(timing), t, timing); if (t == null || isNaN(t)) - this._removePlayers(); + this._removeChildren(); }, }; From 1f4826bcd44b32d164734369f173a43ee0308c0d Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 16:45:13 +1100 Subject: [PATCH 18/91] rename for keyframe-effect-constructor.js --- src/keyframe-effect-constructor.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/keyframe-effect-constructor.js b/src/keyframe-effect-constructor.js index 815644ee..57664605 100644 --- a/src/keyframe-effect-constructor.js +++ b/src/keyframe-effect-constructor.js @@ -33,7 +33,7 @@ this._timingInput = timingInput; this._timing = shared.normalizeTimingInput(timingInput); - // TODO: Make modifications to timing update the underlying player + // TODO: Make modifications to timing update the underlying animation this.timing = shared.makeTiming(timingInput); // TODO: Make this a live object - will need to separate normalization of // keyframes into a shared module. @@ -52,7 +52,7 @@ }; var nullTarget = document.createElementNS('http://www.w3.org/1999/xhtml', 'div'); - scope.newUnderlyingPlayerForKeyframeEffect = function(keyframeEffect) { + scope.newUnderlyingAnimationForKeyframeEffect = function(keyframeEffect) { var target = keyframeEffect.target || nullTarget; var effect = keyframeEffect._effect; if (typeof effect == 'function') { @@ -61,20 +61,20 @@ return originalElementAnimate.apply(target, [effect, keyframeEffect._timingInput]); }; - scope.bindPlayerForKeyframeEffect = function(player) { - if (player.source && typeof player.source.effect == 'function') { - scope.bindAnimationForCustomEffect(player); + scope.bindAnimationForKeyframeEffect = function(animation) { + if (animation.source && typeof animation.source.effect == 'function') { + scope.bindAnimationForCustomEffect(animation); } }; var pendingGroups = []; - scope.awaitStartTime = function(groupPlayer) { - if (groupPlayer.startTime !== null || !groupPlayer._isGroup) + scope.awaitStartTime = function(groupAnimation) { + if (groupAnimation.startTime !== null || !groupAnimation._isGroup) return; if (pendingGroups.length == 0) { requestAnimationFrame(updatePendingGroups); } - pendingGroups.push(groupPlayer); + pendingGroups.push(groupAnimation); }; function updatePendingGroups() { var updated = false; @@ -97,9 +97,9 @@ }); window.KeyframeEffect = scope.KeyframeEffect; - window.Element.prototype.getAnimationPlayers = function() { - return document.timeline.getAnimationPlayers().filter(function(player) { - return player.source !== null && player.source.target == this; + window.Element.prototype.getAnimations = function() { + return document.timeline.getAnimations().filter(function(animation) { + return animation.source !== null && animation.source.target == this; }.bind(this)); }; From fa99fb4b1d4a05fb612bf1c45065820a4021129b Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 16:51:01 +1100 Subject: [PATCH 19/91] Rename for keyframe-effect.js --- src/keyframe-effect.js | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/keyframe-effect.js b/src/keyframe-effect.js index ddc17987..c53beb87 100644 --- a/src/keyframe-effect.js +++ b/src/keyframe-effect.js @@ -14,52 +14,52 @@ (function(shared, scope, testing) { - scope.Animation = function(target, effectInput, timingInput) { + scope.KeyframeEffect = function(target, effectInput, timingInput) { var effectNode = scope.EffectNode(shared.normalizeTimingInput(timingInput)); var effect = scope.convertEffectInput(effectInput); var timeFraction; - var animation = function() { + var keyframeEffect = function() { WEB_ANIMATIONS_TESTING && console.assert(typeof timeFraction !== 'undefined'); effect(target, timeFraction); }; - // Returns whether the animation is in effect or not after the timing update. - animation._update = function(localTime) { + // Returns whether the keyframeEffect is in effect or not after the timing update. + keyframeEffect._update = function(localTime) { timeFraction = effectNode(localTime); return timeFraction !== null; }; - animation._clear = function() { + keyframeEffect._clear = function() { effect(target, null); }; - animation._hasSameTarget = function(otherTarget) { + keyframeEffect._hasSameTarget = function(otherTarget) { return target === otherTarget; }; - animation._isCurrent = effectNode._isCurrent; - animation._totalDuration = effectNode._totalDuration; - return animation; + keyframeEffect._isCurrent = effectNode._isCurrent; + keyframeEffect._totalDuration = effectNode._totalDuration; + return keyframeEffect; }; - scope.NullAnimation = function(clear) { - var nullAnimation = function() { + scope.NullEffect = function(clear) { + var nullEffect = function() { if (clear) { clear(); clear = null; } }; - nullAnimation._update = function() { + nullEffect._update = function() { return null; }; - nullAnimation._totalDuration = 0; - nullAnimation._isCurrent = function() { + nullEffect._totalDuration = 0; + nullEffect._isCurrent = function() { return false; }; - nullAnimation._hasSameTarget = function() { + nullEffect._hasSameTarget = function() { return false; }; - return nullAnimation; + return nullEffect; }; if (WEB_ANIMATIONS_TESTING) { - testing.webAnimations1Animation = scope.Animation; + testing.webAnimations1.KeyframeEffect = scope.KeyframeEffect; } })(webAnimationsShared, webAnimations1, webAnimationsTesting); From 363167e06330cdf1f7b20b77907396ccb7424f0c Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 17:10:08 +1100 Subject: [PATCH 20/91] Rename for tick.js --- src/tick.js | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/tick.js b/src/tick.js index 68473c9a..3efa6e6e 100644 --- a/src/tick.js +++ b/src/tick.js @@ -44,8 +44,8 @@ applyPendingEffects(); } - function comparePlayers(leftPlayer, rightPlayer) { - return leftPlayer._sequenceNumber - rightPlayer._sequenceNumber; + function compareAnimations(leftAnimation, rightAnimation) { + return leftAnimation._sequenceNumber - rightAnimation._sequenceNumber; } function InternalTimeline() { @@ -57,13 +57,13 @@ InternalTimeline.prototype = { _play: function(source) { source._timing = shared.normalizeTimingInput(source.timing); - var player = new scope.Player(source); - player._idle = false; - player._timeline = this; - this._animations.push(player); + var animation = new scope.Animation(source); + animation._idle = false; + animation._timeline = this; + this._animations.push(animation); scope.restart(); scope.invalidateEffects(); - return player; + return animation; } }; @@ -105,32 +105,32 @@ hasRestartedThisFrame = false; var timeline = scope.timeline; timeline.currentTime = t; - timeline._animations.sort(comparePlayers); + timeline._animations.sort(compareAnimations); ticking = false; - var updatingPlayers = timeline._animations; + var updatingAnimations = timeline._animations; timeline._animations = []; var newPendingClears = []; var newPendingEffects = []; - updatingPlayers = updatingPlayers.filter(function(player) { - player._inTimeline = player._tick(t); + updatingAnimations = updatingAnimations.filter(function(animation) { + animation._inTimeline = animation._tick(t); - if (!player._inEffect) - newPendingClears.push(player._source); + if (!animation._inEffect) + newPendingClears.push(animation._source); else - newPendingEffects.push(player._source); + newPendingEffects.push(animation._source); - if (!player.finished && !player.paused && !player._idle) + if (!animation.finished && !animation.paused && !animation._idle) ticking = true; - return player._inTimeline; + return animation._inTimeline; }); // FIXME: Should remove dupliactes from pendingEffects. pendingEffects.push.apply(pendingEffects, newPendingClears); pendingEffects.push.apply(pendingEffects, newPendingEffects); - timeline._animations.push.apply(timeline._animations, updatingPlayers); + timeline._animations.push.apply(timeline._animations, updatingAnimations); needsRetick = false; if (ticking) From 7fc27a38777c362a92e10d41a4d620187465ce2b Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 17:14:43 +1100 Subject: [PATCH 21/91] Rename for timeline.js --- src/timeline.js | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/timeline.js b/src/timeline.js index c94192b5..af2c115f 100644 --- a/src/timeline.js +++ b/src/timeline.js @@ -21,29 +21,29 @@ }; scope.AnimationTimeline.prototype = { - // FIXME: This needs to return the wrapped players in Web Animations Next + // FIXME: This needs to return the wrapped animations in Web Animations Next // TODO: Does this need to be sorted? // TODO: Do we need to consider needsRetick? - getAnimationPlayers: function() { - this._discardPlayers(); + getAnimationAnimations: function() { + this._discardAnimations(); return this._animations.slice(); }, - _discardPlayers: function() { - this._animations = this._animations.filter(function(player) { - return player.playState != 'finished' && player.playState != 'idle'; + _discardAnimations: function() { + this._animations = this._animations.filter(function(animation) { + return animation.playState != 'finished' && animation.playState != 'idle'; }); }, play: function(source) { - var player = new scope.Player(source); - this._animations.push(player); + var animation = new scope.Animation(source); + this._animations.push(animation); scope.restartWebAnimationsNextTick(); - // Use player._player.play() here, NOT player.play(). + // Use animation._animation.play() here, NOT animation.play(). // - // Timeline.play calls new scope.Player(source) which (indirectly) calls Timeline.play on - // source's children, and Player.play is also recursive. We only need to call play on each - // player in the tree once. - player._player.play(); - return player; + // Timeline.play calls new scope.Animation(source) which (indirectly) calls Timeline.play on + // source's children, and Animation.play is also recursive. We only need to call play on each + // animation in the tree once. + animation._animation.play(); + return animation; }, }; @@ -59,7 +59,7 @@ function webAnimationsNextTick(t) { var timeline = window.document.timeline; timeline.currentTime = t; - timeline._discardPlayers(); + timeline._discardAnimations(); if (timeline._animations.length == 0) ticking = false; else From 322ede5833bc2ec58f25209368d3a7d6fcf7b064 Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 17:19:50 +1100 Subject: [PATCH 22/91] Rename for timing-utililites.js --- src/timing-utilities.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/timing-utilities.js b/src/timing-utilities.js index bce00b67..43558cc7 100644 --- a/src/timing-utilities.js +++ b/src/timing-utilities.js @@ -45,7 +45,7 @@ if ((property == 'direction') && (directions.indexOf(timingInput[property]) == -1)) { return; } - if (property == 'playbackRate' && timingInput[property] !== 1 && shared.isDeprecated('AnimationTiming.playbackRate', '2014-11-28', 'Use AnimationPlayer.playbackRate instead.')) { + if (property == 'playbackRate' && timingInput[property] !== 1 && shared.isDeprecated('AnimationEffectTiming.playbackRate', '2014-11-28', 'Use Animation.playbackRate instead.')) { return; } timing[property] = timingInput[property]; From 2928192dafd06ffd9a53cb21c6323cfb09f132a3 Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 17:29:19 +1100 Subject: [PATCH 23/91] rename for web-animations-next-animation.js --- src/web-animations-next-animation.js | 136 +++++++++++++-------------- 1 file changed, 68 insertions(+), 68 deletions(-) diff --git a/src/web-animations-next-animation.js b/src/web-animations-next-animation.js index b74fe106..f06c846e 100644 --- a/src/web-animations-next-animation.js +++ b/src/web-animations-next-animation.js @@ -13,57 +13,57 @@ // limitations under the License. (function(shared, scope, testing) { - scope.Player = function(source) { + scope.Animation = function(source) { this.source = source; if (source) { - // FIXME: detach existing player. - source.player = this; + // FIXME: detach existing animation. + source.animation = this; } this._isGroup = false; - this._player = null; - this._childPlayers = []; + this._animation = null; + this._childAnimations = []; this._callback = null; - this._rebuildUnderlyingPlayer(); - // Players are constructed in the idle state. - this._player.cancel(); + this._rebuildUnderlyingAnimation(); + // Animations are constructed in the idle state. + this._animation.cancel(); }; // TODO: add a source getter/setter - scope.Player.prototype = { - _rebuildUnderlyingPlayer: function() { - if (this._player) { - this._player.cancel(); - this._player = null; + scope.Animation.prototype = { + _rebuildUnderlyingAnimation: function() { + if (this._animation) { + this._animation.cancel(); + this._animation = null; } - if (!this.source || this.source instanceof window.Animation) { - this._player = scope.newUnderlyingPlayerForAnimation(this.source); - scope.bindPlayerForAnimation(this); + if (!this.source || this.source instanceof window.KeyframeEffect) { + this._animation = scope.newUnderlyingAnimationForKeyframeEffect(this.source); + scope.bindAnimationForKeyframeEffect(this); } - if (this.source instanceof window.AnimationSequence || this.source instanceof window.AnimationGroup) { - this._player = scope.newUnderlyingPlayerForGroup(this.source); - scope.bindPlayerForGroup(this); + if (this.source instanceof window.SequenceEffect || this.source instanceof window.GroupEffect) { + this._animation = scope.newUnderlyingAnimationForGroup(this.source); + scope.bindAnimationForGroup(this); } - // FIXME: move existing currentTime/startTime/playState to new player + // FIXME: move existing currentTime/startTime/playState to new animation }, _updateChildren: function() { if (!this.source || this.playState == 'idle') return; var offset = this.source._timing.delay; - this._childPlayers.forEach(function(childPlayer) { - this._arrangeChildren(childPlayer, offset); - if (this.source instanceof window.AnimationSequence) - offset += scope.groupChildDuration(childPlayer.source); + this._childAnimations.forEach(function(childAnimation) { + this._arrangeChildren(childAnimation, offset); + if (this.source instanceof window.SequenceEffect) + offset += scope.groupChildDuration(childAnimation.source); }.bind(this)); }, - _setExternalPlayer: function(player) { + _setExternalAnimation: function(animation) { if (!this.source || !this._isGroup) return; for (var i = 0; i < this.source.children.length; i++) { - this.source.children[i].player = player; - this._childPlayers[i]._setExternalPlayer(player); + this.source.children[i].animation = animation; + this._childAnimations[i]._setExternalAnimation(animation); } }, _constructChildren: function() { @@ -71,32 +71,32 @@ return; var offset = this.source._timing.delay; this.source.children.forEach(function(child) { - var childPlayer = window.document.timeline.play(child); - this._childPlayers.push(childPlayer); - childPlayer.playbackRate = this.playbackRate; + var childAnimation = window.document.timeline.play(child); + this._childAnimations.push(childAnimation); + childAnimation.playbackRate = this.playbackRate; if (this.paused) - childPlayer.pause(); - child.player = this.source.player; + childAnimation.pause(); + child.animation = this.source.animation; - this._arrangeChildren(childPlayer, offset); + this._arrangeChildren(childAnimation, offset); - if (this.source instanceof window.AnimationSequence) + if (this.source instanceof window.SequenceEffect) offset += scope.groupChildDuration(child); }.bind(this)); }, - _arrangeChildren: function(childPlayer, offset) { + _arrangeChildren: function(childAnimation, offset) { if (this.startTime === null) { - childPlayer.currentTime = this.currentTime - offset; - childPlayer._startTime = null; - } else if (childPlayer.startTime !== this.startTime + offset) { - childPlayer.startTime = this.startTime + offset; + childAnimation.currentTime = this.currentTime - offset; + childAnimation._startTime = null; + } else if (childAnimation.startTime !== this.startTime + offset) { + childAnimation.startTime = this.startTime + offset; } }, get paused() { - return this._player.paused; + return this._animation.paused; }, get playState() { - return this._player.playState; + return this._animation.playState; }, get onfinish() { return this._onfinish; @@ -104,49 +104,49 @@ set onfinish(v) { if (typeof v == 'function') { this._onfinish = v; - this._player.onfinish = (function(e) { + this._animation.onfinish = (function(e) { e.target = this; v.call(this, e); }).bind(this); } else { - this._player.onfinish = v; - this.onfinish = this._player.onfinish; + this._animation.onfinish = v; + this.onfinish = this._animation.onfinish; } }, get currentTime() { - return this._player.currentTime; + return this._animation.currentTime; }, set currentTime(v) { - this._player.currentTime = v; + this._animation.currentTime = v; this._register(); this._forEachChild(function(child, offset) { child.currentTime = v - offset; }); }, get startTime() { - return this._player.startTime; + return this._animation.startTime; }, set startTime(v) { - this._player.startTime = v; + this._animation.startTime = v; this._register(); this._forEachChild(function(child, offset) { child.startTime = v + offset; }); }, get playbackRate() { - return this._player.playbackRate; + return this._animation.playbackRate; }, set playbackRate(value) { - this._player.playbackRate = value; - this._forEachChild(function(childPlayer) { - childPlayer.playbackRate = value; + this._animation.playbackRate = value; + this._forEachChild(function(childAnimation) { + childAnimation.playbackRate = value; }); }, get finished() { - return this._player.finished; + return this._animation.finished; }, play: function() { - this._player.play(); + this._animation.play(); this._register(); scope.awaitStartTime(this); this._forEachChild(function(child) { @@ -156,24 +156,24 @@ }); }, pause: function() { - this._player.pause(); + this._animation.pause(); this._register(); this._forEachChild(function(child) { child.pause(); }); }, finish: function() { - this._player.finish(); + this._animation.finish(); this._register(); - // TODO: child players?? + // TODO: child animations?? }, cancel: function() { - this._player.cancel(); + this._animation.cancel(); this._register(); this._removeChildren(); }, reverse: function() { - this._player.reverse(); + this._animation.reverse(); scope.awaitStartTime(this); this._register(); this._forEachChild(function(child, offset) { @@ -191,29 +191,29 @@ }).bind(this); handler._wrapper = wrapped; } - this._player.addEventListener(type, wrapped); + this._animation.addEventListener(type, wrapped); }, removeEventListener: function(type, handler) { - this._player.removeEventListener(type, (handler && handler._wrapper) || handler); + this._animation.removeEventListener(type, (handler && handler._wrapper) || handler); }, _removeChildren: function() { - while (this._childPlayers.length) - this._childPlayers.pop().cancel(); + while (this._childs.length) + this._childAnimations.pop().cancel(); }, _forEachChild: function(f) { var offset = 0; - if (this.source.children && this._childPlayers.length < this.source.children.length) + if (this.source.children && this._childAnimations.length < this.source.children.length) this._constructChildren(); - this._childPlayers.forEach(function(child) { + this._childAnimations.forEach(function(child) { f.call(this, child, offset); - if (this.source instanceof window.AnimationSequence) + if (this.source instanceof window.SequenceEffect) offset += child.source.activeDuration; }.bind(this)); - if (this._player.playState == 'pending') + if (this._animation.playState == 'pending') return; var timing = this.source._timing; - var t = this._player.currentTime; + var t = this._animation.currentTime; if (t !== null) t = shared.calculateTimeFraction(shared.calculateActiveDuration(timing), t, timing); if (t == null || isNaN(t)) From 8a36ad5246f0a91c5f4788b7342ad1eeed0d42e6 Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 17:51:50 +1100 Subject: [PATCH 24/91] Rename .effect and ._effect to _normalizedKeyframes and _keyframes in keyframe-effect-constructor.js --- src/keyframe-effect-constructor.js | 39 +++++++++++++++--------------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/src/keyframe-effect-constructor.js b/src/keyframe-effect-constructor.js index 57664605..43eacb64 100644 --- a/src/keyframe-effect-constructor.js +++ b/src/keyframe-effect-constructor.js @@ -15,18 +15,17 @@ (function(shared, scope, testing) { // FIXME: Make this shareable and rename to SharedKeyframeList. - function KeyframeList(effect) { - this._frames = shared.normalizeKeyframes(effect); + function KeyframeList(keyframes) { + this._frames = shared.normalizeKeyframes(keyframes); } KeyframeList.prototype = { getFrames: function() { return this._frames; } }; - // FIXME: This constructor is also used for custom effects (including in groups/sequences). - // Rename to Effect & add scope.KeyframeEffect alias? Won't matter once changes to custom effects - // are added, so prob not worth it. - scope.KeyframeEffect = function(target, effect, timingInput) { + // FIXME: This constructor is also used for custom effects. This won't be the case once custom + // effects are change to callbacks. + scope.KeyframeEffect = function(target, effectInput, timingInput) { this.target = target; // TODO: Store a clone, not the same instance. @@ -35,34 +34,36 @@ // TODO: Make modifications to timing update the underlying animation this.timing = shared.makeTiming(timingInput); - // TODO: Make this a live object - will need to separate normalization of - // keyframes into a shared module. - if (typeof effect == 'function') - this.effect = effect; + // TODO: Make this a live object - will need to separate normalization of keyframes into a + // shared module. + // FIXME: This is a bit weird. Custom effects will soon be implemented as + // callbacks, and effectInput will no longer be allowed to be a function. + if (typeof effectInput == 'function') + this._normalizedKeyframes = effectInput; else - this.effect = new KeyframeList(effect); - this._effect = effect; + this._normalizedKeyframes = new KeyframeList(effectInput); + this._keyframes = effectInput; this.activeDuration = shared.calculateActiveDuration(this._timing); return this; }; var originalElementAnimate = Element.prototype.animate; - Element.prototype.animate = function(effect, timing) { - return scope.timeline.play(new scope.KeyframeEffect(this, effect, timing)); + Element.prototype.animate = function(effectInput, timing) { + return scope.timeline.play(new scope.KeyframeEffect(this, effectInput, timing)); }; var nullTarget = document.createElementNS('http://www.w3.org/1999/xhtml', 'div'); scope.newUnderlyingAnimationForKeyframeEffect = function(keyframeEffect) { var target = keyframeEffect.target || nullTarget; - var effect = keyframeEffect._effect; - if (typeof effect == 'function') { - effect = []; + var keyframes = keyframeEffect._keyframes; + if (typeof keyframes == 'function') { + keyframes = []; } - return originalElementAnimate.apply(target, [effect, keyframeEffect._timingInput]); + return originalElementAnimate.apply(target, [keyframes, keyframeEffect._timingInput]); }; scope.bindAnimationForKeyframeEffect = function(animation) { - if (animation.source && typeof animation.source.effect == 'function') { + if (animation.source && typeof animation.source._normalizedKeyframes == 'function') { scope.bindAnimationForCustomEffect(animation); } }; From 234e7601928a969724f09ae7443eab899487fdbd Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 17:55:12 +1100 Subject: [PATCH 25/91] Renaming effect and _effect --- src/effect-callback.js | 6 +++--- src/keyframe-effect-constructor.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/effect-callback.js b/src/effect-callback.js index 3aa012e6..6c790fb1 100644 --- a/src/effect-callback.js +++ b/src/effect-callback.js @@ -18,7 +18,7 @@ var sequenceNumber = 0; scope.bindAnimationForCustomEffect = function(animation) { var target = animation.source.target; - var effect = animation.source.effect; + var effectFunction = animation.source._normalizedKeyframes; var timing = animation.source.timing; var last = null; timing = shared.normalizeTimingInput(timing); @@ -29,10 +29,10 @@ if (isNaN(t)) t = null; } - // FIXME: There are actually more conditions under which the effect + // FIXME: There are actually more conditions under which the effectFunction // should be called. if (t !== last) - effect(t, target, animation.source); + effectFunction(t, target, animation.source); last = t; }; diff --git a/src/keyframe-effect-constructor.js b/src/keyframe-effect-constructor.js index 43eacb64..8a449b12 100644 --- a/src/keyframe-effect-constructor.js +++ b/src/keyframe-effect-constructor.js @@ -15,8 +15,8 @@ (function(shared, scope, testing) { // FIXME: Make this shareable and rename to SharedKeyframeList. - function KeyframeList(keyframes) { - this._frames = shared.normalizeKeyframes(keyframes); + function KeyframeList(effectInput) { + this._frames = shared.normalizeKeyframes(effectInput); } KeyframeList.prototype = { From 00ad3808dfdd2ea55c4c184a4f8923ddd7eb1018 Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 18:08:51 +1100 Subject: [PATCH 26/91] rename Animation.source to Animation.effect, _source to _effect. --- src/animation.js | 10 +++--- src/effect-callback.js | 8 ++--- src/group-constructors.js | 2 +- src/keyframe-effect-constructor.js | 4 +-- src/keyframe-effect.js | 6 ++-- src/tick.js | 10 +++--- src/web-animations-next-animation.js | 50 ++++++++++++++-------------- 7 files changed, 45 insertions(+), 45 deletions(-) diff --git a/src/animation.js b/src/animation.js index 5ab1ece3..c265e999 100644 --- a/src/animation.js +++ b/src/animation.js @@ -30,7 +30,7 @@ this.timeStamp = Date.now(); }; - scope.Animation = function(source) { + scope.Animation = function(effect) { this._sequenceNumber = sequenceNumber++; this._currentTime = 0; this._startTime = null; @@ -40,15 +40,15 @@ this._finishedFlag = false; this.onfinish = null; this._finishHandlers = []; - this._source = source; - this._inEffect = this._source._update(0); + this._effect = effect; + this._inEffect = this._effect._update(0); this._idle = true; this._currentTimePending = false; }; scope.Animation.prototype = { _ensureAlive: function() { - this._inEffect = this._source._update(this.currentTime); + this._inEffect = this._effect._update(this.currentTime); if (!this._inTimeline && (this._inEffect || !this._finishedFlag)) { this._inTimeline = true; scope.timeline._animations.push(this); @@ -108,7 +108,7 @@ return !this._idle && (this._playbackRate > 0 && this._currentTime >= this._totalDuration || this._playbackRate < 0 && this._currentTime <= 0); }, - get _totalDuration() { return this._source._totalDuration; }, + get _totalDuration() { return this._effect._totalDuration; }, get playState() { if (this._idle) return 'idle'; diff --git a/src/effect-callback.js b/src/effect-callback.js index 6c790fb1..e187241e 100644 --- a/src/effect-callback.js +++ b/src/effect-callback.js @@ -17,9 +17,9 @@ var sequenceNumber = 0; scope.bindAnimationForCustomEffect = function(animation) { - var target = animation.source.target; - var effectFunction = animation.source._normalizedKeyframes; - var timing = animation.source.timing; + var target = animation.effect.target; + var effectFunction = animation.effect._normalizedKeyframes; + var timing = animation.effect.timing; var last = null; timing = shared.normalizeTimingInput(timing); var callback = function() { @@ -32,7 +32,7 @@ // FIXME: There are actually more conditions under which the effectFunction // should be called. if (t !== last) - effectFunction(t, target, animation.source); + effectFunction(t, target, animation.effect); last = t; }; diff --git a/src/group-constructors.js b/src/group-constructors.js index d8e6525f..476ce50d 100644 --- a/src/group-constructors.js +++ b/src/group-constructors.js @@ -61,7 +61,7 @@ var animation = underlyingAnimation._wrapper; if (animation.playState == 'pending') return; - if (!animation.source) + if (!animation.effect) return; if (tf == null) { animation._removeChildren(); diff --git a/src/keyframe-effect-constructor.js b/src/keyframe-effect-constructor.js index 8a449b12..a48e0a2a 100644 --- a/src/keyframe-effect-constructor.js +++ b/src/keyframe-effect-constructor.js @@ -63,7 +63,7 @@ }; scope.bindAnimationForKeyframeEffect = function(animation) { - if (animation.source && typeof animation.source._normalizedKeyframes == 'function') { + if (animation.effect && typeof animation.effect._normalizedKeyframes == 'function') { scope.bindAnimationForCustomEffect(animation); } }; @@ -100,7 +100,7 @@ window.KeyframeEffect = scope.KeyframeEffect; window.Element.prototype.getAnimations = function() { return document.timeline.getAnimations().filter(function(animation) { - return animation.source !== null && animation.source.target == this; + return animation.effect !== null && animation.effect.target == this; }.bind(this)); }; diff --git a/src/keyframe-effect.js b/src/keyframe-effect.js index c53beb87..686a6675 100644 --- a/src/keyframe-effect.js +++ b/src/keyframe-effect.js @@ -16,11 +16,11 @@ scope.KeyframeEffect = function(target, effectInput, timingInput) { var effectNode = scope.EffectNode(shared.normalizeTimingInput(timingInput)); - var effect = scope.convertEffectInput(effectInput); + var keyframes = scope.convertEffectInput(effectInput); var timeFraction; var keyframeEffect = function() { WEB_ANIMATIONS_TESTING && console.assert(typeof timeFraction !== 'undefined'); - effect(target, timeFraction); + keyframes(target, timeFraction); }; // Returns whether the keyframeEffect is in effect or not after the timing update. keyframeEffect._update = function(localTime) { @@ -28,7 +28,7 @@ return timeFraction !== null; }; keyframeEffect._clear = function() { - effect(target, null); + keyframes(target, null); }; keyframeEffect._hasSameTarget = function(otherTarget) { return target === otherTarget; diff --git a/src/tick.js b/src/tick.js index 3efa6e6e..57baac41 100644 --- a/src/tick.js +++ b/src/tick.js @@ -55,9 +55,9 @@ }; InternalTimeline.prototype = { - _play: function(source) { - source._timing = shared.normalizeTimingInput(source.timing); - var animation = new scope.Animation(source); + _play: function(effect) { + effect._timing = shared.normalizeTimingInput(effect.timing); + var animation = new scope.Animation(effect); animation._idle = false; animation._timeline = this; this._animations.push(animation); @@ -116,9 +116,9 @@ animation._inTimeline = animation._tick(t); if (!animation._inEffect) - newPendingClears.push(animation._source); + newPendingClears.push(animation._effect); else - newPendingEffects.push(animation._source); + newPendingEffects.push(animation._effect); if (!animation.finished && !animation.paused && !animation._idle) ticking = true; diff --git a/src/web-animations-next-animation.js b/src/web-animations-next-animation.js index f06c846e..f3f16c0b 100644 --- a/src/web-animations-next-animation.js +++ b/src/web-animations-next-animation.js @@ -13,11 +13,11 @@ // limitations under the License. (function(shared, scope, testing) { - scope.Animation = function(source) { - this.source = source; - if (source) { + scope.Animation = function(effect) { + this.effect = effect; + if (effect) { // FIXME: detach existing animation. - source.animation = this; + effect.animation = this; } this._isGroup = false; this._animation = null; @@ -28,7 +28,7 @@ this._animation.cancel(); }; - // TODO: add a source getter/setter + // TODO: add an effect getter/setter scope.Animation.prototype = { _rebuildUnderlyingAnimation: function() { if (this._animation) { @@ -36,51 +36,51 @@ this._animation = null; } - if (!this.source || this.source instanceof window.KeyframeEffect) { - this._animation = scope.newUnderlyingAnimationForKeyframeEffect(this.source); + if (!this.effect || this.effect instanceof window.KeyframeEffect) { + this._animation = scope.newUnderlyingAnimationForKeyframeEffect(this.effect); scope.bindAnimationForKeyframeEffect(this); } - if (this.source instanceof window.SequenceEffect || this.source instanceof window.GroupEffect) { - this._animation = scope.newUnderlyingAnimationForGroup(this.source); + if (this.effect instanceof window.SequenceEffect || this.effect instanceof window.GroupEffect) { + this._animation = scope.newUnderlyingAnimationForGroup(this.effect); scope.bindAnimationForGroup(this); } // FIXME: move existing currentTime/startTime/playState to new animation }, _updateChildren: function() { - if (!this.source || this.playState == 'idle') + if (!this.effect || this.playState == 'idle') return; - var offset = this.source._timing.delay; + var offset = this.effect._timing.delay; this._childAnimations.forEach(function(childAnimation) { this._arrangeChildren(childAnimation, offset); - if (this.source instanceof window.SequenceEffect) - offset += scope.groupChildDuration(childAnimation.source); + if (this.effect instanceof window.SequenceEffect) + offset += scope.groupChildDuration(childAnimation.effect); }.bind(this)); }, _setExternalAnimation: function(animation) { - if (!this.source || !this._isGroup) + if (!this.effect || !this._isGroup) return; - for (var i = 0; i < this.source.children.length; i++) { - this.source.children[i].animation = animation; + for (var i = 0; i < this.effect.children.length; i++) { + this.effect.children[i].animation = animation; this._childAnimations[i]._setExternalAnimation(animation); } }, _constructChildren: function() { - if (!this.source || !this._isGroup) + if (!this.effect || !this._isGroup) return; - var offset = this.source._timing.delay; - this.source.children.forEach(function(child) { + var offset = this.effect._timing.delay; + this.effect.children.forEach(function(child) { var childAnimation = window.document.timeline.play(child); this._childAnimations.push(childAnimation); childAnimation.playbackRate = this.playbackRate; if (this.paused) childAnimation.pause(); - child.animation = this.source.animation; + child.animation = this.effect.animation; this._arrangeChildren(childAnimation, offset); - if (this.source instanceof window.SequenceEffect) + if (this.effect instanceof window.SequenceEffect) offset += scope.groupChildDuration(child); }.bind(this)); }, @@ -202,17 +202,17 @@ }, _forEachChild: function(f) { var offset = 0; - if (this.source.children && this._childAnimations.length < this.source.children.length) + if (this.effect.children && this._childAnimations.length < this.effect.children.length) this._constructChildren(); this._childAnimations.forEach(function(child) { f.call(this, child, offset); - if (this.source instanceof window.SequenceEffect) - offset += child.source.activeDuration; + if (this.effect instanceof window.SequenceEffect) + offset += child.effect.activeDuration; }.bind(this)); if (this._animation.playState == 'pending') return; - var timing = this.source._timing; + var timing = this.effect._timing; var t = this._animation.currentTime; if (t !== null) t = shared.calculateTimeFraction(shared.calculateActiveDuration(timing), t, timing); From 1a0423cbf8bded4619d259e63a4179beea2be29f Mon Sep 17 00:00:00 2001 From: rjwright Date: Fri, 20 Mar 2015 18:10:51 +1100 Subject: [PATCH 27/91] missed some --- src/timeline.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/timeline.js b/src/timeline.js index af2c115f..bd683d77 100644 --- a/src/timeline.js +++ b/src/timeline.js @@ -33,14 +33,14 @@ return animation.playState != 'finished' && animation.playState != 'idle'; }); }, - play: function(source) { - var animation = new scope.Animation(source); + play: function(effect) { + var animation = new scope.Animation(effect); this._animations.push(animation); scope.restartWebAnimationsNextTick(); // Use animation._animation.play() here, NOT animation.play(). // - // Timeline.play calls new scope.Animation(source) which (indirectly) calls Timeline.play on - // source's children, and Animation.play is also recursive. We only need to call play on each + // Timeline.play calls new scope.Animation(effect) which (indirectly) calls Timeline.play on + // effect's children, and Animation.play is also recursive. We only need to call play on each // animation in the tree once. animation._animation.play(); return animation; From e6d4284715c113618628c60993b2413d6e10743b Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 23 Mar 2015 09:35:56 +1100 Subject: [PATCH 28/91] Alias GroupEffect and SequenceEffect to AnimationGroup and AnimationSequence. Trying to get group tests passing. --- src/animation.js | 1 + src/group-constructors.js | 15 +++++++++++++++ src/web-animations-next-animation.js | 2 +- 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/animation.js b/src/animation.js index c265e999..f07806cb 100644 --- a/src/animation.js +++ b/src/animation.js @@ -41,6 +41,7 @@ this.onfinish = null; this._finishHandlers = []; this._effect = effect; + console.log(this._effect); this._inEffect = this._effect._update(0); this._idle = true; this._currentTimePending = false; diff --git a/src/group-constructors.js b/src/group-constructors.js index 476ce50d..5e7eded1 100644 --- a/src/group-constructors.js +++ b/src/group-constructors.js @@ -83,4 +83,19 @@ scope.groupChildDuration = groupChildDuration; + // Alias GroupEffect & SequenceEffect to AnimationGroup & AnimationSequence respectively, to + // support old constructors (Animation*) for a deprecation period. Should be removed after + // 2015. + window.AnimationSequence = function() { + window.SequenceEffect.apply(this, arguments); + }; + window.AnimationSequence.prototype = Object.create(window.SequenceEffect.prototype); + window.AnimationSequence.prototype.constructor = window.AnimationSequence; + + window.AnimationGroup = function() { + window.GroupEffect.apply(this, arguments); + }; + window.AnimationGroup.prototype = Object.create(window.GroupEffect.prototype); + window.AnimationGroup.prototype.constructor = window.AnimationGroup; + })(webAnimationsShared, webAnimationsNext, webAnimationsTesting); diff --git a/src/web-animations-next-animation.js b/src/web-animations-next-animation.js index f3f16c0b..b34d4be6 100644 --- a/src/web-animations-next-animation.js +++ b/src/web-animations-next-animation.js @@ -197,7 +197,7 @@ this._animation.removeEventListener(type, (handler && handler._wrapper) || handler); }, _removeChildren: function() { - while (this._childs.length) + while (this._childAnimations.length) this._childAnimations.pop().cancel(); }, _forEachChild: function(f) { From 685cd0c624f5f27e962e77b5604e987c0470cdf4 Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 23 Mar 2015 09:56:00 +1100 Subject: [PATCH 29/91] Investigating. --- src/animation.js | 4 ++-- src/group-constructors.js | 3 +++ src/keyframe-effect.js | 1 + src/timeline.js | 1 + 4 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/animation.js b/src/animation.js index f07806cb..78e54fb9 100644 --- a/src/animation.js +++ b/src/animation.js @@ -41,7 +41,7 @@ this.onfinish = null; this._finishHandlers = []; this._effect = effect; - console.log(this._effect); + console.log(effect); this._inEffect = this._effect._update(0); this._idle = true; this._currentTimePending = false; @@ -197,7 +197,7 @@ }; if (WEB_ANIMATIONS_TESTING) { - testing.Animation = scope.Animation; + testing.Player = scope.Animation; } })(webAnimations1, webAnimationsTesting); diff --git a/src/group-constructors.js b/src/group-constructors.js index 5e7eded1..05ebdb75 100644 --- a/src/group-constructors.js +++ b/src/group-constructors.js @@ -15,6 +15,7 @@ (function(shared, scope, testing) { function groupChildDuration(node) { + console.log(node); return node._timing.delay + node.activeDuration + node._timing.endDelay; } @@ -87,12 +88,14 @@ // support old constructors (Animation*) for a deprecation period. Should be removed after // 2015. window.AnimationSequence = function() { + console.log('X'); window.SequenceEffect.apply(this, arguments); }; window.AnimationSequence.prototype = Object.create(window.SequenceEffect.prototype); window.AnimationSequence.prototype.constructor = window.AnimationSequence; window.AnimationGroup = function() { + console.log(arguments); window.GroupEffect.apply(this, arguments); }; window.AnimationGroup.prototype = Object.create(window.GroupEffect.prototype); diff --git a/src/keyframe-effect.js b/src/keyframe-effect.js index 686a6675..f0a56957 100644 --- a/src/keyframe-effect.js +++ b/src/keyframe-effect.js @@ -60,6 +60,7 @@ if (WEB_ANIMATIONS_TESTING) { testing.webAnimations1.KeyframeEffect = scope.KeyframeEffect; + testing.Animation = scope.KeyframeEffect; } })(webAnimationsShared, webAnimations1, webAnimationsTesting); diff --git a/src/timeline.js b/src/timeline.js index bd683d77..f9874d4d 100644 --- a/src/timeline.js +++ b/src/timeline.js @@ -34,6 +34,7 @@ }); }, play: function(effect) { + console.log(effect); var animation = new scope.Animation(effect); this._animations.push(animation); scope.restartWebAnimationsNextTick(); From a599663aaa869c7fb14f2e33f47fa72a6b045076 Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 23 Mar 2015 10:07:24 +1100 Subject: [PATCH 30/91] Got group-constructor test working without changing constructors used in test. --- src/animation.js | 1 - src/group-constructors.js | 3 --- src/keyframe-effect-constructor.js | 4 ++++ src/keyframe-effect.js | 1 - src/timeline.js | 1 - test/js/group-constructors.js | 10 +++++----- 6 files changed, 9 insertions(+), 11 deletions(-) diff --git a/src/animation.js b/src/animation.js index 78e54fb9..cecb633d 100644 --- a/src/animation.js +++ b/src/animation.js @@ -41,7 +41,6 @@ this.onfinish = null; this._finishHandlers = []; this._effect = effect; - console.log(effect); this._inEffect = this._effect._update(0); this._idle = true; this._currentTimePending = false; diff --git a/src/group-constructors.js b/src/group-constructors.js index 05ebdb75..5e7eded1 100644 --- a/src/group-constructors.js +++ b/src/group-constructors.js @@ -15,7 +15,6 @@ (function(shared, scope, testing) { function groupChildDuration(node) { - console.log(node); return node._timing.delay + node.activeDuration + node._timing.endDelay; } @@ -88,14 +87,12 @@ // support old constructors (Animation*) for a deprecation period. Should be removed after // 2015. window.AnimationSequence = function() { - console.log('X'); window.SequenceEffect.apply(this, arguments); }; window.AnimationSequence.prototype = Object.create(window.SequenceEffect.prototype); window.AnimationSequence.prototype.constructor = window.AnimationSequence; window.AnimationGroup = function() { - console.log(arguments); window.GroupEffect.apply(this, arguments); }; window.AnimationGroup.prototype = Object.create(window.GroupEffect.prototype); diff --git a/src/keyframe-effect-constructor.js b/src/keyframe-effect-constructor.js index a48e0a2a..d1d6c1b4 100644 --- a/src/keyframe-effect-constructor.js +++ b/src/keyframe-effect-constructor.js @@ -104,4 +104,8 @@ }.bind(this)); }; + if (WEB_ANIMATIONS_TESTING) { + testing.Animation = scope.KeyframeEffect; + } + }(webAnimationsShared, webAnimationsNext, webAnimationsTesting)); diff --git a/src/keyframe-effect.js b/src/keyframe-effect.js index f0a56957..686a6675 100644 --- a/src/keyframe-effect.js +++ b/src/keyframe-effect.js @@ -60,7 +60,6 @@ if (WEB_ANIMATIONS_TESTING) { testing.webAnimations1.KeyframeEffect = scope.KeyframeEffect; - testing.Animation = scope.KeyframeEffect; } })(webAnimationsShared, webAnimations1, webAnimationsTesting); diff --git a/src/timeline.js b/src/timeline.js index f9874d4d..bd683d77 100644 --- a/src/timeline.js +++ b/src/timeline.js @@ -34,7 +34,6 @@ }); }, play: function(effect) { - console.log(effect); var animation = new scope.Animation(effect); this._animations.push(animation); scope.restartWebAnimationsNextTick(); diff --git a/test/js/group-constructors.js b/test/js/group-constructors.js index ffc8e255..e6b272f5 100644 --- a/test/js/group-constructors.js +++ b/test/js/group-constructors.js @@ -16,11 +16,11 @@ suite('group-constructors', function() { test('player getter for children in groups, and __internalPlayer, work as expected', function() { var p = document.timeline.play(simpleAnimationGroup()); tick(0); - assert.equal(p.source.player, p); - assert.equal(p._childPlayers[0].source.player, p); - assert.equal(p._childPlayers[1].source.player, p); + assert.equal(p.effect.animation, p); + assert.equal(p._childAnimations[0].effect.animation, p); + assert.equal(p._childAnimations[1].effect.animation, p); tick(2100); - assert.equal(p._childPlayers[1]._childPlayers[0].source.player, p); - assert.equal(p._childPlayers[1]._childPlayers[1].source.player, p); + assert.equal(p._childAnimations[1]._childAnimations[0].effect.animation, p); + assert.equal(p._childAnimations[1]._childAnimations[1].effect.animation, p); }); }); From 8e358f3ef50cd4540d43fa159b4c44776114ab65 Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 23 Mar 2015 10:10:54 +1100 Subject: [PATCH 31/91] Got all groups tests working without changing constructors used in tests --- test/js/group-player.js | 58 ++++++++++++++++++++--------------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/test/js/group-player.js b/test/js/group-player.js index 6bec878d..eadbe6ba 100644 --- a/test/js/group-player.js +++ b/test/js/group-player.js @@ -1,7 +1,7 @@ suite('group-player', function() { setup(function() { - document.timeline._players = []; - webAnimations1.timeline._players = []; + document.timeline._animations = []; + webAnimations1.timeline._animations = []; this.elements = []; var animationMargin = function(target) { @@ -169,14 +169,14 @@ suite('group-player', function() { 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'); + assert.equal(player._childAnimations.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._childAnimations[index], timingList[0], 0, trace + ' ' + index); _checkTimes(player, timingList.slice(1), index + 1, trace); } } @@ -394,8 +394,8 @@ suite('group-player', function() { ]); var p = document.timeline.play(group); p.playbackRate = 2; - assert.equal(p._player.playbackRate, 2, 'Updates the playbackRate of the inner player'); - p._childPlayers.forEach(function(childPlayer) { + assert.equal(p._animation.playbackRate, 2, 'Updates the playbackRate of the inner player'); + p._childAnimations.forEach(function(childPlayer) { assert.equal(childPlayer.playbackRate, 2, 'It also updates the child players'); }); }); @@ -958,32 +958,32 @@ suite('group-player', function() { 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'); + assert.equal(p._childAnimations[0]._animation.playState, 'running'); + assert.equal(p._childAnimations[1]._animation.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'); + assert.equal(p._childAnimations[0]._animation.playState, 'finished'); + assert.equal(p._childAnimations[1]._animation.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'); + assert.equal(p._childAnimations[0]._animation.playState, 'paused'); + assert.equal(p._childAnimations[1]._animation.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'); + assert.equal(p._childAnimations[0]._animation.playState, 'paused'); + assert.equal(p._childAnimations[1]._animation.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'); + assert.equal(p._childAnimations[0]._animation.playState, 'pending'); + assert.equal(p._childAnimations[1]._animation.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'); + assert.equal(p._childAnimations[0]._animation.playState, 'finished'); + assert.equal(p._childAnimations[1]._animation.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'); + assert.equal(p._childAnimations[0]._animation.playState, 'finished'); + assert.equal(p._childAnimations[1]._animation.playState, 'finished'); }); test('pausing then seeking out of range then seeking into range works', function() { @@ -994,12 +994,12 @@ suite('group-player', function() { player.pause(); player.currentTime = 3000; - assert.equal(player._childPlayers.length, 0); + assert.equal(player._childAnimations.length, 0); tick(100); player.currentTime = 1000; - assert.equal(player._childPlayers.length, 1); - assert.equal(player._childPlayers[0]._player.playState, 'paused'); - assert.equal(player._childPlayers[0]._player.currentTime, 1000); + assert.equal(player._childAnimations.length, 1); + assert.equal(player._childAnimations[0]._animation.playState, 'paused'); + assert.equal(player._childAnimations[0]._animation.currentTime, 1000); }); @@ -1014,14 +1014,14 @@ suite('group-player', function() { player.reverse(); tick(105); player.currentTime = 3000; - assert.equal(player._childPlayers.length, 0); + assert.equal(player._childAnimations.length, 0); tick(110); player.currentTime = 1000; assert.equal(player.playbackRate, -1); - assert.equal(player._childPlayers.length, 1); - assert.equal(player._childPlayers[0]._player.playState, 'running'); - assert.equal(player._childPlayers[0]._player.currentTime, 1000); - assert.equal(player._childPlayers[0]._player.playbackRate, -1); + assert.equal(player._childAnimations.length, 1); + assert.equal(player._childAnimations[0]._animation.playState, 'running'); + assert.equal(player._childAnimations[0]._animation.currentTime, 1000); + assert.equal(player._childAnimations[0]._animation.playbackRate, -1); }); From 4a86f69550824f6d97174b96d66af2a1f1e1fefe Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 23 Mar 2015 10:25:22 +1100 Subject: [PATCH 32/91] More tests passing. --- src/animation.js | 2 +- src/keyframe-effect-constructor.js | 10 +++++++--- src/keyframe-effect.js | 1 + src/timeline.js | 2 +- src/web-animations-next-animation.js | 4 ++++ test/js/animation-constructor.js | 8 ++++---- test/js/animation-node.js | 4 ++-- 7 files changed, 20 insertions(+), 11 deletions(-) diff --git a/src/animation.js b/src/animation.js index cecb633d..4e4ce29b 100644 --- a/src/animation.js +++ b/src/animation.js @@ -196,7 +196,7 @@ }; if (WEB_ANIMATIONS_TESTING) { - testing.Player = scope.Animation; + testing.webAnimations1.Player = scope.Animation; } })(webAnimations1, webAnimationsTesting); diff --git a/src/keyframe-effect-constructor.js b/src/keyframe-effect-constructor.js index d1d6c1b4..7bfcda9a 100644 --- a/src/keyframe-effect-constructor.js +++ b/src/keyframe-effect-constructor.js @@ -104,8 +104,12 @@ }.bind(this)); }; - if (WEB_ANIMATIONS_TESTING) { - testing.Animation = scope.KeyframeEffect; - } + // Alias KeyframeEffect to Animation, to support old constructor (Animation) for a deprecation + // period. Should be removed after 2015. FIXME: Explain more. + window.Animation = function() { + window.KeyframeEffect.apply(this, arguments); + }; + window.Animation.prototype = Object.create(window.KeyframeEffect.prototype); + window.Animation.prototype.constructor = window.Animation; }(webAnimationsShared, webAnimationsNext, webAnimationsTesting)); diff --git a/src/keyframe-effect.js b/src/keyframe-effect.js index 686a6675..3348183d 100644 --- a/src/keyframe-effect.js +++ b/src/keyframe-effect.js @@ -60,6 +60,7 @@ if (WEB_ANIMATIONS_TESTING) { testing.webAnimations1.KeyframeEffect = scope.KeyframeEffect; + // testing.webAnimations1.Animation = scope.KeyframeEffect; } })(webAnimationsShared, webAnimations1, webAnimationsTesting); diff --git a/src/timeline.js b/src/timeline.js index bd683d77..b9e31458 100644 --- a/src/timeline.js +++ b/src/timeline.js @@ -24,7 +24,7 @@ // FIXME: This needs to return the wrapped animations in Web Animations Next // TODO: Does this need to be sorted? // TODO: Do we need to consider needsRetick? - getAnimationAnimations: function() { + getAnimations: function() { this._discardAnimations(); return this._animations.slice(); }, diff --git a/src/web-animations-next-animation.js b/src/web-animations-next-animation.js index b34d4be6..36da65e5 100644 --- a/src/web-animations-next-animation.js +++ b/src/web-animations-next-animation.js @@ -221,4 +221,8 @@ }, }; + if (WEB_ANIMATIONS_TESTING) { + testing.Player = scope.Animation; + } + })(webAnimationsShared, webAnimationsNext, webAnimationsTesting); diff --git a/test/js/animation-constructor.js b/test/js/animation-constructor.js index d7f521f1..f4bbdcc4 100644 --- a/test/js/animation-constructor.js +++ b/test/js/animation-constructor.js @@ -1,20 +1,20 @@ suite('animation-constructor', function() { setup(function() { - document.timeline.getAnimationPlayers().forEach(function(player) { + document.timeline.getAnimations().forEach(function(player) { player.cancel(); }); }); test('Playing an Animation makes a Player', function() { var animation = new Animation(document.body, [], 1000); - assert.equal(document.body.getAnimationPlayers().length, 0); + assert.equal(document.body.getAnimations().length, 0); var player = document.timeline.play(animation); tick(200); - assert.equal(document.body.getAnimationPlayers().length, 1); + assert.equal(document.body.getAnimations().length, 1); tick(1600); - assert.equal(document.body.getAnimationPlayers().length, 0); + assert.equal(document.body.getAnimations().length, 0); }); test('Setting the timing function on an Animation works', function() { diff --git a/test/js/animation-node.js b/test/js/animation-node.js index f5860707..13a864fa 100644 --- a/test/js/animation-node.js +++ b/test/js/animation-node.js @@ -93,8 +93,8 @@ suite('animation-node', function() { test('Animation Node', function() { var timing = normalizeTimingInput({duration: 1000, iterations: 4, iterationStart: 0.5, easing: 'linear', direction: 'alternate', delay: 100, fill: 'forwards'}); var timing2 = normalizeTimingInput({duration: 1000, iterations: 4, iterationStart: 0.5, easing: 'ease', direction: 'alternate', delay: 100, fill: 'forwards'}); - var node = webAnimations1.AnimationNode(timing); - var node2 = webAnimations1.AnimationNode(timing2); + var node = webAnimations1.EffectNode(timing); + var node2 = webAnimations1.EffectNode(timing2); assert.equal(node(0), null); assert.equal(node(100), 0.5); assert.closeTo(node2(100), 0.8, 0.005); From 0bbb670841b23932bb57e82661b5533c82b8f73a Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 23 Mar 2015 10:52:02 +1100 Subject: [PATCH 33/91] Expose the inner player to testing. --- src/animation.js | 2 +- src/keyframe-effect-constructor.js | 5 ++++- src/keyframe-effect.js | 4 ++-- src/web-animations-next-animation.js | 4 ---- 4 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/animation.js b/src/animation.js index 4e4ce29b..cecb633d 100644 --- a/src/animation.js +++ b/src/animation.js @@ -196,7 +196,7 @@ }; if (WEB_ANIMATIONS_TESTING) { - testing.webAnimations1.Player = scope.Animation; + testing.Player = scope.Animation; } })(webAnimations1, webAnimationsTesting); diff --git a/src/keyframe-effect-constructor.js b/src/keyframe-effect-constructor.js index 7bfcda9a..9a0e32f4 100644 --- a/src/keyframe-effect-constructor.js +++ b/src/keyframe-effect-constructor.js @@ -105,11 +105,14 @@ }; // Alias KeyframeEffect to Animation, to support old constructor (Animation) for a deprecation - // period. Should be removed after 2015. FIXME: Explain more. + // period. Should be removed after 2015. + // FIXME: Renee: Explain more. + // scope.Animation = function(target, effectInput, timingInput) { window.Animation = function() { window.KeyframeEffect.apply(this, arguments); }; window.Animation.prototype = Object.create(window.KeyframeEffect.prototype); window.Animation.prototype.constructor = window.Animation; + // window.Animation = scope.Animation; }(webAnimationsShared, webAnimationsNext, webAnimationsTesting)); diff --git a/src/keyframe-effect.js b/src/keyframe-effect.js index 3348183d..705e2147 100644 --- a/src/keyframe-effect.js +++ b/src/keyframe-effect.js @@ -59,8 +59,8 @@ }; if (WEB_ANIMATIONS_TESTING) { - testing.webAnimations1.KeyframeEffect = scope.KeyframeEffect; - // testing.webAnimations1.Animation = scope.KeyframeEffect; + testing.webAnimations1KeyframeEffect = scope.KeyframeEffect; + testing.webAnimations1Animation = scope.KeyframeEffect; } })(webAnimationsShared, webAnimations1, webAnimationsTesting); diff --git a/src/web-animations-next-animation.js b/src/web-animations-next-animation.js index 36da65e5..b34d4be6 100644 --- a/src/web-animations-next-animation.js +++ b/src/web-animations-next-animation.js @@ -221,8 +221,4 @@ }, }; - if (WEB_ANIMATIONS_TESTING) { - testing.Player = scope.Animation; - } - })(webAnimationsShared, webAnimationsNext, webAnimationsTesting); From 957ebc72d10c6d774e40f57af5aeb1edfb0f761f Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 23 Mar 2015 10:57:13 +1100 Subject: [PATCH 34/91] Got player tests working without changing constructors --- test/js/player.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/test/js/player.js b/test/js/player.js index 4e5405e0..2183848d 100644 --- a/test/js/player.js +++ b/test/js/player.js @@ -1,6 +1,6 @@ suite('player', function() { setup(function() { - webAnimations1.timeline._players = []; + webAnimations1.timeline._animations = []; }); test('zero duration animation works', function() { tick(90); @@ -271,10 +271,10 @@ suite('player', function() { player.cancel(); // getComputedStyle forces a tick. assert.equal(getComputedStyle(target).marginLeft, '0px'); - assert.deepEqual(webAnimations1.timeline._players, []); + assert.deepEqual(webAnimations1.timeline._animations, []); tick(120); assert.equal(getComputedStyle(target).marginLeft, '0px'); - assert.deepEqual(webAnimations1.timeline._players, []); + assert.deepEqual(webAnimations1.timeline._animations, []); document.documentElement.removeChild(target); }); test('startTime is set on first tick if timeline hasn\'t started', function() { @@ -288,27 +288,27 @@ suite('player', function() { tick(90); var nofill = document.body.animate([], 100); var fill = document.body.animate([], {duration: 100, fill: 'forwards'}); - assert.deepEqual(webAnimations1.timeline._players, [nofill._player || nofill, fill._player || fill]); + assert.deepEqual(webAnimations1.timeline._animations, [nofill._animation || nofill, fill._animation || fill]); tick(100); - assert.deepEqual(webAnimations1.timeline._players, [nofill._player || nofill, fill._player || fill]); + assert.deepEqual(webAnimations1.timeline._animations, [nofill._animation || nofill, fill._animation || fill]); tick(400); - assert.deepEqual(webAnimations1.timeline._players, [fill._player || fill]); + assert.deepEqual(webAnimations1.timeline._animations, [fill._animation || fill]); }); test('discarded players get re-added on modification', function() { tick(90); var player = document.body.animate([], 100); tick(100); tick(400); - assert.deepEqual(webAnimations1.timeline._players, []); + assert.deepEqual(webAnimations1.timeline._animations, []); player.currentTime = 0; - assert.deepEqual(webAnimations1.timeline._players, [player._player || player]); + assert.deepEqual(webAnimations1.timeline._animations, [player._animation || player]); }); test('players in the before phase are not discarded', function() { tick(100); var player = document.body.animate([], 100); player.currentTime = -50; tick(110); - assert.deepEqual(webAnimations1.timeline._players, [player._player || player]); + assert.deepEqual(webAnimations1.timeline._animations, [player._animation || player]); }); test('players that go out of effect should not clear the effect of players that are in effect', function() { var target = document.createElement('div'); From 6b95df6dd7d5bb81e08169212b5ba3df73b0dcbe Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 23 Mar 2015 11:05:13 +1100 Subject: [PATCH 35/91] Got all tests passing. --- src/keyframe-effect-constructor.js | 5 +++-- test/js/effect-callback.js | 4 ++-- test/js/tick.js | 6 +++--- test/js/timeline.js | 26 +++++++++++++------------- 4 files changed, 21 insertions(+), 20 deletions(-) diff --git a/src/keyframe-effect-constructor.js b/src/keyframe-effect-constructor.js index 9a0e32f4..21c3c059 100644 --- a/src/keyframe-effect-constructor.js +++ b/src/keyframe-effect-constructor.js @@ -106,13 +106,14 @@ // Alias KeyframeEffect to Animation, to support old constructor (Animation) for a deprecation // period. Should be removed after 2015. + // // FIXME: Renee: Explain more. - // scope.Animation = function(target, effectInput, timingInput) { window.Animation = function() { window.KeyframeEffect.apply(this, arguments); }; window.Animation.prototype = Object.create(window.KeyframeEffect.prototype); + // This has to be window.Animation. We can't put it on scope because the constructor that was + // called Player (now webAnimationsNext.Animation) is already on the scope. window.Animation.prototype.constructor = window.Animation; - // window.Animation = scope.Animation; }(webAnimationsShared, webAnimationsNext, webAnimationsTesting)); diff --git a/test/js/effect-callback.js b/test/js/effect-callback.js index c51e0819..a4e7c69b 100644 --- a/test/js/effect-callback.js +++ b/test/js/effect-callback.js @@ -1,7 +1,7 @@ suite('effect-callback', function() { setup(function() { - document.timeline._players = []; - webAnimations1.timeline._players = []; + document.timeline._animations = []; + webAnimations1.timeline._animations = []; }); test('animations starting in the future are not in effect', function() { diff --git a/test/js/tick.js b/test/js/tick.js index 5cfcac46..7c657886 100644 --- a/test/js/tick.js +++ b/test/js/tick.js @@ -1,16 +1,16 @@ suite('tick-tests', function() { - setup(function() { webAnimations1.timeline._players = []; }); + setup(function() { webAnimations1.timeline._animations = []; }); test('players are in effect but ticking stops once forward fill is reached', function() { tick(90); var player = document.body.animate([], {duration: 1000, fill: 'forwards'}); tick(100); tick(600); - assert.equal(webAnimations1.timeline._players.length, 1); + assert.equal(webAnimations1.timeline._animations.length, 1); assert.equal(isTicking(), true); tick(1100); assert.equal(player.finished, true); - assert.equal(webAnimations1.timeline._players.length, 1); + assert.equal(webAnimations1.timeline._animations.length, 1); assert.equal(isTicking(), false); }); }); diff --git a/test/js/timeline.js b/test/js/timeline.js index fa5947ca..2875c58d 100644 --- a/test/js/timeline.js +++ b/test/js/timeline.js @@ -1,36 +1,36 @@ suite('timeline-tests', function() { setup(function() { - document.timeline._players = []; - webAnimations1.timeline._players = []; + document.timeline._animations = []; + webAnimations1.timeline._animation = []; }); test('no current players', function() { - assert.equal(document.timeline.getAnimationPlayers().length, 0); + assert.equal(document.timeline.getAnimations().length, 0); }); - test('getAnimationPlayers', function() { + test('getAnimations', function() { tick(90); - assert.equal(document.timeline.getAnimationPlayers().length, 0); + assert.equal(document.timeline.getAnimations().length, 0); var player = document.body.animate([], {duration: 500, iterations: 1}); tick(300); - assert.equal(document.timeline.getAnimationPlayers().length, 1); + assert.equal(document.timeline.getAnimations().length, 1); var player2 = document.body.animate([], {duration: 1000}); - assert.equal(document.timeline.getAnimationPlayers().length, 2); + assert.equal(document.timeline.getAnimations().length, 2); tick(800); assert.equal(player.finished, true); - assert.equal(document.timeline.getAnimationPlayers().length, 1); + assert.equal(document.timeline.getAnimations().length, 1); tick(2000); - assert.equal(document.timeline.getAnimationPlayers().length, 0); + assert.equal(document.timeline.getAnimations().length, 0); }); - test('getAnimationPlayers checks cancelled animation', function() { + test('getAnimations checks cancelled animation', function() { tick(90); - assert.equal(document.timeline.getAnimationPlayers().length, 0); + assert.equal(document.timeline.getAnimations().length, 0); var player = document.body.animate([], {duration: 500, iterations: 1}); tick(300); - assert.equal(document.timeline.getAnimationPlayers().length, 1); + assert.equal(document.timeline.getAnimations().length, 1); player.cancel(); - assert.equal(document.timeline.getAnimationPlayers().length, 0); + assert.equal(document.timeline.getAnimations().length, 0); }); }); From 89ebe4782fd40c901655808bd04554cbe3ae5f9b Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 23 Mar 2015 13:00:45 +1100 Subject: [PATCH 36/91] Change comments --- src/keyframe-effect-constructor.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/keyframe-effect-constructor.js b/src/keyframe-effect-constructor.js index 21c3c059..6ccb938b 100644 --- a/src/keyframe-effect-constructor.js +++ b/src/keyframe-effect-constructor.js @@ -107,13 +107,14 @@ // Alias KeyframeEffect to Animation, to support old constructor (Animation) for a deprecation // period. Should be removed after 2015. // - // FIXME: Renee: Explain more. + // This in only on window and not on scope because the constructor that was called Player (now + // webAnimationsNext.Animation) is already on the scope. + // + // FIXME: Make this scope.Animation. window.Animation = function() { window.KeyframeEffect.apply(this, arguments); }; window.Animation.prototype = Object.create(window.KeyframeEffect.prototype); - // This has to be window.Animation. We can't put it on scope because the constructor that was - // called Player (now webAnimationsNext.Animation) is already on the scope. window.Animation.prototype.constructor = window.Animation; }(webAnimationsShared, webAnimationsNext, webAnimationsTesting)); From b7a62c67a940e20ff4cb943d706098a74aab5212 Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 23 Mar 2015 13:22:43 +1100 Subject: [PATCH 37/91] Add deprecation logic and improve comments. --- src/group-constructors.js | 10 ++++++++-- src/keyframe-effect-constructor.js | 13 +++++++++---- src/keyframe-effect.js | 1 - 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/group-constructors.js b/src/group-constructors.js index 5e7eded1..a414ad62 100644 --- a/src/group-constructors.js +++ b/src/group-constructors.js @@ -84,15 +84,21 @@ scope.groupChildDuration = groupChildDuration; // Alias GroupEffect & SequenceEffect to AnimationGroup & AnimationSequence respectively, to - // support old constructors (Animation*) for a deprecation period. Should be removed after - // 2015. + // support old constructors (Animation*) for a deprecation period. Should be removed after 23 June + // 2015. window.AnimationSequence = function() { + if (shared.isDeprecated('window.AnimationSequence', '2015-03-23', 'Use window.SequenceEffect instead.')) { + return; + } window.SequenceEffect.apply(this, arguments); }; window.AnimationSequence.prototype = Object.create(window.SequenceEffect.prototype); window.AnimationSequence.prototype.constructor = window.AnimationSequence; window.AnimationGroup = function() { + if (shared.isDeprecated('window.AnimationGroup', '2015-03-23', 'Use window.GroupEffect instead.')) { + return; + } window.GroupEffect.apply(this, arguments); }; window.AnimationGroup.prototype = Object.create(window.GroupEffect.prototype); diff --git a/src/keyframe-effect-constructor.js b/src/keyframe-effect-constructor.js index 6ccb938b..cfe4cbeb 100644 --- a/src/keyframe-effect-constructor.js +++ b/src/keyframe-effect-constructor.js @@ -105,13 +105,18 @@ }; // Alias KeyframeEffect to Animation, to support old constructor (Animation) for a deprecation - // period. Should be removed after 2015. + // period. Should be removed after 23 June 2015. // - // This in only on window and not on scope because the constructor that was called Player (now - // webAnimationsNext.Animation) is already on the scope. + // This is only on window and not on scope, because the constructor that was called + // webAnimationsNext.Player - now called webAnimationsNext.Animation - is already on the scope. // - // FIXME: Make this scope.Animation. + // FIXME: Add this to scope & expose the other scope.Animation (nee scope.Player). I.e. both this + // function and the constructor in web-animations-next-animation should be scope.Animation and + // window.Animation until 23 June 2015. window.Animation = function() { + if (shared.isDeprecated('window.Animation', '2015-03-23', 'Use window.KeyframeEffect instead.')) { + return; + } window.KeyframeEffect.apply(this, arguments); }; window.Animation.prototype = Object.create(window.KeyframeEffect.prototype); diff --git a/src/keyframe-effect.js b/src/keyframe-effect.js index 705e2147..21ac2148 100644 --- a/src/keyframe-effect.js +++ b/src/keyframe-effect.js @@ -59,7 +59,6 @@ }; if (WEB_ANIMATIONS_TESTING) { - testing.webAnimations1KeyframeEffect = scope.KeyframeEffect; testing.webAnimations1Animation = scope.KeyframeEffect; } From 5f857c3d53f5dc76e67f5f6575e96b90f0f22ac5 Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 23 Mar 2015 14:18:27 +1100 Subject: [PATCH 38/91] Remove dupe tests. --- test/js/animation-finish-event.js | 79 -- test/js/animation.js | 470 ---------- test/js/effect-node.js | 114 --- test/js/group-animation-finish-event.js | 87 -- test/js/group-animation.js | 1044 --------------------- test/js/keyframe-effect-constructor.js | 80 -- test/runner-web-animations-next-lite.html | 26 - test/runner-web-animations-next.html | 26 - test/runner-web-animations.html | 26 - web-animations-next-lite.dev.html | 44 + web-animations-next-lite.dev.js | 21 + web-animations-next.dev.html | 49 + web-animations-next.dev.js | 21 + web-animations.dev.html | 44 + web-animations.dev.js | 21 + web-animations.html | 50 + 16 files changed, 250 insertions(+), 1952 deletions(-) delete mode 100644 test/js/animation-finish-event.js delete mode 100644 test/js/animation.js delete mode 100644 test/js/effect-node.js delete mode 100644 test/js/group-animation-finish-event.js delete mode 100644 test/js/group-animation.js delete mode 100644 test/js/keyframe-effect-constructor.js delete mode 100644 test/runner-web-animations-next-lite.html delete mode 100644 test/runner-web-animations-next.html delete mode 100644 test/runner-web-animations.html create mode 100644 web-animations-next-lite.dev.html create mode 100644 web-animations-next-lite.dev.js create mode 100644 web-animations-next.dev.html create mode 100644 web-animations-next.dev.js create mode 100644 web-animations.dev.html create mode 100644 web-animations.dev.js create mode 100644 web-animations.html diff --git a/test/js/animation-finish-event.js b/test/js/animation-finish-event.js deleted file mode 100644 index 6365d913..00000000 --- a/test/js/animation-finish-event.js +++ /dev/null @@ -1,79 +0,0 @@ -suite('player-finish-event', function() { - setup(function() { - this.element = document.createElement('div'); - document.documentElement.appendChild(this.element); - this.player = this.element.animate([], 1000); - }); - teardown(function() { - if (this.element.parent) - this.element.removeChild(this.target); - }); - - test('fire when player completes', function(done) { - var ready = false; - var fired = false; - var player = this.player; - player.onfinish = function(event) { - assert(ready, 'must not be called synchronously'); - assert.equal(this, player); - assert.equal(event.target, player); - assert.equal(event.currentTime, 1000); - assert.equal(event.timelineTime, 1100); - if (fired) - assert(false, 'must not get fired twice'); - fired = true; - done(); - }; - tick(100); - tick(1100); - tick(2100); - ready = true; - }); - - test('fire when reversed player completes', function(done) { - this.player.onfinish = function(event) { - assert.equal(event.currentTime, 0); - assert.equal(event.timelineTime, 1001); - done(); - }; - tick(0); - tick(500); - this.player.reverse(); - tick(501); - tick(1001); - }); - - test('fire after player is cancelled', function(done) { - this.player.onfinish = function(event) { - assert.equal(event.currentTime, 0); - assert.equal(event.timelineTime, 1, 'event must be fired on next sample'); - done(); - }; - tick(0); - this.player.cancel(); - tick(1); - }); - - test('multiple event listeners', function(done) { - var count = 0; - function createHandler(expectedCount) { - return function() { - count++; - assert.equal(count, expectedCount); - }; - } - var toRemove = createHandler(0); - this.player.addEventListener('finish', createHandler(1)); - this.player.addEventListener('finish', createHandler(2)); - this.player.addEventListener('finish', toRemove); - this.player.addEventListener('finish', createHandler(3)); - this.player.removeEventListener('finish', toRemove); - this.player.onfinish = function() { - assert.equal(count, 3); - done(); - }; - tick(0); - this.player.cancel(); - tick(1000); - }); -}); diff --git a/test/js/animation.js b/test/js/animation.js deleted file mode 100644 index 4e5405e0..00000000 --- a/test/js/animation.js +++ /dev/null @@ -1,470 +0,0 @@ -suite('player', function() { - setup(function() { - webAnimations1.timeline._players = []; - }); - test('zero duration animation works', function() { - tick(90); - var p = document.body.animate([], 0); - tick(100); - assert.equal(p.startTime, 100); - assert.equal(p.currentTime, 0); - }); - test('playing works as expected', function() { - tick(90); - var p = document.body.animate([], 2000); - tick(100); - assert.equal(p.startTime, 100); - assert.equal(p.currentTime, 0); - tick(300); - assert.equal(p.startTime, 100); - assert.equal(p.currentTime, 200); - }); - test('pause at start of play', function() { - tick(90); - var p = document.body.animate([], 2000); - p.pause(); - tick(100); - assert.equal(p.currentTime, 0); - tick(300); - p.play(); - assert.equal(p.currentTime, 0); - tick(310); - assert.equal(p.currentTime, 0); - assert.equal(p.startTime, 310); - - var p = document.body.animate([], 2000); - p.startTime = -690; - p.pause(); - assert.equal(p.currentTime, null); - tick(700); - p.play(); - tick(701); - assert.equal(p.currentTime, 1000); - tick(800); - assert.equal(p.currentTime, 1099); - assert.equal(p.startTime, -299); - }); - test('pausing works as expected', function() { - tick(190); - var p = document.body.animate([], 3000); - tick(200); - tick(1500); - assert.equal(p.startTime, 200); - assert.equal(p.currentTime, 1300); - p.pause(); - assert.equal(p.startTime, null); - assert.equal(p.currentTime, null); - tick(2500); - assert.equal(p.startTime, null); - assert.equal(p.currentTime, 1300); - p.play(); - tick(2510); - assert.equal(p.startTime, 1210); - assert.equal(p.currentTime, 1300); - tick(3500); - assert.equal(p.startTime, 1210); - assert.equal(p.currentTime, 2290); - }); - test('reversing works as expected', function() { - tick(290); - var p = document.body.animate([], 1000); - tick(300); - assert.equal(p.startTime, 300); - assert.equal(p.currentTime, 0); - tick(600); - assert.equal(p.startTime, 300); - assert.equal(p.currentTime, 300); - assert.equal(p.playbackRate, 1); - p.reverse(); - tick(600); - assert.equal(p.startTime, 900); - assert.equal(p.currentTime, 300); - assert.equal(p.playbackRate, -1); - tick(700); - assert.equal(p.startTime, 900); - assert.equal(p.currentTime, 200); - }); - test('reversing after pausing', function() { - tick(90); - var p = document.body.animate([], 1000); - tick(100); - tick(600); - p.reverse(); - tick(601); - tick(700); - assert.equal(p.startTime, 1101); - assert.equal(p.currentTime, 401); - }); - test('reversing after finishing works as expected', function() { - tick(90); - var p = document.body.animate([], 1000); - tick(100); - tick(1200); - assert.equal(p.finished, true); - assert.equal(p.startTime, 100); - assert.equal(p.currentTime, 1000); - tick(1500); - assert.equal(p.currentTime, 1000); - assert.equal(isTicking(), false); - p.reverse(); - assert.equal(p._startTime, null); - assert.equal(p.currentTime, 1000); - tick(1600); - assert.equal(p.startTime, 2600); - assert.equal(p.currentTime, 1000); - }); - test('playing after finishing works as expected', function() { - tick(90); - var p = document.body.animate([], 1000); - tick(100); - tick(1200); - assert.equal(p.finished, true); - assert.equal(p.startTime, 100); - assert.equal(p.currentTime, 1000); - tick(1500); - assert.equal(p.currentTime, 1000); - assert.equal(isTicking(), false); - p.play(); - assert.equal(p.startTime, null); - assert.equal(p.currentTime, 0); - tick(1600); - assert.equal(p.startTime, 1600); - assert.equal(p.currentTime, 0); - }); - test('limiting works as expected', function() { - tick(390); - var p = document.body.animate([], 1000); - tick(400); - assert.equal(p.startTime, 400); - assert.equal(p.currentTime, 0); - tick(900); - assert.equal(p.startTime, 400); - assert.equal(p.currentTime, 500); - tick(1400); - assert.equal(p.startTime, 400); - assert.equal(p.currentTime, 1000); - tick(1500); - assert.equal(p.startTime, 400); - assert.equal(p.currentTime, 1000); - p.reverse(); - assert.equal(p.playbackRate, -1); - assert.equal(p.currentTime, 1000); - assert.equal(p._startTime, null); - tick(2000); - assert.equal(p.currentTime, 1000); - assert.equal(p.startTime, 3000); - tick(2200); - assert.equal(p.currentTime, 800); - assert.equal(p.startTime, 3000); - tick(3200); - assert.equal(p.currentTime, 0); - assert.equal(p.startTime, 3000); - tick(3500); - assert.equal(p.currentTime, 0); - assert.equal(p.startTime, 3000); - }); - test('play after limit works as expected', function() { - tick(490); - var p = document.body.animate([], 2000); - tick(500); - tick(2600); - assert.equal(p.currentTime, 2000); - assert.equal(p.startTime, 500); - assert.equal(p.finished, true); - assert.equal(p.playbackRate, 1); - setTicking(true); - p.play(); - tick(2700); - assert.equal(p.startTime, 2700); - assert.equal(p.currentTime, 0); - assert.equal(p.finished, false); - assert.equal(p.playbackRate, 1); - }); - test('play after limit works as expected (reversed)', function() { - tick(590); - var p = document.body.animate([], 3000); - tick(600); - tick(700); - p.reverse(); - tick(701); - tick(900); - assert.equal(p.startTime, 801); - assert.equal(p.currentTime, 0); - assert.equal(p.finished, true); - assert.equal(p.playbackRate, -1); - setTicking(true); - p.play(); - tick(1000); - assert.equal(p.startTime, 4000); - assert.equal(p.currentTime, 3000); - assert.equal(p.finished, false); - assert.equal(p.playbackRate, -1); - }); - test('seeking works as expected', function() { - tick(690); - var p = document.body.animate([], 2000); - tick(700); - tick(900); - assert.equal(p.currentTime, 200); - p.currentTime = 600; - assert.equal(p.currentTime, 600); - assert.equal(p.startTime, 300); - p.reverse(); - tick(1000); - assert.equal(p.startTime, 1600); - p.currentTime = 300; - assert.equal(p.currentTime, 300); - assert.equal(p.startTime, 1300); - }); - test('seeking while paused works as expected', function() { - tick(790); - var p = document.body.animate([], 1000); - tick(800); - tick(1000); - p.pause(); - assert.equal(p.currentTime, null); - assert.equal(p.startTime, null); - assert.equal(p.paused, true); - p.currentTime = 500; - assert.equal(p.startTime, null); - assert.equal(p.paused, true); - }); - test('setting start time while paused is ignored', function() { - tick(900); - var p = document.body.animate([], 1234); - p.pause(); - assert.equal(p.startTime, null); - assert.equal(p.currentTime, null); - p.startTime = 2232; - assert.equal(p.startTime, null); - assert.equal(p.currentTime, null); - }); - test('setting playbackRate does preserves the current time', function() { - tick(900); - var p = document.body.animate([], 1000); - tick(1100); - var oldCurrentTime = p.currentTime; - p.playbackRate = 2; - assert.equal(p.playbackRate, 2); - assert.equal(p.currentTime, oldCurrentTime); - }); - test('finishing works as expected', function() { - tick(1000); - var p = document.body.animate([], 2000); - p.finish(); - assert.equal(p.startTime, 0); - assert.equal(p.currentTime, 2000); - p.reverse(); - p.finish(); - assert.equal(p.currentTime, 0); - assert.equal(p.startTime, 2000); - tick(2000); - }); - test('cancelling clears all effects', function() { - tick(0); - var target = document.createElement('div'); - document.documentElement.appendChild(target); - var player = target.animate([{marginLeft: '50px'}, {marginLeft: '50px'}], 1000); - tick(10); - tick(110); - assert.equal(getComputedStyle(target).marginLeft, '50px'); - player.cancel(); - // getComputedStyle forces a tick. - assert.equal(getComputedStyle(target).marginLeft, '0px'); - assert.deepEqual(webAnimations1.timeline._players, []); - tick(120); - assert.equal(getComputedStyle(target).marginLeft, '0px'); - assert.deepEqual(webAnimations1.timeline._players, []); - document.documentElement.removeChild(target); - }); - test('startTime is set on first tick if timeline hasn\'t started', function() { - webAnimations1.timeline.currentTime = undefined; - var p = document.body.animate([], 1000); - tick(0); - tick(100); - assert.equal(p.startTime, 0); - }); - test('players which are finished and not filling get discarded', function() { - tick(90); - var nofill = document.body.animate([], 100); - var fill = document.body.animate([], {duration: 100, fill: 'forwards'}); - assert.deepEqual(webAnimations1.timeline._players, [nofill._player || nofill, fill._player || fill]); - tick(100); - assert.deepEqual(webAnimations1.timeline._players, [nofill._player || nofill, fill._player || fill]); - tick(400); - assert.deepEqual(webAnimations1.timeline._players, [fill._player || fill]); - }); - test('discarded players get re-added on modification', function() { - tick(90); - var player = document.body.animate([], 100); - tick(100); - tick(400); - assert.deepEqual(webAnimations1.timeline._players, []); - player.currentTime = 0; - assert.deepEqual(webAnimations1.timeline._players, [player._player || player]); - }); - test('players in the before phase are not discarded', function() { - tick(100); - var player = document.body.animate([], 100); - player.currentTime = -50; - tick(110); - assert.deepEqual(webAnimations1.timeline._players, [player._player || player]); - }); - test('players that go out of effect should not clear the effect of players that are in effect', function() { - var target = document.createElement('div'); - document.body.appendChild(target); - tick(0); - var playerBehind = target.animate([{marginLeft: '200px'}, {marginLeft: '200px'}], 200); - var playerInfront = target.animate([{marginLeft: '100px'}, {marginLeft: '100px'}], 100); - tick(50); - assert.equal(getComputedStyle(target).marginLeft, '100px', 't = 50'); - tick(150); - assert.equal(getComputedStyle(target).marginLeft, '200px', 't = 150'); - tick(250); - assert.equal(getComputedStyle(target).marginLeft, '0px', 't = 250'); - document.body.removeChild(target); - }); - test('player modifications should update CSS effects immediately', function() { - var target = document.createElement('div'); - document.body.appendChild(target); - tick(0); - var playerBehind = target.animate([{width: '1234px'}, {width: '1234px'}], {duration: 1, fill: 'both'}); - var playerInfront = target.animate([{width: '0px'}, {width: '100px'}], 100); - assert.equal(getComputedStyle(target).width, '0px'); - playerInfront.currentTime = 50; - assert.equal(getComputedStyle(target).width, '50px'); - playerInfront.currentTime = 100; - assert.equal(getComputedStyle(target).width, '1234px'); - playerInfront.play(); - assert.equal(getComputedStyle(target).width, '0px'); - playerInfront.startTime = -50; - assert.equal(getComputedStyle(target).width, '50px'); - document.body.removeChild(target); - }); - test('Player that hasn\'t been played has playState \'idle\'', function() { - var source = new webAnimations1Animation(document.body, [], 1000); - var p = new Player(source); - assert.equal(p.playState, 'idle'); - }); - test('playState works for a simple animation', function() { - var p = document.body.animate([], 1000); - tick(0); - assert.equal(p.playState, 'running'); - tick(100); - assert.equal(p.playState, 'running'); - p.pause(); - assert.equal(p.playState, 'pending'); - tick(101); - assert.equal(p.playState, 'paused'); - p.play(); - assert.equal(p.playState, 'pending'); - tick(102); - assert.equal(p.playState, 'running'); - tick(1002); - assert.equal(p.playState, 'finished'); - }); - test('Play after cancel', function() { - var p = document.body.animate([], 1000); - assert.equal(p.playState, 'pending'); - tick(0); - p.cancel(); - assert.equal(p.playState, 'idle'); - assert.equal(p.currentTime, null); - assert.equal(p.startTime, null); - tick(1); - assert.equal(p.playState, 'idle'); - assert.equal(p.currentTime, null); - assert.equal(p.startTime, null); - p.play(); - assert.equal(p.playState, 'pending'); - assert.equal(p.currentTime, 0); - assert.equal(p.startTime, null); - tick(10); - assert.equal(p.playState, 'running'); - assert.equal(p.currentTime, 0); - assert.equal(p.startTime, 10); - }); - test('Reverse after cancel', function() { - var p = document.body.animate([], 300); - tick(0); - p.cancel(); - assert.equal(p.playState, 'idle'); - assert.equal(p.currentTime, null); - assert.equal(p.startTime, null); - tick(1); - p.reverse(); - assert.equal(p.playState, 'pending'); - assert.equal(p.currentTime, 300); - assert.equal(p.startTime, null); - tick(100); - assert.equal(p.playState, 'running'); - assert.equal(p.currentTime, 300); - assert.equal(p.startTime, 400); - tick(300); - assert.equal(p.playState, 'running'); - assert.equal(p.currentTime, 100); - assert.equal(p.startTime, 400); - tick(400); - assert.equal(p.playState, 'finished'); - assert.equal(p.currentTime, 0); - assert.equal(p.startTime, 400); - }); - test('Finish after cancel', function() { - var p = document.body.animate([], 300); - tick(0); - p.cancel(); - assert.equal(p.playState, 'idle'); - assert.equal(p.currentTime, null); - assert.equal(p.startTime, null); - tick(1); - p.finish(); - assert.equal(p.playState, 'idle'); - assert.equal(p.currentTime, null); - assert.equal(p.startTime, null); - tick(2); - assert.equal(p.playState, 'idle'); - assert.equal(p.currentTime, null); - assert.equal(p.startTime, null); - }); - test('Pause after cancel', function() { - var p = document.body.animate([], 300); - tick(0); - p.cancel(); - assert.equal(p.playState, 'idle'); - assert.equal(p.currentTime, null); - assert.equal(p.startTime, null); - tick(1); - p.pause(); - assert.equal(p.playState, 'idle'); - assert.equal(p.currentTime, null); - assert.equal(p.startTime, null); - }); - test('Players ignore NaN times', function() { - var p = document.body.animate([], 300); - p.startTime = 100; - tick(110); - assert.equal(p.currentTime, 10); - p.startTime = NaN; - assert.equal(p.startTime, 100); - p.currentTime = undefined; - assert.equal(p.currentTime, 10); - }); - test('play() should not set a start time', function() { - var p = document.body.animate([], 1000); - p.cancel(); - assert.equal(p.startTime, null); - assert.equal(p.playState, 'idle'); - p.play(); - assert.equal(p.startTime, null); - assert.equal(p.playState, 'pending'); - }); - test('reverse() should not set a start time', function() { - var p = document.body.animate([], 1000); - p.cancel(); - assert.equal(p.startTime, null); - assert.equal(p.playState, 'idle'); - p.reverse(); - assert.equal(p.startTime, null); - assert.equal(p.playState, 'pending'); - }); -}); diff --git a/test/js/effect-node.js b/test/js/effect-node.js deleted file mode 100644 index f41482e0..00000000 --- a/test/js/effect-node.js +++ /dev/null @@ -1,114 +0,0 @@ -suite('effect-node', function() { - test('normalize timing input', function() { - assert.equal(normalizeTimingInput(1).duration, 1); - assert.equal(normalizeTimingInput(1).easing(0.2), 0.2); - assert.equal(normalizeTimingInput(undefined).duration, 0); - }); - test('calculating active duration', function() { - assert.equal(calculateActiveDuration({duration: 1000, playbackRate: 4, iterations: 20}), 5000); - assert.equal(calculateActiveDuration({duration: 500, playbackRate: 0.1, iterations: 300}), 1500000); - }); - test('conversion of timing functions', function() { - var f = toTimingFunction('ease'); - var g = toTimingFunction('cubic-bezier(.25, 0.1, 0.25, 1.)'); - for (var i = 0; i < 1; i += 0.1) { - assert.equal(f(i), g(i)); - } - assert.closeTo(f(0.1844), 0.2601, 0.01); - assert.closeTo(g(0.1844), 0.2601, 0.01); - - f = toTimingFunction('cubic-bezier(0, 1, 1, 0)'); - assert.closeTo(f(0.104), 0.392, 0.01); - - function isLinear(f) { - assert.equal(f(0.1), 0.1); - assert.equal(f(0.4), 0.4); - assert.equal(f(0.9), 0.9); - } - - f = toTimingFunction('cubic-bezier(0, 1, -1, 1)'); - isLinear(f); - - f = toTimingFunction('an elephant'); - isLinear(f); - - f = toTimingFunction('cubic-bezier(-1, 1, 1, 1)'); - isLinear(f); - - f = toTimingFunction('cubic-bezier(1, 1, 1)'); - isLinear(f); - - f = toTimingFunction('steps(10, end)'); - assert.equal(f(0), 0); - assert.equal(f(0.09), 0); - assert.equal(f(0.1), 0.1); - assert.equal(f(0.25), 0.2); - }); - test('calculating phase', function() { - // calculatePhase(activeDuration, localTime, timing); - assert.equal(calculatePhase(1000, 100, {delay: 0}), PhaseActive); - assert.equal(calculatePhase(1000, 100, {delay: 200}), PhaseBefore); - assert.equal(calculatePhase(1000, 2000, {delay: 200}), PhaseAfter); - assert.equal(calculatePhase(1000, null, {delay: 200}), PhaseNone); - }); - test('calculating active time', function() { - // calculateActiveTime(activeDuration, fillMode, localTime, phase, delay); - assert.equal(calculateActiveTime(1000, 'forwards', 100, PhaseActive, 0), 100); - assert.equal(calculateActiveTime(1000, 'forwards', 100, PhaseBefore, 200), null); - assert.equal(calculateActiveTime(1000, 'both', 100, PhaseBefore, 200), 0); - assert.equal(calculateActiveTime(1000, 'forwards', 500, PhaseActive, 200), 300); - assert.equal(calculateActiveTime(1000, 'forwards', 1100, PhaseAfter, 200), 1000); - assert.equal(calculateActiveTime(1000, 'none', 1100, PhaseAfter, 200), null); - assert.equal(calculateActiveTime(Infinity, 'both', 5000000, PhaseActive, 2000000), 3000000); - assert.equal(calculateActiveTime(Infinity, 'both', 50000, PhaseBefore, 2000000), 0); - }); - test('calculating scaled active time', function() { - // calculateScaledActiveTime(activeDuration, activeTime, startOffset, timingInput); - assert.equal(calculateScaledActiveTime(1000, 200, 300, {playbackRate: 1.5}), 600); - assert.equal(calculateScaledActiveTime(1000, 200, 300, {playbackRate: -4}), 3500); - assert.equal(calculateScaledActiveTime(Infinity, 400, 200, {playbackRate: 1}), 600); - assert.equal(calculateScaledActiveTime(Infinity, 400, 200, {playbackRate: -4}), Infinity); - }); - test('calculating iteration time', function() { - // calculateIterationTime(iterationDuration, repeatedDuration, scaledActiveTime, startOffset, timingInput); - assert.equal(calculateIterationTime(500, 5000, 600, 100, {iterations: 10, iterationStart: 0}), 100); - assert.equal(calculateIterationTime(500, 5000, Infinity, 100, {iterations: 10, iterationStart: 0}), 500); - assert.equal(calculateIterationTime(500, 5000, 5100, 100, {iterations: 3.2, iterationStart: 0.8}), 500); - }); - test('calculating current iteration', function() { - // calculateCurrentIteration(iterationDuration, iterationTime, scaledActiveTime, timingInput); - assert.equal(calculateCurrentIteration(1000, 400, 4400, {iterations: 50, iterationStart: 0.8}), 4); - assert.equal(calculateCurrentIteration(1000, 1000, 4400, {iterations: 50.2, iterationStart: 0.8}), 50); - }); - test('calculating transformed time', function() { - // calculateTransformedTime(currentIteration, iterationDuration, iterationTime, timingInput); - assert.equal(calculateTransformedTime(4, 1000, 200, {easing: function(x) { return x; }, direction: 'normal'}), 200); - assert.equal(calculateTransformedTime(4, 1000, 200, {easing: function(x) { return x; }, direction: 'reverse'}), 800); - assert.closeTo(calculateTransformedTime(4, 1000, 200, {easing: function(x) { return x * x; }, direction: 'reverse'}), 640, 0.0001); - assert.closeTo(calculateTransformedTime(4, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate'}), 360, 0.0001); - assert.closeTo(calculateTransformedTime(3, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate'}), 160, 0.0001); - assert.closeTo(calculateTransformedTime(4, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate-reverse'}), 160, 0.0001); - assert.closeTo(calculateTransformedTime(3, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate-reverse'}), 360, 0.0001); - }); - test('Effect Node', function() { - var timing = normalizeTimingInput({duration: 1000, iterations: 4, iterationStart: 0.5, easing: 'linear', direction: 'alternate', delay: 100, fill: 'forwards'}); - var timing2 = normalizeTimingInput({duration: 1000, iterations: 4, iterationStart: 0.5, easing: 'ease', direction: 'alternate', delay: 100, fill: 'forwards'}); - var node = webAnimations1.EffectNode(timing); - var node2 = webAnimations1.EffectNode(timing2); - assert.equal(node(0), null); - assert.equal(node(100), 0.5); - assert.closeTo(node2(100), 0.8, 0.005); - assert.equal(node(600), 1); - assert.closeTo(node2(600), 1, 0.005); - assert.equal(node(700), 0.9); - assert.closeTo(node2(700), 0.99, 0.005); - assert.equal(node(1600), 0); - assert.closeTo(node2(1600), 0, 0.005); - assert.equal(node(4000), 0.4); - assert.closeTo(node2(4000), 0.68, 0.005); - assert.equal(node(4100), 0.5); - assert.closeTo(node2(4100), 0.8, 0.005); - assert.equal(node(6000), 0.5); - assert.closeTo(node2(6000), 0.8, 0.005); - }); -}); diff --git a/test/js/group-animation-finish-event.js b/test/js/group-animation-finish-event.js deleted file mode 100644 index 5fedd7eb..00000000 --- a/test/js/group-animation-finish-event.js +++ /dev/null @@ -1,87 +0,0 @@ -suite('group-player-finish-event', function() { - setup(function() { - document.timeline.currentTime = undefined; - this.element = document.createElement('div'); - document.documentElement.appendChild(this.element); - var animation = new AnimationSequence([ - new Animation(this.element, [], 500), - new AnimationGroup([ - new Animation(this.element, [], 250), - new Animation(this.element, [], 500), - ]), - ]); - this.player = document.timeline.play(animation, 1000); - }); - teardown(function() { - if (this.element.parent) - this.element.removeChild(this.element); - }); - - test('fire when player completes', function(done) { - var ready = false; - var fired = false; - var player = this.player; - player.onfinish = function(event) { - assert(ready, 'must not be called synchronously'); - assert.equal(this, player); - assert.equal(event.target, player); - assert.equal(event.currentTime, 1000); - assert.equal(event.timelineTime, 1100); - if (fired) - assert(false, 'must not get fired twice'); - fired = true; - done(); - }; - tick(100); - tick(1100); - tick(2100); - ready = true; - }); - - test('fire when reversed player completes', function(done) { - this.player.onfinish = function(event) { - assert.equal(event.currentTime, 0); - assert.equal(event.timelineTime, 1001); - done(); - }; - tick(0); - tick(500); - this.player.reverse(); - tick(501); - tick(1001); - }); - - test('fire after player is cancelled', function(done) { - this.player.onfinish = function(event) { - assert.equal(event.currentTime, 0); - assert.equal(event.timelineTime, 1, 'event must be fired on next sample'); - done(); - }; - tick(0); - this.player.cancel(); - tick(1); - }); - - test('multiple event listeners', function(done) { - var count = 0; - function createHandler(expectedCount) { - return function() { - count++; - assert.equal(count, expectedCount); - }; - } - var toRemove = createHandler(0); - this.player.addEventListener('finish', createHandler(1)); - this.player.addEventListener('finish', createHandler(2)); - this.player.addEventListener('finish', toRemove); - this.player.addEventListener('finish', createHandler(3)); - this.player.removeEventListener('finish', toRemove); - this.player.onfinish = function() { - assert.equal(count, 3); - done(); - }; - tick(0); - this.player.cancel(); - tick(1000); - }); -}); diff --git a/test/js/group-animation.js b/test/js/group-animation.js deleted file mode 100644 index 2a2c30ed..00000000 --- a/test/js/group-animation.js +++ /dev/null @@ -1,1044 +0,0 @@ -suite('group-player', function() { - setup(function() { - document.timeline._players = []; - webAnimations1.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'); - this.elements.push(seqSimple_target); - 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], [[null, 0], [null, 0], [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('cancelling group players before tick', function() { - tick(0); - var player = document.timeline.play(this.complexSource); - player.cancel(); - assert.equal(player.currentTime, null); - assert.equal(getComputedStyle(this.complexTarget).marginLeft, '0px'); - tick(4); - assert.equal(player.currentTime, null); - assert.equal(getComputedStyle(this.complexTarget).marginLeft, '0px'); - }); - - test('redundant effect 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('setting the playbackRate on group players', function() { - var group = new AnimationGroup([ - new Animation(null, [], 1234), - new Animation(null, [], 1234), - ]); - var p = document.timeline.play(group); - p.playbackRate = 2; - assert.equal(p._player.playbackRate, 2, 'Updates the playbackRate of the inner player'); - p._childPlayers.forEach(function(childPlayer) { - assert.equal(childPlayer.playbackRate, 2, 'It also updates the child players'); - }); - }); - - 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); - var target = this.seqSimple_source.children[0].target; - 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'); - assert.equal(getComputedStyle(target).marginLeft, '40px'); - - tick(300); - checkTimes(player, [null, 200], [[null, 200], [null, -300]], 't = 300'); - assert.equal(getComputedStyle(target).marginLeft, '40px'); - - player.play(); - checkTimes(player, [null, 200], [[null, 200], [null, -300]], 't = 300'); - assert.equal(getComputedStyle(target).marginLeft, '40px'); - - tick(301); - checkTimes(player, [101, 200], [[101, 200], [601, -300]], 't = 301'); - assert.equal(getComputedStyle(target).marginLeft, '40px'); - - tick(401); - checkTimes(player, [101, 300], [[101, 300], [601, -200]], 't = 401'); - assert.equal(getComputedStyle(target).marginLeft, '60px'); - - tick(700); - checkTimes(player, [101, 599], [[101, 500], [601, 99]], 't = 700'); - assert.equal(getComputedStyle(target).marginLeft, '0px'); - }); - - test('pausing before tick works as expected with a simple AnimationSequence', function() { - var player = document.timeline.play(this.seqSimple_source); - var target = this.seqSimple_source.children[0].target; - checkTimes(player, [null, 0], [[null, 0], [null, -500]], 't = 0'); - - player.pause(); - checkTimes(player, [null, null], [[null, null], [null, null]], 't = 0'); - assert.equal(getComputedStyle(target).marginLeft, '0px'); - - tick(10); - checkTimes(player, [null, 0], [[null, 0], [null, -500]], 't = 10'); - assert.equal(getComputedStyle(target).marginLeft, '0px'); - - tick(20); - checkTimes(player, [null, 0], [[null, 0], [null, -500]], 't = 10'); - assert.equal(getComputedStyle(target).marginLeft, '0px'); - }); - - test('pausing and seeking before tick works as expected with a simple AnimationSequence', function() { - var player = document.timeline.play(this.seqSimple_source); - player.pause(); - - player.currentTime = 0; - checkTimes(player, [null, 0], [[null, 0], [null, -500]], 't = 10'); - - player.currentTime = 250; - checkTimes(player, [null, 250], [[null, 250], [null, -250]], 't = 10'); - - player.currentTime = 500; - checkTimes(player, [null, 500], [[null, 500], [null, 0]], 't = 10'); - - // FIXME: Expectation should be [null, 1000], [[null, 500], [null, 500]]. - player.currentTime = 1000; - checkTimes(player, [null, 1000], [[null, 1000], [null, 500]], 't = 10'); - }); - - 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'); - }); - - test('pausing then seeking out of range then seeking into range works', function() { - var target = document.createElement('div'); - var anim = new Animation(target, [], {duration: 2000, fill: 'both'}); - var group = new AnimationGroup([anim], {fill: 'none'}); - var player = document.timeline.play(group); - - player.pause(); - player.currentTime = 3000; - assert.equal(player._childPlayers.length, 0); - tick(100); - player.currentTime = 1000; - assert.equal(player._childPlayers.length, 1); - assert.equal(player._childPlayers[0]._player.playState, 'paused'); - assert.equal(player._childPlayers[0]._player.currentTime, 1000); - - }); - - test('reversing then seeking out of range then seeking into range works', function() { - var target = document.createElement('div'); - var anim = new Animation(target, [], {duration: 2000, fill: 'both'}); - var group = new AnimationGroup([anim], {fill: 'none'}); - var player = document.timeline.play(group); - - player.currentTime = 1000; - tick(100); - player.reverse(); - tick(105); - player.currentTime = 3000; - assert.equal(player._childPlayers.length, 0); - tick(110); - player.currentTime = 1000; - assert.equal(player.playbackRate, -1); - assert.equal(player._childPlayers.length, 1); - assert.equal(player._childPlayers[0]._player.playState, 'running'); - assert.equal(player._childPlayers[0]._player.currentTime, 1000); - assert.equal(player._childPlayers[0]._player.playbackRate, -1); - - }); - - test('fill none groups with fill none children do not fill', function() { - var anim = new Animation( - this.target, - [{marginLeft: '0px'}, {marginLeft: '100px'}], - {duration: 500, fill: 'none'}); - var group = new AnimationGroup([anim], {fill: 'none'}); - var player = document.timeline.play(group); - - tick(0); - assert.equal(getComputedStyle(this.target).marginLeft, '0px'); - tick(250); - assert.equal(getComputedStyle(this.target).marginLeft, '50px'); - tick(501); - assert.equal(getComputedStyle(this.target).marginLeft, '0px'); - tick(502); - }); -}); diff --git a/test/js/keyframe-effect-constructor.js b/test/js/keyframe-effect-constructor.js deleted file mode 100644 index 920282c9..00000000 --- a/test/js/keyframe-effect-constructor.js +++ /dev/null @@ -1,80 +0,0 @@ -suite('keyframe-effect-constructor', function() { - setup(function() { - document.timeline.getAnimationPlayers().forEach(function(player) { - player.cancel(); - }); - }); - - test('Playing an Animation makes a Player', function() { - var animation = new Animation(document.body, [], 1000); - assert.equal(document.body.getAnimationPlayers().length, 0); - - var player = document.timeline.play(animation); - tick(200); - assert.equal(document.body.getAnimationPlayers().length, 1); - - tick(1600); - assert.equal(document.body.getAnimationPlayers().length, 0); - }); - - test('Setting the timing function on an Animation works', function() { - function leftAsNumber(target) { - left = getComputedStyle(target).left; - return Number(left.substring(0, left.length - 2)); - } - - var target1 = document.createElement('div'); - var target2 = document.createElement('div'); - target1.style.position = 'absolute'; - target2.style.position = 'absolute'; - document.body.appendChild(target1); - document.body.appendChild(target2); - - var animation1 = new Animation(target1, [{left: '0px'}, {left: '50px'}], 1000); - var animation2 = new Animation(target2, [{left: '0px'}, {left: '50px'}], {duration: 1000, easing: 'ease-in'}); - - var player1 = document.timeline.play(animation1); - var player2 = document.timeline.play(animation2); - - tick(0); - assert.equal(leftAsNumber(target1), 0); - assert.equal(leftAsNumber(target2), 0); - - tick(250); - assert.closeTo(leftAsNumber(target1), 12.5, 1); - assert.closeTo(leftAsNumber(target2), 4.65, 1); - - tick(500); - assert.closeTo(leftAsNumber(target1), 25, 1); - assert.closeTo(leftAsNumber(target2), 15.25, 1); - }); - - test('Timing is always converted to AnimationTimingInput', function() { - var target = document.createElement('div'); - document.body.appendChild(target); - - var keyframes = [{background: 'blue'}, {background: 'red'}]; - - var animation = new Animation(target, keyframes, 200); - assert.equal(animation.timing.duration, 200); - - animation = new Animation(target, keyframes); - assert.isDefined(animation.timing); - - animation = new Animation(target, keyframes, {duration: 200}); - var group = new AnimationGroup([animation]); - assert.equal(group.timing.duration, 'auto'); - }); - - test('Handle null target on Animation', function() { - var animation = new Animation(null, function(tf) { - // noop - }, 200); - - var player = document.timeline.play(animation); - assert.isNotNull(player); - tick(50); - tick(150); - assert.equal(player.currentTime, 100); - }); -}); diff --git a/test/runner-web-animations-next-lite.html b/test/runner-web-animations-next-lite.html deleted file mode 100644 index 41f267a6..00000000 --- a/test/runner-web-animations-next-lite.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - -
diff --git a/test/runner-web-animations-next.html b/test/runner-web-animations-next.html deleted file mode 100644 index 9bc9f785..00000000 --- a/test/runner-web-animations-next.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - -
diff --git a/test/runner-web-animations.html b/test/runner-web-animations.html deleted file mode 100644 index 0a9500f1..00000000 --- a/test/runner-web-animations.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - -
diff --git a/web-animations-next-lite.dev.html b/web-animations-next-lite.dev.html new file mode 100644 index 00000000..cc860a63 --- /dev/null +++ b/web-animations-next-lite.dev.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web-animations-next-lite.dev.js b/web-animations-next-lite.dev.js new file mode 100644 index 00000000..8cc77540 --- /dev/null +++ b/web-animations-next-lite.dev.js @@ -0,0 +1,21 @@ +// Copyright 2014 Google Inc. All rights reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +var webAnimationsSourceTarget = 'web-animations-next-lite'; +var WEB_ANIMATIONS_TESTING = false; +(function() { + var scripts = document.getElementsByTagName('script'); + var location = scripts[scripts.length - 1].src.replace(/[^\/]+$/, ''); + document.write(''); + document.write(''); +})(); diff --git a/web-animations-next.dev.html b/web-animations-next.dev.html new file mode 100644 index 00000000..2cd640e6 --- /dev/null +++ b/web-animations-next.dev.html @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web-animations-next.dev.js b/web-animations-next.dev.js new file mode 100644 index 00000000..8f2a4e29 --- /dev/null +++ b/web-animations-next.dev.js @@ -0,0 +1,21 @@ +// Copyright 2014 Google Inc. All rights reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +var webAnimationsSourceTarget = 'web-animations-next'; +var WEB_ANIMATIONS_TESTING = false; +(function() { + var scripts = document.getElementsByTagName('script'); + var location = scripts[scripts.length - 1].src.replace(/[^\/]+$/, ''); + document.write(''); + document.write(''); +})(); diff --git a/web-animations.dev.html b/web-animations.dev.html new file mode 100644 index 00000000..5760f91a --- /dev/null +++ b/web-animations.dev.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web-animations.dev.js b/web-animations.dev.js new file mode 100644 index 00000000..7f2b4571 --- /dev/null +++ b/web-animations.dev.js @@ -0,0 +1,21 @@ +// Copyright 2014 Google Inc. All rights reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +var webAnimationsSourceTarget = 'web-animations'; +var WEB_ANIMATIONS_TESTING = false; +(function() { + var scripts = document.getElementsByTagName('script'); + var location = scripts[scripts.length - 1].src.replace(/[^\/]+$/, ''); + document.write(''); + document.write(''); +})(); diff --git a/web-animations.html b/web-animations.html new file mode 100644 index 00000000..b5de36c8 --- /dev/null +++ b/web-animations.html @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From e386eb20d3f10d075339aa089d12d9722059c376 Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 23 Mar 2015 14:21:36 +1100 Subject: [PATCH 39/91] Add back test runners --- test/runner-web-animations-next-lite.html | 26 +++++++++++++++++++++++ test/runner-web-animations-next.html | 26 +++++++++++++++++++++++ test/runner-web-animations.html | 26 +++++++++++++++++++++++ 3 files changed, 78 insertions(+) create mode 100644 test/runner-web-animations-next-lite.html create mode 100644 test/runner-web-animations-next.html create mode 100644 test/runner-web-animations.html diff --git a/test/runner-web-animations-next-lite.html b/test/runner-web-animations-next-lite.html new file mode 100644 index 00000000..41f267a6 --- /dev/null +++ b/test/runner-web-animations-next-lite.html @@ -0,0 +1,26 @@ + + + + + + + + + +
diff --git a/test/runner-web-animations-next.html b/test/runner-web-animations-next.html new file mode 100644 index 00000000..9bc9f785 --- /dev/null +++ b/test/runner-web-animations-next.html @@ -0,0 +1,26 @@ + + + + + + + + + +
diff --git a/test/runner-web-animations.html b/test/runner-web-animations.html new file mode 100644 index 00000000..0a9500f1 --- /dev/null +++ b/test/runner-web-animations.html @@ -0,0 +1,26 @@ + + + + + + + + + +
From 8161b6f50dc0a2f6bcd2124a2e73081d748f7170 Mon Sep 17 00:00:00 2001 From: rjwright Date: Wed, 25 Mar 2015 11:36:18 +1100 Subject: [PATCH 40/91] Throw exceptions after grace period --- src/group-constructors.js | 8 ++------ src/keyframe-effect-constructor.js | 4 +--- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/group-constructors.js b/src/group-constructors.js index a414ad62..811bb254 100644 --- a/src/group-constructors.js +++ b/src/group-constructors.js @@ -87,18 +87,14 @@ // support old constructors (Animation*) for a deprecation period. Should be removed after 23 June // 2015. window.AnimationSequence = function() { - if (shared.isDeprecated('window.AnimationSequence', '2015-03-23', 'Use window.SequenceEffect instead.')) { - return; - } + shared.deprecated('window.AnimationSequence', '2015-03-23', 'Use window.SequenceEffect instead.'); window.SequenceEffect.apply(this, arguments); }; window.AnimationSequence.prototype = Object.create(window.SequenceEffect.prototype); window.AnimationSequence.prototype.constructor = window.AnimationSequence; window.AnimationGroup = function() { - if (shared.isDeprecated('window.AnimationGroup', '2015-03-23', 'Use window.GroupEffect instead.')) { - return; - } + shared.deprecated('window.AnimationGroup', '2015-03-23', 'Use window.GroupEffect instead.'); window.GroupEffect.apply(this, arguments); }; window.AnimationGroup.prototype = Object.create(window.GroupEffect.prototype); diff --git a/src/keyframe-effect-constructor.js b/src/keyframe-effect-constructor.js index cfe4cbeb..e161304e 100644 --- a/src/keyframe-effect-constructor.js +++ b/src/keyframe-effect-constructor.js @@ -114,9 +114,7 @@ // function and the constructor in web-animations-next-animation should be scope.Animation and // window.Animation until 23 June 2015. window.Animation = function() { - if (shared.isDeprecated('window.Animation', '2015-03-23', 'Use window.KeyframeEffect instead.')) { - return; - } + shared.deprecated('window.Animation', '2015-03-23', 'Use window.KeyframeEffect instead.'); window.KeyframeEffect.apply(this, arguments); }; window.Animation.prototype = Object.create(window.KeyframeEffect.prototype); From 8e3d4b3519c6743f1ab13207b43377d46b50b772 Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 23 Mar 2015 14:45:24 +1100 Subject: [PATCH 41/91] Rename files Add newly-named files --- test/js/{player-finish-event.js => animation-finish-event.js} | 0 test/js/{animation-node.js => effect-node.js} | 0 ...oup-player-finish-event.js => group-animation-finish-event.js} | 0 test/js/{group-player.js => group-animation.js} | 0 .../{animation-constructor.js => keyframe-effect-constructor.js} | 0 5 files changed, 0 insertions(+), 0 deletions(-) rename test/js/{player-finish-event.js => animation-finish-event.js} (100%) rename test/js/{animation-node.js => effect-node.js} (100%) rename test/js/{group-player-finish-event.js => group-animation-finish-event.js} (100%) rename test/js/{group-player.js => group-animation.js} (100%) rename test/js/{animation-constructor.js => keyframe-effect-constructor.js} (100%) diff --git a/test/js/player-finish-event.js b/test/js/animation-finish-event.js similarity index 100% rename from test/js/player-finish-event.js rename to test/js/animation-finish-event.js diff --git a/test/js/animation-node.js b/test/js/effect-node.js similarity index 100% rename from test/js/animation-node.js rename to test/js/effect-node.js diff --git a/test/js/group-player-finish-event.js b/test/js/group-animation-finish-event.js similarity index 100% rename from test/js/group-player-finish-event.js rename to test/js/group-animation-finish-event.js diff --git a/test/js/group-player.js b/test/js/group-animation.js similarity index 100% rename from test/js/group-player.js rename to test/js/group-animation.js diff --git a/test/js/animation-constructor.js b/test/js/keyframe-effect-constructor.js similarity index 100% rename from test/js/animation-constructor.js rename to test/js/keyframe-effect-constructor.js From ca933811b868e83ed4476bb4569a1b06b0b69b9a Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 23 Mar 2015 14:49:30 +1100 Subject: [PATCH 42/91] Rename player.js to animation.js --- test/js/{player.js => animation.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename test/js/{player.js => animation.js} (100%) diff --git a/test/js/player.js b/test/js/animation.js similarity index 100% rename from test/js/player.js rename to test/js/animation.js From 13506747aac000fbf663262a7e38eecb0d792460 Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 23 Mar 2015 14:56:37 +1100 Subject: [PATCH 43/91] Rename for animation-finish-event.js. Fix test file names in target-config.js --- target-config.js | 12 +++++----- test/js/animation-finish-event.js | 40 +++++++++++++++---------------- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/target-config.js b/target-config.js index 74877803..7f307a27 100644 --- a/target-config.js +++ b/target-config.js @@ -79,28 +79,28 @@ 'src/group-constructors.js']; var webAnimations1Test = [ - 'test/js/animation-node.js', + 'test/js/animation-finish-event.js', + 'test/js/animation.js', 'test/js/apply-preserving-inline-style.js', 'test/js/box-handler.js', 'test/js/color-handler.js', 'test/js/dimension-handler.js', + 'test/js/effect-node.js', 'test/js/effect.js', 'test/js/interpolation.js', 'test/js/matrix-interpolation.js', 'test/js/number-handler.js', - 'test/js/player.js', - 'test/js/player-finish-event.js', 'test/js/property-interpolation.js', 'test/js/tick.js', 'test/js/timing.js', 'test/js/transform-handler.js']; var webAnimationsNextTest = webAnimations1Test.concat( - 'test/js/animation-constructor.js', 'test/js/effect-callback.js', + 'test/js/group-animation-finish-event.js', + 'test/js/group-animation.js', 'test/js/group-constructors.js', - 'test/js/group-player.js', - 'test/js/group-player-finish-event.js', + 'test/js/keyframe-effect-constructor.js', 'test/js/timeline.js'); // This object specifies the source and test files for different Web Animation build targets. diff --git a/test/js/animation-finish-event.js b/test/js/animation-finish-event.js index 6365d913..987d0103 100644 --- a/test/js/animation-finish-event.js +++ b/test/js/animation-finish-event.js @@ -1,22 +1,22 @@ -suite('player-finish-event', function() { +suite('animation-finish-event', function() { setup(function() { this.element = document.createElement('div'); document.documentElement.appendChild(this.element); - this.player = this.element.animate([], 1000); + this.animation = this.element.animate([], 1000); }); teardown(function() { if (this.element.parent) this.element.removeChild(this.target); }); - test('fire when player completes', function(done) { + test('fire when animation completes', function(done) { var ready = false; var fired = false; - var player = this.player; - player.onfinish = function(event) { + var animation = this.animation; + animation.onfinish = function(event) { assert(ready, 'must not be called synchronously'); - assert.equal(this, player); - assert.equal(event.target, player); + assert.equal(this, animation); + assert.equal(event.target, animation); assert.equal(event.currentTime, 1000); assert.equal(event.timelineTime, 1100); if (fired) @@ -30,27 +30,27 @@ suite('player-finish-event', function() { ready = true; }); - test('fire when reversed player completes', function(done) { - this.player.onfinish = function(event) { + test('fire when reversed animation completes', function(done) { + this.animation.onfinish = function(event) { assert.equal(event.currentTime, 0); assert.equal(event.timelineTime, 1001); done(); }; tick(0); tick(500); - this.player.reverse(); + this.animation.reverse(); tick(501); tick(1001); }); - test('fire after player is cancelled', function(done) { - this.player.onfinish = function(event) { + test('fire after animation is cancelled', function(done) { + this.animation.onfinish = function(event) { assert.equal(event.currentTime, 0); assert.equal(event.timelineTime, 1, 'event must be fired on next sample'); done(); }; tick(0); - this.player.cancel(); + this.animation.cancel(); tick(1); }); @@ -63,17 +63,17 @@ suite('player-finish-event', function() { }; } var toRemove = createHandler(0); - this.player.addEventListener('finish', createHandler(1)); - this.player.addEventListener('finish', createHandler(2)); - this.player.addEventListener('finish', toRemove); - this.player.addEventListener('finish', createHandler(3)); - this.player.removeEventListener('finish', toRemove); - this.player.onfinish = function() { + this.animation.addEventListener('finish', createHandler(1)); + this.animation.addEventListener('finish', createHandler(2)); + this.animation.addEventListener('finish', toRemove); + this.animation.addEventListener('finish', createHandler(3)); + this.animation.removeEventListener('finish', toRemove); + this.animation.onfinish = function() { assert.equal(count, 3); done(); }; tick(0); - this.player.cancel(); + this.animation.cancel(); tick(1000); }); }); From 4b48bed6fa95e66da3ea3b2e81e1a63dc33219e8 Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 23 Mar 2015 15:50:24 +1100 Subject: [PATCH 44/91] Rename for animation.js --- src/animation.js | 2 +- src/keyframe-effect.js | 2 +- test/js/animation.js | 538 ++++++++++++++++++++--------------------- 3 files changed, 271 insertions(+), 271 deletions(-) diff --git a/src/animation.js b/src/animation.js index cecb633d..43177ee0 100644 --- a/src/animation.js +++ b/src/animation.js @@ -196,7 +196,7 @@ }; if (WEB_ANIMATIONS_TESTING) { - testing.Player = scope.Animation; + testing.webAnimations1Animation = scope.Animation; } })(webAnimations1, webAnimationsTesting); diff --git a/src/keyframe-effect.js b/src/keyframe-effect.js index 21ac2148..006a03d1 100644 --- a/src/keyframe-effect.js +++ b/src/keyframe-effect.js @@ -59,7 +59,7 @@ }; if (WEB_ANIMATIONS_TESTING) { - testing.webAnimations1Animation = scope.KeyframeEffect; + testing.webAnimations1KeyframeEffect = scope.KeyframeEffect; } })(webAnimationsShared, webAnimations1, webAnimationsTesting); diff --git a/test/js/animation.js b/test/js/animation.js index 2183848d..0b24e88d 100644 --- a/test/js/animation.js +++ b/test/js/animation.js @@ -1,274 +1,274 @@ -suite('player', function() { +suite('animation', function() { setup(function() { webAnimations1.timeline._animations = []; }); test('zero duration animation works', function() { tick(90); - var p = document.body.animate([], 0); + var a = document.body.animate([], 0); tick(100); - assert.equal(p.startTime, 100); - assert.equal(p.currentTime, 0); + assert.equal(a.startTime, 100); + assert.equal(a.currentTime, 0); }); test('playing works as expected', function() { tick(90); - var p = document.body.animate([], 2000); + var a = document.body.animate([], 2000); tick(100); - assert.equal(p.startTime, 100); - assert.equal(p.currentTime, 0); + assert.equal(a.startTime, 100); + assert.equal(a.currentTime, 0); tick(300); - assert.equal(p.startTime, 100); - assert.equal(p.currentTime, 200); + assert.equal(a.startTime, 100); + assert.equal(a.currentTime, 200); }); test('pause at start of play', function() { tick(90); - var p = document.body.animate([], 2000); - p.pause(); + var a = document.body.animate([], 2000); + a.pause(); tick(100); - assert.equal(p.currentTime, 0); + assert.equal(a.currentTime, 0); tick(300); - p.play(); - assert.equal(p.currentTime, 0); + a.play(); + assert.equal(a.currentTime, 0); tick(310); - assert.equal(p.currentTime, 0); - assert.equal(p.startTime, 310); + assert.equal(a.currentTime, 0); + assert.equal(a.startTime, 310); - var p = document.body.animate([], 2000); - p.startTime = -690; - p.pause(); - assert.equal(p.currentTime, null); + var a = document.body.animate([], 2000); + a.startTime = -690; + a.pause(); + assert.equal(a.currentTime, null); tick(700); - p.play(); + a.play(); tick(701); - assert.equal(p.currentTime, 1000); + assert.equal(a.currentTime, 1000); tick(800); - assert.equal(p.currentTime, 1099); - assert.equal(p.startTime, -299); + assert.equal(a.currentTime, 1099); + assert.equal(a.startTime, -299); }); test('pausing works as expected', function() { tick(190); - var p = document.body.animate([], 3000); + var a = document.body.animate([], 3000); tick(200); tick(1500); - assert.equal(p.startTime, 200); - assert.equal(p.currentTime, 1300); - p.pause(); - assert.equal(p.startTime, null); - assert.equal(p.currentTime, null); + assert.equal(a.startTime, 200); + assert.equal(a.currentTime, 1300); + a.pause(); + assert.equal(a.startTime, null); + assert.equal(a.currentTime, null); tick(2500); - assert.equal(p.startTime, null); - assert.equal(p.currentTime, 1300); - p.play(); + assert.equal(a.startTime, null); + assert.equal(a.currentTime, 1300); + a.play(); tick(2510); - assert.equal(p.startTime, 1210); - assert.equal(p.currentTime, 1300); + assert.equal(a.startTime, 1210); + assert.equal(a.currentTime, 1300); tick(3500); - assert.equal(p.startTime, 1210); - assert.equal(p.currentTime, 2290); + assert.equal(a.startTime, 1210); + assert.equal(a.currentTime, 2290); }); test('reversing works as expected', function() { tick(290); - var p = document.body.animate([], 1000); + var a = document.body.animate([], 1000); tick(300); - assert.equal(p.startTime, 300); - assert.equal(p.currentTime, 0); + assert.equal(a.startTime, 300); + assert.equal(a.currentTime, 0); tick(600); - assert.equal(p.startTime, 300); - assert.equal(p.currentTime, 300); - assert.equal(p.playbackRate, 1); - p.reverse(); + assert.equal(a.startTime, 300); + assert.equal(a.currentTime, 300); + assert.equal(a.playbackRate, 1); + a.reverse(); tick(600); - assert.equal(p.startTime, 900); - assert.equal(p.currentTime, 300); - assert.equal(p.playbackRate, -1); + assert.equal(a.startTime, 900); + assert.equal(a.currentTime, 300); + assert.equal(a.playbackRate, -1); tick(700); - assert.equal(p.startTime, 900); - assert.equal(p.currentTime, 200); + assert.equal(a.startTime, 900); + assert.equal(a.currentTime, 200); }); test('reversing after pausing', function() { tick(90); - var p = document.body.animate([], 1000); + var a = document.body.animate([], 1000); tick(100); tick(600); - p.reverse(); + a.reverse(); tick(601); tick(700); - assert.equal(p.startTime, 1101); - assert.equal(p.currentTime, 401); + assert.equal(a.startTime, 1101); + assert.equal(a.currentTime, 401); }); test('reversing after finishing works as expected', function() { tick(90); - var p = document.body.animate([], 1000); + var a = document.body.animate([], 1000); tick(100); tick(1200); - assert.equal(p.finished, true); - assert.equal(p.startTime, 100); - assert.equal(p.currentTime, 1000); + assert.equal(a.finished, true); + assert.equal(a.startTime, 100); + assert.equal(a.currentTime, 1000); tick(1500); - assert.equal(p.currentTime, 1000); + assert.equal(a.currentTime, 1000); assert.equal(isTicking(), false); - p.reverse(); - assert.equal(p._startTime, null); - assert.equal(p.currentTime, 1000); + a.reverse(); + assert.equal(a._startTime, null); + assert.equal(a.currentTime, 1000); tick(1600); - assert.equal(p.startTime, 2600); - assert.equal(p.currentTime, 1000); + assert.equal(a.startTime, 2600); + assert.equal(a.currentTime, 1000); }); test('playing after finishing works as expected', function() { tick(90); - var p = document.body.animate([], 1000); + var a = document.body.animate([], 1000); tick(100); tick(1200); - assert.equal(p.finished, true); - assert.equal(p.startTime, 100); - assert.equal(p.currentTime, 1000); + assert.equal(a.finished, true); + assert.equal(a.startTime, 100); + assert.equal(a.currentTime, 1000); tick(1500); - assert.equal(p.currentTime, 1000); + assert.equal(a.currentTime, 1000); assert.equal(isTicking(), false); - p.play(); - assert.equal(p.startTime, null); - assert.equal(p.currentTime, 0); + a.play(); + assert.equal(a.startTime, null); + assert.equal(a.currentTime, 0); tick(1600); - assert.equal(p.startTime, 1600); - assert.equal(p.currentTime, 0); + assert.equal(a.startTime, 1600); + assert.equal(a.currentTime, 0); }); test('limiting works as expected', function() { tick(390); - var p = document.body.animate([], 1000); + var a = document.body.animate([], 1000); tick(400); - assert.equal(p.startTime, 400); - assert.equal(p.currentTime, 0); + assert.equal(a.startTime, 400); + assert.equal(a.currentTime, 0); tick(900); - assert.equal(p.startTime, 400); - assert.equal(p.currentTime, 500); + assert.equal(a.startTime, 400); + assert.equal(a.currentTime, 500); tick(1400); - assert.equal(p.startTime, 400); - assert.equal(p.currentTime, 1000); + assert.equal(a.startTime, 400); + assert.equal(a.currentTime, 1000); tick(1500); - assert.equal(p.startTime, 400); - assert.equal(p.currentTime, 1000); - p.reverse(); - assert.equal(p.playbackRate, -1); - assert.equal(p.currentTime, 1000); - assert.equal(p._startTime, null); + assert.equal(a.startTime, 400); + assert.equal(a.currentTime, 1000); + a.reverse(); + assert.equal(a.playbackRate, -1); + assert.equal(a.currentTime, 1000); + assert.equal(a._startTime, null); tick(2000); - assert.equal(p.currentTime, 1000); - assert.equal(p.startTime, 3000); + assert.equal(a.currentTime, 1000); + assert.equal(a.startTime, 3000); tick(2200); - assert.equal(p.currentTime, 800); - assert.equal(p.startTime, 3000); + assert.equal(a.currentTime, 800); + assert.equal(a.startTime, 3000); tick(3200); - assert.equal(p.currentTime, 0); - assert.equal(p.startTime, 3000); + assert.equal(a.currentTime, 0); + assert.equal(a.startTime, 3000); tick(3500); - assert.equal(p.currentTime, 0); - assert.equal(p.startTime, 3000); + assert.equal(a.currentTime, 0); + assert.equal(a.startTime, 3000); }); test('play after limit works as expected', function() { tick(490); - var p = document.body.animate([], 2000); + var a = document.body.animate([], 2000); tick(500); tick(2600); - assert.equal(p.currentTime, 2000); - assert.equal(p.startTime, 500); - assert.equal(p.finished, true); - assert.equal(p.playbackRate, 1); + assert.equal(a.currentTime, 2000); + assert.equal(a.startTime, 500); + assert.equal(a.finished, true); + assert.equal(a.playbackRate, 1); setTicking(true); - p.play(); + a.play(); tick(2700); - assert.equal(p.startTime, 2700); - assert.equal(p.currentTime, 0); - assert.equal(p.finished, false); - assert.equal(p.playbackRate, 1); + assert.equal(a.startTime, 2700); + assert.equal(a.currentTime, 0); + assert.equal(a.finished, false); + assert.equal(a.playbackRate, 1); }); test('play after limit works as expected (reversed)', function() { tick(590); - var p = document.body.animate([], 3000); + var a = document.body.animate([], 3000); tick(600); tick(700); - p.reverse(); + a.reverse(); tick(701); tick(900); - assert.equal(p.startTime, 801); - assert.equal(p.currentTime, 0); - assert.equal(p.finished, true); - assert.equal(p.playbackRate, -1); + assert.equal(a.startTime, 801); + assert.equal(a.currentTime, 0); + assert.equal(a.finished, true); + assert.equal(a.playbackRate, -1); setTicking(true); - p.play(); + a.play(); tick(1000); - assert.equal(p.startTime, 4000); - assert.equal(p.currentTime, 3000); - assert.equal(p.finished, false); - assert.equal(p.playbackRate, -1); + assert.equal(a.startTime, 4000); + assert.equal(a.currentTime, 3000); + assert.equal(a.finished, false); + assert.equal(a.playbackRate, -1); }); test('seeking works as expected', function() { tick(690); - var p = document.body.animate([], 2000); + var a = document.body.animate([], 2000); tick(700); tick(900); - assert.equal(p.currentTime, 200); - p.currentTime = 600; - assert.equal(p.currentTime, 600); - assert.equal(p.startTime, 300); - p.reverse(); + assert.equal(a.currentTime, 200); + a.currentTime = 600; + assert.equal(a.currentTime, 600); + assert.equal(a.startTime, 300); + a.reverse(); tick(1000); - assert.equal(p.startTime, 1600); - p.currentTime = 300; - assert.equal(p.currentTime, 300); - assert.equal(p.startTime, 1300); + assert.equal(a.startTime, 1600); + a.currentTime = 300; + assert.equal(a.currentTime, 300); + assert.equal(a.startTime, 1300); }); test('seeking while paused works as expected', function() { tick(790); - var p = document.body.animate([], 1000); + var a = document.body.animate([], 1000); tick(800); tick(1000); - p.pause(); - assert.equal(p.currentTime, null); - assert.equal(p.startTime, null); - assert.equal(p.paused, true); - p.currentTime = 500; - assert.equal(p.startTime, null); - assert.equal(p.paused, true); + a.pause(); + assert.equal(a.currentTime, null); + assert.equal(a.startTime, null); + assert.equal(a.paused, true); + a.currentTime = 500; + assert.equal(a.startTime, null); + assert.equal(a.paused, true); }); test('setting start time while paused is ignored', function() { tick(900); - var p = document.body.animate([], 1234); - p.pause(); - assert.equal(p.startTime, null); - assert.equal(p.currentTime, null); - p.startTime = 2232; - assert.equal(p.startTime, null); - assert.equal(p.currentTime, null); + var a = document.body.animate([], 1234); + a.pause(); + assert.equal(a.startTime, null); + assert.equal(a.currentTime, null); + a.startTime = 2232; + assert.equal(a.startTime, null); + assert.equal(a.currentTime, null); }); test('setting playbackRate does preserves the current time', function() { tick(900); - var p = document.body.animate([], 1000); + var a = document.body.animate([], 1000); tick(1100); - var oldCurrentTime = p.currentTime; - p.playbackRate = 2; - assert.equal(p.playbackRate, 2); - assert.equal(p.currentTime, oldCurrentTime); + var oldCurrentTime = a.currentTime; + a.playbackRate = 2; + assert.equal(a.playbackRate, 2); + assert.equal(a.currentTime, oldCurrentTime); }); test('finishing works as expected', function() { tick(1000); - var p = document.body.animate([], 2000); - p.finish(); - assert.equal(p.startTime, 0); - assert.equal(p.currentTime, 2000); - p.reverse(); - p.finish(); - assert.equal(p.currentTime, 0); - assert.equal(p.startTime, 2000); + var a = document.body.animate([], 2000); + a.finish(); + assert.equal(a.startTime, 0); + assert.equal(a.currentTime, 2000); + a.reverse(); + a.finish(); + assert.equal(a.currentTime, 0); + assert.equal(a.startTime, 2000); tick(2000); }); test('cancelling clears all effects', function() { tick(0); var target = document.createElement('div'); document.documentElement.appendChild(target); - var player = target.animate([{marginLeft: '50px'}, {marginLeft: '50px'}], 1000); + var animation = target.animate([{marginLeft: '50px'}, {marginLeft: '50px'}], 1000); tick(10); tick(110); assert.equal(getComputedStyle(target).marginLeft, '50px'); - player.cancel(); + animation.cancel(); // getComputedStyle forces a tick. assert.equal(getComputedStyle(target).marginLeft, '0px'); assert.deepEqual(webAnimations1.timeline._animations, []); @@ -279,12 +279,12 @@ suite('player', function() { }); test('startTime is set on first tick if timeline hasn\'t started', function() { webAnimations1.timeline.currentTime = undefined; - var p = document.body.animate([], 1000); + var a = document.body.animate([], 1000); tick(0); tick(100); - assert.equal(p.startTime, 0); + assert.equal(a.startTime, 0); }); - test('players which are finished and not filling get discarded', function() { + test('animations which are finished and not filling get discarded', function() { tick(90); var nofill = document.body.animate([], 100); var fill = document.body.animate([], {duration: 100, fill: 'forwards'}); @@ -294,28 +294,28 @@ suite('player', function() { tick(400); assert.deepEqual(webAnimations1.timeline._animations, [fill._animation || fill]); }); - test('discarded players get re-added on modification', function() { + test('discarded animations get re-added on modification', function() { tick(90); - var player = document.body.animate([], 100); + var animation = document.body.animate([], 100); tick(100); tick(400); assert.deepEqual(webAnimations1.timeline._animations, []); - player.currentTime = 0; - assert.deepEqual(webAnimations1.timeline._animations, [player._animation || player]); + animation.currentTime = 0; + assert.deepEqual(webAnimations1.timeline._animations, [animation._animation || animation]); }); - test('players in the before phase are not discarded', function() { + test('animations in the before phase are not discarded', function() { tick(100); - var player = document.body.animate([], 100); - player.currentTime = -50; + var animation = document.body.animate([], 100); + animation.currentTime = -50; tick(110); - assert.deepEqual(webAnimations1.timeline._animations, [player._animation || player]); + assert.deepEqual(webAnimations1.timeline._animations, [animation._animation || animation]); }); - test('players that go out of effect should not clear the effect of players that are in effect', function() { + test('animations that go out of effect should not clear the effect of animations that are in effect', function() { var target = document.createElement('div'); document.body.appendChild(target); tick(0); - var playerBehind = target.animate([{marginLeft: '200px'}, {marginLeft: '200px'}], 200); - var playerInfront = target.animate([{marginLeft: '100px'}, {marginLeft: '100px'}], 100); + var animationBehind = target.animate([{marginLeft: '200px'}, {marginLeft: '200px'}], 200); + var animationInfront = target.animate([{marginLeft: '100px'}, {marginLeft: '100px'}], 100); tick(50); assert.equal(getComputedStyle(target).marginLeft, '100px', 't = 50'); tick(150); @@ -324,147 +324,147 @@ suite('player', function() { assert.equal(getComputedStyle(target).marginLeft, '0px', 't = 250'); document.body.removeChild(target); }); - test('player modifications should update CSS effects immediately', function() { + test('animation modifications should update CSS effects immediately', function() { var target = document.createElement('div'); document.body.appendChild(target); tick(0); - var playerBehind = target.animate([{width: '1234px'}, {width: '1234px'}], {duration: 1, fill: 'both'}); - var playerInfront = target.animate([{width: '0px'}, {width: '100px'}], 100); + var animationBehind = target.animate([{width: '1234px'}, {width: '1234px'}], {duration: 1, fill: 'both'}); + var animationInfront = target.animate([{width: '0px'}, {width: '100px'}], 100); assert.equal(getComputedStyle(target).width, '0px'); - playerInfront.currentTime = 50; + animationInfront.currentTime = 50; assert.equal(getComputedStyle(target).width, '50px'); - playerInfront.currentTime = 100; + animationInfront.currentTime = 100; assert.equal(getComputedStyle(target).width, '1234px'); - playerInfront.play(); + animationInfront.play(); assert.equal(getComputedStyle(target).width, '0px'); - playerInfront.startTime = -50; + animationInfront.startTime = -50; assert.equal(getComputedStyle(target).width, '50px'); document.body.removeChild(target); }); - test('Player that hasn\'t been played has playState \'idle\'', function() { - var source = new webAnimations1Animation(document.body, [], 1000); - var p = new Player(source); - assert.equal(p.playState, 'idle'); + test('KeyframeEffect that hasn\'t been played has playState \'idle\'', function() { + var source = new webAnimations1KeyframeEffect(document.body, [], 1000); + var a = new webAnimations1Animation(source); + assert.equal(a.playState, 'idle'); }); - test('playState works for a simple animation', function() { - var p = document.body.animate([], 1000); + test('playState works for a simple effect', function() { + var a = document.body.animate([], 1000); tick(0); - assert.equal(p.playState, 'running'); + assert.equal(a.playState, 'running'); tick(100); - assert.equal(p.playState, 'running'); - p.pause(); - assert.equal(p.playState, 'pending'); + assert.equal(a.playState, 'running'); + a.pause(); + assert.equal(a.playState, 'pending'); tick(101); - assert.equal(p.playState, 'paused'); - p.play(); - assert.equal(p.playState, 'pending'); + assert.equal(a.playState, 'paused'); + a.play(); + assert.equal(a.playState, 'pending'); tick(102); - assert.equal(p.playState, 'running'); + assert.equal(a.playState, 'running'); tick(1002); - assert.equal(p.playState, 'finished'); + assert.equal(a.playState, 'finished'); }); test('Play after cancel', function() { - var p = document.body.animate([], 1000); - assert.equal(p.playState, 'pending'); + var a = document.body.animate([], 1000); + assert.equal(a.playState, 'pending'); tick(0); - p.cancel(); - assert.equal(p.playState, 'idle'); - assert.equal(p.currentTime, null); - assert.equal(p.startTime, null); + a.cancel(); + assert.equal(a.playState, 'idle'); + assert.equal(a.currentTime, null); + assert.equal(a.startTime, null); tick(1); - assert.equal(p.playState, 'idle'); - assert.equal(p.currentTime, null); - assert.equal(p.startTime, null); - p.play(); - assert.equal(p.playState, 'pending'); - assert.equal(p.currentTime, 0); - assert.equal(p.startTime, null); + assert.equal(a.playState, 'idle'); + assert.equal(a.currentTime, null); + assert.equal(a.startTime, null); + a.play(); + assert.equal(a.playState, 'pending'); + assert.equal(a.currentTime, 0); + assert.equal(a.startTime, null); tick(10); - assert.equal(p.playState, 'running'); - assert.equal(p.currentTime, 0); - assert.equal(p.startTime, 10); + assert.equal(a.playState, 'running'); + assert.equal(a.currentTime, 0); + assert.equal(a.startTime, 10); }); test('Reverse after cancel', function() { - var p = document.body.animate([], 300); + var a = document.body.animate([], 300); tick(0); - p.cancel(); - assert.equal(p.playState, 'idle'); - assert.equal(p.currentTime, null); - assert.equal(p.startTime, null); + a.cancel(); + assert.equal(a.playState, 'idle'); + assert.equal(a.currentTime, null); + assert.equal(a.startTime, null); tick(1); - p.reverse(); - assert.equal(p.playState, 'pending'); - assert.equal(p.currentTime, 300); - assert.equal(p.startTime, null); + a.reverse(); + assert.equal(a.playState, 'pending'); + assert.equal(a.currentTime, 300); + assert.equal(a.startTime, null); tick(100); - assert.equal(p.playState, 'running'); - assert.equal(p.currentTime, 300); - assert.equal(p.startTime, 400); + assert.equal(a.playState, 'running'); + assert.equal(a.currentTime, 300); + assert.equal(a.startTime, 400); tick(300); - assert.equal(p.playState, 'running'); - assert.equal(p.currentTime, 100); - assert.equal(p.startTime, 400); + assert.equal(a.playState, 'running'); + assert.equal(a.currentTime, 100); + assert.equal(a.startTime, 400); tick(400); - assert.equal(p.playState, 'finished'); - assert.equal(p.currentTime, 0); - assert.equal(p.startTime, 400); + assert.equal(a.playState, 'finished'); + assert.equal(a.currentTime, 0); + assert.equal(a.startTime, 400); }); test('Finish after cancel', function() { - var p = document.body.animate([], 300); + var a = document.body.animate([], 300); tick(0); - p.cancel(); - assert.equal(p.playState, 'idle'); - assert.equal(p.currentTime, null); - assert.equal(p.startTime, null); + a.cancel(); + assert.equal(a.playState, 'idle'); + assert.equal(a.currentTime, null); + assert.equal(a.startTime, null); tick(1); - p.finish(); - assert.equal(p.playState, 'idle'); - assert.equal(p.currentTime, null); - assert.equal(p.startTime, null); + a.finish(); + assert.equal(a.playState, 'idle'); + assert.equal(a.currentTime, null); + assert.equal(a.startTime, null); tick(2); - assert.equal(p.playState, 'idle'); - assert.equal(p.currentTime, null); - assert.equal(p.startTime, null); + assert.equal(a.playState, 'idle'); + assert.equal(a.currentTime, null); + assert.equal(a.startTime, null); }); test('Pause after cancel', function() { - var p = document.body.animate([], 300); + var a = document.body.animate([], 300); tick(0); - p.cancel(); - assert.equal(p.playState, 'idle'); - assert.equal(p.currentTime, null); - assert.equal(p.startTime, null); + a.cancel(); + assert.equal(a.playState, 'idle'); + assert.equal(a.currentTime, null); + assert.equal(a.startTime, null); tick(1); - p.pause(); - assert.equal(p.playState, 'idle'); - assert.equal(p.currentTime, null); - assert.equal(p.startTime, null); - }); - test('Players ignore NaN times', function() { - var p = document.body.animate([], 300); - p.startTime = 100; + a.pause(); + assert.equal(a.playState, 'idle'); + assert.equal(a.currentTime, null); + assert.equal(a.startTime, null); + }); + test('Animations ignore NaN times', function() { + var a = document.body.animate([], 300); + a.startTime = 100; tick(110); - assert.equal(p.currentTime, 10); - p.startTime = NaN; - assert.equal(p.startTime, 100); - p.currentTime = undefined; - assert.equal(p.currentTime, 10); + assert.equal(a.currentTime, 10); + a.startTime = NaN; + assert.equal(a.startTime, 100); + a.currentTime = undefined; + assert.equal(a.currentTime, 10); }); test('play() should not set a start time', function() { - var p = document.body.animate([], 1000); - p.cancel(); - assert.equal(p.startTime, null); - assert.equal(p.playState, 'idle'); - p.play(); - assert.equal(p.startTime, null); - assert.equal(p.playState, 'pending'); + var a = document.body.animate([], 1000); + a.cancel(); + assert.equal(a.startTime, null); + assert.equal(a.playState, 'idle'); + a.play(); + assert.equal(a.startTime, null); + assert.equal(a.playState, 'pending'); }); test('reverse() should not set a start time', function() { - var p = document.body.animate([], 1000); - p.cancel(); - assert.equal(p.startTime, null); - assert.equal(p.playState, 'idle'); - p.reverse(); - assert.equal(p.startTime, null); - assert.equal(p.playState, 'pending'); + var a = document.body.animate([], 1000); + a.cancel(); + assert.equal(a.startTime, null); + assert.equal(a.playState, 'idle'); + a.reverse(); + assert.equal(a.startTime, null); + assert.equal(a.playState, 'pending'); }); }); From fe68b91bf5749d914efacd70da82fca0476432bb Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 23 Mar 2015 16:07:26 +1100 Subject: [PATCH 45/91] rename for effect-callback --- test/js/effect-callback.js | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/test/js/effect-callback.js b/test/js/effect-callback.js index a4e7c69b..d441d41e 100644 --- a/test/js/effect-callback.js +++ b/test/js/effect-callback.js @@ -7,18 +7,18 @@ suite('effect-callback', function() { test('animations starting in the future are not in effect', function() { var fractions = []; tick(100); - var player = document.body.animate(function(fraction) { fractions.push(fraction); }, 1000); - player.startTime = 1000; + var animation = document.body.animate(function(fraction) { fractions.push(fraction); }, 1000); + animation.startTime = 1000; tick(200); tick(1000); tick(1100); assert.deepEqual(fractions, [0, 0.1]); }); - test('duration 0 players get sampled at least once', function() { + test('duration 0 animations get sampled at least once', function() { var timeFraction; tick(0); - var player = document.body.animate(function(t) { + var animation = document.body.animate(function(t) { timeFraction = t; }, {duration: 0, fill: 'both'}); tick(100); @@ -26,33 +26,33 @@ suite('effect-callback', function() { assert.equal(isTicking(), false); }); - test('players added during custom effect callbacks get updated in the same tick', function() { - var player; + test('animations added during custom effect callbacks get updated in the same tick', function() { + var animation; var called = false; tick(0); document.body.animate(function() { - player = document.body.animate(function() { + animation = document.body.animate(function() { called = true; }, 1); }, 2); tick(1); - assert.isTrue(player.startTime >= 0); + assert.isTrue(animation.startTime >= 0); assert.isFalse(called); }); test('custom effect should be called after cancel', function() { var fractions = []; - var player = document.body.animate(function(fraction) { fractions.push(fraction); }, 1000); + var animation = document.body.animate(function(fraction) { fractions.push(fraction); }, 1000); tick(0); tick(500); - player.cancel(); + animation.cancel(); tick(501); assert.deepEqual(fractions, [0, 0.5, null]); }); - test('element.animate is given animation', function() { + test('element.animate is given effect', function() { var callbackAnim; - var player = document.body.animate(function(t, target, a) { + var animation = document.body.animate(function(t, target, a) { callbackAnim = a; }, 100); tick(50); @@ -62,15 +62,15 @@ suite('effect-callback', function() { assert.equal(callbackAnim.target, document.body); }); - test('effect callback on animation is given source animation', function() { + test('custom callback on effect is given source effect', function() { var callbackAnim; - var anim = new Animation(document.body, function(t, target, a) { + var effect = new KeyframeEffect(document.body, function(t, target, a) { callbackAnim = a; }, 1000); - var player = document.timeline.play(anim); + var animation = document.timeline.play(effect); tick(50); tick(550); - assert.equal(player.currentTime, 500); - assert.equal(callbackAnim, anim); + assert.equal(animation.currentTime, 500); + assert.equal(callbackAnim, effect); }); }); From 268862806870f840fbda6e1a278cdfe90a49b4c3 Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 23 Mar 2015 16:11:54 +1100 Subject: [PATCH 46/91] rename for effect-node --- test/js/effect-node.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/js/effect-node.js b/test/js/effect-node.js index 13a864fa..f41482e0 100644 --- a/test/js/effect-node.js +++ b/test/js/effect-node.js @@ -1,4 +1,4 @@ -suite('animation-node', function() { +suite('effect-node', function() { test('normalize timing input', function() { assert.equal(normalizeTimingInput(1).duration, 1); assert.equal(normalizeTimingInput(1).easing(0.2), 0.2); @@ -90,7 +90,7 @@ suite('animation-node', function() { assert.closeTo(calculateTransformedTime(4, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate-reverse'}), 160, 0.0001); assert.closeTo(calculateTransformedTime(3, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate-reverse'}), 360, 0.0001); }); - test('Animation Node', function() { + test('Effect Node', function() { var timing = normalizeTimingInput({duration: 1000, iterations: 4, iterationStart: 0.5, easing: 'linear', direction: 'alternate', delay: 100, fill: 'forwards'}); var timing2 = normalizeTimingInput({duration: 1000, iterations: 4, iterationStart: 0.5, easing: 'ease', direction: 'alternate', delay: 100, fill: 'forwards'}); var node = webAnimations1.EffectNode(timing); From 88feadce13d5e4e6feed3949c423fa5bd8f11616 Mon Sep 17 00:00:00 2001 From: rjwright Date: Tue, 24 Mar 2015 09:47:40 +1100 Subject: [PATCH 47/91] Rename for effect.js --- test/js/effect.js | 46 +++++++++++++++++++++++----------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/test/js/effect.js b/test/js/effect.js index 4772663b..f2c0b49c 100644 --- a/test/js/effect.js +++ b/test/js/effect.js @@ -230,7 +230,7 @@ suite('effect', function() { }); // Test makePropertySpecificKeyframeGroups. - test('Make property specific keyframe groups for a simple effect with one property.', function() { + test('Make property specific keyframe groups for a simple keyframe list with one property.', function() { var groups; assert.doesNotThrow(function() { groups = makePropertySpecificKeyframeGroups(normalizeKeyframes([ @@ -249,7 +249,7 @@ suite('effect', function() { assert.equal(groups.left[2].value, '0px'); }); - test('Make property specific keyframe groups for an effect with three properties.', function() { + test('Make property specific keyframe groups for an keyframe list with three properties.', function() { var groups; assert.doesNotThrow(function() { groups = makePropertySpecificKeyframeGroups(normalizeKeyframes([ @@ -370,14 +370,14 @@ suite('effect', function() { document.body.appendChild(target1); document.body.appendChild(target2); - var player1 = target1.animate( + var animation1 = target1.animate( [ {left: '0px'}, {left: '50px', offset: 0.25}, {left: '0px'} ], {duration: 4000, fill: 'forwards'}); - var player2 = target2.animate( + var animation2 = target2.animate( [ {left: '0px', easing: 'ease-in'}, {left: '50px', offset: 0.25}, @@ -407,7 +407,7 @@ suite('effect', function() { }); // Test makeInterpolations. - test('Make interpolations for a simple effect with one property.', function() { + test('Make interpolations for a simple keyframe list with one property.', function() { var interpolations; assert.doesNotThrow(function() { interpolations = makeInterpolations(makePropertySpecificKeyframeGroups(normalizeKeyframes([ @@ -441,58 +441,58 @@ suite('effect-convertEffectInput', function() { this.target.removeChild(this.target); }); - test('Convert effect input for a simple effect with one property.', function() { - var effectFunction; + test('Convert effect input for a simple keyframe list with one property.', function() { + var effectInputFunction; assert.doesNotThrow(function() { - effectFunction = webAnimations1.convertEffectInput([ + effectInputFunction = webAnimations1.convertEffectInput([ {left: '0px'}, {left: '200px', offset: 0.3}, {left: '100px'} ]); }); - effectFunction(this.target, 0); + effectInputFunction(this.target, 0); assert.closeTo(leftAsNumber(this.target), 0, 0.001); - effectFunction(this.target, 0.075); + effectInputFunction(this.target, 0.075); assert.closeTo(leftAsNumber(this.target), 50, 0.001); - effectFunction(this.target, 0.15); + effectInputFunction(this.target, 0.15); assert.closeTo(leftAsNumber(this.target), 100, 0.001); - effectFunction(this.target, 0.65); + effectInputFunction(this.target, 0.65); assert.closeTo(leftAsNumber(this.target), 150, 0.001); - effectFunction(this.target, 1); + effectInputFunction(this.target, 1); assert.closeTo(leftAsNumber(this.target), 100, 0.001); - effectFunction(this.target, 2); + effectInputFunction(this.target, 2); assert.closeTo(leftAsNumber(this.target), -42.856, 0.01); }); test('Convert effect input where one property is animated and the property has two keyframes at offset 1.', function() { - var effectFunction; + var effectInputFunction; assert.doesNotThrow(function() { - effectFunction = webAnimations1.convertEffectInput([ + effectInputFunction = webAnimations1.convertEffectInput([ {left: '0px', offset: 0}, {left: '20px', offset: 1}, {left: '30px'} ]); }); - effectFunction(this.target, 1); + effectInputFunction(this.target, 1); assert.equal(getComputedStyle(this.target).left, '30px'); - effectFunction(this.target, 2); + effectInputFunction(this.target, 2); assert.equal(getComputedStyle(this.target).left, '30px'); }); - test('Convert effect input and apply effect at fraction null.', function() { - var effectFunction; + test('Convert effect input and apply result at fraction null.', function() { + var effectInputFunction; var underlying = getComputedStyle(this.target).left; assert.doesNotThrow(function() { - effectFunction = webAnimations1.convertEffectInput([ + effectInputFunction = webAnimations1.convertEffectInput([ {left: '0px'}, {left: '100px'} ]); }); - effectFunction(this.target, 1); + effectInputFunction(this.target, 1); assert.equal(getComputedStyle(this.target).left, '100px'); - effectFunction(this.target, null); + effectInputFunction(this.target, null); assert.equal(getComputedStyle(this.target).left, underlying); }); }); From 3a74ef67ef352311d0b4cb9fb1152fcba38486cf Mon Sep 17 00:00:00 2001 From: rjwright Date: Tue, 24 Mar 2015 09:52:10 +1100 Subject: [PATCH 48/91] Rename for group-animation-finish-event.js --- test/js/group-animation-finish-event.js | 50 ++++++++++++------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/test/js/group-animation-finish-event.js b/test/js/group-animation-finish-event.js index 5fedd7eb..c3ad7a5c 100644 --- a/test/js/group-animation-finish-event.js +++ b/test/js/group-animation-finish-event.js @@ -1,30 +1,30 @@ -suite('group-player-finish-event', function() { +suite('group-animation-finish-event', function() { setup(function() { document.timeline.currentTime = undefined; this.element = document.createElement('div'); document.documentElement.appendChild(this.element); - var animation = new AnimationSequence([ - new Animation(this.element, [], 500), - new AnimationGroup([ - new Animation(this.element, [], 250), - new Animation(this.element, [], 500), + var sequenceEffect = new SequenceEffect([ + new KeyframeEffect(this.element, [], 500), + new GroupEffect([ + new KeyframeEffect(this.element, [], 250), + new KeyframeEffect(this.element, [], 500), ]), ]); - this.player = document.timeline.play(animation, 1000); + this.animation = document.timeline.play(sequenceEffect, 1000); }); teardown(function() { if (this.element.parent) this.element.removeChild(this.element); }); - test('fire when player completes', function(done) { + test('fire when animation completes', function(done) { var ready = false; var fired = false; - var player = this.player; - player.onfinish = function(event) { + var animation = this.animation; + animation.onfinish = function(event) { assert(ready, 'must not be called synchronously'); - assert.equal(this, player); - assert.equal(event.target, player); + assert.equal(this, animation); + assert.equal(event.target, animation); assert.equal(event.currentTime, 1000); assert.equal(event.timelineTime, 1100); if (fired) @@ -38,27 +38,27 @@ suite('group-player-finish-event', function() { ready = true; }); - test('fire when reversed player completes', function(done) { - this.player.onfinish = function(event) { + test('fire when reversed animation completes', function(done) { + this.animation.onfinish = function(event) { assert.equal(event.currentTime, 0); assert.equal(event.timelineTime, 1001); done(); }; tick(0); tick(500); - this.player.reverse(); + this.animation.reverse(); tick(501); tick(1001); }); - test('fire after player is cancelled', function(done) { - this.player.onfinish = function(event) { + test('fire after animation is cancelled', function(done) { + this.animation.onfinish = function(event) { assert.equal(event.currentTime, 0); assert.equal(event.timelineTime, 1, 'event must be fired on next sample'); done(); }; tick(0); - this.player.cancel(); + this.animation.cancel(); tick(1); }); @@ -71,17 +71,17 @@ suite('group-player-finish-event', function() { }; } var toRemove = createHandler(0); - this.player.addEventListener('finish', createHandler(1)); - this.player.addEventListener('finish', createHandler(2)); - this.player.addEventListener('finish', toRemove); - this.player.addEventListener('finish', createHandler(3)); - this.player.removeEventListener('finish', toRemove); - this.player.onfinish = function() { + this.animation.addEventListener('finish', createHandler(1)); + this.animation.addEventListener('finish', createHandler(2)); + this.animation.addEventListener('finish', toRemove); + this.animation.addEventListener('finish', createHandler(3)); + this.animation.removeEventListener('finish', toRemove); + this.animation.onfinish = function() { assert.equal(count, 3); done(); }; tick(0); - this.player.cancel(); + this.animation.cancel(); tick(1000); }); }); From e1aae92bf70b88774f805eb583c837096b4147a3 Mon Sep 17 00:00:00 2001 From: rjwright Date: Tue, 24 Mar 2015 10:55:24 +1100 Subject: [PATCH 49/91] Rename for group-animations.js --- test/js/group-animation.js | 714 ++++++++++++++++++------------------- 1 file changed, 357 insertions(+), 357 deletions(-) diff --git a/test/js/group-animation.js b/test/js/group-animation.js index eadbe6ba..e93eceab 100644 --- a/test/js/group-animation.js +++ b/test/js/group-animation.js @@ -1,11 +1,11 @@ -suite('group-player', function() { +suite('group-animation', function() { setup(function() { document.timeline._animations = []; webAnimations1.timeline._animations = []; this.elements = []; - var animationMargin = function(target) { - return new Animation( + var marginEffect = function(target) { + return new KeyframeEffect( target, [ {marginLeft: '0px'}, @@ -13,8 +13,8 @@ suite('group-player', function() { ], 500); }; - var animationColor = function(target) { - return new Animation( + var colorEffect = function(target) { + return new KeyframeEffect( target, [ {backgroundColor: 'black'}, @@ -23,23 +23,23 @@ suite('group-player', function() { 500); }; var sequenceEmpty = function() { - return new AnimationSequence(); + return new SequenceEffect(); }; var groupEmpty = function() { - return new AnimationGroup(); + return new GroupEffect(); }; - var sequenceWithEffects = function(target) { - return new AnimationSequence( + var sequenceWithContent = function(target) { + return new SequenceEffect( [ - animationMargin(target), - animationColor(target) + marginEffect(target), + colorEffect(target) ]); }; - var groupWithEffects = function(target) { - return new AnimationGroup( + var groupWithContent = function(target) { + return new GroupEffect( [ - animationMargin(target), - animationColor(target) + marginEffect(target), + colorEffect(target) ]); }; @@ -47,54 +47,54 @@ suite('group-player', function() { var seqSimple_target = document.createElement('div'); this.elements.push(seqSimple_target); - var seqSimple_source = sequenceWithEffects(seqSimple_target); + var seqSimple_source = sequenceWithContent(seqSimple_target); var seqWithSeq_target = document.createElement('div'); this.elements.push(seqWithSeq_target); - var seqWithSeq_source = new AnimationSequence( + var seqWithSeq_source = new SequenceEffect( [ - animationMargin(seqWithSeq_target), - animationColor(seqWithSeq_target), - sequenceWithEffects(seqWithSeq_target) + marginEffect(seqWithSeq_target), + colorEffect(seqWithSeq_target), + sequenceWithContent(seqWithSeq_target) ]); var seqWithGroup_target = document.createElement('div'); this.elements.push(seqWithGroup_target); - var seqWithGroup_source = new AnimationSequence( + var seqWithGroup_source = new SequenceEffect( [ - animationMargin(seqWithGroup_target), - animationColor(seqWithGroup_target), - groupWithEffects(seqWithGroup_target) + marginEffect(seqWithGroup_target), + colorEffect(seqWithGroup_target), + groupWithContent(seqWithGroup_target) ]); - var seqWithEmptyGroup_source = new AnimationSequence([groupEmpty()]); - var seqWithEmptySeq_source = new AnimationSequence([sequenceEmpty()]); + var seqWithEmptyGroup_source = new SequenceEffect([groupEmpty()]); + var seqWithEmptySeq_source = new SequenceEffect([sequenceEmpty()]); var groupEmpty_source = groupEmpty(); var groupSimple_target = document.createElement('div'); - var groupSimple_source = groupWithEffects(groupSimple_target); + var groupSimple_source = groupWithContent(groupSimple_target); var groupWithSeq_target = document.createElement('div'); this.elements.push(groupWithSeq_target); - var groupWithSeq_source = new AnimationGroup( + var groupWithSeq_source = new GroupEffect( [ - animationMargin(groupWithSeq_target), - animationColor(groupWithSeq_target), - sequenceWithEffects(groupWithSeq_target) + marginEffect(groupWithSeq_target), + colorEffect(groupWithSeq_target), + sequenceWithContent(groupWithSeq_target) ]); var groupWithGroup_target = document.createElement('div'); this.elements.push(groupWithGroup_target); - var groupWithGroup_source = new AnimationGroup( + var groupWithGroup_source = new GroupEffect( [ - animationMargin(groupWithGroup_target), - animationColor(groupWithGroup_target), - groupWithEffects(groupWithGroup_target) + marginEffect(groupWithGroup_target), + colorEffect(groupWithGroup_target), + groupWithContent(groupWithGroup_target) ]); - var groupWithEmptyGroup_source = new AnimationGroup([groupEmpty()]); - var groupWithEmptySeq_source = new AnimationGroup([sequenceEmpty()]); + var groupWithEmptyGroup_source = new GroupEffect([groupEmpty()]); + var groupWithEmptySeq_source = new GroupEffect([sequenceEmpty()]); this.seqEmpty_source = seqEmpty_source; this.seqSimple_source = seqSimple_source; @@ -110,10 +110,10 @@ suite('group-player', function() { 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; + this.staticEffect = function(target, value, duration) { + var keyframeEffect = new KeyframeEffect(target, [{marginLeft: value}, {marginLeft: value}], duration); + keyframeEffect.testValue = value; + return keyframeEffect; }; // The following animation structure looks like: // 44444 @@ -123,16 +123,16 @@ suite('group-player', function() { // 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.complexSource = new GroupEffect([ + this.staticEffect(this.complexTarget, '4px', 5), + new SequenceEffect([ + this.staticEffect(this.complexTarget, '1px', 2), + new GroupEffect([ + this.staticEffect(this.complexTarget, '3px', 2), + this.staticEffect(this.complexTarget, '2px', 1), ]), ]), - this.staticAnimation(this.complexTarget, '0px', 1), + this.staticEffect(this.complexTarget, '0px', 1), ]); this.target = document.createElement('div'); @@ -149,134 +149,134 @@ suite('group-player', function() { } }); - function simpleAnimationGroup() { - return new AnimationGroup([new Animation(document.body, [], 2000), new Animation(document.body, [], 1000), new Animation(document.body, [], 3000)]); + function simpleGroupEffect() { + return new GroupEffect([new KeyframeEffect(document.body, [], 2000), new KeyframeEffect(document.body, [], 1000), new KeyframeEffect(document.body, [], 3000)]); } - function simpleAnimationSequence() { - return new AnimationSequence([new Animation(document.body, [], 2000), new Animation(document.body, [], 1000), new Animation(document.body, [], 3000)]); + function simpleSequenceEffect() { + return new SequenceEffect([new KeyframeEffect(document.body, [], 2000), new KeyframeEffect(document.body, [], 1000), new KeyframeEffect(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) { + // animationState is [startTime, currentTime, _startOffset?, offset?] + // innerAnimationStates is a nested array tree of animationStates e.g. [[0, 0], [[1, -1], [2, -2]]] + function checkTimes(animation, animationState, innerAnimationStates, description) { description = description ? (description + ' ') : ''; - _checkTimes(player, playerState, 0, description + 'top player'); - _checkTimes(player, innerPlayerStates, 0, description + 'inner player'); + _checkTimes(animation, animationState, 0, description + 'top animation'); + _checkTimes(animation, innerAnimationStates, 0, description + 'inner animation'); } - function _checkTimes(player, timingList, index, trace) { - assert.isDefined(player, trace + ' exists'); + function _checkTimes(animation, timingList, index, trace) { + assert.isDefined(animation, trace + ' exists'); if (timingList.length == 0) { - assert.equal(player._childAnimations.length, index, trace + ' no remaining players'); + assert.equal(animation._childAnimations.length, index, trace + ' no remaining animations'); 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'); + assert.equal(animation.startTime, timingList[0], trace + ' startTime'); + assert.equal(animation.currentTime, timingList[1], trace + ' currentTime'); } else { - _checkTimes(player._childAnimations[index], timingList[0], 0, trace + ' ' + index); - _checkTimes(player, timingList.slice(1), index + 1, trace); + _checkTimes(animation._childAnimations[index], timingList[0], 0, trace + ' ' + index); + _checkTimes(animation, timingList.slice(1), index + 1, trace); } } - test('playing an animationGroup works as expected', function() { + test('playing a GroupEffect works as expected', function() { tick(90); - var p = document.timeline.play(simpleAnimationGroup()); - checkTimes(p, [null, 0], [[null, 0], [null, 0], [null, 0]]); + var a = document.timeline.play(simpleGroupEffect()); + checkTimes(a, [null, 0], [[null, 0], [null, 0], [null, 0]]); tick(100); - checkTimes(p, [100, 0], [[100, 0], [100, 0], [100, 0]]); + checkTimes(a, [100, 0], [[100, 0], [100, 0], [100, 0]]); tick(300); - checkTimes(p, [100, 200], [[100, 200], [100, 200], [100, 200]]); + checkTimes(a, [100, 200], [[100, 200], [100, 200], [100, 200]]); tick(1200); - checkTimes(p, [100, 1100], [[100, 1100], [100, 1000], [100, 1100]]); + checkTimes(a, [100, 1100], [[100, 1100], [100, 1000], [100, 1100]]); tick(2200); - checkTimes(p, [100, 2100], [[100, 2000], [100, 1000], [100, 2100]]); + checkTimes(a, [100, 2100], [[100, 2000], [100, 1000], [100, 2100]]); tick(3200); - checkTimes(p, [100, 3000], [[100, 2000], [100, 1000], [100, 3000]]); + checkTimes(a, [100, 3000], [[100, 2000], [100, 1000], [100, 3000]]); }); - test('can seek an animationGroup', function() { + test('can seek a GroupEffect', function() { tick(90); - var p = document.timeline.play(simpleAnimationGroup()); + var a = document.timeline.play(simpleGroupEffect()); 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]]); + checkTimes(a, [100, 0], [[100, 0], [100, 0], [100, 0]]); + a.currentTime = 200; + checkTimes(a, [-100, 200], [[-100, 200], [-100, 200], [-100, 200]]); + a.currentTime = 1100; + checkTimes(a, [-1000, 1100], [[-1000, 1100], [-1000, 1100], [-1000, 1100]]); + a.currentTime = 2100; + checkTimes(a, [-2000, 2100], [[-2000, 2100], [-2000, 2100], [-2000, 2100]]); + a.currentTime = 3100; + checkTimes(a, [-3000, 3100], [[-3000, 3100], [-3000, 3100], [-3000, 3100]]); }); - test('can startTime seek an animationGroup', function() { + test('can startTime seek a GroupEffect', function() { tick(90); - var p = document.timeline.play(simpleAnimationGroup()); + var a = document.timeline.play(simpleGroupEffect()); 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]]); + checkTimes(a, [100, 0], [[100, 0], [100, 0], [100, 0]]); + a.startTime = -100; + checkTimes(a, [-100, 200], [[-100, 200], [-100, 200], [-100, 200]]); + a.startTime = -1000; + checkTimes(a, [-1000, 1100], [[-1000, 1100], [-1000, 1000], [-1000, 1100]]); + a.startTime = -2000; + checkTimes(a, [-2000, 2100], [[-2000, 2000], [-2000, 1000], [-2000, 2100]]); + a.startTime = -3000; + checkTimes(a, [-3000, 3000], [[-3000, 2000], [-3000, 1000], [-3000, 3000]]); }); - test('playing an animationSequence works as expected', function() { + test('playing a SequenceEffect works as expected', function() { tick(100); - var p = document.timeline.play(simpleAnimationSequence()); + var a = document.timeline.play(simpleSequenceEffect()); tick(110); - checkTimes(p, [110, 0], [[110, 0], [2110, -2000], [3110, -3000]]); + checkTimes(a, [110, 0], [[110, 0], [2110, -2000], [3110, -3000]]); tick(210); - checkTimes(p, [110, 100], [[110, 100], [2110, -1900], [3110, -2900]]); + checkTimes(a, [110, 100], [[110, 100], [2110, -1900], [3110, -2900]]); tick(2210); - checkTimes(p, [110, 2100], [[110, 2000], [2110, 100], [3110, -900]]); + checkTimes(a, [110, 2100], [[110, 2000], [2110, 100], [3110, -900]]); tick(3210); - checkTimes(p, [110, 3100], [[110, 2000], [2110, 1000], [3110, 100]]); + checkTimes(a, [110, 3100], [[110, 2000], [2110, 1000], [3110, 100]]); tick(6210); - checkTimes(p, [110, 6000], [[110, 2000], [2110, 1000], [3110, 3000]]); + checkTimes(a, [110, 6000], [[110, 2000], [2110, 1000], [3110, 3000]]); }); - test('can seek an animationSequence', function() { + test('can seek a SequenceEffect', function() { tick(100); - var p = document.timeline.play(simpleAnimationSequence()); + var a = document.timeline.play(simpleSequenceEffect()); 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]]); + checkTimes(a, [110, 0], [[110, 0], [2110, -2000], [3110, -3000]]); + a.currentTime = 100; + checkTimes(a, [10, 100], [[10, 100], [2010, -1900], [3010, -2900]]); + a.currentTime = 2100; + checkTimes(a, [-1990, 2100], [[-1990, 2100], [10, 100], [1010, -900]]); + a.currentTime = 3100; + checkTimes(a, [-2990, 3100], [[-2990, 3100], [-990, 1100], [10, 100]]); + a.currentTime = 6100; + checkTimes(a, [-5990, 6100], [[-5990, 6100], [-3990, 4100], [-2990, 3100]]); }); - test('can startTime seek an animationSequence', function() { + test('can startTime seek a SequenceEffect', function() { tick(100); - var p = document.timeline.play(simpleAnimationSequence()); + var a = document.timeline.play(simpleSequenceEffect()); 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]]); + checkTimes(a, [110, 0], [[110, 0], [2110, -2000], [3110, -3000]]); + a.startTime = 10; + checkTimes(a, [10, 100], [[10, 100], [2010, -1900], [3010, -2900]]); + a.startTime = -1990; + checkTimes(a, [-1990, 2100], [[-1990, 2000], [10, 100], [1010, -900]]); + a.startTime = -2990; + checkTimes(a, [-2990, 3100], [[-2990, 2000], [-990, 1000], [10, 100]]); + a.startTime = -5990; + checkTimes(a, [-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); + var animation = document.timeline.play(this.complexSource); tick(100); - checkTimes(player, [100, 0], [ + checkTimes(animation, [100, 0], [ [100, 0], [ // 4 [100, 0], [ // 1 [102, -2], // 3 @@ -284,7 +284,7 @@ suite('group-player', function() { [100, 0], // 0 ], 't = 100'); tick(101); - checkTimes(player, [100, 1], [ + checkTimes(animation, [100, 1], [ [100, 1], [ // 4 [100, 1], [ // 1 [102, -1], // 3 @@ -292,7 +292,7 @@ suite('group-player', function() { [100, 1], // 0 ], 't = 101'); tick(102); - checkTimes(player, [100, 2], [ + checkTimes(animation, [100, 2], [ [100, 2], [ // 4 [100, 2], [ // 1 [102, 0], // 3 @@ -303,67 +303,67 @@ suite('group-player', function() { test('effects apply in the correct order', function() { tick(0); - var player = document.timeline.play(this.complexSource); - player.currentTime = 0; + var animation = document.timeline.play(this.complexSource); + animation.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]]); + animation.currentTime = 1; + checkTimes(animation, [-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; + animation.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]]); + checkTimes(animation, [-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; + animation.currentTime = 3; assert.equal(getComputedStyle(this.complexTarget).marginLeft, '3px'); - player.currentTime = 4; + animation.currentTime = 4; assert.equal(getComputedStyle(this.complexTarget).marginLeft, '4px'); - player.currentTime = 5; + animation.currentTime = 5; assert.equal(getComputedStyle(this.complexTarget).marginLeft, '0px'); }); - test('cancelling group players', function() { + test('cancelling group animations', function() { tick(0); - var player = document.timeline.play(this.complexSource); + var animation = document.timeline.play(this.complexSource); tick(1); tick(4); assert.equal(getComputedStyle(this.complexTarget).marginLeft, '3px'); - player.cancel(); - assert.equal(player.currentTime, null); + animation.cancel(); + assert.equal(animation.currentTime, null); assert.equal(getComputedStyle(this.complexTarget).marginLeft, '0px'); }); - test('cancelling group players before tick', function() { + test('cancelling group animations before tick', function() { tick(0); - var player = document.timeline.play(this.complexSource); - player.cancel(); - assert.equal(player.currentTime, null); + var animation = document.timeline.play(this.complexSource); + animation.cancel(); + assert.equal(animation.currentTime, null); assert.equal(getComputedStyle(this.complexTarget).marginLeft, '0px'); tick(4); - assert.equal(player.currentTime, null); + assert.equal(animation.currentTime, null); assert.equal(getComputedStyle(this.complexTarget).marginLeft, '0px'); }); - test('redundant animation node wrapping', function() { + test('redundant effect 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 keyframeEffect = new SequenceEffect([ + this.staticEffect(this.target, '0px', 1), + new GroupEffect([ + new SequenceEffect([ + this.staticEffect(this.target, '1px', 1), + this.staticEffect(this.target, '2px', 1), ]), ]), ]); - var player = document.timeline.play(animation); + var animation = document.timeline.play(keyframeEffect); assert.equal(getComputedStyle(this.target).marginLeft, '0px'); - checkTimes(player, [100, 0], [ + checkTimes(animation, [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], [ + checkTimes(animation, [100, 1], [ [100, 1, 0, 0], [[ // 0 [101, 0, 0, 1], // 1 [102, -1, 1, 2]]] // 2 @@ -371,14 +371,14 @@ suite('group-player', function() { 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 + checkTimes(animation, [100, 2], [ // FIXME: Implement limiting on group animations [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 + checkTimes(animation, [100, 3], [ // FIXME: Implement limiting on group animations [100, 1, 0, 0], [[ // 0 [101, 1, 0, 1], // 1 [102, 1, 1, 2]]] // 2 @@ -387,16 +387,16 @@ suite('group-player', function() { this.target.parent.removeChild(target); }); - test('setting the playbackRate on group players', function() { - var group = new AnimationGroup([ - new Animation(null, [], 1234), - new Animation(null, [], 1234), + test('setting the playbackRate on group animations', function() { + var group = new GroupEffect([ + new KeyframeEffect(null, [], 1234), + new KeyframeEffect(null, [], 1234), ]); - var p = document.timeline.play(group); - p.playbackRate = 2; - assert.equal(p._animation.playbackRate, 2, 'Updates the playbackRate of the inner player'); - p._childAnimations.forEach(function(childPlayer) { - assert.equal(childPlayer.playbackRate, 2, 'It also updates the child players'); + var a = document.timeline.play(group); + a.playbackRate = 2; + assert.equal(a._animation.playbackRate, 2, 'Updates the playbackRate of the inner animation'); + a._childAnimations.forEach(function(childAnimation) { + assert.equal(childAnimation.playbackRate, 2, 'It also updates the child animations'); }); }); @@ -406,20 +406,20 @@ suite('group-player', function() { // 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}), + var keyframeEffect = new GroupEffect([ + new GroupEffect([ + this.staticEffect(this.target, '4px', {duration: 3, delay: 1}), + this.staticEffect(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}), + new SequenceEffect([ + this.staticEffect(this.target, '0px', {duration: 1, delay: 0}), + this.staticEffect(this.target, '3px', {duration: 2, delay: 1}), + this.staticEffect(this.target, '2px', {duration: 1, delay: -2}), ]), ]); - var player = document.timeline.play(animation); + var animation = document.timeline.play(keyframeEffect); tick(100); - checkTimes(player, [100, 0], [ + checkTimes(animation, [100, 0], [ [ [101, -1], [101, -1], @@ -448,20 +448,20 @@ suite('group-player', function() { // 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}), + var keyframeEffect = new SequenceEffect([ + new SequenceEffect([ + this.staticEffect(this.target, '1px', {duration: 2, endDelay: 2}), + this.staticEffect(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}), + new SequenceEffect([ + this.staticEffect(this.target, '0px', {duration: 1, endDelay: 1}), + this.staticEffect(this.target, '3px', {duration: 2, endDelay: -2}), + this.staticEffect(this.target, '2px', {duration: 1, endDelay: 2}), ]), ]); - var player = document.timeline.play(animation); + var animation = document.timeline.play(keyframeEffect); tick(100); - checkTimes(player, [100, 0], [ + checkTimes(animation, [100, 0], [ [ [100, 0], [104, -4], @@ -479,7 +479,7 @@ suite('group-player', function() { 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. + // FIXME: Group child animation limiting bounds should match the parent animation's limiting bounds. // assert.equal(getComputedStyle(this.target).marginLeft, '4px'); // tick(105); // assert.equal(getComputedStyle(this.target).marginLeft, '0px'); @@ -487,142 +487,142 @@ suite('group-player', function() { // 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; + var animations = []; + animations.push(document.timeline.play(this.seqEmpty_source)); + animations.push(document.timeline.play(this.seqSimple_source)); + animations.push(document.timeline.play(this.seqWithSeq_source)); + animations.push(document.timeline.play(this.seqWithGroup_source)); + animations.push(document.timeline.play(this.seqWithEmptyGroup_source)); + animations.push(document.timeline.play(this.seqWithEmptySeq_source)); + + animations.push(document.timeline.play(this.groupEmpty_source)); + animations.push(document.timeline.play(this.groupSimple_source)); + animations.push(document.timeline.play(this.groupWithSeq_source)); + animations.push(document.timeline.play(this.groupWithGroup_source)); + animations.push(document.timeline.play(this.groupWithEmptyGroup_source)); + animations.push(document.timeline.play(this.groupWithEmptySeq_source)); + + var length = animations.length; tick(50); for (var i = 0; i < length; i++) - players[i].pause(); + animations[i].pause(); tick(100); for (var i = 0; i < length; i++) - players[i].play(); + animations[i].play(); tick(200); for (var i = 0; i < length; i++) - players[i].currentTime += 1; + animations[i].currentTime += 1; tick(300); for (var i = 0; i < length; i++) - players[i].startTime += 1; + animations[i].startTime += 1; tick(350); for (var i = 0; i < length; i++) - players[i].reverse(); + animations[i].reverse(); tick(400); for (var i = 0; i < length; i++) - players[i].finish(); + animations[i].finish(); tick(500); tick(600); for (var i = 0; i < length; i++) - players[i].cancel(); + animations[i].cancel(); for (var i = 0; i < length; i++) - players[i].play(); + animations[i].play(); }); - test('pausing works as expected with an empty AnimationSequence', function() { - var player = document.timeline.play(this.seqEmpty_source); + test('pausing works as expected with an empty SequenceEffect', function() { + var animation = document.timeline.play(this.seqEmpty_source); tick(0); - assert.equal(player.startTime, 0); - assert.equal(player.currentTime, 0); + assert.equal(animation.startTime, 0); + assert.equal(animation.currentTime, 0); - player.pause(); - assert.equal(player.startTime, null); - assert.equal(player.currentTime, 0); + animation.pause(); + assert.equal(animation.startTime, null); + assert.equal(animation.currentTime, 0); }); - test('pausing works as expected with a simple AnimationSequence', function() { - var player = document.timeline.play(this.seqSimple_source); + test('pausing works as expected with a simple SequenceEffect', function() { + var animation = document.timeline.play(this.seqSimple_source); var target = this.seqSimple_source.children[0].target; tick(0); - checkTimes(player, [0, 0], [[0, 0], [500, -500]], 't = 0'); + checkTimes(animation, [0, 0], [[0, 0], [500, -500]], 't = 0'); tick(200); - checkTimes(player, [0, 200], [[0, 200], [500, -300]], 't = 200'); + checkTimes(animation, [0, 200], [[0, 200], [500, -300]], 't = 200'); - player.pause(); - checkTimes(player, [null, null], [[null, null], [null, null]], 't = 200'); + animation.pause(); + checkTimes(animation, [null, null], [[null, null], [null, null]], 't = 200'); assert.equal(getComputedStyle(target).marginLeft, '40px'); tick(300); - checkTimes(player, [null, 200], [[null, 200], [null, -300]], 't = 300'); + checkTimes(animation, [null, 200], [[null, 200], [null, -300]], 't = 300'); assert.equal(getComputedStyle(target).marginLeft, '40px'); - player.play(); - checkTimes(player, [null, 200], [[null, 200], [null, -300]], 't = 300'); + animation.play(); + checkTimes(animation, [null, 200], [[null, 200], [null, -300]], 't = 300'); assert.equal(getComputedStyle(target).marginLeft, '40px'); tick(301); - checkTimes(player, [101, 200], [[101, 200], [601, -300]], 't = 301'); + checkTimes(animation, [101, 200], [[101, 200], [601, -300]], 't = 301'); assert.equal(getComputedStyle(target).marginLeft, '40px'); tick(401); - checkTimes(player, [101, 300], [[101, 300], [601, -200]], 't = 401'); + checkTimes(animation, [101, 300], [[101, 300], [601, -200]], 't = 401'); assert.equal(getComputedStyle(target).marginLeft, '60px'); tick(700); - checkTimes(player, [101, 599], [[101, 500], [601, 99]], 't = 700'); + checkTimes(animation, [101, 599], [[101, 500], [601, 99]], 't = 700'); assert.equal(getComputedStyle(target).marginLeft, '0px'); }); - test('pausing before tick works as expected with a simple AnimationSequence', function() { - var player = document.timeline.play(this.seqSimple_source); + test('pausing before tick works as expected with a simple SequenceEffect', function() { + var animation = document.timeline.play(this.seqSimple_source); var target = this.seqSimple_source.children[0].target; - checkTimes(player, [null, 0], [[null, 0], [null, -500]], 't = 0'); + checkTimes(animation, [null, 0], [[null, 0], [null, -500]], 't = 0'); - player.pause(); - checkTimes(player, [null, null], [[null, null], [null, null]], 't = 0'); + animation.pause(); + checkTimes(animation, [null, null], [[null, null], [null, null]], 't = 0'); assert.equal(getComputedStyle(target).marginLeft, '0px'); tick(10); - checkTimes(player, [null, 0], [[null, 0], [null, -500]], 't = 10'); + checkTimes(animation, [null, 0], [[null, 0], [null, -500]], 't = 10'); assert.equal(getComputedStyle(target).marginLeft, '0px'); tick(20); - checkTimes(player, [null, 0], [[null, 0], [null, -500]], 't = 10'); + checkTimes(animation, [null, 0], [[null, 0], [null, -500]], 't = 10'); assert.equal(getComputedStyle(target).marginLeft, '0px'); }); - test('pausing and seeking before tick works as expected with a simple AnimationSequence', function() { - var player = document.timeline.play(this.seqSimple_source); - player.pause(); + test('pausing and seeking before tick works as expected with a simple SequenceEffect', function() { + var animation = document.timeline.play(this.seqSimple_source); + animation.pause(); - player.currentTime = 0; - checkTimes(player, [null, 0], [[null, 0], [null, -500]], 't = 10'); + animation.currentTime = 0; + checkTimes(animation, [null, 0], [[null, 0], [null, -500]], 't = 10'); - player.currentTime = 250; - checkTimes(player, [null, 250], [[null, 250], [null, -250]], 't = 10'); + animation.currentTime = 250; + checkTimes(animation, [null, 250], [[null, 250], [null, -250]], 't = 10'); - player.currentTime = 500; - checkTimes(player, [null, 500], [[null, 500], [null, 0]], 't = 10'); + animation.currentTime = 500; + checkTimes(animation, [null, 500], [[null, 500], [null, 0]], 't = 10'); // FIXME: Expectation should be [null, 1000], [[null, 500], [null, 500]]. - player.currentTime = 1000; - checkTimes(player, [null, 1000], [[null, 1000], [null, 500]], 't = 10'); + animation.currentTime = 1000; + checkTimes(animation, [null, 1000], [[null, 1000], [null, 500]], 't = 10'); }); - test('pausing works as expected with an AnimationSequence inside an AnimationSequence', function() { - var player = document.timeline.play(this.seqWithSeq_source); + test('pausing works as expected with an SequenceEffect inside an SequenceEffect', function() { + var animation = document.timeline.play(this.seqWithSeq_source); tick(0); checkTimes( - player, + animation, [0, 0], [ [0, 0], [500, -500], [ @@ -632,7 +632,7 @@ suite('group-player', function() { tick(200); checkTimes( - player, + animation, [0, 200], [ [0, 200], [500, -300], [ @@ -640,9 +640,9 @@ suite('group-player', function() { [1500, -1300]]], 't = 200'); - player.pause(); + animation.pause(); checkTimes( - player, + animation, [null, null], [ [null, null], [null, null], [ @@ -652,7 +652,7 @@ suite('group-player', function() { tick(300); checkTimes( - player, + animation, [null, 200], [ [null, 200], [null, -300], [ @@ -660,10 +660,10 @@ suite('group-player', function() { [null, -1300]]], 't = 300'); - player.play(); + animation.play(); tick(310); checkTimes( - player, + animation, [110, 200], [ [110, 200], [610, -300], [ @@ -673,7 +673,7 @@ suite('group-player', function() { tick(1300); checkTimes( - player, + animation, [110, 1190], [ [110, 500], [610, 500], [ @@ -681,9 +681,9 @@ suite('group-player', function() { [1610, -310]]], 't = 1300'); - player.pause(); + animation.pause(); checkTimes( - player, + animation, [null, null], [ [null, 500], [null, 500], [ @@ -693,7 +693,7 @@ suite('group-player', function() { tick(1400); checkTimes( - player, + animation, [null, 1190], [ [null, 500], [null, 500], [ @@ -701,9 +701,9 @@ suite('group-player', function() { [null, -310]]], 't = 1400'); - player.play(); + animation.play(); checkTimes( - player, + animation, [null, 1190], [ [null, 500], [null, 500], [ @@ -713,7 +713,7 @@ suite('group-player', function() { tick(1410); checkTimes( - player, + animation, [220, 1190], [ [220, 500], [720, 500], [ @@ -723,7 +723,7 @@ suite('group-player', function() { tick(1600); checkTimes( - player, + animation, [220, 1380], [ [220, 500], [720, 500], [ @@ -731,9 +731,9 @@ suite('group-player', function() { [1720, -120]]], 't = 1600'); - player.pause(); + animation.pause(); checkTimes( - player, + animation, [null, null], [ [null, 500], [null, 500], [ @@ -743,7 +743,7 @@ suite('group-player', function() { tick(1700); checkTimes( - player, + animation, [null, 1380], [ [null, 500], [null, 500], [ @@ -751,10 +751,10 @@ suite('group-player', function() { [null, -120]]], 't = 1700'); - player.play(); + animation.play(); tick(1710); checkTimes( - player, + animation, [330, 1380], [ [330, 500], [830, 500], [ @@ -764,7 +764,7 @@ suite('group-player', function() { tick(2400); checkTimes( - player, + animation, [330, 2000], [ [330, 500], [830, 500], [ @@ -773,11 +773,11 @@ suite('group-player', function() { 't = 2400'); }); - test('pausing works as expected with an AnimationGroup inside an AnimationSequence', function() { - var player = document.timeline.play(this.seqWithGroup_source); + test('pausing works as expected with a GroupEffect inside an SequenceEffect', function() { + var animation = document.timeline.play(this.seqWithGroup_source); tick(0); checkTimes( - player, + animation, [0, 0], [ [0, 0], [500, -500], [ @@ -787,7 +787,7 @@ suite('group-player', function() { tick(200); checkTimes( - player, + animation, [0, 200], [ [0, 200], [500, -300], [ @@ -795,9 +795,9 @@ suite('group-player', function() { [1000, -800]]], 't = 200'); - player.pause(); + animation.pause(); checkTimes( - player, + animation, [null, null], [ [null, null], [null, null], [ @@ -807,7 +807,7 @@ suite('group-player', function() { tick(300); checkTimes( - player, + animation, [null, 200], [ [null, 200], [null, -300], [ @@ -815,10 +815,10 @@ suite('group-player', function() { [null, -800]]], 't = 300'); - player.play(); + animation.play(); tick(310); checkTimes( - player, + animation, [110, 200], [ [110, 200], [610, -300], [ @@ -828,7 +828,7 @@ suite('group-player', function() { tick(1310); checkTimes( - player, + animation, [110, 1200], [ [110, 500], [610, 500], [ @@ -836,9 +836,9 @@ suite('group-player', function() { [1110, 200]]], 't = 1310'); - player.pause(); + animation.pause(); checkTimes( - player, + animation, [null, null], [ [null, 500], [null, 500], [ @@ -848,7 +848,7 @@ suite('group-player', function() { tick(1400); checkTimes( - player, + animation, [null, 1200], [ [null, 500], [null, 500], [ @@ -856,10 +856,10 @@ suite('group-player', function() { [null, 200]]], 't = 1410'); - player.play(); + animation.play(); tick(1410); checkTimes( - player, + animation, [210, 1200], [ [210, 500], [710, 500], [ @@ -869,7 +869,7 @@ suite('group-player', function() { tick(1610); checkTimes( - player, + animation, [210, 1400], [ [210, 500], [710, 500], [ @@ -877,10 +877,10 @@ suite('group-player', function() { [1210, 400]]], 't = 1610'); - player.pause(); + animation.pause(); tick(1810); checkTimes( - player, + animation, [null, 1400], [ [null, 500], [null, 500], [ @@ -888,10 +888,10 @@ suite('group-player', function() { [null, 400]]], 't = 1810'); - player.play(); + animation.play(); tick(1820); checkTimes( - player, + animation, [420, 1400], [ [420, 500], [920, 500], [ @@ -901,7 +901,7 @@ suite('group-player', function() { tick(2020); checkTimes( - player, + animation, [420, 1500], [ [420, 500], [920, 500], [ @@ -909,9 +909,9 @@ suite('group-player', function() { [1420, 500]]], 't = 2020'); - player.pause(); + animation.pause(); checkTimes( - player, + animation, [null, 1500], [ [null, 500], [null, 500], [ @@ -920,32 +920,32 @@ suite('group-player', function() { 't = 2020'); }); - test('pausing works as expected with an empty AnimationSequence inside an AnimationSequence', function() { - var player = document.timeline.play(this.seqWithEmptySeq_source); + test('pausing works as expected with an empty SequenceEffect inside an SequenceEffect', function() { + var animation = document.timeline.play(this.seqWithEmptySeq_source); tick(0); checkTimes( - player, + animation, [0, 0], [0, 0], 't = 0'); - player.pause(); + animation.pause(); checkTimes( - player, + animation, [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); + test('pausing works as expected with an empty GroupEffect inside an SequenceEffect', function() { + var animation = document.timeline.play(this.seqWithEmptyGroup_source); tick(0); checkTimes( - player, + animation, [0, 0], [0, 0], 't = 0'); - player.pause(); + animation.pause(); checkTimes( - player, + animation, [null, 0], [null, 0], 't = 0 after pause'); }); @@ -953,85 +953,85 @@ suite('group-player', function() { 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'); + var keyframeEffect = new SequenceEffect([new KeyframeEffect(target, [], 100), new KeyframeEffect(target, [], 100)]); + var a = document.timeline.play(keyframeEffect); + assert.equal(a.playState, 'pending'); tick(1); - assert.equal(p.playState, 'running'); - assert.equal(p._childAnimations[0]._animation.playState, 'running'); - assert.equal(p._childAnimations[1]._animation.playState, 'running'); + assert.equal(a.playState, 'running'); + assert.equal(a._childAnimations[0]._animation.playState, 'running'); + assert.equal(a._childAnimations[1]._animation.playState, 'running'); tick(101); - assert.equal(p.playState, 'running'); - assert.equal(p._childAnimations[0]._animation.playState, 'finished'); - assert.equal(p._childAnimations[1]._animation.playState, 'running'); - p.pause(); - assert.equal(p.playState, 'pending'); - assert.equal(p._childAnimations[0]._animation.playState, 'paused'); - assert.equal(p._childAnimations[1]._animation.playState, 'pending'); + assert.equal(a.playState, 'running'); + assert.equal(a._childAnimations[0]._animation.playState, 'finished'); + assert.equal(a._childAnimations[1]._animation.playState, 'running'); + a.pause(); + assert.equal(a.playState, 'pending'); + assert.equal(a._childAnimations[0]._animation.playState, 'paused'); + assert.equal(a._childAnimations[1]._animation.playState, 'pending'); tick(102); - assert.equal(p.playState, 'paused'); - assert.equal(p._childAnimations[0]._animation.playState, 'paused'); - assert.equal(p._childAnimations[1]._animation.playState, 'paused'); - p.play(); - assert.equal(p.playState, 'pending'); - assert.equal(p._childAnimations[0]._animation.playState, 'pending'); - assert.equal(p._childAnimations[1]._animation.playState, 'pending'); + assert.equal(a.playState, 'paused'); + assert.equal(a._childAnimations[0]._animation.playState, 'paused'); + assert.equal(a._childAnimations[1]._animation.playState, 'paused'); + a.play(); + assert.equal(a.playState, 'pending'); + assert.equal(a._childAnimations[0]._animation.playState, 'pending'); + assert.equal(a._childAnimations[1]._animation.playState, 'pending'); tick(103); - assert.equal(p.playState, 'running'); - assert.equal(p._childAnimations[0]._animation.playState, 'finished'); - assert.equal(p._childAnimations[1]._animation.playState, 'running'); + assert.equal(a.playState, 'running'); + assert.equal(a._childAnimations[0]._animation.playState, 'finished'); + assert.equal(a._childAnimations[1]._animation.playState, 'running'); tick(204); - assert.equal(p.playState, 'finished'); - assert.equal(p._childAnimations[0]._animation.playState, 'finished'); - assert.equal(p._childAnimations[1]._animation.playState, 'finished'); + assert.equal(a.playState, 'finished'); + assert.equal(a._childAnimations[0]._animation.playState, 'finished'); + assert.equal(a._childAnimations[1]._animation.playState, 'finished'); }); test('pausing then seeking out of range then seeking into range works', function() { var target = document.createElement('div'); - var anim = new Animation(target, [], {duration: 2000, fill: 'both'}); - var group = new AnimationGroup([anim], {fill: 'none'}); - var player = document.timeline.play(group); + var keyframeEffect = new KeyframeEffect(target, [], {duration: 2000, fill: 'both'}); + var group = new GroupEffect([keyframeEffect], {fill: 'none'}); + var animation = document.timeline.play(group); - player.pause(); - player.currentTime = 3000; - assert.equal(player._childAnimations.length, 0); + animation.pause(); + animation.currentTime = 3000; + assert.equal(animation._childAnimations.length, 0); tick(100); - player.currentTime = 1000; - assert.equal(player._childAnimations.length, 1); - assert.equal(player._childAnimations[0]._animation.playState, 'paused'); - assert.equal(player._childAnimations[0]._animation.currentTime, 1000); + animation.currentTime = 1000; + assert.equal(animation._childAnimations.length, 1); + assert.equal(animation._childAnimations[0]._animation.playState, 'paused'); + assert.equal(animation._childAnimations[0]._animation.currentTime, 1000); }); test('reversing then seeking out of range then seeking into range works', function() { var target = document.createElement('div'); - var anim = new Animation(target, [], {duration: 2000, fill: 'both'}); - var group = new AnimationGroup([anim], {fill: 'none'}); - var player = document.timeline.play(group); + var keyframeEffect = new KeyframeEffect(target, [], {duration: 2000, fill: 'both'}); + var group = new GroupEffect([keyframeEffect], {fill: 'none'}); + var animation = document.timeline.play(group); - player.currentTime = 1000; + animation.currentTime = 1000; tick(100); - player.reverse(); + animation.reverse(); tick(105); - player.currentTime = 3000; - assert.equal(player._childAnimations.length, 0); + animation.currentTime = 3000; + assert.equal(animation._childAnimations.length, 0); tick(110); - player.currentTime = 1000; - assert.equal(player.playbackRate, -1); - assert.equal(player._childAnimations.length, 1); - assert.equal(player._childAnimations[0]._animation.playState, 'running'); - assert.equal(player._childAnimations[0]._animation.currentTime, 1000); - assert.equal(player._childAnimations[0]._animation.playbackRate, -1); + animation.currentTime = 1000; + assert.equal(animation.playbackRate, -1); + assert.equal(animation._childAnimations.length, 1); + assert.equal(animation._childAnimations[0]._animation.playState, 'running'); + assert.equal(animation._childAnimations[0]._animation.currentTime, 1000); + assert.equal(animation._childAnimations[0]._animation.playbackRate, -1); }); test('fill none groups with fill none children do not fill', function() { - var anim = new Animation( + var keyframeEffect = new KeyframeEffect( this.target, [{marginLeft: '0px'}, {marginLeft: '100px'}], {duration: 500, fill: 'none'}); - var group = new AnimationGroup([anim], {fill: 'none'}); - var player = document.timeline.play(group); + var group = new GroupEffect([keyframeEffect], {fill: 'none'}); + var animation = document.timeline.play(group); tick(0); assert.equal(getComputedStyle(this.target).marginLeft, '0px'); From 945c4e0c8ca3924f6a297de305d4fca63a889c32 Mon Sep 17 00:00:00 2001 From: rjwright Date: Tue, 24 Mar 2015 10:59:54 +1100 Subject: [PATCH 50/91] Rename for group-constructors.js. Remove setup for this test suite as it is not needed. --- test/js/group-constructors.js | 30 +++++++++++++----------------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/test/js/group-constructors.js b/test/js/group-constructors.js index e6b272f5..b8ba6a6c 100644 --- a/test/js/group-constructors.js +++ b/test/js/group-constructors.js @@ -1,26 +1,22 @@ suite('group-constructors', function() { - setup(function() { - document.timeline._players = []; - }); - - function simpleAnimationGroup() { - return new AnimationSequence([ - new Animation(document.body, [], 2000), - new AnimationGroup([ - new Animation(document.body, [], 2000), - new Animation(document.body, [], 1000) + function simpleGroupEffect() { + return new SequenceEffect([ + new KeyframeEffect(document.body, [], 2000), + new GroupEffect([ + new KeyframeEffect(document.body, [], 2000), + new KeyframeEffect(document.body, [], 1000) ]) ]); } - test('player getter for children in groups, and __internalPlayer, work as expected', function() { - var p = document.timeline.play(simpleAnimationGroup()); + test('animation getter for children in groups works as expected', function() { + var anim = document.timeline.play(simpleGroupEffect()); tick(0); - assert.equal(p.effect.animation, p); - assert.equal(p._childAnimations[0].effect.animation, p); - assert.equal(p._childAnimations[1].effect.animation, p); + assert.equal(anim.effect.animation, anim); + assert.equal(anim._childAnimations[0].effect.animation, anim); + assert.equal(anim._childAnimations[1].effect.animation, anim); tick(2100); - assert.equal(p._childAnimations[1]._childAnimations[0].effect.animation, p); - assert.equal(p._childAnimations[1]._childAnimations[1].effect.animation, p); + assert.equal(anim._childAnimations[1]._childAnimations[0].effect.animation, anim); + assert.equal(anim._childAnimations[1]._childAnimations[1].effect.animation, anim); }); }); From 44f1e5203de05af89c7002bd7d3d9640373b1cf3 Mon Sep 17 00:00:00 2001 From: rjwright Date: Tue, 24 Mar 2015 11:11:42 +1100 Subject: [PATCH 51/91] Rename for keyframe-effect-constructors.js, matrix-interpolation.js --- test/js/keyframe-effect-constructor.js | 46 +++++++++++++------------- test/js/matrix-interpolation.js | 6 ++-- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/test/js/keyframe-effect-constructor.js b/test/js/keyframe-effect-constructor.js index f4bbdcc4..2b7be6c4 100644 --- a/test/js/keyframe-effect-constructor.js +++ b/test/js/keyframe-effect-constructor.js @@ -1,15 +1,15 @@ -suite('animation-constructor', function() { +suite('keyframe-effect-constructor', function() { setup(function() { - document.timeline.getAnimations().forEach(function(player) { - player.cancel(); + document.timeline.getAnimations().forEach(function(animation) { + animation.cancel(); }); }); - test('Playing an Animation makes a Player', function() { - var animation = new Animation(document.body, [], 1000); + test('Playing a KeyframeEffect makes an Animation', function() { + var keyframeEffect = new KeyframeEffect(document.body, [], 1000); assert.equal(document.body.getAnimations().length, 0); - var player = document.timeline.play(animation); + var animation = document.timeline.play(keyframeEffect); tick(200); assert.equal(document.body.getAnimations().length, 1); @@ -17,7 +17,7 @@ suite('animation-constructor', function() { assert.equal(document.body.getAnimations().length, 0); }); - test('Setting the timing function on an Animation works', function() { + test('Setting the timing function on a KeyframeEffect works', function() { function leftAsNumber(target) { left = getComputedStyle(target).left; return Number(left.substring(0, left.length - 2)); @@ -30,11 +30,11 @@ suite('animation-constructor', function() { document.body.appendChild(target1); document.body.appendChild(target2); - var animation1 = new Animation(target1, [{left: '0px'}, {left: '50px'}], 1000); - var animation2 = new Animation(target2, [{left: '0px'}, {left: '50px'}], {duration: 1000, easing: 'ease-in'}); + var keyframeEffect1 = new KeyframeEffect(target1, [{left: '0px'}, {left: '50px'}], 1000); + var keyframeEffect2 = new KeyframeEffect(target2, [{left: '0px'}, {left: '50px'}], {duration: 1000, easing: 'ease-in'}); - var player1 = document.timeline.play(animation1); - var player2 = document.timeline.play(animation2); + var animation1 = document.timeline.play(keyframeEffect1); + var animation2 = document.timeline.play(keyframeEffect2); tick(0); assert.equal(leftAsNumber(target1), 0); @@ -49,32 +49,32 @@ suite('animation-constructor', function() { assert.closeTo(leftAsNumber(target2), 15.25, 1); }); - test('Timing is always converted to AnimationTimingInput', function() { + test('Timing is always converted to an AnimationEffectTiming', function() { var target = document.createElement('div'); document.body.appendChild(target); var keyframes = [{background: 'blue'}, {background: 'red'}]; - var animation = new Animation(target, keyframes, 200); - assert.equal(animation.timing.duration, 200); + var keyframeEffect = new KeyframeEffect(target, keyframes, 200); + assert.equal(keyframeEffect.timing.duration, 200); - animation = new Animation(target, keyframes); - assert.isDefined(animation.timing); + keyframeEffect = new KeyframeEffect(target, keyframes); + assert.isDefined(keyframeEffect.timing); - animation = new Animation(target, keyframes, {duration: 200}); - var group = new AnimationGroup([animation]); + keyframeEffect = new KeyframeEffect(target, keyframes, {duration: 200}); + var group = new GroupEffect([keyframeEffect]); assert.equal(group.timing.duration, 'auto'); }); - test('Handle null target on Animation', function() { - var animation = new Animation(null, function(tf) { + test('Handle null target for KeyframeEffect', function() { + var keyframeEffect = new KeyframeEffect(null, function(tf) { // noop }, 200); - var player = document.timeline.play(animation); - assert.isNotNull(player); + var animation = document.timeline.play(keyframeEffect); + assert.isNotNull(animation); tick(50); tick(150); - assert.equal(player.currentTime, 100); + assert.equal(animation.currentTime, 100); }); }); diff --git a/test/js/matrix-interpolation.js b/test/js/matrix-interpolation.js index 4de36f7c..8f8bb581 100644 --- a/test/js/matrix-interpolation.js +++ b/test/js/matrix-interpolation.js @@ -248,12 +248,12 @@ suite('matrix interpolation', function() { var target = document.createElement('div'); document.body.appendChild(target); - var player = target.animate( + var animation = target.animate( [{transform: 'translate(100px)'}, {transform: 'rotate(45deg)'}], 2000); - player.currentTime = 500; - player.pause(); + animation.currentTime = 500; + animation.pause(); var styleTransform = getComputedStyle(target).transform || getComputedStyle(target).webkitTransform; var elements = styleTransform.slice( From f81a5912b3ac960b0a18bef0ec2e2e0386ab988a Mon Sep 17 00:00:00 2001 From: rjwright Date: Tue, 24 Mar 2015 11:13:18 +1100 Subject: [PATCH 52/91] Rename for tick.js --- test/js/tick.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/js/tick.js b/test/js/tick.js index 7c657886..1c42dd42 100644 --- a/test/js/tick.js +++ b/test/js/tick.js @@ -1,15 +1,15 @@ suite('tick-tests', function() { setup(function() { webAnimations1.timeline._animations = []; }); - test('players are in effect but ticking stops once forward fill is reached', function() { + test('animations are in effect but ticking stops once forward fill is reached', function() { tick(90); - var player = document.body.animate([], {duration: 1000, fill: 'forwards'}); + var animation = document.body.animate([], {duration: 1000, fill: 'forwards'}); tick(100); tick(600); assert.equal(webAnimations1.timeline._animations.length, 1); assert.equal(isTicking(), true); tick(1100); - assert.equal(player.finished, true); + assert.equal(animation.finished, true); assert.equal(webAnimations1.timeline._animations.length, 1); assert.equal(isTicking(), false); }); From ac91db324ee3556b1ba2112b926608d069a470a5 Mon Sep 17 00:00:00 2001 From: rjwright Date: Tue, 24 Mar 2015 11:14:26 +1100 Subject: [PATCH 53/91] rename for timeline.js --- test/js/timeline.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/test/js/timeline.js b/test/js/timeline.js index 2875c58d..9590ab7f 100644 --- a/test/js/timeline.js +++ b/test/js/timeline.js @@ -4,21 +4,21 @@ suite('timeline-tests', function() { webAnimations1.timeline._animation = []; }); - test('no current players', function() { + test('no current animations', function() { assert.equal(document.timeline.getAnimations().length, 0); }); test('getAnimations', function() { tick(90); assert.equal(document.timeline.getAnimations().length, 0); - var player = document.body.animate([], {duration: 500, iterations: 1}); + var animation = document.body.animate([], {duration: 500, iterations: 1}); tick(300); assert.equal(document.timeline.getAnimations().length, 1); - var player2 = document.body.animate([], {duration: 1000}); + var animation2 = document.body.animate([], {duration: 1000}); assert.equal(document.timeline.getAnimations().length, 2); tick(800); - assert.equal(player.finished, true); + assert.equal(animation.finished, true); assert.equal(document.timeline.getAnimations().length, 1); tick(2000); assert.equal(document.timeline.getAnimations().length, 0); @@ -27,10 +27,10 @@ suite('timeline-tests', function() { test('getAnimations checks cancelled animation', function() { tick(90); assert.equal(document.timeline.getAnimations().length, 0); - var player = document.body.animate([], {duration: 500, iterations: 1}); + var animation = document.body.animate([], {duration: 500, iterations: 1}); tick(300); assert.equal(document.timeline.getAnimations().length, 1); - player.cancel(); + animation.cancel(); assert.equal(document.timeline.getAnimations().length, 0); }); }); From 8d3f8773b740a615526d1c071235ed56c49c26bb Mon Sep 17 00:00:00 2001 From: rjwright Date: Tue, 24 Mar 2015 11:16:38 +1100 Subject: [PATCH 54/91] rename for timing.js. Remove setup for this suite as it is not needed. --- test/js/timing.js | 34 +++++++++++++++------------------- 1 file changed, 15 insertions(+), 19 deletions(-) diff --git a/test/js/timing.js b/test/js/timing.js index 3eab8884..dae17d1d 100644 --- a/test/js/timing.js +++ b/test/js/timing.js @@ -1,51 +1,47 @@ suite('timing', function() { - setup(function() { - webAnimations1.timeline._players = []; - }); - test('pause and scrub', function() { - var player = document.body.animate([], { duration: 1000 }); - player.pause(); + var animation = document.body.animate([], { duration: 1000 }); + animation.pause(); - player.currentTime = 500; - assert.equal(player.currentTime, 500); + animation.currentTime = 500; + assert.equal(animation.currentTime, 500); }); test('pause, scrub and play', function() { var target = document.createElement('div'); document.body.appendChild(target); - var player = target.animate([ + var animation = target.animate([ { background: 'blue' }, { background: 'red' } ], { duration: 1000 }); tick(100); - player.pause(); + animation.pause(); - player.currentTime = 200; - // http://www.w3.org/TR/web-animations/#the-current-time-of-a-player + animation.currentTime = 200; + // http://www.w3.org/TR/web-animations/#the-current-time-of-an-animation // currentTime should now mean 'hold time' - this allows scrubbing. - assert.equal(player.currentTime, 200); - player.play(); + assert.equal(animation.currentTime, 200); + animation.play(); tick(200); tick(300); - assert.equal(player.currentTime, 300); - assert.equal(player.startTime, 0); + assert.equal(animation.currentTime, 300); + assert.equal(animation.startTime, 0); }); test('sanity-check NaN timing', function() { // This has no actual tests, but will infinite loop without fix. - var player = document.body.animate([], { + var animation = document.body.animate([], { duration: 2000, easing: 'ease-in' // fails only with cubic easing, not linear }); tick(100); - player.currentTime = NaN; + animation.currentTime = NaN; tick(200); - player = document.body.animate([], { duration: NaN, easing: 'ease-out' }); + animation = document.body.animate([], { duration: NaN, easing: 'ease-out' }); tick(300); }); From f0408b05d6e21008f76df6f0f8b62178cdd3bf11 Mon Sep 17 00:00:00 2001 From: rjwright Date: Tue, 24 Mar 2015 11:30:09 +1100 Subject: [PATCH 55/91] Remove use of 'source' terminology from tests. --- test/js/animation.js | 4 +- test/js/group-animation.js | 96 +++++++++++++++++++------------------- 2 files changed, 50 insertions(+), 50 deletions(-) diff --git a/test/js/animation.js b/test/js/animation.js index 0b24e88d..0624ee37 100644 --- a/test/js/animation.js +++ b/test/js/animation.js @@ -342,8 +342,8 @@ suite('animation', function() { document.body.removeChild(target); }); test('KeyframeEffect that hasn\'t been played has playState \'idle\'', function() { - var source = new webAnimations1KeyframeEffect(document.body, [], 1000); - var a = new webAnimations1Animation(source); + var effect = new webAnimations1KeyframeEffect(document.body, [], 1000); + var a = new webAnimations1Animation(effect); assert.equal(a.playState, 'idle'); }); test('playState works for a simple effect', function() { diff --git a/test/js/group-animation.js b/test/js/group-animation.js index e93eceab..d37c15f8 100644 --- a/test/js/group-animation.js +++ b/test/js/group-animation.js @@ -43,15 +43,15 @@ suite('group-animation', function() { ]); }; - var seqEmpty_source = sequenceEmpty(); + var seqEmpty_effect = sequenceEmpty(); var seqSimple_target = document.createElement('div'); this.elements.push(seqSimple_target); - var seqSimple_source = sequenceWithContent(seqSimple_target); + var seqSimple_effect = sequenceWithContent(seqSimple_target); var seqWithSeq_target = document.createElement('div'); this.elements.push(seqWithSeq_target); - var seqWithSeq_source = new SequenceEffect( + var seqWithSeq_effect = new SequenceEffect( [ marginEffect(seqWithSeq_target), colorEffect(seqWithSeq_target), @@ -60,24 +60,24 @@ suite('group-animation', function() { var seqWithGroup_target = document.createElement('div'); this.elements.push(seqWithGroup_target); - var seqWithGroup_source = new SequenceEffect( + var seqWithGroup_effect = new SequenceEffect( [ marginEffect(seqWithGroup_target), colorEffect(seqWithGroup_target), groupWithContent(seqWithGroup_target) ]); - var seqWithEmptyGroup_source = new SequenceEffect([groupEmpty()]); - var seqWithEmptySeq_source = new SequenceEffect([sequenceEmpty()]); + var seqWithEmptyGroup_effect = new SequenceEffect([groupEmpty()]); + var seqWithEmptySeq_effect = new SequenceEffect([sequenceEmpty()]); - var groupEmpty_source = groupEmpty(); + var groupEmpty_effect = groupEmpty(); var groupSimple_target = document.createElement('div'); - var groupSimple_source = groupWithContent(groupSimple_target); + var groupSimple_effect = groupWithContent(groupSimple_target); var groupWithSeq_target = document.createElement('div'); this.elements.push(groupWithSeq_target); - var groupWithSeq_source = new GroupEffect( + var groupWithSeq_effect = new GroupEffect( [ marginEffect(groupWithSeq_target), colorEffect(groupWithSeq_target), @@ -86,29 +86,29 @@ suite('group-animation', function() { var groupWithGroup_target = document.createElement('div'); this.elements.push(groupWithGroup_target); - var groupWithGroup_source = new GroupEffect( + var groupWithGroup_effect = new GroupEffect( [ marginEffect(groupWithGroup_target), colorEffect(groupWithGroup_target), groupWithContent(groupWithGroup_target) ]); - var groupWithEmptyGroup_source = new GroupEffect([groupEmpty()]); - var groupWithEmptySeq_source = new GroupEffect([sequenceEmpty()]); + var groupWithEmptyGroup_effect = new GroupEffect([groupEmpty()]); + var groupWithEmptySeq_effect = new GroupEffect([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.seqEmpty_effect = seqEmpty_effect; + this.seqSimple_effect = seqSimple_effect; + this.seqWithSeq_effect = seqWithSeq_effect; + this.seqWithGroup_effect = seqWithGroup_effect; + this.seqWithEmptyGroup_effect = seqWithEmptyGroup_effect; + this.seqWithEmptySeq_effect = seqWithEmptySeq_effect; - 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.groupEmpty_effect = groupEmpty_effect; + this.groupSimple_effect = groupSimple_effect; + this.groupWithSeq_effect = groupWithSeq_effect; + this.groupWithGroup_effect = groupWithGroup_effect; + this.groupWithEmptyGroup_effect = groupWithEmptyGroup_effect; + this.groupWithEmptySeq_effect = groupWithEmptySeq_effect; this.staticEffect = function(target, value, duration) { var keyframeEffect = new KeyframeEffect(target, [{marginLeft: value}, {marginLeft: value}], duration); @@ -486,21 +486,21 @@ suite('group-animation', function() { }); // FIXME: This test can be removed when this suite is finished. - test('sources are working for basic operations', function() { + test('effects are working for basic operations', function() { var animations = []; - animations.push(document.timeline.play(this.seqEmpty_source)); - animations.push(document.timeline.play(this.seqSimple_source)); - animations.push(document.timeline.play(this.seqWithSeq_source)); - animations.push(document.timeline.play(this.seqWithGroup_source)); - animations.push(document.timeline.play(this.seqWithEmptyGroup_source)); - animations.push(document.timeline.play(this.seqWithEmptySeq_source)); - - animations.push(document.timeline.play(this.groupEmpty_source)); - animations.push(document.timeline.play(this.groupSimple_source)); - animations.push(document.timeline.play(this.groupWithSeq_source)); - animations.push(document.timeline.play(this.groupWithGroup_source)); - animations.push(document.timeline.play(this.groupWithEmptyGroup_source)); - animations.push(document.timeline.play(this.groupWithEmptySeq_source)); + animations.push(document.timeline.play(this.seqEmpty_effect)); + animations.push(document.timeline.play(this.seqSimple_effect)); + animations.push(document.timeline.play(this.seqWithSeq_effect)); + animations.push(document.timeline.play(this.seqWithGroup_effect)); + animations.push(document.timeline.play(this.seqWithEmptyGroup_effect)); + animations.push(document.timeline.play(this.seqWithEmptySeq_effect)); + + animations.push(document.timeline.play(this.groupEmpty_effect)); + animations.push(document.timeline.play(this.groupSimple_effect)); + animations.push(document.timeline.play(this.groupWithSeq_effect)); + animations.push(document.timeline.play(this.groupWithGroup_effect)); + animations.push(document.timeline.play(this.groupWithEmptyGroup_effect)); + animations.push(document.timeline.play(this.groupWithEmptySeq_effect)); var length = animations.length; @@ -538,7 +538,7 @@ suite('group-animation', function() { }); test('pausing works as expected with an empty SequenceEffect', function() { - var animation = document.timeline.play(this.seqEmpty_source); + var animation = document.timeline.play(this.seqEmpty_effect); tick(0); assert.equal(animation.startTime, 0); assert.equal(animation.currentTime, 0); @@ -549,8 +549,8 @@ suite('group-animation', function() { }); test('pausing works as expected with a simple SequenceEffect', function() { - var animation = document.timeline.play(this.seqSimple_source); - var target = this.seqSimple_source.children[0].target; + var animation = document.timeline.play(this.seqSimple_effect); + var target = this.seqSimple_effect.children[0].target; tick(0); checkTimes(animation, [0, 0], [[0, 0], [500, -500]], 't = 0'); @@ -583,8 +583,8 @@ suite('group-animation', function() { }); test('pausing before tick works as expected with a simple SequenceEffect', function() { - var animation = document.timeline.play(this.seqSimple_source); - var target = this.seqSimple_source.children[0].target; + var animation = document.timeline.play(this.seqSimple_effect); + var target = this.seqSimple_effect.children[0].target; checkTimes(animation, [null, 0], [[null, 0], [null, -500]], 't = 0'); animation.pause(); @@ -601,7 +601,7 @@ suite('group-animation', function() { }); test('pausing and seeking before tick works as expected with a simple SequenceEffect', function() { - var animation = document.timeline.play(this.seqSimple_source); + var animation = document.timeline.play(this.seqSimple_effect); animation.pause(); animation.currentTime = 0; @@ -619,7 +619,7 @@ suite('group-animation', function() { }); test('pausing works as expected with an SequenceEffect inside an SequenceEffect', function() { - var animation = document.timeline.play(this.seqWithSeq_source); + var animation = document.timeline.play(this.seqWithSeq_effect); tick(0); checkTimes( animation, @@ -774,7 +774,7 @@ suite('group-animation', function() { }); test('pausing works as expected with a GroupEffect inside an SequenceEffect', function() { - var animation = document.timeline.play(this.seqWithGroup_source); + var animation = document.timeline.play(this.seqWithGroup_effect); tick(0); checkTimes( animation, @@ -921,7 +921,7 @@ suite('group-animation', function() { }); test('pausing works as expected with an empty SequenceEffect inside an SequenceEffect', function() { - var animation = document.timeline.play(this.seqWithEmptySeq_source); + var animation = document.timeline.play(this.seqWithEmptySeq_effect); tick(0); checkTimes( animation, @@ -936,7 +936,7 @@ suite('group-animation', function() { }); test('pausing works as expected with an empty GroupEffect inside an SequenceEffect', function() { - var animation = document.timeline.play(this.seqWithEmptyGroup_source); + var animation = document.timeline.play(this.seqWithEmptyGroup_effect); tick(0); checkTimes( animation, From 5477e71c50ede5a9702d06ca4da5fc09f5fee48e Mon Sep 17 00:00:00 2001 From: rjwright Date: Tue, 24 Mar 2015 11:40:49 +1100 Subject: [PATCH 56/91] simplify variable names in group-animations.js --- test/js/group-animation.js | 97 +++++++++++++++++++------------------- 1 file changed, 48 insertions(+), 49 deletions(-) diff --git a/test/js/group-animation.js b/test/js/group-animation.js index d37c15f8..9e794f52 100644 --- a/test/js/group-animation.js +++ b/test/js/group-animation.js @@ -43,15 +43,15 @@ suite('group-animation', function() { ]); }; - var seqEmpty_effect = sequenceEmpty(); + var emptySeq = sequenceEmpty(); var seqSimple_target = document.createElement('div'); this.elements.push(seqSimple_target); - var seqSimple_effect = sequenceWithContent(seqSimple_target); + var seqSimple = sequenceWithContent(seqSimple_target); var seqWithSeq_target = document.createElement('div'); this.elements.push(seqWithSeq_target); - var seqWithSeq_effect = new SequenceEffect( + var seqWithSeq = new SequenceEffect( [ marginEffect(seqWithSeq_target), colorEffect(seqWithSeq_target), @@ -60,24 +60,24 @@ suite('group-animation', function() { var seqWithGroup_target = document.createElement('div'); this.elements.push(seqWithGroup_target); - var seqWithGroup_effect = new SequenceEffect( + var seqWithGroup = new SequenceEffect( [ marginEffect(seqWithGroup_target), colorEffect(seqWithGroup_target), groupWithContent(seqWithGroup_target) ]); - var seqWithEmptyGroup_effect = new SequenceEffect([groupEmpty()]); - var seqWithEmptySeq_effect = new SequenceEffect([sequenceEmpty()]); + var seqWithEmptyGroup = new SequenceEffect([groupEmpty()]); + var seqWithEmptySeq = new SequenceEffect([sequenceEmpty()]); - var groupEmpty_effect = groupEmpty(); + var emptyGroup = groupEmpty(); var groupSimple_target = document.createElement('div'); - var groupSimple_effect = groupWithContent(groupSimple_target); + var groupSimple = groupWithContent(groupSimple_target); var groupWithSeq_target = document.createElement('div'); this.elements.push(groupWithSeq_target); - var groupWithSeq_effect = new GroupEffect( + var groutWithSeq = new GroupEffect( [ marginEffect(groupWithSeq_target), colorEffect(groupWithSeq_target), @@ -86,29 +86,29 @@ suite('group-animation', function() { var groupWithGroup_target = document.createElement('div'); this.elements.push(groupWithGroup_target); - var groupWithGroup_effect = new GroupEffect( + var groupWithGroup = new GroupEffect( [ marginEffect(groupWithGroup_target), colorEffect(groupWithGroup_target), groupWithContent(groupWithGroup_target) ]); - var groupWithEmptyGroup_effect = new GroupEffect([groupEmpty()]); - var groupWithEmptySeq_effect = new GroupEffect([sequenceEmpty()]); + var groupWithEmptyGroup = new GroupEffect([groupEmpty()]); + var groupWithEmptySeq = new GroupEffect([sequenceEmpty()]); - this.seqEmpty_effect = seqEmpty_effect; - this.seqSimple_effect = seqSimple_effect; - this.seqWithSeq_effect = seqWithSeq_effect; - this.seqWithGroup_effect = seqWithGroup_effect; - this.seqWithEmptyGroup_effect = seqWithEmptyGroup_effect; - this.seqWithEmptySeq_effect = seqWithEmptySeq_effect; + this.emptySeq = emptySeq; + this.seqSimple = seqSimple; + this.seqWithSeq = seqWithSeq; + this.seqWithGroup = seqWithGroup; + this.seqWithEmptyGroup = seqWithEmptyGroup; + this.seqWithEmptySeq = seqWithEmptySeq; - this.groupEmpty_effect = groupEmpty_effect; - this.groupSimple_effect = groupSimple_effect; - this.groupWithSeq_effect = groupWithSeq_effect; - this.groupWithGroup_effect = groupWithGroup_effect; - this.groupWithEmptyGroup_effect = groupWithEmptyGroup_effect; - this.groupWithEmptySeq_effect = groupWithEmptySeq_effect; + this.emptyGroup = emptyGroup; + this.groupSimple = groupSimple; + this.groutWithSeq = groutWithSeq; + this.groupWithGroup = groupWithGroup; + this.groupWithEmptyGroup = groupWithEmptyGroup; + this.groupWithEmptySeq = groupWithEmptySeq; this.staticEffect = function(target, value, duration) { var keyframeEffect = new KeyframeEffect(target, [{marginLeft: value}, {marginLeft: value}], duration); @@ -485,22 +485,21 @@ suite('group-animation', function() { // assert.equal(getComputedStyle(this.target).marginLeft, '0px'); }); - // FIXME: This test can be removed when this suite is finished. - test('effects are working for basic operations', function() { + test('basic animation operations are working', function() { var animations = []; - animations.push(document.timeline.play(this.seqEmpty_effect)); - animations.push(document.timeline.play(this.seqSimple_effect)); - animations.push(document.timeline.play(this.seqWithSeq_effect)); - animations.push(document.timeline.play(this.seqWithGroup_effect)); - animations.push(document.timeline.play(this.seqWithEmptyGroup_effect)); - animations.push(document.timeline.play(this.seqWithEmptySeq_effect)); - - animations.push(document.timeline.play(this.groupEmpty_effect)); - animations.push(document.timeline.play(this.groupSimple_effect)); - animations.push(document.timeline.play(this.groupWithSeq_effect)); - animations.push(document.timeline.play(this.groupWithGroup_effect)); - animations.push(document.timeline.play(this.groupWithEmptyGroup_effect)); - animations.push(document.timeline.play(this.groupWithEmptySeq_effect)); + animations.push(document.timeline.play(this.emptySeq)); + animations.push(document.timeline.play(this.seqSimple)); + animations.push(document.timeline.play(this.seqWithSeq)); + animations.push(document.timeline.play(this.seqWithGroup)); + animations.push(document.timeline.play(this.seqWithEmptyGroup)); + animations.push(document.timeline.play(this.seqWithEmptySeq)); + + animations.push(document.timeline.play(this.emptyGroup)); + animations.push(document.timeline.play(this.groupSimple)); + animations.push(document.timeline.play(this.groutWithSeq)); + animations.push(document.timeline.play(this.groupWithGroup)); + animations.push(document.timeline.play(this.groupWithEmptyGroup)); + animations.push(document.timeline.play(this.groupWithEmptySeq)); var length = animations.length; @@ -538,7 +537,7 @@ suite('group-animation', function() { }); test('pausing works as expected with an empty SequenceEffect', function() { - var animation = document.timeline.play(this.seqEmpty_effect); + var animation = document.timeline.play(this.emptySeq); tick(0); assert.equal(animation.startTime, 0); assert.equal(animation.currentTime, 0); @@ -549,8 +548,8 @@ suite('group-animation', function() { }); test('pausing works as expected with a simple SequenceEffect', function() { - var animation = document.timeline.play(this.seqSimple_effect); - var target = this.seqSimple_effect.children[0].target; + var animation = document.timeline.play(this.seqSimple); + var target = this.seqSimple.children[0].target; tick(0); checkTimes(animation, [0, 0], [[0, 0], [500, -500]], 't = 0'); @@ -583,8 +582,8 @@ suite('group-animation', function() { }); test('pausing before tick works as expected with a simple SequenceEffect', function() { - var animation = document.timeline.play(this.seqSimple_effect); - var target = this.seqSimple_effect.children[0].target; + var animation = document.timeline.play(this.seqSimple); + var target = this.seqSimple.children[0].target; checkTimes(animation, [null, 0], [[null, 0], [null, -500]], 't = 0'); animation.pause(); @@ -601,7 +600,7 @@ suite('group-animation', function() { }); test('pausing and seeking before tick works as expected with a simple SequenceEffect', function() { - var animation = document.timeline.play(this.seqSimple_effect); + var animation = document.timeline.play(this.seqSimple); animation.pause(); animation.currentTime = 0; @@ -619,7 +618,7 @@ suite('group-animation', function() { }); test('pausing works as expected with an SequenceEffect inside an SequenceEffect', function() { - var animation = document.timeline.play(this.seqWithSeq_effect); + var animation = document.timeline.play(this.seqWithSeq); tick(0); checkTimes( animation, @@ -774,7 +773,7 @@ suite('group-animation', function() { }); test('pausing works as expected with a GroupEffect inside an SequenceEffect', function() { - var animation = document.timeline.play(this.seqWithGroup_effect); + var animation = document.timeline.play(this.seqWithGroup); tick(0); checkTimes( animation, @@ -921,7 +920,7 @@ suite('group-animation', function() { }); test('pausing works as expected with an empty SequenceEffect inside an SequenceEffect', function() { - var animation = document.timeline.play(this.seqWithEmptySeq_effect); + var animation = document.timeline.play(this.seqWithEmptySeq); tick(0); checkTimes( animation, @@ -936,7 +935,7 @@ suite('group-animation', function() { }); test('pausing works as expected with an empty GroupEffect inside an SequenceEffect', function() { - var animation = document.timeline.play(this.seqWithEmptyGroup_effect); + var animation = document.timeline.play(this.seqWithEmptyGroup); tick(0); checkTimes( animation, From 4909893d068c959053e6fe1e547c9d1bf0e58076 Mon Sep 17 00:00:00 2001 From: rjwright Date: Wed, 25 Mar 2015 12:38:26 +1100 Subject: [PATCH 57/91] Renamed src files back to old names --- ...onstructor.js => animation-constructor.js} | 0 src/{effect-node.js => animation-node.js} | 0 src/animation.js | 221 ++++-------------- src/keyframe-effect.js | 65 ------ src/player.js | 202 ++++++++++++++++ ...ation.js => web-animations-next-player.js} | 0 6 files changed, 244 insertions(+), 244 deletions(-) rename src/{keyframe-effect-constructor.js => animation-constructor.js} (100%) rename src/{effect-node.js => animation-node.js} (100%) delete mode 100644 src/keyframe-effect.js create mode 100644 src/player.js rename src/{web-animations-next-animation.js => web-animations-next-player.js} (100%) diff --git a/src/keyframe-effect-constructor.js b/src/animation-constructor.js similarity index 100% rename from src/keyframe-effect-constructor.js rename to src/animation-constructor.js diff --git a/src/effect-node.js b/src/animation-node.js similarity index 100% rename from src/effect-node.js rename to src/animation-node.js diff --git a/src/animation.js b/src/animation.js index 43177ee0..006a03d1 100644 --- a/src/animation.js +++ b/src/animation.js @@ -12,191 +12,54 @@ // See the License for the specific language governing permissions and // limitations under the License. -(function(scope, testing) { +(function(shared, scope, testing) { - var sequenceNumber = 0; - - var AnimationEvent = function(target, currentTime, timelineTime) { - this.target = target; - this.currentTime = currentTime; - this.timelineTime = timelineTime; - - this.type = 'finish'; - this.bubbles = false; - this.cancelable = false; - this.currentTarget = target; - this.defaultPrevented = false; - this.eventPhase = Event.AT_TARGET; - this.timeStamp = Date.now(); - }; - - scope.Animation = function(effect) { - this._sequenceNumber = sequenceNumber++; - this._currentTime = 0; - this._startTime = null; - this.paused = false; - this._playbackRate = 1; - this._inTimeline = true; - this._finishedFlag = false; - this.onfinish = null; - this._finishHandlers = []; - this._effect = effect; - this._inEffect = this._effect._update(0); - this._idle = true; - this._currentTimePending = false; + scope.KeyframeEffect = function(target, effectInput, timingInput) { + var effectNode = scope.EffectNode(shared.normalizeTimingInput(timingInput)); + var keyframes = scope.convertEffectInput(effectInput); + var timeFraction; + var keyframeEffect = function() { + WEB_ANIMATIONS_TESTING && console.assert(typeof timeFraction !== 'undefined'); + keyframes(target, timeFraction); + }; + // Returns whether the keyframeEffect is in effect or not after the timing update. + keyframeEffect._update = function(localTime) { + timeFraction = effectNode(localTime); + return timeFraction !== null; + }; + keyframeEffect._clear = function() { + keyframes(target, null); + }; + keyframeEffect._hasSameTarget = function(otherTarget) { + return target === otherTarget; + }; + keyframeEffect._isCurrent = effectNode._isCurrent; + keyframeEffect._totalDuration = effectNode._totalDuration; + return keyframeEffect; }; - scope.Animation.prototype = { - _ensureAlive: function() { - this._inEffect = this._effect._update(this.currentTime); - if (!this._inTimeline && (this._inEffect || !this._finishedFlag)) { - this._inTimeline = true; - scope.timeline._animations.push(this); - } - }, - _tickCurrentTime: function(newTime, ignoreLimit) { - if (newTime != this._currentTime) { - this._currentTime = newTime; - if (this.finished && !ignoreLimit) - this._currentTime = this._playbackRate > 0 ? this._totalDuration : 0; - this._ensureAlive(); - } - }, - get currentTime() { - if (this._idle || this._currentTimePending) - return null; - return this._currentTime; - }, - set currentTime(newTime) { - newTime = +newTime; - if (isNaN(newTime)) - return; - scope.restart(); - if (!this.paused && this._startTime != null) { - this._startTime = this._timeline.currentTime - newTime / this._playbackRate; + scope.NullEffect = function(clear) { + var nullEffect = function() { + if (clear) { + clear(); + clear = null; } - this._currentTimePending = false; - if (this._currentTime == newTime) - return; - this._tickCurrentTime(newTime, true); - scope.invalidateEffects(); - }, - get startTime() { - return this._startTime; - }, - set startTime(newTime) { - newTime = +newTime; - if (isNaN(newTime)) - return; - if (this.paused || this._idle) - return; - this._startTime = newTime; - this._tickCurrentTime((this._timeline.currentTime - this._startTime) * this.playbackRate); - scope.invalidateEffects(); - }, - get playbackRate() { - return this._playbackRate; - }, - set playbackRate(value) { - var oldCurrentTime = this.currentTime; - this._playbackRate = value; - if (oldCurrentTime != null) { - this.currentTime = oldCurrentTime; - } - }, - get finished() { - return !this._idle && (this._playbackRate > 0 && this._currentTime >= this._totalDuration || - this._playbackRate < 0 && this._currentTime <= 0); - }, - get _totalDuration() { return this._effect._totalDuration; }, - get playState() { - if (this._idle) - return 'idle'; - if ((this._startTime == null && !this.paused && this.playbackRate != 0) || this._currentTimePending) - return 'pending'; - if (this.paused) - return 'paused'; - if (this.finished) - return 'finished'; - return 'running'; - }, - play: function() { - this.paused = false; - if (this.finished || this._idle) { - this._currentTime = this._playbackRate > 0 ? 0 : this._totalDuration; - this._startTime = null; - scope.invalidateEffects(); - } - this._finishedFlag = false; - scope.restart(); - this._idle = false; - this._ensureAlive(); - }, - pause: function() { - if (!this.finished && !this.paused && !this._idle) { - this._currentTimePending = true; - } - this._startTime = null; - this.paused = true; - }, - finish: function() { - if (this._idle) - return; - this.currentTime = this._playbackRate > 0 ? this._totalDuration : 0; - this._startTime = this._totalDuration - this.currentTime; - this._currentTimePending = false; - }, - cancel: function() { - this._inEffect = false; - this._idle = true; - this.currentTime = 0; - this._startTime = null; - }, - reverse: function() { - this._playbackRate *= -1; - this._startTime = null; - this.play(); - }, - addEventListener: function(type, handler) { - if (typeof handler == 'function' && type == 'finish') - this._finishHandlers.push(handler); - }, - removeEventListener: function(type, handler) { - if (type != 'finish') - return; - var index = this._finishHandlers.indexOf(handler); - if (index >= 0) - this._finishHandlers.splice(index, 1); - }, - _fireEvents: function(baseTime) { - var finished = this.finished; - if ((finished || this._idle) && !this._finishedFlag) { - var event = new AnimationEvent(this, this._currentTime, baseTime); - var handlers = this._finishHandlers.concat(this.onfinish ? [this.onfinish] : []); - setTimeout(function() { - handlers.forEach(function(handler) { - handler.call(event.target, event); - }); - }, 0); - } - this._finishedFlag = finished; - }, - _tick: function(timelineTime) { - if (!this._idle && !this.paused) { - if (this._startTime == null) - this.startTime = timelineTime - this._currentTime / this.playbackRate; - else if (!this.finished) - this._tickCurrentTime((timelineTime - this._startTime) * this.playbackRate); - } - - this._currentTimePending = false; - this._fireEvents(timelineTime); - return !this._idle && (this._inEffect || !this._finishedFlag); - }, + }; + nullEffect._update = function() { + return null; + }; + nullEffect._totalDuration = 0; + nullEffect._isCurrent = function() { + return false; + }; + nullEffect._hasSameTarget = function() { + return false; + }; + return nullEffect; }; if (WEB_ANIMATIONS_TESTING) { - testing.webAnimations1Animation = scope.Animation; + testing.webAnimations1KeyframeEffect = scope.KeyframeEffect; } -})(webAnimations1, webAnimationsTesting); +})(webAnimationsShared, webAnimations1, webAnimationsTesting); diff --git a/src/keyframe-effect.js b/src/keyframe-effect.js deleted file mode 100644 index 006a03d1..00000000 --- a/src/keyframe-effect.js +++ /dev/null @@ -1,65 +0,0 @@ -// Copyright 2014 Google Inc. All rights reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -(function(shared, scope, testing) { - - scope.KeyframeEffect = function(target, effectInput, timingInput) { - var effectNode = scope.EffectNode(shared.normalizeTimingInput(timingInput)); - var keyframes = scope.convertEffectInput(effectInput); - var timeFraction; - var keyframeEffect = function() { - WEB_ANIMATIONS_TESTING && console.assert(typeof timeFraction !== 'undefined'); - keyframes(target, timeFraction); - }; - // Returns whether the keyframeEffect is in effect or not after the timing update. - keyframeEffect._update = function(localTime) { - timeFraction = effectNode(localTime); - return timeFraction !== null; - }; - keyframeEffect._clear = function() { - keyframes(target, null); - }; - keyframeEffect._hasSameTarget = function(otherTarget) { - return target === otherTarget; - }; - keyframeEffect._isCurrent = effectNode._isCurrent; - keyframeEffect._totalDuration = effectNode._totalDuration; - return keyframeEffect; - }; - - scope.NullEffect = function(clear) { - var nullEffect = function() { - if (clear) { - clear(); - clear = null; - } - }; - nullEffect._update = function() { - return null; - }; - nullEffect._totalDuration = 0; - nullEffect._isCurrent = function() { - return false; - }; - nullEffect._hasSameTarget = function() { - return false; - }; - return nullEffect; - }; - - if (WEB_ANIMATIONS_TESTING) { - testing.webAnimations1KeyframeEffect = scope.KeyframeEffect; - } - -})(webAnimationsShared, webAnimations1, webAnimationsTesting); diff --git a/src/player.js b/src/player.js new file mode 100644 index 00000000..43177ee0 --- /dev/null +++ b/src/player.js @@ -0,0 +1,202 @@ +// Copyright 2014 Google Inc. All rights reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +(function(scope, testing) { + + var sequenceNumber = 0; + + var AnimationEvent = function(target, currentTime, timelineTime) { + this.target = target; + this.currentTime = currentTime; + this.timelineTime = timelineTime; + + this.type = 'finish'; + this.bubbles = false; + this.cancelable = false; + this.currentTarget = target; + this.defaultPrevented = false; + this.eventPhase = Event.AT_TARGET; + this.timeStamp = Date.now(); + }; + + scope.Animation = function(effect) { + this._sequenceNumber = sequenceNumber++; + this._currentTime = 0; + this._startTime = null; + this.paused = false; + this._playbackRate = 1; + this._inTimeline = true; + this._finishedFlag = false; + this.onfinish = null; + this._finishHandlers = []; + this._effect = effect; + this._inEffect = this._effect._update(0); + this._idle = true; + this._currentTimePending = false; + }; + + scope.Animation.prototype = { + _ensureAlive: function() { + this._inEffect = this._effect._update(this.currentTime); + if (!this._inTimeline && (this._inEffect || !this._finishedFlag)) { + this._inTimeline = true; + scope.timeline._animations.push(this); + } + }, + _tickCurrentTime: function(newTime, ignoreLimit) { + if (newTime != this._currentTime) { + this._currentTime = newTime; + if (this.finished && !ignoreLimit) + this._currentTime = this._playbackRate > 0 ? this._totalDuration : 0; + this._ensureAlive(); + } + }, + get currentTime() { + if (this._idle || this._currentTimePending) + return null; + return this._currentTime; + }, + set currentTime(newTime) { + newTime = +newTime; + if (isNaN(newTime)) + return; + scope.restart(); + if (!this.paused && this._startTime != null) { + this._startTime = this._timeline.currentTime - newTime / this._playbackRate; + } + this._currentTimePending = false; + if (this._currentTime == newTime) + return; + this._tickCurrentTime(newTime, true); + scope.invalidateEffects(); + }, + get startTime() { + return this._startTime; + }, + set startTime(newTime) { + newTime = +newTime; + if (isNaN(newTime)) + return; + if (this.paused || this._idle) + return; + this._startTime = newTime; + this._tickCurrentTime((this._timeline.currentTime - this._startTime) * this.playbackRate); + scope.invalidateEffects(); + }, + get playbackRate() { + return this._playbackRate; + }, + set playbackRate(value) { + var oldCurrentTime = this.currentTime; + this._playbackRate = value; + if (oldCurrentTime != null) { + this.currentTime = oldCurrentTime; + } + }, + get finished() { + return !this._idle && (this._playbackRate > 0 && this._currentTime >= this._totalDuration || + this._playbackRate < 0 && this._currentTime <= 0); + }, + get _totalDuration() { return this._effect._totalDuration; }, + get playState() { + if (this._idle) + return 'idle'; + if ((this._startTime == null && !this.paused && this.playbackRate != 0) || this._currentTimePending) + return 'pending'; + if (this.paused) + return 'paused'; + if (this.finished) + return 'finished'; + return 'running'; + }, + play: function() { + this.paused = false; + if (this.finished || this._idle) { + this._currentTime = this._playbackRate > 0 ? 0 : this._totalDuration; + this._startTime = null; + scope.invalidateEffects(); + } + this._finishedFlag = false; + scope.restart(); + this._idle = false; + this._ensureAlive(); + }, + pause: function() { + if (!this.finished && !this.paused && !this._idle) { + this._currentTimePending = true; + } + this._startTime = null; + this.paused = true; + }, + finish: function() { + if (this._idle) + return; + this.currentTime = this._playbackRate > 0 ? this._totalDuration : 0; + this._startTime = this._totalDuration - this.currentTime; + this._currentTimePending = false; + }, + cancel: function() { + this._inEffect = false; + this._idle = true; + this.currentTime = 0; + this._startTime = null; + }, + reverse: function() { + this._playbackRate *= -1; + this._startTime = null; + this.play(); + }, + addEventListener: function(type, handler) { + if (typeof handler == 'function' && type == 'finish') + this._finishHandlers.push(handler); + }, + removeEventListener: function(type, handler) { + if (type != 'finish') + return; + var index = this._finishHandlers.indexOf(handler); + if (index >= 0) + this._finishHandlers.splice(index, 1); + }, + _fireEvents: function(baseTime) { + var finished = this.finished; + if ((finished || this._idle) && !this._finishedFlag) { + var event = new AnimationEvent(this, this._currentTime, baseTime); + var handlers = this._finishHandlers.concat(this.onfinish ? [this.onfinish] : []); + setTimeout(function() { + handlers.forEach(function(handler) { + handler.call(event.target, event); + }); + }, 0); + } + this._finishedFlag = finished; + }, + _tick: function(timelineTime) { + if (!this._idle && !this.paused) { + if (this._startTime == null) + this.startTime = timelineTime - this._currentTime / this.playbackRate; + else if (!this.finished) + this._tickCurrentTime((timelineTime - this._startTime) * this.playbackRate); + } + + this._currentTimePending = false; + this._fireEvents(timelineTime); + return !this._idle && (this._inEffect || !this._finishedFlag); + }, + }; + + if (WEB_ANIMATIONS_TESTING) { + testing.webAnimations1Animation = scope.Animation; + } + +})(webAnimations1, webAnimationsTesting); diff --git a/src/web-animations-next-animation.js b/src/web-animations-next-player.js similarity index 100% rename from src/web-animations-next-animation.js rename to src/web-animations-next-player.js From 0b62a7cde02da90ae415d1b488abb8fa3055d2f3 Mon Sep 17 00:00:00 2001 From: rjwright Date: Wed, 25 Mar 2015 12:41:03 +1100 Subject: [PATCH 58/91] Rename tests files back to old names --- .../{keyframe-effect-constructor.js => animation-constructor.js} | 0 test/js/{effect-node.js => animation-node.js} | 0 ...oup-animation-finish-event.js => group-player-finish-event.js} | 0 test/js/{group-animation.js => group-player.js} | 0 test/js/{animation-finish-event.js => player-finish-event.js} | 0 test/js/{animation.js => player.js} | 0 6 files changed, 0 insertions(+), 0 deletions(-) rename test/js/{keyframe-effect-constructor.js => animation-constructor.js} (100%) rename test/js/{effect-node.js => animation-node.js} (100%) rename test/js/{group-animation-finish-event.js => group-player-finish-event.js} (100%) rename test/js/{group-animation.js => group-player.js} (100%) rename test/js/{animation-finish-event.js => player-finish-event.js} (100%) rename test/js/{animation.js => player.js} (100%) diff --git a/test/js/keyframe-effect-constructor.js b/test/js/animation-constructor.js similarity index 100% rename from test/js/keyframe-effect-constructor.js rename to test/js/animation-constructor.js diff --git a/test/js/effect-node.js b/test/js/animation-node.js similarity index 100% rename from test/js/effect-node.js rename to test/js/animation-node.js diff --git a/test/js/group-animation-finish-event.js b/test/js/group-player-finish-event.js similarity index 100% rename from test/js/group-animation-finish-event.js rename to test/js/group-player-finish-event.js diff --git a/test/js/group-animation.js b/test/js/group-player.js similarity index 100% rename from test/js/group-animation.js rename to test/js/group-player.js diff --git a/test/js/animation-finish-event.js b/test/js/player-finish-event.js similarity index 100% rename from test/js/animation-finish-event.js rename to test/js/player-finish-event.js diff --git a/test/js/animation.js b/test/js/player.js similarity index 100% rename from test/js/animation.js rename to test/js/player.js From 1de98bed076be945a51d4d3e8466e2ea6de18609 Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 23 Feb 2015 13:10:23 +1100 Subject: [PATCH 59/91] Set startTime to null when setting playbackRate Playback Rate partly working in groups. Fills don't work. Needs tests. don't set currentTime if it is null Fills are working better. Need to check them all again though. Fill modes are working and have been tested Play any player on setting playbackRate, not just child players (and then immediately set currentTime) Added a bunch of fixmes to revisit BEFORE LANDING. Improved PR setter test. added test case to make sure animations go back into effect when they should after PR setter. Change in-effect test so that it fails before this change. Test that setting playback rate doesn't put player into effect if it is finished Added test for sequence playback rate timing. Found bug that needs fixing. Additions to group PR setter test. Test that children go back into effect when their PR changes from -1 to 1. Removed redundent test case Started fill tests Simplifying this test as there will be lots cleaning up tests to eliminate copy paste consolidating tests further More of the same also test with reverse removed comment Fixed indenting in tests Reviewed comments. All seems fine. play a player after setting playback rate move timing update into branch for backwards-and-finished, and add comment. more comments about end-exclusivity Don't play an idle player after setting playbackRate Rename source files back to new names Rename test files to new test names --- src/animation.js | 233 +++++++++-- src/{animation-node.js => effect-node.js} | 0 src/group-constructors.js | 25 +- ...ctor.js => keyframe-effect-constructor.js} | 0 src/keyframe-effect.js | 65 +++ src/player.js | 202 ---------- ...er.js => web-animations-next-animation.js} | 25 +- ...ish-event.js => animation-finish-event.js} | 0 test/js/{player.js => animation.js} | 82 +++- test/js/{animation-node.js => effect-node.js} | 0 ...ent.js => group-animation-finish-event.js} | 0 .../{group-player.js => group-animation.js} | 380 +++++++++++++++++- ...ctor.js => keyframe-effect-constructor.js} | 0 13 files changed, 738 insertions(+), 274 deletions(-) rename src/{animation-node.js => effect-node.js} (100%) rename src/{animation-constructor.js => keyframe-effect-constructor.js} (100%) create mode 100644 src/keyframe-effect.js delete mode 100644 src/player.js rename src/{web-animations-next-player.js => web-animations-next-animation.js} (92%) rename test/js/{player-finish-event.js => animation-finish-event.js} (100%) rename test/js/{player.js => animation.js} (86%) rename test/js/{animation-node.js => effect-node.js} (100%) rename test/js/{group-player-finish-event.js => group-animation-finish-event.js} (100%) rename test/js/{group-player.js => group-animation.js} (69%) rename test/js/{animation-constructor.js => keyframe-effect-constructor.js} (100%) diff --git a/src/animation.js b/src/animation.js index 006a03d1..252e44fd 100644 --- a/src/animation.js +++ b/src/animation.js @@ -12,54 +12,203 @@ // See the License for the specific language governing permissions and // limitations under the License. -(function(shared, scope, testing) { +(function(scope, testing) { - scope.KeyframeEffect = function(target, effectInput, timingInput) { - var effectNode = scope.EffectNode(shared.normalizeTimingInput(timingInput)); - var keyframes = scope.convertEffectInput(effectInput); - var timeFraction; - var keyframeEffect = function() { - WEB_ANIMATIONS_TESTING && console.assert(typeof timeFraction !== 'undefined'); - keyframes(target, timeFraction); - }; - // Returns whether the keyframeEffect is in effect or not after the timing update. - keyframeEffect._update = function(localTime) { - timeFraction = effectNode(localTime); - return timeFraction !== null; - }; - keyframeEffect._clear = function() { - keyframes(target, null); - }; - keyframeEffect._hasSameTarget = function(otherTarget) { - return target === otherTarget; - }; - keyframeEffect._isCurrent = effectNode._isCurrent; - keyframeEffect._totalDuration = effectNode._totalDuration; - return keyframeEffect; + var sequenceNumber = 0; + + var AnimationEvent = function(target, currentTime, timelineTime) { + this.target = target; + this.currentTime = currentTime; + this.timelineTime = timelineTime; + + this.type = 'finish'; + this.bubbles = false; + this.cancelable = false; + this.currentTarget = target; + this.defaultPrevented = false; + this.eventPhase = Event.AT_TARGET; + this.timeStamp = Date.now(); + }; + + scope.Animation = function(effect) { + this._sequenceNumber = sequenceNumber++; + this._currentTime = 0; + this._startTime = null; + this.paused = false; + this._playbackRate = 1; + this._inTimeline = true; + this._finishedFlag = false; + this.onfinish = null; + this._finishHandlers = []; + this._effect = effect; + this._inEffect = this._effect._update(0); + this._idle = true; + this._currentTimePending = false; }; - scope.NullEffect = function(clear) { - var nullEffect = function() { - if (clear) { - clear(); - clear = null; + scope.Animation.prototype = { + _ensureAlive: function() { + // If a player is playing backwards and is not fill backwards/both then it should go out of + // effect when it reaches the start of its active interval (currentTime == 0). + if (this.playbackRate < 0 && this.currentTime === 0) { + this._inEffect = this._source._update(-1); + } else { + this._inEffect = this._source._update(this.currentTime); + } + if (!this._inTimeline && (this._inEffect || !this._finishedFlag)) { + this._inTimeline = true; + scope.timeline._animations.push(this); + } + }, + _tickCurrentTime: function(newTime, ignoreLimit) { + if (newTime != this._currentTime) { + this._currentTime = newTime; + if (this.finished && !ignoreLimit) + this._currentTime = this._playbackRate > 0 ? this._totalDuration : 0; + this._ensureAlive(); + } + }, + get currentTime() { + if (this._idle || this._currentTimePending) + return null; + return this._currentTime; + }, + set currentTime(newTime) { + newTime = +newTime; + if (isNaN(newTime)) + return; + scope.restart(); + if (!this.paused && this._startTime != null) { + this._startTime = this._timeline.currentTime - newTime / this._playbackRate; + } + this._currentTimePending = false; + if (this._currentTime == newTime) + return; + this._tickCurrentTime(newTime, true); + scope.invalidateEffects(); + }, + get startTime() { + return this._startTime; + }, + set startTime(newTime) { + newTime = +newTime; + if (isNaN(newTime)) + return; + if (this.paused || this._idle) + return; + this._startTime = newTime; + this._tickCurrentTime((this._timeline.currentTime - this._startTime) * this.playbackRate); + scope.invalidateEffects(); + }, + get playbackRate() { + return this._playbackRate; + }, + set playbackRate(value) { + if (value == this._playbackRate) { + return; } - }; - nullEffect._update = function() { - return null; - }; - nullEffect._totalDuration = 0; - nullEffect._isCurrent = function() { - return false; - }; - nullEffect._hasSameTarget = function() { - return false; - }; - return nullEffect; + var oldCurrentTime = this.currentTime; + this._playbackRate = value; + this._startTime = null; + if (this.playState != 'paused' && this.playState != 'idle') { + this.play(); + } + if (oldCurrentTime != null) { + this.currentTime = oldCurrentTime; + } + }, + get finished() { + return !this._idle && (this._playbackRate > 0 && this._currentTime >= this._totalDuration || + this._playbackRate < 0 && this._currentTime <= 0); + }, + get _totalDuration() { return this._effect._totalDuration; }, + get playState() { + if (this._idle) + return 'idle'; + if ((this._startTime == null && !this.paused && this.playbackRate != 0) || this._currentTimePending) + return 'pending'; + if (this.paused) + return 'paused'; + if (this.finished) + return 'finished'; + return 'running'; + }, + play: function() { + this.paused = false; + if (this.finished || this._idle) { + this._currentTime = this._playbackRate > 0 ? 0 : this._totalDuration; + this._startTime = null; + scope.invalidateEffects(); + } + this._finishedFlag = false; + scope.restart(); + this._idle = false; + this._ensureAlive(); + }, + pause: function() { + if (!this.finished && !this.paused && !this._idle) { + this._currentTimePending = true; + } + this._startTime = null; + this.paused = true; + }, + finish: function() { + if (this._idle) + return; + this.currentTime = this._playbackRate > 0 ? this._totalDuration : 0; + this._startTime = this._totalDuration - this.currentTime; + this._currentTimePending = false; + }, + cancel: function() { + this._inEffect = false; + this._idle = true; + this.currentTime = 0; + this._startTime = null; + }, + reverse: function() { + this.playbackRate *= -1; + this.play(); + }, + addEventListener: function(type, handler) { + if (typeof handler == 'function' && type == 'finish') + this._finishHandlers.push(handler); + }, + removeEventListener: function(type, handler) { + if (type != 'finish') + return; + var index = this._finishHandlers.indexOf(handler); + if (index >= 0) + this._finishHandlers.splice(index, 1); + }, + _fireEvents: function(baseTime) { + var finished = this.finished; + if ((finished || this._idle) && !this._finishedFlag) { + var event = new AnimationEvent(this, this._currentTime, baseTime); + var handlers = this._finishHandlers.concat(this.onfinish ? [this.onfinish] : []); + setTimeout(function() { + handlers.forEach(function(handler) { + handler.call(event.target, event); + }); + }, 0); + } + this._finishedFlag = finished; + }, + _tick: function(timelineTime) { + if (!this._idle && !this.paused) { + if (this._startTime == null) + this.startTime = timelineTime - this._currentTime / this.playbackRate; + else if (!this.finished) + this._tickCurrentTime((timelineTime - this._startTime) * this.playbackRate); + } + + this._currentTimePending = false; + this._fireEvents(timelineTime); + return !this._idle && (this._inEffect || !this._finishedFlag); + }, }; if (WEB_ANIMATIONS_TESTING) { - testing.webAnimations1KeyframeEffect = scope.KeyframeEffect; + testing.webAnimations1Animation = scope.Animation; } -})(webAnimationsShared, webAnimations1, webAnimationsTesting); +})(webAnimations1, webAnimationsTesting); diff --git a/src/animation-node.js b/src/effect-node.js similarity index 100% rename from src/animation-node.js rename to src/effect-node.js diff --git a/src/group-constructors.js b/src/group-constructors.js index 811bb254..aca8ddf9 100644 --- a/src/group-constructors.js +++ b/src/group-constructors.js @@ -57,16 +57,37 @@ scope.newUnderlyingAnimationForGroup = function(group) { var underlyingAnimation; + var timing = null; var ticker = function(tf) { var animation = underlyingAnimation._wrapper; - if (animation.playState == 'pending') return; + if (animation.playState == 'pending') + return; - if (!animation.effect) + if (!animation.source) return; + if (tf == null) { animation._removeChildren(); return; } + + // If the group has a negative playback rate and is not fill backwards/both, then it should go + // out of effect when it reaches the start of its active interval (tf == 0). If it is fill + // backwards/both then it should stay in effect. calculateTimeFraction will return 0 in the + // backwards-filling case, and null otherwise. + if (tf == 0 && animation.playbackRate < 0) { + if (!timing) { + timing = shared.normalizeTimingInput(animation.source.timing); + } + tf = shared.calculateTimeFraction(shared.calculateActiveDuration(timing), -1, timing); + if (isNaN(tf) || tf == null) { + animation._forEachChild(function(child) { + child.currentTime = -1; + }); + animation._removeAnimations(); + return; + } + } }; underlyingAnimation = scope.timeline.play(new scope.KeyframeEffect(null, ticker, group._timing)); diff --git a/src/animation-constructor.js b/src/keyframe-effect-constructor.js similarity index 100% rename from src/animation-constructor.js rename to src/keyframe-effect-constructor.js diff --git a/src/keyframe-effect.js b/src/keyframe-effect.js new file mode 100644 index 00000000..006a03d1 --- /dev/null +++ b/src/keyframe-effect.js @@ -0,0 +1,65 @@ +// Copyright 2014 Google Inc. All rights reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +(function(shared, scope, testing) { + + scope.KeyframeEffect = function(target, effectInput, timingInput) { + var effectNode = scope.EffectNode(shared.normalizeTimingInput(timingInput)); + var keyframes = scope.convertEffectInput(effectInput); + var timeFraction; + var keyframeEffect = function() { + WEB_ANIMATIONS_TESTING && console.assert(typeof timeFraction !== 'undefined'); + keyframes(target, timeFraction); + }; + // Returns whether the keyframeEffect is in effect or not after the timing update. + keyframeEffect._update = function(localTime) { + timeFraction = effectNode(localTime); + return timeFraction !== null; + }; + keyframeEffect._clear = function() { + keyframes(target, null); + }; + keyframeEffect._hasSameTarget = function(otherTarget) { + return target === otherTarget; + }; + keyframeEffect._isCurrent = effectNode._isCurrent; + keyframeEffect._totalDuration = effectNode._totalDuration; + return keyframeEffect; + }; + + scope.NullEffect = function(clear) { + var nullEffect = function() { + if (clear) { + clear(); + clear = null; + } + }; + nullEffect._update = function() { + return null; + }; + nullEffect._totalDuration = 0; + nullEffect._isCurrent = function() { + return false; + }; + nullEffect._hasSameTarget = function() { + return false; + }; + return nullEffect; + }; + + if (WEB_ANIMATIONS_TESTING) { + testing.webAnimations1KeyframeEffect = scope.KeyframeEffect; + } + +})(webAnimationsShared, webAnimations1, webAnimationsTesting); diff --git a/src/player.js b/src/player.js deleted file mode 100644 index 43177ee0..00000000 --- a/src/player.js +++ /dev/null @@ -1,202 +0,0 @@ -// Copyright 2014 Google Inc. All rights reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -(function(scope, testing) { - - var sequenceNumber = 0; - - var AnimationEvent = function(target, currentTime, timelineTime) { - this.target = target; - this.currentTime = currentTime; - this.timelineTime = timelineTime; - - this.type = 'finish'; - this.bubbles = false; - this.cancelable = false; - this.currentTarget = target; - this.defaultPrevented = false; - this.eventPhase = Event.AT_TARGET; - this.timeStamp = Date.now(); - }; - - scope.Animation = function(effect) { - this._sequenceNumber = sequenceNumber++; - this._currentTime = 0; - this._startTime = null; - this.paused = false; - this._playbackRate = 1; - this._inTimeline = true; - this._finishedFlag = false; - this.onfinish = null; - this._finishHandlers = []; - this._effect = effect; - this._inEffect = this._effect._update(0); - this._idle = true; - this._currentTimePending = false; - }; - - scope.Animation.prototype = { - _ensureAlive: function() { - this._inEffect = this._effect._update(this.currentTime); - if (!this._inTimeline && (this._inEffect || !this._finishedFlag)) { - this._inTimeline = true; - scope.timeline._animations.push(this); - } - }, - _tickCurrentTime: function(newTime, ignoreLimit) { - if (newTime != this._currentTime) { - this._currentTime = newTime; - if (this.finished && !ignoreLimit) - this._currentTime = this._playbackRate > 0 ? this._totalDuration : 0; - this._ensureAlive(); - } - }, - get currentTime() { - if (this._idle || this._currentTimePending) - return null; - return this._currentTime; - }, - set currentTime(newTime) { - newTime = +newTime; - if (isNaN(newTime)) - return; - scope.restart(); - if (!this.paused && this._startTime != null) { - this._startTime = this._timeline.currentTime - newTime / this._playbackRate; - } - this._currentTimePending = false; - if (this._currentTime == newTime) - return; - this._tickCurrentTime(newTime, true); - scope.invalidateEffects(); - }, - get startTime() { - return this._startTime; - }, - set startTime(newTime) { - newTime = +newTime; - if (isNaN(newTime)) - return; - if (this.paused || this._idle) - return; - this._startTime = newTime; - this._tickCurrentTime((this._timeline.currentTime - this._startTime) * this.playbackRate); - scope.invalidateEffects(); - }, - get playbackRate() { - return this._playbackRate; - }, - set playbackRate(value) { - var oldCurrentTime = this.currentTime; - this._playbackRate = value; - if (oldCurrentTime != null) { - this.currentTime = oldCurrentTime; - } - }, - get finished() { - return !this._idle && (this._playbackRate > 0 && this._currentTime >= this._totalDuration || - this._playbackRate < 0 && this._currentTime <= 0); - }, - get _totalDuration() { return this._effect._totalDuration; }, - get playState() { - if (this._idle) - return 'idle'; - if ((this._startTime == null && !this.paused && this.playbackRate != 0) || this._currentTimePending) - return 'pending'; - if (this.paused) - return 'paused'; - if (this.finished) - return 'finished'; - return 'running'; - }, - play: function() { - this.paused = false; - if (this.finished || this._idle) { - this._currentTime = this._playbackRate > 0 ? 0 : this._totalDuration; - this._startTime = null; - scope.invalidateEffects(); - } - this._finishedFlag = false; - scope.restart(); - this._idle = false; - this._ensureAlive(); - }, - pause: function() { - if (!this.finished && !this.paused && !this._idle) { - this._currentTimePending = true; - } - this._startTime = null; - this.paused = true; - }, - finish: function() { - if (this._idle) - return; - this.currentTime = this._playbackRate > 0 ? this._totalDuration : 0; - this._startTime = this._totalDuration - this.currentTime; - this._currentTimePending = false; - }, - cancel: function() { - this._inEffect = false; - this._idle = true; - this.currentTime = 0; - this._startTime = null; - }, - reverse: function() { - this._playbackRate *= -1; - this._startTime = null; - this.play(); - }, - addEventListener: function(type, handler) { - if (typeof handler == 'function' && type == 'finish') - this._finishHandlers.push(handler); - }, - removeEventListener: function(type, handler) { - if (type != 'finish') - return; - var index = this._finishHandlers.indexOf(handler); - if (index >= 0) - this._finishHandlers.splice(index, 1); - }, - _fireEvents: function(baseTime) { - var finished = this.finished; - if ((finished || this._idle) && !this._finishedFlag) { - var event = new AnimationEvent(this, this._currentTime, baseTime); - var handlers = this._finishHandlers.concat(this.onfinish ? [this.onfinish] : []); - setTimeout(function() { - handlers.forEach(function(handler) { - handler.call(event.target, event); - }); - }, 0); - } - this._finishedFlag = finished; - }, - _tick: function(timelineTime) { - if (!this._idle && !this.paused) { - if (this._startTime == null) - this.startTime = timelineTime - this._currentTime / this.playbackRate; - else if (!this.finished) - this._tickCurrentTime((timelineTime - this._startTime) * this.playbackRate); - } - - this._currentTimePending = false; - this._fireEvents(timelineTime); - return !this._idle && (this._inEffect || !this._finishedFlag); - }, - }; - - if (WEB_ANIMATIONS_TESTING) { - testing.webAnimations1Animation = scope.Animation; - } - -})(webAnimations1, webAnimationsTesting); diff --git a/src/web-animations-next-player.js b/src/web-animations-next-animation.js similarity index 92% rename from src/web-animations-next-player.js rename to src/web-animations-next-animation.js index b34d4be6..5a275c44 100644 --- a/src/web-animations-next-player.js +++ b/src/web-animations-next-animation.js @@ -86,10 +86,10 @@ }, _arrangeChildren: function(childAnimation, offset) { if (this.startTime === null) { - childAnimation.currentTime = this.currentTime - offset; + childAnimation.currentTime = this.currentTime - offset / this.playbackRate; childAnimation._startTime = null; - } else if (childAnimation.startTime !== this.startTime + offset) { - childAnimation.startTime = this.startTime + offset; + } else if (childAnimation.startTime !== this.startTime + offset / this.playbackRate) { + childAnimation.startTime = this.startTime + offset / this.playbackRate; } }, get paused() { @@ -137,10 +137,17 @@ return this._animation.playbackRate; }, set playbackRate(value) { + var oldCurrentTime = this.currentTime; this._animation.playbackRate = value; this._forEachChild(function(childAnimation) { childAnimation.playbackRate = value; }); + if (!this.paused) { + this.play(); + } + if (oldCurrentTime !== null) { + this.currentTime = oldCurrentTime; + } }, get finished() { return this._animation.finished; @@ -173,14 +180,14 @@ this._removeChildren(); }, reverse: function() { + var oldCurrentTime = this.currentTime; this._animation.reverse(); - scope.awaitStartTime(this); - this._register(); - this._forEachChild(function(child, offset) { - child.reverse(); - child.startTime = this.startTime + offset * this.playbackRate; - child.currentTime = this.currentTime + offset * this.playbackRate; + this._forEachChild(function(childAnimation) { + childAnimation.reverse(); }); + if (oldCurrentTime !== null) { + this.currentTime = oldCurrentTime; + } }, addEventListener: function(type, handler) { var wrapped = handler; diff --git a/test/js/player-finish-event.js b/test/js/animation-finish-event.js similarity index 100% rename from test/js/player-finish-event.js rename to test/js/animation-finish-event.js diff --git a/test/js/player.js b/test/js/animation.js similarity index 86% rename from test/js/player.js rename to test/js/animation.js index 0624ee37..18e7cf6f 100644 --- a/test/js/player.js +++ b/test/js/animation.js @@ -239,14 +239,80 @@ suite('animation', function() { assert.equal(a.startTime, null); assert.equal(a.currentTime, null); }); - test('setting playbackRate does preserves the current time', function() { - tick(900); - var a = document.body.animate([], 1000); - tick(1100); - var oldCurrentTime = a.currentTime; - a.playbackRate = 2; - assert.equal(a.playbackRate, 2); - assert.equal(a.currentTime, oldCurrentTime); + test('setting playbackRate sets startTime to null unless the playbackRate is not changing, ' + + 'preserves the current time', function() { + tick(0); + var a = document.body.animate([], 1000); + tick(1); + tick(11); + assert.equal(a.currentTime, 10); + + p.playbackRate = 2; + assert.equal(p.playbackRate, 2); + assert.equal(p.currentTime, 10); + assert.equal(p.startTime, null); + tick(12); + assert.equal(a.currentTime, 10); + assert.equal(a.startTime, 7); + tick(22); + assert.equal(a.currentTime, 30); + assert.equal(a.startTime, 7); + + a.playbackRate = -1; + assert.equal(a.playbackRate, -1); + assert.equal(a.currentTime, 30); + assert.equal(a.startTime, null); + tick(23); + assert.equal(a.currentTime, 30); + assert.equal(a.startTime, 53); + tick(33); + assert.equal(a.currentTime, 20); + assert.equal(a.startTime, 53); + + a.playbackRate = -1; + assert.equal(a.playbackRate, -1); + assert.equal(a.currentTime, 20); + assert.equal(a.startTime, 53); + tick(43); + assert.equal(a.currentTime, 10); + assert.equal(a.startTime, 53); + } + ); + test('setting playbackRate puts player back into effect if it is not finished', function() { + tick(0); + var p = document.body.animate([], 1000); + assert.equal(p.playbackRate, 1); + tick(1); + tick(1002); + assert.equal(p.currentTime, 1000); + + p.playbackRate = -1; + assert.equal(p.playbackRate, -1); + assert.equal(p.currentTime, 1000); + tick(1003); + assert.equal(p.currentTime, 1000); + tick(1503); + assert.equal(p.currentTime, 500); + }); + test('setting playbackRate does not put player back into effect if it is finished', function() { + tick(0); + var p = document.body.animate([], 1000); + assert.equal(p.playbackRate, 1); + tick(1); + tick(1002); + assert.equal(p.currentTime, 1000); + assert.equal(p.startTime, 1); + + p.playbackRate = 0.5; + assert.equal(p.playbackRate, 0.5); + assert.equal(p.currentTime, 1000); + assert.equal(p.startTime, null); + tick(1003); + assert.equal(p.currentTime, 1000); + assert.equal(p.startTime, -997); + tick(1503); + assert.equal(p.currentTime, 1000); + assert.equal(p.startTime, -997); }); test('finishing works as expected', function() { tick(1000); diff --git a/test/js/animation-node.js b/test/js/effect-node.js similarity index 100% rename from test/js/animation-node.js rename to test/js/effect-node.js diff --git a/test/js/group-player-finish-event.js b/test/js/group-animation-finish-event.js similarity index 100% rename from test/js/group-player-finish-event.js rename to test/js/group-animation-finish-event.js diff --git a/test/js/group-player.js b/test/js/group-animation.js similarity index 69% rename from test/js/group-player.js rename to test/js/group-animation.js index 9e794f52..e1870467 100644 --- a/test/js/group-player.js +++ b/test/js/group-animation.js @@ -136,10 +136,92 @@ suite('group-animation', function() { ]); this.target = document.createElement('div'); + this.target1 = document.createElement('div'); + this.target2 = document.createElement('div'); + this.target3 = document.createElement('div'); this.elements.push(this.target); + this.elements.push(this.target1); + this.elements.push(this.target2); + this.elements.push(this.target3); for (var i = 0; i < this.elements.length; i++) document.documentElement.appendChild(this.elements[i]); + + // Playback rate test helpers. + var target1 = this.target1; + var target2 = this.target2; + var target3 = this.target3; + target1.style.transform = 'translate(500px)'; + target2.style.transform = 'translate(500px)'; + target3.style.transform = 'translate(500px)'; + var underlyingPosition = 'matrix(1, 0, 0, 1, 500, 0)'; + var startPosition = 'matrix(1, 0, 0, 1, 0, 0)'; + var endPosition = 'matrix(1, 0, 0, 1, 300, 0)'; + this.prChildDuration = 100; + this.sequenceForPR = function(parentFill, childFill) { + return new SequenceEffect([ + new KeyframeEffect( + target1, + [{transform: 'translate(0,0)'}, {transform: 'translate(300px)'}], + {duration: this.prChildDuration, fill: childFill}), + new KeyframeEffect( + target2, + [{transform: 'translate(0,0)'}, {transform: 'translate(300px)'}], + {duration: this.prChildDuration, fill: childFill}), + new KeyframeEffect( + target3, + [{transform: 'translate(0,0)'}, {transform: 'translate(300px)'}], + {duration: this.prChildDuration, fill: childFill}) + ], + {fill: parentFill}); + }; + this.isUnderlyingPosition = function() { + assert.equal(getComputedStyle(target1).transform, startPosition); + assert.equal(getComputedStyle(target2).transform, underlyingPosition); + assert.equal(getComputedStyle(target3).transform, underlyingPosition); + }; + this.isFillingForwards = function() { + assert.equal(getComputedStyle(target1).transform, endPosition); + assert.equal(getComputedStyle(target2).transform, endPosition); + }; + this.isNotFillingForwards = function() { + assert.equal(getComputedStyle(target1).transform, underlyingPosition); + assert.equal(getComputedStyle(target2).transform, underlyingPosition); + }; + this.isFillingBackwardsDuring = function() { + assert.equal(getComputedStyle(target2).transform, startPosition); + assert.equal(getComputedStyle(target3).transform, startPosition); + }; + this.isNotFillingBackwardsDuring = function() { + assert.equal(getComputedStyle(target2).transform, underlyingPosition); + assert.equal(getComputedStyle(target3).transform, underlyingPosition); + }; + this.isFillingBackwards = function() { + assert.equal(getComputedStyle(target1).transform, startPosition); + assert.equal(getComputedStyle(target2).transform, startPosition); + assert.equal(getComputedStyle(target3).transform, startPosition); + }; + this.isNotFillingBackwards = function() { + assert.equal(getComputedStyle(target1).transform, underlyingPosition); + assert.equal(getComputedStyle(target2).transform, underlyingPosition); + assert.equal(getComputedStyle(target3).transform, underlyingPosition); + }; + this.checkFills = function(parentFillMode, childFillMode, startFill, normalFill, reverseFill, endFill, reverse) { + var animation = document.timeline.play(this.sequenceForPR(parentFillMode, childFillMode)); + tick(0); + startFill(); + tick(2 * this.prChildDuration); + normalFill(); + tick(this.prChildDuration * 2.5); + reverse ? animation.reverse() : animation.playbackRate *= -1; + tick(3.5 * this.prChildDuration); + tick(5 * this.prChildDuration); + reverseFill(); + tick(6); + tick(7.5 * this.prChildDuration); + endFill(); + animation.cancel(); + }; }); teardown(function() { @@ -387,18 +469,294 @@ suite('group-animation', function() { this.target.parent.removeChild(target); }); - test('setting the playbackRate on group animations', function() { - var group = new GroupEffect([ - new KeyframeEffect(null, [], 1234), - new KeyframeEffect(null, [], 1234), - ]); - var a = document.timeline.play(group); - a.playbackRate = 2; - assert.equal(a._animation.playbackRate, 2, 'Updates the playbackRate of the inner animation'); - a._childAnimations.forEach(function(childAnimation) { - assert.equal(childAnimation.playbackRate, 2, 'It also updates the child animations'); - }); + test('Fill modes work for sequence fill both with children none after setting playbackRate from positive to negative.', function() { + this.checkFills( + 'both', + 'none', + this.isUnderlyingPosition, + this.isNotFillingForwards, + this.isNotFillingBackwardsDuring, + this.isNotFillingBackwards, + false + ); + }); + test('Fill modes work for sequence fill both with children both after setting playbackRate from positive to negative.', function() { + this.checkFills( + 'both', + 'both', + this.isFillingBackwards, + this.isFillingForwards, + this.isFillingBackwardsDuring, + this.isFillingBackwards, + false + ); + }); + test('Fill modes work for sequence fill both with children backwards after setting playbackRate from positive to negative.', function() { + this.checkFills( + 'both', + 'backwards', + this.isFillingBackwards, + this.isNotFillingForwards, + this.isFillingBackwardsDuring, + this.isFillingBackwards, + false + ); + }); + test('Fill modes work for sequence fill both with children forwards after setting playbackRate from positive to negative.', function() { + this.checkFills( + 'both', + 'forwards', + this.isUnderlyingPosition, + this.isFillingForwards, + this.isNotFillingBackwardsDuring, + this.isNotFillingBackwards, + false + ); + }); + test('Fill modes work for sequence fill none with children fill none after setting playbackRate from positive to negative.', function() { + this.checkFills( + 'none', + 'none', + this.isUnderlyingPosition, + this.isNotFillingForwards, + this.isNotFillingBackwardsDuring, + this.isNotFillingBackwards, + false + ); }); + test('Fill modes work for sequence fill none with children fill both after setting playbackRate from positive to negative.', function() { + this.checkFills( + 'none', + 'both', + this.isFillingBackwards, + this.isFillingForwards, + this.isFillingBackwardsDuring, + this.isNotFillingBackwards, + false + ); + }); + test('Fill modes work for sequence fill none with children fill backwards after setting playbackRate from positive to negative.', function() { + this.checkFills( + 'none', + 'backwards', + this.isFillingBackwards, + this.isNotFillingForwards, + this.isFillingBackwardsDuring, + this.isNotFillingBackwards, + false + ); + }); + test('Fill modes work for sequence fill none with children fill forwards after setting playbackRate from positive to negative.', function() { + this.checkFills( + 'none', + 'forwards', + this.isUnderlyingPosition, + this.isFillingForwards, + this.isNotFillingBackwardsDuring, + this.isNotFillingBackwards, + false + ); + }); + + test('Fill modes work for sequence fill both with children none after reverse.', function() { + this.checkFills( + 'both', + 'none', + this.isUnderlyingPosition, + this.isNotFillingForwards, + this.isNotFillingBackwardsDuring, + this.isNotFillingBackwards, + true + ); + }); + test('Fill modes work for sequence fill both with children both after reverse.', function() { + this.checkFills( + 'both', + 'both', + this.isFillingBackwards, + this.isFillingForwards, + this.isFillingBackwardsDuring, + this.isFillingBackwards, + true + ); + }); + test('Fill modes work for sequence fill both with children backwards after reverse.', function() { + this.checkFills( + 'both', + 'backwards', + this.isFillingBackwards, + this.isNotFillingForwards, + this.isFillingBackwardsDuring, + this.isFillingBackwards, + true + ); + }); + test('Fill modes work for sequence fill both with children forwards after reverse.', function() { + this.checkFills( + 'both', + 'forwards', + this.isUnderlyingPosition, + this.isFillingForwards, + this.isNotFillingBackwardsDuring, + this.isNotFillingBackwards, + true + ); + }); + test('Fill modes work for sequence fill none with children fill none after reverse.', function() { + this.checkFills( + 'none', + 'none', + this.isUnderlyingPosition, + this.isNotFillingForwards, + this.isNotFillingBackwardsDuring, + this.isNotFillingBackwards, + true + ); + }); + test('Fill modes work for sequence fill none with children fill both after reverse.', function() { + this.checkFills( + 'none', + 'both', + this.isFillingBackwards, + this.isFillingForwards, + this.isFillingBackwardsDuring, + this.isNotFillingBackwards, + true + ); + }); + test('Fill modes work for sequence fill none with children fill backwards after reverse.', function() { + this.checkFills( + 'none', + 'backwards', + this.isFillingBackwards, + this.isNotFillingForwards, + this.isFillingBackwardsDuring, + this.isNotFillingBackwards, + true + ); + }); + test('Fill modes work for sequence fill none with children fill forwards after reverse.', function() { + this.checkFills( + 'none', + 'forwards', + this.isUnderlyingPosition, + this.isFillingForwards, + this.isNotFillingBackwardsDuring, + this.isNotFillingBackwards, + true + ); + }); + + test('Setting the playbackRate on group animations updates child timing. ' + + 'Any children who are not finished go into effect.', function() { + var group = new SequenceEffect([ + new KeyframeEffect(null, [], 1000), + new KeyframeEffect(null, [], 1000), + ]); + var a = document.timeline.play(group); + tick(0); + + a.playbackRate = 2; + assert.equal(a._animation.playbackRate, 2, 'Updates the playbackRate of the inner animation'); + a._childAnimations.forEach(function(childAnimation) { + assert.equal(childAnimation.playbackRate, 2, 'It also updates the child animations'); + }); + assert.equal(a.currentTime, 0); + assert.equal(a._childAnimations[0].currentTime, 0); + assert.equal(a._childAnimations[1].currentTime, -1000); + assert.equal(a.startTime, null); + assert.equal(a._childAnimations[0].startTime, null); + assert.equal(a._childAnimations[1].startTime, null); + + tick(1); + assert.equal(a.currentTime, 0); + assert.equal(a._childAnimations[0].currentTime, 0); + assert.equal(a._childAnimations[1].currentTime, -1000); + assert.equal(a.startTime, 1); + assert.equal(a._childAnimations[0].startTime, 1); + assert.equal(a._childAnimations[1].startTime, 501); + + tick(601); + assert.equal(a.currentTime, 1200); + assert.equal(a._childAnimations[0].currentTime, 1000); + assert.equal(a._childAnimations[1].currentTime, 200); + assert.equal(a.startTime, 1); + assert.equal(a._childAnimations[0].startTime, 1); + assert.equal(a._childAnimations[1].startTime, 501); + + tick(1101); + assert.equal(a.currentTime, 2000); + assert.equal(a._childAnimations[0].currentTime, 1000); + assert.equal(a._childAnimations[1].currentTime, 1000); + assert.equal(a.startTime, 1); + assert.equal(a._childAnimations[0].startTime, 1); + assert.equal(a._childAnimations[1].startTime, 501); + + a.playbackRate = -1; + assert.equal(a._animation.playbackRate, -1, 'Updates the playbackRate of the inner animation'); + a._childAnimations.forEach(function(childAnimation) { + assert.equal(childAnimation.playbackRate, -1, 'It also updates the child animations'); + }); + assert.equal(a.currentTime, 2000); + assert.equal(a._childAnimations[0].currentTime, 2000); + assert.equal(a._childAnimations[1].currentTime, 1000); + assert.equal(a.startTime, null); + assert.equal(a._childAnimations[0].startTime, null); + assert.equal(a._childAnimations[1].startTime, null); + + tick(1102); + assert.equal(a.currentTime, 2000); + assert.equal(a._childAnimations[0].currentTime, 2000); + assert.equal(a._childAnimations[1].currentTime, 1000); + assert.equal(a.startTime, 3102); + assert.equal(a._childAnimations[0].startTime, 3102); + assert.equal(a._childAnimations[1].startTime, 2102); + + tick(1602); + assert.equal(a.currentTime, 1500); + assert.equal(a._childAnimations[0].currentTime, 1500); + assert.equal(a._childAnimations[1].currentTime, 500); + assert.equal(a.startTime, 3102); + assert.equal(a._childAnimations[0].startTime, 3102); + assert.equal(a._childAnimations[1].startTime, 2102); + + tick(3103); + assert.equal(a.currentTime, 0); + assert.equal(a._childAnimations[0].currentTime, 0); + assert.equal(a._childAnimations[1].currentTime, 0); + assert.equal(a.startTime, 3102); + assert.equal(a._childAnimations[0].startTime, 3102); + assert.equal(a._childAnimations[1].startTime, 2102); + + a.playbackRate = 1; + assert.equal(a._animation.playbackRate, 1, 'Updates the playbackRate of the inner animation'); + a._childAnimations.forEach(function(childAnimation) { + assert.equal(childAnimation.playbackRate, 1, 'It also updates the child animations'); + }); + assert.equal(a.currentTime, 0); + assert.equal(a._childAnimations[0].currentTime, 0); + assert.equal(a._childAnimations[1].currentTime, -1000); + assert.equal(a.startTime, null); + assert.equal(a._childAnimations[0].startTime, null); + assert.equal(a._childAnimations[1].startTime, null); + + tick(3104); + assert.equal(a.currentTime, 0); + assert.equal(a._childAnimations[0].currentTime, 0); + assert.equal(a._childAnimations[1].currentTime, -1000); + assert.equal(a.startTime, 3104); + assert.equal(a._childAnimations[0].startTime, 3104); + assert.equal(a._childAnimations[1].startTime, 4104); + + tick(3604); + assert.equal(a.currentTime, 500); + assert.equal(a._childAnimations[0].currentTime, 500); + assert.equal(a._childAnimations[1].currentTime, -500); + assert.equal(a.startTime, 3104); + assert.equal(a._childAnimations[0].startTime, 3104); + assert.equal(a._childAnimations[1].startTime, 4104); + } + ); test('delays on groups work correctly', function() { // 444 diff --git a/test/js/animation-constructor.js b/test/js/keyframe-effect-constructor.js similarity index 100% rename from test/js/animation-constructor.js rename to test/js/keyframe-effect-constructor.js From 1dd93f2ea81bd0882e9eb895b4821c2ab7f1f05a Mon Sep 17 00:00:00 2001 From: rjwright Date: Wed, 25 Mar 2015 13:34:57 +1100 Subject: [PATCH 60/91] Fix comment terminology --- src/animation.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/animation.js b/src/animation.js index 252e44fd..0b9bb63f 100644 --- a/src/animation.js +++ b/src/animation.js @@ -48,8 +48,9 @@ scope.Animation.prototype = { _ensureAlive: function() { - // If a player is playing backwards and is not fill backwards/both then it should go out of - // effect when it reaches the start of its active interval (currentTime == 0). + // If an animation is playing backwards and is not fill backwards/both + // then it should go out of effect when it reaches the start of its + // active interval (currentTime == 0). if (this.playbackRate < 0 && this.currentTime === 0) { this._inEffect = this._source._update(-1); } else { From 4f17136badac388ff96373e6e9fa7179b94e610b Mon Sep 17 00:00:00 2001 From: rjwright Date: Wed, 25 Mar 2015 13:38:53 +1100 Subject: [PATCH 61/91] Don't play an animation on setting PR if it is idle --- src/web-animations-next-animation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/web-animations-next-animation.js b/src/web-animations-next-animation.js index 5a275c44..c21c109b 100644 --- a/src/web-animations-next-animation.js +++ b/src/web-animations-next-animation.js @@ -142,7 +142,7 @@ this._forEachChild(function(childAnimation) { childAnimation.playbackRate = value; }); - if (!this.paused) { + if (this.playState != 'paused' && this.playState != 'idle') { this.play(); } if (oldCurrentTime !== null) { From 9896a5e7608098c2210a9aa6a838a80e3a8c522e Mon Sep 17 00:00:00 2001 From: rjwright Date: Wed, 25 Mar 2015 13:48:18 +1100 Subject: [PATCH 62/91] source -> effect --- src/animation.js | 4 ++-- src/group-constructors.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/animation.js b/src/animation.js index 0b9bb63f..ecc77d70 100644 --- a/src/animation.js +++ b/src/animation.js @@ -52,9 +52,9 @@ // then it should go out of effect when it reaches the start of its // active interval (currentTime == 0). if (this.playbackRate < 0 && this.currentTime === 0) { - this._inEffect = this._source._update(-1); + this._inEffect = this._effect._update(-1); } else { - this._inEffect = this._source._update(this.currentTime); + this._inEffect = this._effect._update(this.currentTime); } if (!this._inTimeline && (this._inEffect || !this._finishedFlag)) { this._inTimeline = true; diff --git a/src/group-constructors.js b/src/group-constructors.js index aca8ddf9..a7f707ca 100644 --- a/src/group-constructors.js +++ b/src/group-constructors.js @@ -63,7 +63,7 @@ if (animation.playState == 'pending') return; - if (!animation.source) + if (!animation.effect) return; if (tf == null) { @@ -77,7 +77,7 @@ // backwards-filling case, and null otherwise. if (tf == 0 && animation.playbackRate < 0) { if (!timing) { - timing = shared.normalizeTimingInput(animation.source.timing); + timing = shared.normalizeTimingInput(animation.effect.timing); } tf = shared.calculateTimeFraction(shared.calculateActiveDuration(timing), -1, timing); if (isNaN(tf) || tf == null) { From c2bd331421d625ff48238f0a54b95e0645895bc7 Mon Sep 17 00:00:00 2001 From: rjwright Date: Wed, 25 Mar 2015 13:56:20 +1100 Subject: [PATCH 63/91] Small changes after rebase --- src/group-constructors.js | 2 +- test/js/animation.js | 52 +++++++++++++++++++-------------------- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/src/group-constructors.js b/src/group-constructors.js index a7f707ca..1700dde7 100644 --- a/src/group-constructors.js +++ b/src/group-constructors.js @@ -84,7 +84,7 @@ animation._forEachChild(function(child) { child.currentTime = -1; }); - animation._removeAnimations(); + animation._removeChildren(); return; } } diff --git a/test/js/animation.js b/test/js/animation.js index 18e7cf6f..aa57d379 100644 --- a/test/js/animation.js +++ b/test/js/animation.js @@ -247,10 +247,10 @@ suite('animation', function() { tick(11); assert.equal(a.currentTime, 10); - p.playbackRate = 2; - assert.equal(p.playbackRate, 2); - assert.equal(p.currentTime, 10); - assert.equal(p.startTime, null); + a.playbackRate = 2; + assert.equal(a.playbackRate, 2); + assert.equal(a.currentTime, 10); + assert.equal(a.startTime, null); tick(12); assert.equal(a.currentTime, 10); assert.equal(a.startTime, 7); @@ -278,41 +278,41 @@ suite('animation', function() { assert.equal(a.startTime, 53); } ); - test('setting playbackRate puts player back into effect if it is not finished', function() { + test('setting playbackRate puts animation back into effect if it is not finished', function() { tick(0); - var p = document.body.animate([], 1000); - assert.equal(p.playbackRate, 1); + var a = document.body.animate([], 1000); + assert.equal(a.playbackRate, 1); tick(1); tick(1002); - assert.equal(p.currentTime, 1000); + assert.equal(a.currentTime, 1000); - p.playbackRate = -1; - assert.equal(p.playbackRate, -1); - assert.equal(p.currentTime, 1000); + a.playbackRate = -1; + assert.equal(a.playbackRate, -1); + assert.equal(a.currentTime, 1000); tick(1003); - assert.equal(p.currentTime, 1000); + assert.equal(a.currentTime, 1000); tick(1503); - assert.equal(p.currentTime, 500); + assert.equal(a.currentTime, 500); }); - test('setting playbackRate does not put player back into effect if it is finished', function() { + test('setting playbackRate does not put animation back into effect if it is finished', function() { tick(0); - var p = document.body.animate([], 1000); - assert.equal(p.playbackRate, 1); + var a = document.body.animate([], 1000); + assert.equal(a.playbackRate, 1); tick(1); tick(1002); - assert.equal(p.currentTime, 1000); - assert.equal(p.startTime, 1); + assert.equal(a.currentTime, 1000); + assert.equal(a.startTime, 1); - p.playbackRate = 0.5; - assert.equal(p.playbackRate, 0.5); - assert.equal(p.currentTime, 1000); - assert.equal(p.startTime, null); + a.playbackRate = 0.5; + assert.equal(a.playbackRate, 0.5); + assert.equal(a.currentTime, 1000); + assert.equal(a.startTime, null); tick(1003); - assert.equal(p.currentTime, 1000); - assert.equal(p.startTime, -997); + assert.equal(a.currentTime, 1000); + assert.equal(a.startTime, -997); tick(1503); - assert.equal(p.currentTime, 1000); - assert.equal(p.startTime, -997); + assert.equal(a.currentTime, 1000); + assert.equal(a.startTime, -997); }); test('finishing works as expected', function() { tick(1000); From c6f7ec158cf6ba38684682de649c4f85cf18a6f4 Mon Sep 17 00:00:00 2001 From: rjwright Date: Thu, 26 Mar 2015 13:18:59 +1100 Subject: [PATCH 64/91] Rename for get-animations testharness test. --- test/blink/get-animation-players.html | 132 +++++++++++++------------- 1 file changed, 66 insertions(+), 66 deletions(-) diff --git a/test/blink/get-animation-players.html b/test/blink/get-animation-players.html index bbeae414..878ea51a 100644 --- a/test/blink/get-animation-players.html +++ b/test/blink/get-animation-players.html @@ -12,79 +12,79 @@ var element = document.getElementById('element'); test(function() { - assert_equals(document.timeline.getAnimationPlayers().length, 0); - assert_equals(container.getAnimationPlayers().length, 0); - assert_equals(element.getAnimationPlayers().length, 0); + assert_equals(document.timeline.getAnimations().length, 0); + assert_equals(container.getAnimations().length, 0); + assert_equals(element.getAnimations().length, 0); - var player = element.animate([], 1000); - assert_equals(document.timeline.getAnimationPlayers().length, 1); - assert_equals(document.timeline.getAnimationPlayers()[0], player); + var animation = element.animate([], 1000); + assert_equals(document.timeline.getAnimations().length, 1); + assert_equals(document.timeline.getAnimations()[0], animation); - var player2 = container.animate([], 1000); - assert_equals(document.timeline.getAnimationPlayers().length, 2); - assert_equals(document.timeline.getAnimationPlayers()[0], player); - assert_equals(document.timeline.getAnimationPlayers()[1], player2); + var animation2 = container.animate([], 1000); + assert_equals(document.timeline.getAnimations().length, 2); + assert_equals(document.timeline.getAnimations()[0], animation); + assert_equals(document.timeline.getAnimations()[1], animation2); - player.finish(); - assert_equals(document.timeline.getAnimationPlayers().length, 1); - assert_equals(document.timeline.getAnimationPlayers()[0], player2); + animation.finish(); + assert_equals(document.timeline.getAnimations().length, 1); + assert_equals(document.timeline.getAnimations()[0], animation2); - player2.finish(); - assert_equals(document.timeline.getAnimationPlayers().length, 0); -}, 'Timeline getAnimationPlayers()'); + animation2.finish(); + assert_equals(document.timeline.getAnimations().length, 0); +}, 'Timeline getAnimations()'); test(function() { - assert_equals(document.timeline.getAnimationPlayers().length, 0); - assert_equals(container.getAnimationPlayers().length, 0); - assert_equals(element.getAnimationPlayers().length, 0); - - var player = element.animate([], 1000); - assert_equals(document.timeline.getAnimationPlayers().length, 1); - assert_equals(document.timeline.getAnimationPlayers()[0], player); - assert_equals(container.getAnimationPlayers().length, 0); - assert_equals(element.getAnimationPlayers().length, 1); - assert_equals(element.getAnimationPlayers()[0], player); - - var player2 = container.animate([], 1000); - assert_equals(document.timeline.getAnimationPlayers().length, 2); - assert_equals(document.timeline.getAnimationPlayers()[0], player); - assert_equals(document.timeline.getAnimationPlayers()[1], player2); - assert_equals(container.getAnimationPlayers().length, 1); - assert_equals(container.getAnimationPlayers()[0], player2); - assert_equals(element.getAnimationPlayers().length, 1); - assert_equals(element.getAnimationPlayers()[0], player); - - player.finish(); - assert_equals(document.timeline.getAnimationPlayers().length, 1); - assert_equals(document.timeline.getAnimationPlayers()[0], player2); - assert_equals(container.getAnimationPlayers().length, 1); - assert_equals(container.getAnimationPlayers()[0], player2); - assert_equals(element.getAnimationPlayers().length, 0); - - player2.finish(); - assert_equals(document.timeline.getAnimationPlayers().length, 0); - assert_equals(container.getAnimationPlayers().length, 0); - assert_equals(element.getAnimationPlayers().length, 0); - -}, 'Animatable getAnimationPlayers()'); + assert_equals(document.timeline.getAnimations().length, 0); + assert_equals(container.getAnimations().length, 0); + assert_equals(element.getAnimations().length, 0); + + var animation = element.animate([], 1000); + assert_equals(document.timeline.getAnimations().length, 1); + assert_equals(document.timeline.getAnimations()[0], animation); + assert_equals(container.getAnimations().length, 0); + assert_equals(element.getAnimations().length, 1); + assert_equals(element.getAnimations()[0], animation); + + var animation2 = container.animate([], 1000); + assert_equals(document.timeline.getAnimations().length, 2); + assert_equals(document.timeline.getAnimations()[0], animation); + assert_equals(document.timeline.getAnimations()[1], animation2); + assert_equals(container.getAnimations().length, 1); + assert_equals(container.getAnimations()[0], animation2); + assert_equals(element.getAnimations().length, 1); + assert_equals(element.getAnimations()[0], animation); + + animation.finish(); + assert_equals(document.timeline.getAnimations().length, 1); + assert_equals(document.timeline.getAnimations()[0], animation2); + assert_equals(container.getAnimations().length, 1); + assert_equals(container.getAnimations()[0], animation2); + assert_equals(element.getAnimations().length, 0); + + animation2.finish(); + assert_equals(document.timeline.getAnimations().length, 0); + assert_equals(container.getAnimations().length, 0); + assert_equals(element.getAnimations().length, 0); + +}, 'Animatable getAnimations()'); test(function() { - assert_equals(document.timeline.getAnimationPlayers().length, 0); - assert_equals(container.getAnimationPlayers().length, 0); - assert_equals(element.getAnimationPlayers().length, 0); - - var player = element.animate([], {duration: 1000, delay: 500}); - assert_equals(document.timeline.getAnimationPlayers().length, 1); - assert_equals(document.timeline.getAnimationPlayers()[0], player); - assert_equals(container.getAnimationPlayers().length, 0); - assert_equals(element.getAnimationPlayers().length, 1); - assert_equals(element.getAnimationPlayers()[0], player); - - player.finish(); - assert_equals(document.timeline.getAnimationPlayers().length, 0); - assert_equals(container.getAnimationPlayers().length, 0); - assert_equals(element.getAnimationPlayers().length, 0); - -}, 'getAnimationPlayers() with delays'); + assert_equals(document.timeline.getAnimations().length, 0); + assert_equals(container.getAnimations().length, 0); + assert_equals(element.getAnimations().length, 0); + + var animation = element.animate([], {duration: 1000, delay: 500}); + assert_equals(document.timeline.getAnimations().length, 1); + assert_equals(document.timeline.getAnimations()[0], animation); + assert_equals(container.getAnimations().length, 0); + assert_equals(element.getAnimations().length, 1); + assert_equals(element.getAnimations()[0], animation); + + animation.finish(); + assert_equals(document.timeline.getAnimations().length, 0); + assert_equals(container.getAnimations().length, 0); + assert_equals(element.getAnimations().length, 0); + +}, 'getAnimations() with delays'); From 9041c5f3a502f0126ee4407459f75baca8398925 Mon Sep 17 00:00:00 2001 From: rjwright Date: Thu, 26 Mar 2015 13:19:29 +1100 Subject: [PATCH 65/91] Rename get-animation-players.html to get-animations.html --- test/blink/{get-animation-players.html => get-animations.html} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename test/blink/{get-animation-players.html => get-animations.html} (100%) diff --git a/test/blink/get-animation-players.html b/test/blink/get-animations.html similarity index 100% rename from test/blink/get-animation-players.html rename to test/blink/get-animations.html From bee0001027e6f3ad0acdd4ac11e035f9c4edeb41 Mon Sep 17 00:00:00 2001 From: rjwright Date: Thu, 26 Mar 2015 13:20:25 +1100 Subject: [PATCH 66/91] Rename get-css-players to get-css-animations --- test/blink/{get-css-players.html => get-css-animations.html} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename test/blink/{get-css-players.html => get-css-animations.html} (100%) diff --git a/test/blink/get-css-players.html b/test/blink/get-css-animations.html similarity index 100% rename from test/blink/get-css-players.html rename to test/blink/get-css-animations.html From 1eac651bfdcff160272b83c29846589f39853d2d Mon Sep 17 00:00:00 2001 From: rjwright Date: Thu, 26 Mar 2015 13:22:51 +1100 Subject: [PATCH 67/91] file names in test list --- test/testharness-tests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/testharness-tests.js b/test/testharness-tests.js index 351304f6..adf61f2c 100644 --- a/test/testharness-tests.js +++ b/test/testharness-tests.js @@ -9,11 +9,11 @@ var testHarnessTests = [ 'blink/out-of-order-keyframes.html', 'blink/same-offset-keyframes.html', 'blink/eased-keyframes.html', - 'blink/get-animation-players.html', + 'blink/get-animations.html', ]; var testHarnessFailures = [ - 'blink/get-css-players.html', + 'blink/get-css-animations.html', ]; var interpolationTests = [ From 40304958e8d03ec2eacd7a0c3382b8cac06b2a42 Mon Sep 17 00:00:00 2001 From: rjwright Date: Thu, 26 Mar 2015 13:38:57 +1100 Subject: [PATCH 68/91] Remove "player" terminology in get-css-animations.html --- test/blink/get-css-animations.html | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/test/blink/get-css-animations.html b/test/blink/get-css-animations.html index ad10fb7c..429a3370 100644 --- a/test/blink/get-css-animations.html +++ b/test/blink/get-css-animations.html @@ -16,25 +16,25 @@ From 8b1baf92f40d6d552a59b6ca893fe6a95f8f20b5 Mon Sep 17 00:00:00 2001 From: rjwright Date: Thu, 26 Mar 2015 14:11:46 +1100 Subject: [PATCH 69/91] Add grace period for getAnimationPlayers and make shared.deprecated log properly. --- src/deprecation.js | 1 + src/keyframe-effect-constructor.js | 4 ++++ src/timeline.js | 4 ++++ 3 files changed, 9 insertions(+) diff --git a/src/deprecation.js b/src/deprecation.js index 78e954b8..33499379 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -34,6 +34,7 @@ }; shared.deprecated = function(feature, date, advice, plural) { + var auxVerb = plural ? 'are' : 'is'; if (shared.isDeprecated(feature, date, advice, plural)) { throw new Error(feature + ' ' + auxVerb + ' no longer supported. ' + advice); } diff --git a/src/keyframe-effect-constructor.js b/src/keyframe-effect-constructor.js index e161304e..a2b91d64 100644 --- a/src/keyframe-effect-constructor.js +++ b/src/keyframe-effect-constructor.js @@ -103,6 +103,10 @@ return animation.effect !== null && animation.effect.target == this; }.bind(this)); }; + window.Element.prototype.getAnimationPlayers = function() { + shared.deprecated('Element.getAnimationPlayers', '2015-03-23', 'Use Element.getAnimations instead.'); + return this.getAnimations(); + }; // Alias KeyframeEffect to Animation, to support old constructor (Animation) for a deprecation // period. Should be removed after 23 June 2015. diff --git a/src/timeline.js b/src/timeline.js index b9e31458..0209e2df 100644 --- a/src/timeline.js +++ b/src/timeline.js @@ -28,6 +28,10 @@ this._discardAnimations(); return this._animations.slice(); }, + getAnimationPlayers: function() { + shared.deprecated('AnimationTimeline.getAnimationPlayers', '2015-03-23', 'Use AnimationTimeline.getAnimations instead.'); + return this.getAnimations(); + }, _discardAnimations: function() { this._animations = this._animations.filter(function(animation) { return animation.playState != 'finished' && animation.playState != 'idle'; From bf95e6b3c457954d665903b9a407b137218a583f Mon Sep 17 00:00:00 2001 From: rjwright Date: Thu, 26 Mar 2015 14:17:12 +1100 Subject: [PATCH 70/91] Add grace period for Animation.source --- src/web-animations-next-animation.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/web-animations-next-animation.js b/src/web-animations-next-animation.js index b34d4be6..b4414198 100644 --- a/src/web-animations-next-animation.js +++ b/src/web-animations-next-animation.js @@ -145,6 +145,10 @@ get finished() { return this._animation.finished; }, + get source() { + shared.deprecated('Animation.source', '2015-03-23', 'Use Animation.effect instead.'); + return this.effect; + }, play: function() { this._animation.play(); this._register(); From 01697c822e7ac8d13eb091d8dc0963a4921bc9c2 Mon Sep 17 00:00:00 2001 From: rjwright Date: Thu, 26 Mar 2015 14:41:18 +1100 Subject: [PATCH 71/91] Add KeyframeEffect.getFrames --- src/keyframe-effect-constructor.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/keyframe-effect-constructor.js b/src/keyframe-effect-constructor.js index a2b91d64..48d0ec81 100644 --- a/src/keyframe-effect-constructor.js +++ b/src/keyframe-effect-constructor.js @@ -19,10 +19,6 @@ this._frames = shared.normalizeKeyframes(effectInput); } - KeyframeList.prototype = { - getFrames: function() { return this._frames; } - }; - // FIXME: This constructor is also used for custom effects. This won't be the case once custom // effects are change to callbacks. scope.KeyframeEffect = function(target, effectInput, timingInput) { @@ -47,6 +43,12 @@ return this; }; + scope.KeyframeEffect.prototype = { + getFrames: function() { + return this._normalizedKeyframes._frames; + } + }; + var originalElementAnimate = Element.prototype.animate; Element.prototype.animate = function(effectInput, timing) { return scope.timeline.play(new scope.KeyframeEffect(this, effectInput, timing)); From 305aa5b2e45b06855512345f0d70ce7d8846e61a Mon Sep 17 00:00:00 2001 From: rjwright Date: Thu, 26 Mar 2015 14:47:40 +1100 Subject: [PATCH 72/91] Accomodate custom effect keyframe effects in getFrames --- src/keyframe-effect-constructor.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/keyframe-effect-constructor.js b/src/keyframe-effect-constructor.js index 48d0ec81..53fee481 100644 --- a/src/keyframe-effect-constructor.js +++ b/src/keyframe-effect-constructor.js @@ -45,6 +45,10 @@ scope.KeyframeEffect.prototype = { getFrames: function() { + // FIXME: Once custom effects are switched over to callbacks we can + // always return this._normalizedKeyframes._frames here. + if (typeof this._normalizedKeyframes == 'function') + return this._normalizedKeyframes; return this._normalizedKeyframes._frames; } }; From a4f0b018ef10c5bbd987df72d08a5451adf3eb53 Mon Sep 17 00:00:00 2001 From: rjwright Date: Thu, 26 Mar 2015 20:15:45 +1100 Subject: [PATCH 73/91] Add grace period for KeyframeEffect.effect --- src/keyframe-effect-constructor.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/keyframe-effect-constructor.js b/src/keyframe-effect-constructor.js index 53fee481..4e37f8ec 100644 --- a/src/keyframe-effect-constructor.js +++ b/src/keyframe-effect-constructor.js @@ -50,6 +50,10 @@ if (typeof this._normalizedKeyframes == 'function') return this._normalizedKeyframes; return this._normalizedKeyframes._frames; + }, + get effect() { + shared.deprecated('KeyframeEffect.effect', '2015-03-23', 'Use KeyframeEffect.getFrames() instead.'); + return this._normalizedKeyframes; } }; From 17373062547fc9c2c1c5c639a0bfbb83d45d2b21 Mon Sep 17 00:00:00 2001 From: Sam Thorogood Date: Mon, 30 Mar 2015 15:49:50 +1100 Subject: [PATCH 74/91] Add code tags to Native Fallback section --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 74e45209..87867862 100644 --- a/README.md +++ b/README.md @@ -52,8 +52,8 @@ generation of animations and fine-grained control of animation playback. See Native Fallback --------------- -When the polyfill runs on a browser that implements Element.animate and -AnimationPlayer Playback Control it will detect and use the underlying native +When the polyfill runs on a browser that implements `Element.animate` and +`AnimationPlayer` Playback Control it will detect and use the underlying native features. Different Build Targets From 1ce8e930832d64f2b959c9e85bfb65cee147ac25 Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 30 Mar 2015 16:49:03 +1100 Subject: [PATCH 75/91] Add test case for reverse effects on child timing --- test/js/group-animation.js | 94 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 91 insertions(+), 3 deletions(-) diff --git a/test/js/group-animation.js b/test/js/group-animation.js index e1870467..def846fb 100644 --- a/test/js/group-animation.js +++ b/test/js/group-animation.js @@ -647,13 +647,13 @@ suite('group-animation', function() { ); }); - test('Setting the playbackRate on group animations updates child timing. ' + + test('Setting the playbackRate on sequence animations updates child timing. ' + 'Any children who are not finished go into effect.', function() { - var group = new SequenceEffect([ + var sequence = new SequenceEffect([ new KeyframeEffect(null, [], 1000), new KeyframeEffect(null, [], 1000), ]); - var a = document.timeline.play(group); + var a = document.timeline.play(sequence); tick(0); a.playbackRate = 2; @@ -758,6 +758,94 @@ suite('group-animation', function() { } ); + test('Reversing a sequence animation updates child timing correctly', function() { + var sequence = new SequenceEffect([ + new KeyframeEffect(null, [], 1000), + new KeyframeEffect(null, [], 1000), + ]); + var a = document.timeline.play(sequence); + tick(0); + + a.playbackRate = 2; + assert.equal(a._animation.playbackRate, 2, 'Updates the playbackRate of the inner animation'); + a._childAnimations.forEach(function(childAnimation) { + assert.equal(childAnimation.playbackRate, 2, 'It also updates the child animations'); + }); + tick(1); + tick(1101); + assert.equal(a.currentTime, 2000); + assert.equal(a._childAnimations[0].currentTime, 1000); + assert.equal(a._childAnimations[1].currentTime, 1000); + assert.equal(a.startTime, 1); + assert.equal(a._childAnimations[0].startTime, 1); + assert.equal(a._childAnimations[1].startTime, 501); + + a.reverse(); + assert.equal(a._animation.playbackRate, -2, 'Updates the playbackRate of the inner animation'); + a._childAnimations.forEach(function(childAnimation) { + assert.equal(childAnimation.playbackRate, -2, 'It also updates the child animations'); + }); + assert.equal(a.currentTime, 2000); + assert.equal(a._childAnimations[0].currentTime, 2000); + assert.equal(a._childAnimations[1].currentTime, 1000); + assert.equal(a.startTime, null); + assert.equal(a._childAnimations[0].startTime, null); + assert.equal(a._childAnimations[1].startTime, null); + + tick(1102); + assert.equal(a.currentTime, 2000); + assert.equal(a._childAnimations[0].currentTime, 2000); + assert.equal(a._childAnimations[1].currentTime, 1000); + assert.equal(a.startTime, 2102); + assert.equal(a._childAnimations[0].startTime, 2102); + assert.equal(a._childAnimations[1].startTime, 1602); + + tick(1602); + assert.equal(a.currentTime, 1000); + assert.equal(a._childAnimations[0].currentTime, 1000); + assert.equal(a._childAnimations[1].currentTime, 0); + assert.equal(a.startTime, 2102); + assert.equal(a._childAnimations[0].startTime, 2102); + assert.equal(a._childAnimations[1].startTime, 1602); + + tick(3103); + assert.equal(a.currentTime, 0); + assert.equal(a._childAnimations[0].currentTime, 0); + assert.equal(a._childAnimations[1].currentTime, 0); + assert.equal(a.startTime, 2102); + assert.equal(a._childAnimations[0].startTime, 2102); + assert.equal(a._childAnimations[1].startTime, 1602); + + a.reverse(); + assert.equal(a._animation.playbackRate, 2, 'Updates the playbackRate of the inner animation'); + a._childAnimations.forEach(function(childAnimation) { + assert.equal(childAnimation.playbackRate, 2, 'It also updates the child animations'); + }); + assert.equal(a.currentTime, 0); + assert.equal(a._childAnimations[0].currentTime, 0); + assert.equal(a._childAnimations[1].currentTime, -1000); + assert.equal(a.startTime, null); + assert.equal(a._childAnimations[0].startTime, null); + assert.equal(a._childAnimations[1].startTime, null); + + tick(3104); + assert.equal(a.currentTime, 0); + assert.equal(a._childAnimations[0].currentTime, 0); + assert.equal(a._childAnimations[1].currentTime, -1000); + assert.equal(a.startTime, 3104); + assert.equal(a._childAnimations[0].startTime, 3104); + assert.equal(a._childAnimations[1].startTime, 3604); + + tick(3604); + assert.equal(a.currentTime, 1000); + assert.equal(a._childAnimations[0].currentTime, 1000); + assert.equal(a._childAnimations[1].currentTime, 0); + assert.equal(a.startTime, 3104); + assert.equal(a._childAnimations[0].startTime, 3104); + assert.equal(a._childAnimations[1].startTime, 3604); + } + ); + test('delays on groups work correctly', function() { // 444 // 1 From 764069fd6c69b195f5b459470d13cc6e4dc993f3 Mon Sep 17 00:00:00 2001 From: rjwright Date: Mon, 30 Mar 2015 16:57:06 +1100 Subject: [PATCH 76/91] indenting --- test/js/group-animation.js | 169 ++++++++++++++++++------------------- 1 file changed, 84 insertions(+), 85 deletions(-) diff --git a/test/js/group-animation.js b/test/js/group-animation.js index def846fb..3ec6466b 100644 --- a/test/js/group-animation.js +++ b/test/js/group-animation.js @@ -759,92 +759,91 @@ suite('group-animation', function() { ); test('Reversing a sequence animation updates child timing correctly', function() { - var sequence = new SequenceEffect([ - new KeyframeEffect(null, [], 1000), - new KeyframeEffect(null, [], 1000), - ]); - var a = document.timeline.play(sequence); - tick(0); - - a.playbackRate = 2; - assert.equal(a._animation.playbackRate, 2, 'Updates the playbackRate of the inner animation'); - a._childAnimations.forEach(function(childAnimation) { - assert.equal(childAnimation.playbackRate, 2, 'It also updates the child animations'); - }); - tick(1); - tick(1101); - assert.equal(a.currentTime, 2000); - assert.equal(a._childAnimations[0].currentTime, 1000); - assert.equal(a._childAnimations[1].currentTime, 1000); - assert.equal(a.startTime, 1); - assert.equal(a._childAnimations[0].startTime, 1); - assert.equal(a._childAnimations[1].startTime, 501); - - a.reverse(); - assert.equal(a._animation.playbackRate, -2, 'Updates the playbackRate of the inner animation'); - a._childAnimations.forEach(function(childAnimation) { - assert.equal(childAnimation.playbackRate, -2, 'It also updates the child animations'); - }); - assert.equal(a.currentTime, 2000); - assert.equal(a._childAnimations[0].currentTime, 2000); - assert.equal(a._childAnimations[1].currentTime, 1000); - assert.equal(a.startTime, null); - assert.equal(a._childAnimations[0].startTime, null); - assert.equal(a._childAnimations[1].startTime, null); - - tick(1102); - assert.equal(a.currentTime, 2000); - assert.equal(a._childAnimations[0].currentTime, 2000); - assert.equal(a._childAnimations[1].currentTime, 1000); - assert.equal(a.startTime, 2102); - assert.equal(a._childAnimations[0].startTime, 2102); - assert.equal(a._childAnimations[1].startTime, 1602); - - tick(1602); - assert.equal(a.currentTime, 1000); - assert.equal(a._childAnimations[0].currentTime, 1000); - assert.equal(a._childAnimations[1].currentTime, 0); - assert.equal(a.startTime, 2102); - assert.equal(a._childAnimations[0].startTime, 2102); - assert.equal(a._childAnimations[1].startTime, 1602); - - tick(3103); - assert.equal(a.currentTime, 0); - assert.equal(a._childAnimations[0].currentTime, 0); - assert.equal(a._childAnimations[1].currentTime, 0); - assert.equal(a.startTime, 2102); - assert.equal(a._childAnimations[0].startTime, 2102); - assert.equal(a._childAnimations[1].startTime, 1602); - - a.reverse(); - assert.equal(a._animation.playbackRate, 2, 'Updates the playbackRate of the inner animation'); - a._childAnimations.forEach(function(childAnimation) { - assert.equal(childAnimation.playbackRate, 2, 'It also updates the child animations'); - }); - assert.equal(a.currentTime, 0); - assert.equal(a._childAnimations[0].currentTime, 0); - assert.equal(a._childAnimations[1].currentTime, -1000); - assert.equal(a.startTime, null); - assert.equal(a._childAnimations[0].startTime, null); - assert.equal(a._childAnimations[1].startTime, null); - - tick(3104); - assert.equal(a.currentTime, 0); - assert.equal(a._childAnimations[0].currentTime, 0); - assert.equal(a._childAnimations[1].currentTime, -1000); - assert.equal(a.startTime, 3104); - assert.equal(a._childAnimations[0].startTime, 3104); - assert.equal(a._childAnimations[1].startTime, 3604); + var sequence = new SequenceEffect([ + new KeyframeEffect(null, [], 1000), + new KeyframeEffect(null, [], 1000), + ]); + var a = document.timeline.play(sequence); + tick(0); - tick(3604); - assert.equal(a.currentTime, 1000); - assert.equal(a._childAnimations[0].currentTime, 1000); - assert.equal(a._childAnimations[1].currentTime, 0); - assert.equal(a.startTime, 3104); - assert.equal(a._childAnimations[0].startTime, 3104); - assert.equal(a._childAnimations[1].startTime, 3604); - } - ); + a.playbackRate = 2; + assert.equal(a._animation.playbackRate, 2, 'Updates the playbackRate of the inner animation'); + a._childAnimations.forEach(function(childAnimation) { + assert.equal(childAnimation.playbackRate, 2, 'It also updates the child animations'); + }); + tick(1); + tick(1101); + assert.equal(a.currentTime, 2000); + assert.equal(a._childAnimations[0].currentTime, 1000); + assert.equal(a._childAnimations[1].currentTime, 1000); + assert.equal(a.startTime, 1); + assert.equal(a._childAnimations[0].startTime, 1); + assert.equal(a._childAnimations[1].startTime, 501); + + a.reverse(); + assert.equal(a._animation.playbackRate, -2, 'Updates the playbackRate of the inner animation'); + a._childAnimations.forEach(function(childAnimation) { + assert.equal(childAnimation.playbackRate, -2, 'It also updates the child animations'); + }); + assert.equal(a.currentTime, 2000); + assert.equal(a._childAnimations[0].currentTime, 2000); + assert.equal(a._childAnimations[1].currentTime, 1000); + assert.equal(a.startTime, null); + assert.equal(a._childAnimations[0].startTime, null); + assert.equal(a._childAnimations[1].startTime, null); + + tick(1102); + assert.equal(a.currentTime, 2000); + assert.equal(a._childAnimations[0].currentTime, 2000); + assert.equal(a._childAnimations[1].currentTime, 1000); + assert.equal(a.startTime, 2102); + assert.equal(a._childAnimations[0].startTime, 2102); + assert.equal(a._childAnimations[1].startTime, 1602); + + tick(1602); + assert.equal(a.currentTime, 1000); + assert.equal(a._childAnimations[0].currentTime, 1000); + assert.equal(a._childAnimations[1].currentTime, 0); + assert.equal(a.startTime, 2102); + assert.equal(a._childAnimations[0].startTime, 2102); + assert.equal(a._childAnimations[1].startTime, 1602); + + tick(3103); + assert.equal(a.currentTime, 0); + assert.equal(a._childAnimations[0].currentTime, 0); + assert.equal(a._childAnimations[1].currentTime, 0); + assert.equal(a.startTime, 2102); + assert.equal(a._childAnimations[0].startTime, 2102); + assert.equal(a._childAnimations[1].startTime, 1602); + + a.reverse(); + assert.equal(a._animation.playbackRate, 2, 'Updates the playbackRate of the inner animation'); + a._childAnimations.forEach(function(childAnimation) { + assert.equal(childAnimation.playbackRate, 2, 'It also updates the child animations'); + }); + assert.equal(a.currentTime, 0); + assert.equal(a._childAnimations[0].currentTime, 0); + assert.equal(a._childAnimations[1].currentTime, -1000); + assert.equal(a.startTime, null); + assert.equal(a._childAnimations[0].startTime, null); + assert.equal(a._childAnimations[1].startTime, null); + + tick(3104); + assert.equal(a.currentTime, 0); + assert.equal(a._childAnimations[0].currentTime, 0); + assert.equal(a._childAnimations[1].currentTime, -1000); + assert.equal(a.startTime, 3104); + assert.equal(a._childAnimations[0].startTime, 3104); + assert.equal(a._childAnimations[1].startTime, 3604); + + tick(3604); + assert.equal(a.currentTime, 1000); + assert.equal(a._childAnimations[0].currentTime, 1000); + assert.equal(a._childAnimations[1].currentTime, 0); + assert.equal(a.startTime, 3104); + assert.equal(a._childAnimations[0].startTime, 3104); + assert.equal(a._childAnimations[1].startTime, 3604); + }); test('delays on groups work correctly', function() { // 444 From 8405482660008e1af35732f3a8558df55bc4b075 Mon Sep 17 00:00:00 2001 From: rjwright Date: Tue, 31 Mar 2015 11:18:41 +1100 Subject: [PATCH 77/91] Fix up naming in the readme + a couple of small readme changes Small changes to readme --- README.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 87867862..79dab57d 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ effect.
Hello world!
- diff --git a/web-animations-next.dev.html b/web-animations-next.dev.html index 2cd640e6..db2fd914 100644 --- a/web-animations-next.dev.html +++ b/web-animations-next.dev.html @@ -18,7 +18,6 @@ - diff --git a/web-animations.dev.html b/web-animations.dev.html index 5760f91a..cb1fd3d6 100644 --- a/web-animations.dev.html +++ b/web-animations.dev.html @@ -18,7 +18,6 @@ - From d54913327ca2dc810318286adef18bd2c73690ac Mon Sep 17 00:00:00 2001 From: rjwright Date: Sun, 29 Mar 2015 12:49:55 +1100 Subject: [PATCH 82/91] rename effect.js to keyframe-interpolations.js --- src/{effect.js => keyframe-interpolations.js} | 0 target-config.js | 5 +++-- test/js/{effect.js => keyframe-interpolations.js} | 0 3 files changed, 3 insertions(+), 2 deletions(-) rename src/{effect.js => keyframe-interpolations.js} (100%) rename test/js/{effect.js => keyframe-interpolations.js} (100%) diff --git a/src/effect.js b/src/keyframe-interpolations.js similarity index 100% rename from src/effect.js rename to src/keyframe-interpolations.js diff --git a/target-config.js b/target-config.js index c8f0abda..133630b9 100644 --- a/target-config.js +++ b/target-config.js @@ -18,7 +18,7 @@ 'src/scope.js']; var webAnimations1Src = [ - 'src/effect.js', + 'src/keyframe-interpolations.js', 'src/property-interpolation.js', 'src/keyframe-effect.js', 'src/apply-preserving-inline-style.js', @@ -43,7 +43,7 @@ ]; var liteWebAnimations1Src = [ - 'src/effect.js', + 'src/keyframe-interpolations.js', 'src/property-interpolation.js', 'src/keyframe-effect.js', 'src/apply.js', @@ -85,6 +85,7 @@ 'test/js/dimension-handler.js', 'test/js/effect.js', 'test/js/interpolation.js', + 'test/js/keyframe-interpolations.js', 'test/js/matrix-interpolation.js', 'test/js/number-handler.js', 'test/js/property-interpolation.js', diff --git a/test/js/effect.js b/test/js/keyframe-interpolations.js similarity index 100% rename from test/js/effect.js rename to test/js/keyframe-interpolations.js From afb4caf1d83e323c3a1deb7ab921f65a60897661 Mon Sep 17 00:00:00 2001 From: rjwright Date: Sun, 29 Mar 2015 12:54:41 +1100 Subject: [PATCH 83/91] rename in test/js/keyframe-interpolations --- test/js/keyframe-interpolations.js | 36 +++++++++++++++--------------- web-animations-next-lite.dev.html | 2 +- web-animations-next.dev.html | 2 +- web-animations.dev.html | 2 +- 4 files changed, 21 insertions(+), 21 deletions(-) diff --git a/test/js/keyframe-interpolations.js b/test/js/keyframe-interpolations.js index f2c0b49c..d46b154d 100644 --- a/test/js/keyframe-interpolations.js +++ b/test/js/keyframe-interpolations.js @@ -4,7 +4,7 @@ function leftAsNumber(target) { return Number(left.substring(0, left.length - 2)); } -suite('effect', function() { +suite('keyframes', function() { // Test normalize. test('Normalize keyframes with all offsets specified but not sorted by offset. Some offsets are out of [0, 1] range.', function() { var normalizedKeyframes; @@ -430,7 +430,7 @@ suite('effect', function() { }); }); -suite('effect-convertEffectInput', function() { +suite('keyframe-interpolations - convertEffectInput', function() { setup(function() { this.target = document.createElement('div'); this.target.style.position = 'absolute'; @@ -442,57 +442,57 @@ suite('effect-convertEffectInput', function() { }); test('Convert effect input for a simple keyframe list with one property.', function() { - var effectInputFunction; + var keyframeInterpolations; assert.doesNotThrow(function() { - effectInputFunction = webAnimations1.convertEffectInput([ + keyframeInterpolations = webAnimations1.convertEffectInput([ {left: '0px'}, {left: '200px', offset: 0.3}, {left: '100px'} ]); }); - effectInputFunction(this.target, 0); + keyframeInterpolations(this.target, 0); assert.closeTo(leftAsNumber(this.target), 0, 0.001); - effectInputFunction(this.target, 0.075); + keyframeInterpolations(this.target, 0.075); assert.closeTo(leftAsNumber(this.target), 50, 0.001); - effectInputFunction(this.target, 0.15); + keyframeInterpolations(this.target, 0.15); assert.closeTo(leftAsNumber(this.target), 100, 0.001); - effectInputFunction(this.target, 0.65); + keyframeInterpolations(this.target, 0.65); assert.closeTo(leftAsNumber(this.target), 150, 0.001); - effectInputFunction(this.target, 1); + keyframeInterpolations(this.target, 1); assert.closeTo(leftAsNumber(this.target), 100, 0.001); - effectInputFunction(this.target, 2); + keyframeInterpolations(this.target, 2); assert.closeTo(leftAsNumber(this.target), -42.856, 0.01); }); test('Convert effect input where one property is animated and the property has two keyframes at offset 1.', function() { - var effectInputFunction; + var keyframeInterpolations; assert.doesNotThrow(function() { - effectInputFunction = webAnimations1.convertEffectInput([ + keyframeInterpolations = webAnimations1.convertEffectInput([ {left: '0px', offset: 0}, {left: '20px', offset: 1}, {left: '30px'} ]); }); - effectInputFunction(this.target, 1); + keyframeInterpolations(this.target, 1); assert.equal(getComputedStyle(this.target).left, '30px'); - effectInputFunction(this.target, 2); + keyframeInterpolations(this.target, 2); assert.equal(getComputedStyle(this.target).left, '30px'); }); test('Convert effect input and apply result at fraction null.', function() { - var effectInputFunction; + var keyframeInterpolations; var underlying = getComputedStyle(this.target).left; assert.doesNotThrow(function() { - effectInputFunction = webAnimations1.convertEffectInput([ + keyframeInterpolations = webAnimations1.convertEffectInput([ {left: '0px'}, {left: '100px'} ]); }); - effectInputFunction(this.target, 1); + keyframeInterpolations(this.target, 1); assert.equal(getComputedStyle(this.target).left, '100px'); - effectInputFunction(this.target, null); + keyframeInterpolations(this.target, null); assert.equal(getComputedStyle(this.target).left, underlying); }); }); diff --git a/web-animations-next-lite.dev.html b/web-animations-next-lite.dev.html index 4c4be1f3..f367348c 100644 --- a/web-animations-next-lite.dev.html +++ b/web-animations-next-lite.dev.html @@ -18,7 +18,7 @@ - + diff --git a/web-animations-next.dev.html b/web-animations-next.dev.html index db2fd914..af2a29b0 100644 --- a/web-animations-next.dev.html +++ b/web-animations-next.dev.html @@ -18,7 +18,7 @@ - + diff --git a/web-animations.dev.html b/web-animations.dev.html index cb1fd3d6..b4eb5b90 100644 --- a/web-animations.dev.html +++ b/web-animations.dev.html @@ -18,7 +18,7 @@ - + From 5127adca4a22d398433d6d072f7e4abf615cef62 Mon Sep 17 00:00:00 2001 From: rjwright Date: Sun, 29 Mar 2015 12:56:42 +1100 Subject: [PATCH 84/91] small change in keyframe-effect --- src/keyframe-effect.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/keyframe-effect.js b/src/keyframe-effect.js index 477b406a..c910d35e 100644 --- a/src/keyframe-effect.js +++ b/src/keyframe-effect.js @@ -30,11 +30,11 @@ scope.KeyframeEffect = function(target, effectInput, timingInput) { var effectTime = EffectTime(shared.normalizeTimingInput(timingInput)); - var keyframes = scope.convertEffectInput(effectInput); + var interpolations = scope.convertEffectInput(effectInput); var timeFraction; var keyframeEffect = function() { WEB_ANIMATIONS_TESTING && console.assert(typeof timeFraction !== 'undefined'); - keyframes(target, timeFraction); + interpolations(target, timeFraction); }; // Returns whether the keyframeEffect is in effect or not after the timing update. keyframeEffect._update = function(localTime) { @@ -42,7 +42,7 @@ return timeFraction !== null; }; keyframeEffect._clear = function() { - keyframes(target, null); + interpolations(target, null); }; keyframeEffect._hasSameTarget = function(otherTarget) { return target === otherTarget; From 2f4105f805d3d10f7a2113f9b81e3620e1065a7c Mon Sep 17 00:00:00 2001 From: rjwright Date: Sun, 29 Mar 2015 13:01:43 +1100 Subject: [PATCH 85/91] remove outdated use of "keyframeEffect" identifier in keyframe-interpolations --- src/keyframe-interpolations.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/keyframe-interpolations.js b/src/keyframe-interpolations.js index c198917c..cdd6fc2b 100644 --- a/src/keyframe-interpolations.js +++ b/src/keyframe-interpolations.js @@ -15,8 +15,8 @@ (function(shared, scope, testing) { scope.convertEffectInput = function(effectInput) { - var keyframeEffect = shared.normalizeKeyframes(effectInput); - var propertySpecificKeyframeGroups = makePropertySpecificKeyframeGroups(keyframeEffect); + var keyframes = shared.normalizeKeyframes(effectInput); + var propertySpecificKeyframeGroups = makePropertySpecificKeyframeGroups(keyframes); var interpolations = makeInterpolations(propertySpecificKeyframeGroups); return function(target, fraction) { if (fraction != null) { @@ -39,16 +39,16 @@ }; - function makePropertySpecificKeyframeGroups(keyframeEffect) { + function makePropertySpecificKeyframeGroups(keyframes) { var propertySpecificKeyframeGroups = {}; - for (var i = 0; i < keyframeEffect.length; i++) { - for (var member in keyframeEffect[i]) { + for (var i = 0; i < keyframes.length; i++) { + for (var member in keyframes[i]) { if (member != 'offset' && member != 'easing' && member != 'composite') { var propertySpecificKeyframe = { - offset: keyframeEffect[i].offset, - easing: keyframeEffect[i].easing, - value: keyframeEffect[i][member] + offset: keyframes[i].offset, + easing: keyframes[i].easing, + value: keyframes[i][member] }; propertySpecificKeyframeGroups[member] = propertySpecificKeyframeGroups[member] || []; propertySpecificKeyframeGroups[member].push(propertySpecificKeyframe); From 2c6f8c5dc28222f1fed2cd77fdd7a62bc21791f3 Mon Sep 17 00:00:00 2001 From: rjwright Date: Sun, 29 Mar 2015 13:05:08 +1100 Subject: [PATCH 86/91] Remove outdated use of "keyframeEffect" terminology from normalize-keyframes --- src/normalize-keyframes.js | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/normalize-keyframes.js b/src/normalize-keyframes.js index 58b9f041..dbab8bf8 100644 --- a/src/normalize-keyframes.js +++ b/src/normalize-keyframes.js @@ -167,12 +167,12 @@ function normalizeKeyframes(effectInput) { if (!Array.isArray(effectInput) && effectInput !== null) - throw new TypeError('Keyframe effect must be null or an array of keyframes'); + throw new TypeError('Keyframes must be null or an array of keyframes'); if (effectInput == null) return []; - var keyframeEffect = effectInput.map(function(originalKeyframe) { + var keyframes = effectInput.map(function(originalKeyframe) { var keyframe = {}; for (var member in originalKeyframe) { var memberValue = originalKeyframe[member]; @@ -205,8 +205,8 @@ var everyFrameHasOffset = true; var looselySortedByOffset = true; var previousOffset = -Infinity; - for (var i = 0; i < keyframeEffect.length; i++) { - var offset = keyframeEffect[i].offset; + for (var i = 0; i < keyframes.length; i++) { + var offset = keyframes[i].offset; if (offset != null) { if (offset < previousOffset) { throw { @@ -221,24 +221,24 @@ } } - keyframeEffect = keyframeEffect.filter(function(keyframe) { + keyframes = keyframes.filter(function(keyframe) { return keyframe.offset >= 0 && keyframe.offset <= 1; }); function spaceKeyframes() { - var length = keyframeEffect.length; - if (keyframeEffect[length - 1].offset == null) - keyframeEffect[length - 1].offset = 1; - if (length > 1 && keyframeEffect[0].offset == null) - keyframeEffect[0].offset = 0; + var length = keyframes.length; + if (keyframes[length - 1].offset == null) + keyframes[length - 1].offset = 1; + if (length > 1 && keyframes[0].offset == null) + keyframes[0].offset = 0; var previousIndex = 0; - var previousOffset = keyframeEffect[0].offset; + var previousOffset = keyframes[0].offset; for (var i = 1; i < length; i++) { - var offset = keyframeEffect[i].offset; + var offset = keyframes[i].offset; if (offset != null) { for (var j = 1; j < i - previousIndex; j++) - keyframeEffect[previousIndex + j].offset = previousOffset + (offset - previousOffset) * j / (i - previousIndex); + keyframes[previousIndex + j].offset = previousOffset + (offset - previousOffset) * j / (i - previousIndex); previousIndex = i; previousOffset = offset; } @@ -247,7 +247,7 @@ if (!everyFrameHasOffset) spaceKeyframes(); - return keyframeEffect; + return keyframes; } shared.normalizeKeyframes = normalizeKeyframes; From 55217408a6eda64fb2afbb7928462114892d3e76 Mon Sep 17 00:00:00 2001 From: rjwright Date: Sun, 29 Mar 2015 13:13:26 +1100 Subject: [PATCH 87/91] cleanup terminology in test/js/group-animation.js --- test/js/group-animation.js | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/test/js/group-animation.js b/test/js/group-animation.js index 3ec6466b..a2d31808 100644 --- a/test/js/group-animation.js +++ b/test/js/group-animation.js @@ -427,7 +427,7 @@ suite('group-animation', function() { test('redundant effect node wrapping', function() { tick(100); - var keyframeEffect = new SequenceEffect([ + var sequenceEffect = new SequenceEffect([ this.staticEffect(this.target, '0px', 1), new GroupEffect([ new SequenceEffect([ @@ -436,7 +436,7 @@ suite('group-animation', function() { ]), ]), ]); - var animation = document.timeline.play(keyframeEffect); + var animation = document.timeline.play(sequenceEffect); assert.equal(getComputedStyle(this.target).marginLeft, '0px'); checkTimes(animation, [100, 0], [ [100, 0, 0, 0], [[ // 0 @@ -649,11 +649,11 @@ suite('group-animation', function() { test('Setting the playbackRate on sequence animations updates child timing. ' + 'Any children who are not finished go into effect.', function() { - var sequence = new SequenceEffect([ + var sequenceEffect = new SequenceEffect([ new KeyframeEffect(null, [], 1000), new KeyframeEffect(null, [], 1000), ]); - var a = document.timeline.play(sequence); + var a = document.timeline.play(sequenceEffect); tick(0); a.playbackRate = 2; @@ -759,11 +759,11 @@ suite('group-animation', function() { ); test('Reversing a sequence animation updates child timing correctly', function() { - var sequence = new SequenceEffect([ + var sequenceEffect = new SequenceEffect([ new KeyframeEffect(null, [], 1000), new KeyframeEffect(null, [], 1000), ]); - var a = document.timeline.play(sequence); + var a = document.timeline.play(sequenceEffect); tick(0); a.playbackRate = 2; @@ -851,7 +851,7 @@ suite('group-animation', function() { // 0 // 33 // 2 - var keyframeEffect = new GroupEffect([ + var groupEffect = new GroupEffect([ new GroupEffect([ this.staticEffect(this.target, '4px', {duration: 3, delay: 1}), this.staticEffect(this.target, '1px', {duration: 1, delay: 0}), @@ -862,7 +862,7 @@ suite('group-animation', function() { this.staticEffect(this.target, '2px', {duration: 1, delay: -2}), ]), ]); - var animation = document.timeline.play(keyframeEffect); + var animation = document.timeline.play(groupEffect); tick(100); checkTimes(animation, [100, 0], [ [ @@ -893,7 +893,7 @@ suite('group-animation', function() { // 0 // 33 // 2 - var keyframeEffect = new SequenceEffect([ + var sequenceEffect = new SequenceEffect([ new SequenceEffect([ this.staticEffect(this.target, '1px', {duration: 2, endDelay: 2}), this.staticEffect(this.target, '4px', {duration: 1, endDelay: 1}), @@ -904,7 +904,7 @@ suite('group-animation', function() { this.staticEffect(this.target, '2px', {duration: 1, endDelay: 2}), ]), ]); - var animation = document.timeline.play(keyframeEffect); + var animation = document.timeline.play(sequenceEffect); tick(100); checkTimes(animation, [100, 0], [ [ @@ -1397,8 +1397,8 @@ suite('group-animation', function() { test('playState works for groups', function() { var target = document.createElement('div'); document.body.appendChild(target); - var keyframeEffect = new SequenceEffect([new KeyframeEffect(target, [], 100), new KeyframeEffect(target, [], 100)]); - var a = document.timeline.play(keyframeEffect); + var sequenceEffect = new SequenceEffect([new KeyframeEffect(target, [], 100), new KeyframeEffect(target, [], 100)]); + var a = document.timeline.play(sequenceEffect); assert.equal(a.playState, 'pending'); tick(1); assert.equal(a.playState, 'running'); @@ -1433,8 +1433,8 @@ suite('group-animation', function() { test('pausing then seeking out of range then seeking into range works', function() { var target = document.createElement('div'); var keyframeEffect = new KeyframeEffect(target, [], {duration: 2000, fill: 'both'}); - var group = new GroupEffect([keyframeEffect], {fill: 'none'}); - var animation = document.timeline.play(group); + var groupEffect = new GroupEffect([keyframeEffect], {fill: 'none'}); + var animation = document.timeline.play(groupEffect); animation.pause(); animation.currentTime = 3000; @@ -1450,8 +1450,8 @@ suite('group-animation', function() { test('reversing then seeking out of range then seeking into range works', function() { var target = document.createElement('div'); var keyframeEffect = new KeyframeEffect(target, [], {duration: 2000, fill: 'both'}); - var group = new GroupEffect([keyframeEffect], {fill: 'none'}); - var animation = document.timeline.play(group); + var groupEffect = new GroupEffect([keyframeEffect], {fill: 'none'}); + var animation = document.timeline.play(groupEffect); animation.currentTime = 1000; tick(100); @@ -1474,8 +1474,8 @@ suite('group-animation', function() { this.target, [{marginLeft: '0px'}, {marginLeft: '100px'}], {duration: 500, fill: 'none'}); - var group = new GroupEffect([keyframeEffect], {fill: 'none'}); - var animation = document.timeline.play(group); + var groupEffect = new GroupEffect([keyframeEffect], {fill: 'none'}); + var animation = document.timeline.play(groupEffect); tick(0); assert.equal(getComputedStyle(this.target).marginLeft, '0px'); From c202cf665eb1672bb3aadc922ce61f5487149e89 Mon Sep 17 00:00:00 2001 From: rjwright Date: Sun, 29 Mar 2015 13:14:32 +1100 Subject: [PATCH 88/91] rename test/js/keyframe-interpolations.js (was test/js/effect.js) to keyframes.js as it also tests normalize-keyframes --- test/js/{keyframe-interpolations.js => keyframes.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename test/js/{keyframe-interpolations.js => keyframes.js} (100%) diff --git a/test/js/keyframe-interpolations.js b/test/js/keyframes.js similarity index 100% rename from test/js/keyframe-interpolations.js rename to test/js/keyframes.js From 3593ba13dc559827b1b18d2277909dada633c537 Mon Sep 17 00:00:00 2001 From: rjwright Date: Sun, 29 Mar 2015 13:17:21 +1100 Subject: [PATCH 89/91] Fix target-config --- target-config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/target-config.js b/target-config.js index 133630b9..c496b512 100644 --- a/target-config.js +++ b/target-config.js @@ -85,7 +85,7 @@ 'test/js/dimension-handler.js', 'test/js/effect.js', 'test/js/interpolation.js', - 'test/js/keyframe-interpolations.js', + 'test/js/keyframes.js', 'test/js/matrix-interpolation.js', 'test/js/number-handler.js', 'test/js/property-interpolation.js', From 77b05d17be10b997a87af7b74d04b31ffb11cca1 Mon Sep 17 00:00:00 2001 From: rjwright Date: Wed, 1 Apr 2015 19:10:36 +1100 Subject: [PATCH 90/91] Rebased --- target-config.js | 1 - 1 file changed, 1 deletion(-) diff --git a/target-config.js b/target-config.js index c496b512..47e3c230 100644 --- a/target-config.js +++ b/target-config.js @@ -83,7 +83,6 @@ 'test/js/box-handler.js', 'test/js/color-handler.js', 'test/js/dimension-handler.js', - 'test/js/effect.js', 'test/js/interpolation.js', 'test/js/keyframes.js', 'test/js/matrix-interpolation.js', From 2f4e48df17321a67c52b1545fe86473397a20cec Mon Sep 17 00:00:00 2001 From: rjwright Date: Sun, 5 Apr 2015 14:41:26 +1000 Subject: [PATCH 91/91] Release notes for 2.0.0 --- History.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/History.md b/History.md index dfb359bd..4c50afa4 100644 --- a/History.md +++ b/History.md @@ -1,3 +1,15 @@ +### 2.0.0 - *April 5 2015* + + * Improve behavior of group Animation playback rate. + * Rename Animation to KeyframeEffect. + * Rename AnimationSequence to SequenceEffect. + * Rename AnimationGroup to GroupEffect. + * Rename AnimationPlayer to Animation. + * Remove KeyframeEffect.effect and add KeyframeEffect.getFrames. + * Rename Animation.source to Animation.effect. + * Rename Timeline.getAnimationPlayers to Timeline.getAnimations. + * Rename Element.getAnimationPlayers to Element.getAnimations. + ### 1.0.7 - *March 10 2015* * Improve performance of constructing groups and sequences.