Merge pull request #156 from ewilligers/master

Publish version 2.3.0

Author: rjwright

CONTRIBUTING.md

@@ -20,6 +20,7 @@ is the default target for pull requests.
 1. Commit changes to your fork.
 1. Create a pull request from your fork of web-animations-js to
    [web-animations/web-animations-js/dev](https://github.com/web-animations/web-animations-js/tree/dev).
+1. Ensure that you've signed the [Google Contributor License Agreement](https://cla.developers.google.com/clas).
 
 
 ## Debugging tests
@@ -83,7 +84,7 @@ Example: `http://localhost:9876/base/test/web-platform-tests/web-animations/anim
     npm install
     grunt
     # Optional "grunt test" to make sure everything still passes.
-    git add -f *.min.js*
+    git add -f *.min.js{,.map}
     git rm .gitignore
     git commit -m 'Add build artifacts from '`cat .git/refs/heads/dev`
     git push HEAD:refs/heads/master

Gruntfile.js

@@ -206,6 +206,7 @@ module.exports = function(grunt) {
     }
 
     function filterTests(testFiles) {
+      console.assert(testFiles.length > 0);
       if (!testFilter) {
         return testFiles;
       }
@@ -226,18 +227,20 @@ module.exports = function(grunt) {
         karmaConfig.files = ['test/karma-mocha-setup.js'].concat(config.src, testFiles);
       });
     }
-    function runWebPlatformTests() {
+    function runWebPlatformTests(withNativeFallback) {
       var testFiles = filterTests(grunt.file.expand(config.webPlatformTests));
       if (testFiles.length == 0) {
         return Promise.resolve(true);
       }
 
-      console.info('Running web-platform-tests/web-animations tests...');
+      var withOrWithout = withNativeFallback ? 'with' : 'without';
+      console.info('Running web-platform-tests/web-animations tests for target ' + task.target + ' ' + withOrWithout + ' native fallback...');
       return runKarma(function(karmaConfig) {
         configCallback(karmaConfig);
         karmaConfig.client.testharnessTests = require('./test/web-platform-tests-expectations.js');
         karmaConfig.client.testharnessTests.testURLList = testFiles;
-        karmaConfig.proxies['/base/polyfill.js'] = '/base/' + task.target + '.min.js';
+        karmaConfig.client.testharnessTests.target = task.target;
+        karmaConfig.client.testharnessTests.withNativeFallback = withNativeFallback;
         karmaConfig.files.push('test/karma-testharness-adapter.js');
         var servedFiles = [
           'test/web-platform-tests/resources/**',
@@ -256,10 +259,15 @@ module.exports = function(grunt) {
     }
 
     var polyfillTestsPassed = false;
+    var webPlatformTestsWithFallbackPassed = false;
+    var webPlatformTestsWithoutFallbackPassed = false;
     runPolyfillTests().then(success => {
       polyfillTestsPassed = success;
-    }).then(runWebPlatformTests).then(webPlatformTestsPassed => {
-      done(polyfillTestsPassed && webPlatformTestsPassed);
+    }).then(() => runWebPlatformTests(true)).then(success => {
+      webPlatformTestsWithFallbackPassed = success;
+    }).then(() => runWebPlatformTests(false)).then(success => {
+      webPlatformTestsWithoutFallbackPassed = success;
+      done(polyfillTestsPassed && webPlatformTestsWithFallbackPassed && webPlatformTestsWithoutFallbackPassed);
     }).catch(function(error) {
       console.error(error);
       done(false);

History.md

@@ -1,3 +1,9 @@
+### 2.3.0 - *July 20 2017*
+
+  *  [Support IE/Edge SVG transforms.](https://github.com/web-animations/web-animations-js/pull/148)
+
+  *  [Parse and evaluate calc expressions without eval.](https://github.com/web-animations/web-animations-js/pull/151)
+
 ### 2.2.5 - *April 17 2017*
 
   *  Removed erroneously added *.gz files from release.

package.json

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

src/apply-preserving-inline-style.js

@@ -14,6 +14,28 @@
 
 (function(scope, testing) {
 
+  var SVG_TRANSFORM_PROP = '_webAnimationsUpdateSvgTransformAttr';
+
+  /**
+   * IE/Edge do not support `transform` styles for SVG elements. Instead,
+   * `transform` attribute can be animated with some restrictions.
+   * See https://connect.microsoft.com/IE/feedback/details/811744/ie11-bug-with-implementation-of-css-transforms-in-svg,
+   * https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/1173754/,
+   * https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/101242/, etc.
+   * The same problem is exhibited by pre-Chrome Android browsers (ICS).
+   * Unfortunately, there's no easy way to feature-detect it.
+   */
+  function updateSvgTransformAttr(window, element) {
+    if (!element.namespaceURI || element.namespaceURI.indexOf('/svg') == -1) {
+      return false;
+    }
+    if (!(SVG_TRANSFORM_PROP in window)) {
+      window[SVG_TRANSFORM_PROP] =
+          /Trident|MSIE|IEMobile|Edge|Android 4/i.test(window.navigator.userAgent);
+    }
+    return window[SVG_TRANSFORM_PROP];
+  }
+
   var styleAttributes = {
     cssText: 1,
     length: 1,
@@ -44,13 +66,16 @@
     WEB_ANIMATIONS_TESTING && console.assert(!(element.style instanceof AnimatedCSSStyleDeclaration),
         'Element must not already have an animated style attached.');
 
+    this._element = element;
     // Stores the inline style of the element on its behalf while the
     // polyfill uses the element's inline style to simulate web animations.
     // This is needed to fake regular inline style CSSOM access on the element.
     this._surrogateStyle = document.createElementNS('http://www.w3.org/1999/xhtml', 'div').style;
     this._style = element.style;
     this._length = 0;
     this._isAnimatedProperty = {};
+    this._updateSvgTransformAttr = updateSvgTransformAttr(window, element);
+    this._savedTransformAttr = null;
 
     // Copy the inline style contents over to the surrogate.
     for (var i = 0; i < this._style.length; i++) {
@@ -110,9 +135,30 @@
     _set: function(property, value) {
       this._style[property] = value;
       this._isAnimatedProperty[property] = true;
+      if (this._updateSvgTransformAttr &&
+          scope.unprefixedPropertyName(property) == 'transform') {
+        // On IE/Edge, also set SVG element's `transform` attribute to 2d
+        // matrix of the transform. The `transform` style does not work, but
+        // `transform` attribute can be used instead.
+        // Notice, if the platform indeed supports SVG/CSS transforms the CSS
+        // declaration is supposed to override the attribute.
+        if (this._savedTransformAttr == null) {
+          this._savedTransformAttr = this._element.getAttribute('transform');
+        }
+        this._element.setAttribute('transform', scope.transformToSvgMatrix(value));
+      }
     },
     _clear: function(property) {
       this._style[property] = this._surrogateStyle[property];
+      if (this._updateSvgTransformAttr &&
+          scope.unprefixedPropertyName(property) == 'transform') {
+        if (this._savedTransformAttr) {
+          this._element.setAttribute('transform', this._savedTransformAttr);
+        } else {
+          this._element.removeAttribute('transform');
+        }
+        this._savedTransformAttr = null;
+      }
       delete this._isAnimatedProperty[property];
     },
   };
@@ -185,7 +231,9 @@
     }
   };
 
-  if (WEB_ANIMATIONS_TESTING)
+  if (WEB_ANIMATIONS_TESTING) {
     testing.ensureStyleIsPatched = ensureStyleIsPatched;
+    testing.updateSvgTransformAttr = updateSvgTransformAttr;
+  }
 
 })(webAnimations1, webAnimationsTesting);

src/dimension-handler.js

@@ -14,6 +14,78 @@
 
 (function(scope, testing) {
 
+  // Evaluates a calc expression.
+  // https://drafts.csswg.org/css-values-3/#calc-notation
+  function calculate(expression) {
+    // In calc expressions, white space is required on both sides of the
+    // + and - operators. https://drafts.csswg.org/css-values-3/#calc-notation
+    // Thus any + or - immediately adjacent to . or 0..9 is part of the number,
+    // e.g. -1.23e+45
+    // This regular expression matches ( ) * / + - and numbers.
+    var tokenRegularExpression = /([\+\-\w\.]+|[\(\)\*\/])/g;
+    var currentToken;
+    function consume() {
+      var matchResult = tokenRegularExpression.exec(expression);
+      if (matchResult)
+        currentToken = matchResult[0];
+      else
+        currentToken = undefined;
+    }
+    consume(); // Read the initial token.
+
+    function calcNumber() {
+      // https://drafts.csswg.org/css-values-3/#number-value
+      var result = Number(currentToken);
+      consume();
+      return result;
+    }
+
+    function calcValue() {
+      // <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
+      if (currentToken !== '(')
+        return calcNumber();
+      consume();
+      var result = calcSum();
+      if (currentToken !== ')')
+        return NaN;
+      consume();
+      return result;
+    }
+
+    function calcProduct() {
+      // <calc-product> = <calc-value> [ '*' <calc-value> | '/' <calc-number-value> ]*
+      var left = calcValue();
+      while (currentToken === '*' || currentToken === '/') {
+        var operator = currentToken;
+        consume();
+        var right = calcValue();
+        if (operator === '*')
+          left *= right;
+        else
+          left /= right;
+      }
+      return left;
+    }
+
+    function calcSum() {
+      // <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
+      var left = calcProduct();
+      while (currentToken === '+' || currentToken === '-') {
+        var operator = currentToken;
+        consume();
+        var right = calcProduct();
+        if (operator === '+')
+          left += right;
+        else
+          left -= right;
+      }
+      return left;
+    }
+
+    // <calc()> = calc( <calc-sum> )
+    return calcSum();
+  }
+
   function parseDimension(unitRegExp, string) {
     string = string.trim().toLowerCase();
 
@@ -36,7 +108,7 @@
     var taggedUnitRegExp = 'U(' + unitRegExp.source + ')';
 
     // Validating input is simply applying as many reductions as we can.
-    var typeCheck = string.replace(/[-+]?(\d*\.)?\d+/g, 'N')
+    var typeCheck = string.replace(/[-+]?(\d*\.)?\d+([Ee][-+]?\d+)?/g, 'N')
         .replace(new RegExp('N' + taggedUnitRegExp, 'g'), 'D')
         .replace(/\s[+-]\s/g, 'O')
         .replace(/\s/g, '');
@@ -54,7 +126,7 @@
       return;
 
     for (var unit in matchedUnits) {
-      var result = eval(string.replace(new RegExp('U' + unit, 'g'), '').replace(new RegExp(taggedUnitRegExp, 'g'), '*0'));
+      var result = calculate(string.replace(new RegExp('U' + unit, 'g'), '').replace(new RegExp(taggedUnitRegExp, 'g'), '*0'));
       if (!isFinite(result))
         return;
       matchedUnits[unit] = result;

src/matrix-decomposition.js

@@ -435,5 +435,6 @@
 
   scope.dot = dot;
   scope.makeMatrixDecomposition = makeMatrixDecomposition;
+  scope.transformListToMatrix = convertToMatrix;
 
 })(webAnimations1, webAnimationsTesting);

src/property-names.js

@@ -14,13 +14,15 @@
 
 (function(scope, testing) {
 
-  var aliased = {};
+  var prefixed = {};
+  var unprefixed = {};
 
   function alias(name, aliases) {
     aliases.concat([name]).forEach(function(candidate) {
       if (candidate in document.documentElement.style) {
-        aliased[name] = candidate;
+        prefixed[name] = candidate;
       }
+      unprefixed[candidate] = name;
     });
   }
   alias('transform', ['webkitTransform', 'msTransform']);
@@ -29,7 +31,10 @@
   alias('perspectiveOrigin', ['webkitPerspectiveOrigin']);
 
   scope.propertyName = function(property) {
-    return aliased[property] || property;
+    return prefixed[property] || property;
+  };
+  scope.unprefixedPropertyName = function(property) {
+    return unprefixed[property] || property;
   };
 
 })(webAnimations1, webAnimationsTesting);

src/transform-handler.js

@@ -256,6 +256,19 @@
 
   scope.addPropertiesHandler(parseTransform, mergeTransforms, ['transform']);
 
+  scope.transformToSvgMatrix = function(string) {
+    // matrix(<a> <b> <c> <d> <e> <f>)
+    var mat = scope.transformListToMatrix(parseTransform(string));
+    return 'matrix(' +
+        numberToLongString(mat[0]) + ' ' +  // <a>
+        numberToLongString(mat[1]) + ' ' +  // <b>
+        numberToLongString(mat[4]) + ' ' +  // <c>
+        numberToLongString(mat[5]) + ' ' +  // <d>
+        numberToLongString(mat[12]) + ' ' +  // <e>
+        numberToLongString(mat[13]) +        // <f>
+        ')';
+  };
+
   if (WEB_ANIMATIONS_TESTING)
     testing.parseTransform = parseTransform;