Merge remote-tracking branch 'next/master'

Author: alancutter

.gitignore

@@ -0,0 +1,14 @@
+node_modules
+!node_modules/mocha/mocha.css
+!node_modules/mocha/mocha.js
+!node_modules/mocha/LICENCE
+!node_modules/chai/chai.js
+!node_modules/chai-LICENCE
+web-animations-*.min.js
+web-animations-*.min.js.map
+web-animations.min.js
+web-animations.min.js.map
+inter-*
+*~
+sauce_connect.log
+test.html

History.md

@@ -1,3 +1,21 @@
+### 2.2.1 - *April 28 2016*
+  * [Deprecated invalid timing inputs](https://github.com/web-animations/web-animations-next/pull/437) as they will soon throw [TypeErrors](https://github.com/web-animations/web-animations-next/pull/426) in native browsers.
+
+    For example, this is deprecated and will eventually throw a TypeError:
+
+        element.animate([], {
+            duration: -1,
+            iterationStart: -1,
+            iterations: -1,
+            easing: 'garbage string',
+        });
+
+  * [Fixed polyfill crash in browsers based on Chromium 36 to 46.](https://github.com/web-animations/web-animations-next/pull/434)
+
+  * [Increased cubic-bezier accuracy.](https://github.com/web-animations/web-animations-next/pull/428)
+
+  * [Added support for grad and turn units for angles.](https://github.com/web-animations/web-animations-next/pull/427)
+
 ### 2.2.0 - *April 6 2016*
   * Deprecated the use of hyphens in property names.
 

package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/web-animations/web-animations-js.git"
   },
-  "version": "2.2.0",
+  "version": "2.2.1",
   "keywords": [
     "animations",
     "polyfill"

src/deprecation.js

@@ -17,6 +17,10 @@
   var silenced = {};
 
   shared.isDeprecated = function(feature, date, advice, plural) {
+    if (WEB_ANIMATIONS_TESTING) {
+      return true;
+    }
+
     var auxVerb = plural ? 'are' : 'is';
     var today = new Date();
     var expiry = new Date(date);

src/matrix-decomposition.js

@@ -253,29 +253,32 @@
     ];
   }
 
+  function toRadians(arg) {
+    var rads = arg.rad || 0;
+    var degs = arg.deg || 0;
+    var grads = arg.grad || 0;
+    var turns = arg.turn || 0;
+    var angle = (degs / 360 + grads / 400 + turns) * (2 * Math.PI) + rads;
+    return angle;
+  }
+
   function convertItemToMatrix(item) {
     switch (item.t) {
       case 'rotatex':
-        var rads = item.d[0].rad || 0;
-        var degs = item.d[0].deg || 0;
-        var angle = (degs * Math.PI / 180) + rads;
+        var angle = toRadians(item.d[0]);
         return [1, 0, 0, 0,
                 0, Math.cos(angle), Math.sin(angle), 0,
                 0, -Math.sin(angle), Math.cos(angle), 0,
                 0, 0, 0, 1];
       case 'rotatey':
-        var rads = item.d[0].rad || 0;
-        var degs = item.d[0].deg || 0;
-        var angle = (degs * Math.PI / 180) + rads;
+        var angle = toRadians(item.d[0]);
         return [Math.cos(angle), 0, -Math.sin(angle), 0,
                 0, 1, 0, 0,
                 Math.sin(angle), 0, Math.cos(angle), 0,
                 0, 0, 0, 1];
       case 'rotate':
       case 'rotatez':
-        var rads = item.d[0].rad || 0;
-        var degs = item.d[0].deg || 0;
-        var angle = (degs * Math.PI / 180) + rads;
+        var angle = toRadians(item.d[0]);
         return [Math.cos(angle), Math.sin(angle), 0, 0,
                 -Math.sin(angle), Math.cos(angle), 0, 0,
                 0, 0, 1, 0,
@@ -284,9 +287,7 @@
         var x = item.d[0];
         var y = item.d[1];
         var z = item.d[2];
-        var rads = item.d[3].rad || 0;
-        var degs = item.d[3].deg || 0;
-        var angle = (degs * Math.PI / 180) + rads;
+        var angle = toRadians(item.d[3]);
 
         var sqrLength = x * x + y * y + z * z;
         if (sqrLength === 0) {
@@ -347,28 +348,20 @@
                 0, 0, item.d[2], 0,
                 0, 0, 0, 1];
       case 'skew':
-        var xDegs = item.d[0].deg || 0;
-        var xRads = item.d[0].rad || 0;
-        var yDegs = item.d[1].deg || 0;
-        var yRads = item.d[1].rad || 0;
-        var xAngle = (xDegs * Math.PI / 180) + xRads;
-        var yAngle = (yDegs * Math.PI / 180) + yRads;
+        var xAngle = toRadians(item.d[0]);
+        var yAngle = toRadians(item.d[1]);
         return [1, Math.tan(yAngle), 0, 0,
                 Math.tan(xAngle), 1, 0, 0,
                 0, 0, 1, 0,
                 0, 0, 0, 1];
       case 'skewx':
-        var rads = item.d[0].rad || 0;
-        var degs = item.d[0].deg || 0;
-        var angle = (degs * Math.PI / 180) + rads;
+        var angle = toRadians(item.d[0]);
         return [1, 0, 0, 0,
                 Math.tan(angle), 1, 0, 0,
                 0, 0, 1, 0,
                 0, 0, 0, 1];
       case 'skewy':
-        var rads = item.d[0].rad || 0;
-        var degs = item.d[0].deg || 0;
-        var angle = (degs * Math.PI / 180) + rads;
+        var angle = toRadians(item.d[0]);
         return [1, Math.tan(angle), 0, 0,
                 0, 1, 0, 0,
                 0, 0, 1, 0,

src/timing-utilities.js

@@ -16,6 +16,7 @@
 
   var fills = 'backwards|forwards|both|none'.split('|');
   var directions = 'reverse|alternate|alternate-reverse'.split('|');
+  var linear = function(x) { return x; };
 
   function cloneTimingInput(timingInput) {
     if (typeof timingInput == 'number') {
@@ -38,14 +39,19 @@
     this._playbackRate = 1;
     this._direction = 'normal';
     this._easing = 'linear';
+    this._easingFunction = linear;
+  }
+
+  function isInvalidTimingDeprecated() {
+    return shared.isDeprecated('Invalid timing inputs', '2016-03-02', 'TypeError exceptions will be thrown instead.', true);
   }
 
   AnimationEffectTiming.prototype = {
     _setMember: function(member, value) {
       this['_' + member] = value;
       if (this._effect) {
         this._effect._timingInput[member] = value;
-        this._effect._timing = shared.normalizeTimingInput(shared.normalizeTimingInput(this._effect._timingInput));
+        this._effect._timing = shared.normalizeTimingInput(this._effect._timingInput);
         this._effect.activeDuration = shared.calculateActiveDuration(this._effect._timing);
         if (this._effect._animation) {
           this._effect._animation._rebuildUnderlyingAnimation();
@@ -74,12 +80,18 @@
       return this._fill;
     },
     set iterationStart(value) {
+      if ((isNaN(value) || value < 0) && isInvalidTimingDeprecated()) {
+        throw new TypeError('iterationStart must be a non-negative number, received: ' + timing.iterationStart);
+      }
       this._setMember('iterationStart', value);
     },
     get iterationStart() {
       return this._iterationStart;
     },
     set duration(value) {
+      if (value != 'auto' && (isNaN(value) || value < 0) && isInvalidTimingDeprecated()) {
+        throw new TypeError('duration must be non-negative or auto, received: ' + value);
+      }
       this._setMember('duration', value);
     },
     get duration() {
@@ -92,12 +104,16 @@
       return this._direction;
     },
     set easing(value) {
+      this._easingFunction = toTimingFunction(value);
       this._setMember('easing', value);
     },
     get easing() {
       return this._easing;
     },
     set iterations(value) {
+      if ((isNaN(value) || value < 0) && isInvalidTimingDeprecated()) {
+        throw new TypeError('iterations must be non-negative, received: ' + value);
+      }
       this._setMember('iterations', value);
     },
     get iterations() {
@@ -150,9 +166,7 @@
 
   function normalizeTimingInput(timingInput, forGroup) {
     timingInput = shared.numericTimingToObject(timingInput);
-    var timing = makeTiming(timingInput, forGroup);
-    timing._easingFunction = toTimingFunction(timing.easing);
-    return timing;
+    return makeTiming(timingInput, forGroup);
   }
 
   function cubic(a, b, c, d) {
@@ -168,7 +182,7 @@
         var mid = (start + end) / 2;
         function f(a, b, m) { return 3 * a * (1 - m) * (1 - m) * m + 3 * b * (1 - m) * m * m + m * m * m};
         var xEst = f(a, c, mid);
-        if (Math.abs(x - xEst) < 0.001) {
+        if (Math.abs(x - xEst) < 0.0001) {
           return f(b, d, mid);
         }
         if (xEst < x) {
@@ -209,25 +223,28 @@
   var numberString = '\\s*(-?\\d+\\.?\\d*|-?\\.\\d+)\\s*';
   var cubicBezierRe = new RegExp('cubic-bezier\\(' + numberString + ',' + numberString + ',' + numberString + ',' + numberString + '\\)');
   var stepRe = /steps\(\s*(\d+)\s*,\s*(start|middle|end)\s*\)/;
-  var linear = function(x) { return x; };
 
   function toTimingFunction(easing) {
     if (!styleForCleaning) {
       styleForCleaning = document.createElement('div').style;
     }
     styleForCleaning.animationTimingFunction = '';
     styleForCleaning.animationTimingFunction = easing;
-    easing = styleForCleaning.animationTimingFunction;
+    var validatedEasing = styleForCleaning.animationTimingFunction;
+
+    if (validatedEasing == '' && isInvalidTimingDeprecated()) {
+      throw new TypeError(easing + ' is not a valid value for easing');
+    }
 
-    var cubicData = cubicBezierRe.exec(easing);
+    var cubicData = cubicBezierRe.exec(validatedEasing);
     if (cubicData) {
       return cubic.apply(this, cubicData.slice(1).map(Number));
     }
-    var stepData = stepRe.exec(easing);
+    var stepData = stepRe.exec(validatedEasing);
     if (stepData) {
       return step(Number(stepData[1]), {'start': Start, 'middle': Middle, 'end': End}[stepData[2]]);
     }
-    var preset = presets[easing];
+    var preset = presets[validatedEasing];
     if (preset) {
       return preset;
     }

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

@@ -13,14 +13,36 @@
 // 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.
+  // If the polyfill is being loaded in a context where Element.animate is
+  // supported but object-form syntax is not, then creating an animation
+  // using the new syntax will either have no effect or will throw an exception.
+  // In either case, we want to proceed to load this part of the polyfill.
+  //
+  // The test animation uses an opacity other than the one the element already
+  // has, and doesn't need to change during the animation for the test to work.
+  // After the test, the element's opacity will be left how we found it:
+  // - If the animation is not created, the test will leave the element's
+  //   opacity untouched at originalOpacity.
+  // - If the animation is created, it will be cancelled, and leave the
+  //   element's opacity at originalOpacity.
+  // - If the animation is somehow created and runs without being cancelled,
+  //   when it finishes after 1ms, it will cease to have any effect (because
+  //   fill is not specified), and opacity will again be left at originalOpacity.
   var element = document.documentElement;
-  var animation = element.animate({'opacity': ['1', '0']},
-      {duration: 1, fill: 'forwards'});
-  animation.finish();
-  var animated = getComputedStyle(element).getPropertyValue('opacity') == '0';
-  animation.cancel();
+  var animation = null;
+  var animated = false;
+  try {
+    var originalOpacity = getComputedStyle(element).getPropertyValue('opacity');
+    var testOpacity = originalOpacity == '0' ? '1' : '0';
+    animation = element.animate({'opacity': [testOpacity, testOpacity]},
+        {duration: 1});
+    animation.currentTime = 0;
+    animated = getComputedStyle(element).getPropertyValue('opacity') == testOpacity;
+  } catch (error) {
+  } finally {
+    if (animation)
+      animation.cancel();
+  }
   if (animated) {
     return;
   }

test/js/keyframes.js

@@ -442,16 +442,13 @@ suite('keyframes', function() {
     assert.equal(typeof interpolations[1].interpolation, 'function');
   });
 
-  test('Make interpolations with invalid easing.', function() {
-    var interpolations;
-    assert.doesNotThrow(function() {
-      interpolations = makeInterpolations(makePropertySpecificKeyframeGroups(normalizeKeyframes([
+  test('Make interpolations with invalid easing should throw.', function() {
+    assert.throws(function() {
+      makeInterpolations(makePropertySpecificKeyframeGroups(normalizeKeyframes([
         {left: '0px', easing: 'pants and ducks'},
         {left: '200px'},
       ])));
     });
-    assert.equal(interpolations.length, 1);
-    assert.equal(interpolations[0].easing.toString(), 'function (x) { return x; }');
   });
 });
 

test/js/matrix-interpolation.js

@@ -407,42 +407,42 @@ suite('matrix interpolation', function() {
   test('decompose various CSS properties with unsupported units', function() {
     compareInterpolatedTransforms(
         ['rotateX(110grad)', 'rotateX(10deg) matrix(1, 0, 0, 1, 0, 0)'],
-        ['rotateX(0deg)', 'rotateX(10deg) matrix(1, 0, 0, 1, 0, 0)'],
+        ['rotateX(99deg)', 'rotateX(10deg) matrix(1, 0, 0, 1, 0, 0)'],
         0.5);
 
     compareInterpolatedTransforms(
         ['rotateY(2turn)', 'rotateY(2rad) matrix(1, 0, 0, 1, 0, 0)'],
-        ['rotateY(0rad)', 'rotateY(2rad) matrix(1, 0, 0, 1, 0, 0)'],
+        ['rotateY(12.56637rad)', 'rotateY(2rad) matrix(1, 0, 0, 1, 0, 0)'],
         0.5);
 
     compareInterpolatedTransforms(
         ['rotate(320deg)', 'rotateY(10grad) matrix(1, 0, 0, 1, 0, 0)'],
-        ['rotate(320deg)', 'rotateY(0deg) matrix(1, 0, 0, 1, 0, 0)'],
+        ['rotate(320deg)', 'rotateY(9deg) matrix(1, 0, 0, 1, 0, 0)'],
         0.5);
 
     compareInterpolatedTransforms(
         ['rotateZ(10grad)', 'rotateZ(2rad) matrix(1, 0, 0, 1, 0, 0)'],
-        ['rotateZ(0rad)', 'rotateZ(2rad) matrix(1, 0, 0, 1, 0, 0)'],
+        ['rotateZ(0.157rad)', 'rotateZ(2rad) matrix(1, 0, 0, 1, 0, 0)'],
         0.5);
 
     compareInterpolatedTransforms(
         ['rotate3d(1, 1, 1, 100deg)', 'rotate3d(1, 1, 1, 2turn) matrix(1, 0, 0, 1, 0, 0)'],
-        ['rotate3d(1, 1, 1, 100deg)', 'rotate3d(1, 1, 1, 0deg) matrix(1, 0, 0, 1, 0, 0)'],
+        ['rotate3d(1, 1, 1, 100deg)', 'rotate3d(1, 1, 1, 720deg) matrix(1, 0, 0, 1, 0, 0)'],
         0.5);
 
     compareInterpolatedTransforms(
         ['skew(30grad)', 'skew(10deg) matrix(1, 0, 0, 1, 0, 0)'],
-        ['skew(0deg)', 'skew(10deg) matrix(1, 0, 0, 1, 0, 0)'],
+        ['skew(27deg)', 'skew(10deg) matrix(1, 0, 0, 1, 0, 0)'],
         0.5);
 
     compareInterpolatedTransforms(
         ['skewx(3grad)', 'skewx(1rad) matrix(1, 0, 0, 1, 0, 0)'],
-        ['skewx(0rad)', 'skewx(1rad) matrix(1, 0, 0, 1, 0, 0)'],
+        ['skewx(0.04712rad)', 'skewx(1rad) matrix(1, 0, 0, 1, 0, 0)'],
         0.5);
 
     compareInterpolatedTransforms(
         ['skewy(3rad)', 'skewy(1grad) matrix(1, 0, 0, 1, 0, 0)'],
-        ['skewy(3rad)', 'skewy(0rad) matrix(1, 0, 0, 1, 0, 0)'],
+        ['skewy(3rad)', 'skewy(0.0157rad) matrix(1, 0, 0, 1, 0, 0)'],
         0.5);
 
     compareInterpolatedTransforms(