Not automatically play created animation

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;

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;
     },

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;

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);
+  });
 });

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);
+  });
 });