Implement object-form keyframe syntax.

This patch extends the web-animations and web-animations-next
polyfills to accept the object-form syntax for specifying keyframes
(http://w3c.github.io/web-animations/#processing-a-frames-argument).
The capacity is added to the base polyfill, so loading the
web-animations polyfill will enable the new syntax.

It is possible that a browser has a native Web Animations
implementation (and hence does not load the base polyfill), but does
not natively accept object-form keyframes. To address this, this
patch also adds a file to the 'bonus' sources, so the object-form
keyframe syntax can be loaded independently of the base polyfill.

Author: suzyh

src/normalize-keyframes.js

@@ -165,13 +165,53 @@
     }
   };
 
-  function normalizeKeyframes(effectInput) {
-    if (!Array.isArray(effectInput) && effectInput !== null)
-      throw new TypeError('Keyframes must be null or an array of keyframes');
+  function convertToArrayForm(effectInput) {
+    var normalizedEffectInput = [];
+
+    for (var property in effectInput) {
+      if (property in ['easing', 'offset', 'composite'])
+        continue;
+
+      var values = effectInput[property];
+      if (!Array.isArray(values))
+        values = [values];
+
+      var keyframe;
+      var numKeyframes = values.length;
+      for (var i = 0; i < numKeyframes; i++) {
+        keyframe = {};
+
+        if ('offset' in effectInput)
+          keyframe['offset'] = effectInput['offset'];
+        else if (numKeyframes == 1)
+          keyframe['offset'] = 1.0;
+        else
+          keyframe['offset'] = i / (numKeyframes - 1.0);
+
+        if ('easing' in effectInput)
+          keyframe['easing'] = effectInput['easing'];
+
+        if ('composite' in effectInput)
+          keyframe['composite'] = effectInput['composite'];
+
+        keyframe[property] = values[i];
 
+        normalizedEffectInput.push(keyframe);
+      }
+    }
+
+    normalizedEffectInput.sort(function(a, b) { return a['offset'] - b['offset']; });
+    return normalizedEffectInput;
+  };
+
+  function normalizeKeyframes(effectInput) {
     if (effectInput == null)
       return [];
 
+    if (!Array.isArray(effectInput)) {
+      effectInput = convertToArrayForm(effectInput);
+    }
+
     var keyframes = effectInput.map(function(originalKeyframe) {
       var keyframe = {};
       for (var member in originalKeyframe) {
@@ -250,6 +290,7 @@
     return keyframes;
   }
 
+  shared.convertToArrayForm = convertToArrayForm;
   shared.normalizeKeyframes = normalizeKeyframes;
 
   if (WEB_ANIMATIONS_TESTING) {

src/web-animations-bonus-object-form-keyframes.js

@@ -0,0 +1,31 @@
+// Copyright 2016 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) {
+  // If an animation with the new syntax applies an effect, there's no need
+  // to load this part of the polyfill.
+  var element = document.documentElement;
+  var player = element.animate({'left': ['10px', '20px']},
+      {duration: 1, fill: 'forwards'});
+  player.finish();
+  if (getComputedStyle(element).getPropertyValue('left') == '20px')
+    return;
+
+  var originalElementAnimate = window.Element.prototype.animate;
+  window.Element.prototype.animate = function(effectInput, timingInput) {
+    if (!Array.isArray(effectInput) && effectInput !== null)
+      effectInput = shared.convertToArrayForm(effectInput);
+    return originalElementAnimate.call(this, effectInput, timingInput);
+  };
+})(webAnimationsShared);

target-config.js

@@ -44,6 +44,7 @@
 
   var webAnimations1BonusSrc = [
       'src/web-animations-bonus-cancel-events.js',
+      'src/web-animations-bonus-object-form-keyframes.js',
   ];
 
   var liteWebAnimations1Src = [

test/js/keyframes.js

@@ -177,9 +177,22 @@ suite('keyframes', function() {
   });
 
   test('Normalize input that is not an array.', function() {
-    assert.throws(function() {
-      normalizeKeyframes(10);
+    var normalizedKeyframes;
+    assert.doesNotThrow(function() {
+      normalizedKeyframes = normalizeKeyframes({left: '10px'});
     });
+    assert(normalizedKeyframes.length, 1);
+    assert.equal(normalizedKeyframes[0].left, '10px');
+  });
+
+  test('Normalize object-form input.', function() {
+    var normalizedKeyframes;
+    assert.doesNotThrow(function() {
+      normalizedKeyframes = normalizeKeyframes({left: ['10px', '100px']});
+    });
+    assert(normalizedKeyframes.length, 2);
+    assert.equal(normalizedKeyframes[0].left, '10px');
+    assert.equal(normalizedKeyframes[1].left, '100px');
   });
 
   test('Normalize an empty array.', function() {

web-animations-next-lite.dev.html

@@ -36,6 +36,7 @@
 <script src="src/transform-handler.js"></script>
 <script src="src/property-names.js"></script>
 <script src="src/web-animations-bonus-cancel-events.js"></script>
+<script src="src/web-animations-bonus-object-form-keyframes.js"></script>
 <script src="src/timeline.js"></script>
 <script src="src/web-animations-next-animation.js"></script>
 <script src="src/keyframe-effect-constructor.js"></script>

web-animations-next.dev.html

@@ -41,6 +41,7 @@
 <script src="src/shape-handler.js"></script>
 <script src="src/property-names.js"></script>
 <script src="src/web-animations-bonus-cancel-events.js"></script>
+<script src="src/web-animations-bonus-object-form-keyframes.js"></script>
 <script src="src/timeline.js"></script>
 <script src="src/web-animations-next-animation.js"></script>
 <script src="src/keyframe-effect-constructor.js"></script>

web-animations.dev.html

@@ -41,4 +41,5 @@
 <script src="src/shape-handler.js"></script>
 <script src="src/property-names.js"></script>
 <script src="src/web-animations-bonus-cancel-events.js"></script>
+<script src="src/web-animations-bonus-object-form-keyframes.js"></script>