From 9cacebf6e6dd70267f6efe7c0cc837c696f632e8 Mon Sep 17 00:00:00 2001
From: Glen Huang <hey.hgl@gmail.com>
Date: Thu, 9 Jul 2015 12:13:26 +0800
Subject: [PATCH 1/2] Allow partial keyframes when duration is zero

---
 src/keyframe-effect-constructor.js     |  3 +++
 test/js/keyframe-effect-constructor.js | 12 ++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/keyframe-effect-constructor.js b/src/keyframe-effect-constructor.js
index f906b14..6a306bb 100644
--- a/src/keyframe-effect-constructor.js
+++ b/src/keyframe-effect-constructor.js
@@ -67,6 +67,9 @@
       shared.deprecated('Custom KeyframeEffect', '2015-06-22', 'Use KeyframeEffect.onsample instead.');
       this._normalizedKeyframes = effectInput;
     } else {
+      if (!Array.isArray(effectInput) && this._timing.duration === 0) {
+        effectInput = [effectInput, effectInput];
+      }
       this._normalizedKeyframes = new KeyframeList(effectInput);
     }
     this._keyframes = effectInput;
diff --git a/test/js/keyframe-effect-constructor.js b/test/js/keyframe-effect-constructor.js
index e4593d5..cd2c4bc 100644
--- a/test/js/keyframe-effect-constructor.js
+++ b/test/js/keyframe-effect-constructor.js
@@ -353,4 +353,16 @@ suite('keyframe-effect-constructor', function() {
     effect.timing.iterations = 2;
     assert.closeTo(Number(getComputedStyle(target).opacity), 0.75, 0.01, 't=125 after setting iterations');
   });
+
+  test('Allow partial keyframes when duration is zero', function() {
+    var target = document.createElement('div');
+    document.body.appendChild(target);
+    var effect = new KeyframeEffect(
+        target,
+        {opacity: 0},
+        {fill: 'forwards'});
+    var animation = document.timeline.play(effect);
+    tick(1);
+    assert.equal(getComputedStyle(target).opacity, 0);
+  });
 });

From 612fe61b919e7ea6f7a463d6b66ab19b1996bdf4 Mon Sep 17 00:00:00 2001
From: Glen Huang <hey.hgl@gmail.com>
Date: Tue, 14 Jul 2015 13:42:25 +0800
Subject: [PATCH 2/2] Not automatically play created animation

---
 src/timeline.js                          |  2 +-
 src/web-animations-next-animation.js     | 14 +++++++++++++-
 test/js/web-animations-next-animation.js | 17 ++++++++++++++++-
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/timeline.js b/src/timeline.js
index cbd784a..73024b7 100644
--- a/src/timeline.js
+++ b/src/timeline.js
@@ -54,7 +54,7 @@
       // effect's children, and Animation.play is also recursive. We only need to call play on each
       // animation in the tree once.
       animation._updatePromises();
-      animation._animation.play();
+      animation._play();
       animation._updatePromises();
       return animation;
     },
diff --git a/src/web-animations-next-animation.js b/src/web-animations-next-animation.js
index 552e018..ead9355 100644
--- a/src/web-animations-next-animation.js
+++ b/src/web-animations-next-animation.js
@@ -34,7 +34,7 @@
     this._oldPlayState = 'idle';
     this._rebuildUnderlyingAnimation();
     // Animations are constructed in the idle state.
-    this._animation.cancel();
+    this._cancel();
     this._updatePromises();
   };
 
@@ -285,6 +285,12 @@
       });
       this._updatePromises();
     },
+    _play: function() {
+      this._animation.play();
+      this._childAnimations.forEach(function(child) {
+        child._play();
+      });
+    },
     pause: function() {
       this._updatePromises();
       if (this.currentTime) {
@@ -311,6 +317,12 @@
       this._removeChildAnimations();
       this._updatePromises();
     },
+    _cancel: function() {
+      this._animation.cancel();
+      this._childAnimations.forEach(function(child) {
+        child._cancel();
+      });
+    },
     reverse: function() {
       this._updatePromises();
       var oldCurrentTime = this.currentTime;
diff --git a/test/js/web-animations-next-animation.js b/test/js/web-animations-next-animation.js
index d0bc097..6d187bd 100644
--- a/test/js/web-animations-next-animation.js
+++ b/test/js/web-animations-next-animation.js
@@ -1,5 +1,5 @@
 'use strict';
-suite('animation-promises-tests', function() {
+suite('web-animations-next-animation', function() {
   test('Newly constructed animation has a resolved ready promise', function(done) {
     var readyResolved = false;
     var readyRejected = false;
@@ -315,4 +315,19 @@ suite('animation-promises-tests', function() {
       }
     }, 200);
   });
+
+  test('Newly constructed animation is idle', function() {
+    var effect = new SequenceEffect([
+      new KeyframeEffect(document.body, [], 2000),
+      new GroupEffect([
+        new KeyframeEffect(document.body, [], 2000),
+        new KeyframeEffect(document.body, [], 1000)
+      ])
+    ]);
+    var animation = new Animation(effect, document.timeline);
+    (function isIdle(animation) {
+      assert.equal(animation.playState, 'idle');
+      animation._childAnimations.every(isIdle);
+    })(animation);
+  });
 });