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;
 

test/js/apply-preserving-inline-style.js

@@ -4,9 +4,15 @@ suite('apply-preserving-inline-style', function() {
     ensureStyleIsPatched(this.element);
     this.style = this.element.style;
     document.documentElement.appendChild(this.element);
+    this.svgContainer = document.createElementNS(
+        'http://www.w3.org/2000/svg', 'svg');
+    document.documentElement.appendChild(this.svgContainer);
+    delete window._webAnimationsUpdateSvgTransformAttr;
   });
   teardown(function() {
     document.documentElement.removeChild(this.element);
+    document.documentElement.removeChild(this.svgContainer);
+    delete window._webAnimationsUpdateSvgTransformAttr;
   });
 
   test('Style is patched', function() {
@@ -69,4 +75,119 @@ suite('apply-preserving-inline-style', function() {
     this.style.cssText = 'top: 0px';
     assert.equal(this.style.length, 1);
   });
+  test('Detect SVG transform compatibility', function() {
+    var element = document.createElement('div');
+    var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    function check(userAgent, shouldUpdateSvgTransformAttr) {
+      var win = {navigator: {userAgent: userAgent}};
+      // Non-SVG element is never updated.
+      assert.equal(updateSvgTransformAttr(win, element), false);
+      // SVG element may be updated as tested.
+      assert.equal(updateSvgTransformAttr(win, svgElement),
+          shouldUpdateSvgTransformAttr);
+    }
+    // Unknown data: assume that transforms supported.
+    check('', false);
+    // Chrome: transforms supported.
+    check('Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E)' +
+        ' AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.20' +
+        ' Mobile Safari/537.36',
+        false);
+    // Safari: transforms supported.
+    check('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) ' +
+        'AppleWebKit/537.75.14 (KHTML, like Gecko) Version/7.0.3 ' +
+        'Safari/7046A194A',
+        false);
+    // Firefox: transforms supported.
+    check('Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) ' +
+        'Gecko/20100101 Firefox/40.1',
+        false);
+    // IE: transforms are NOT supported.
+    check('Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 7.0;' +
+        ' InfoPath.3; .NET CLR 3.1.40767; Trident/6.0; en-IN)',
+        true);
+    // Edge: transforms are NOT supported.
+    check('Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36' +
+        ' (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36' +
+        ' Edge/12.10136',
+        true);
+    // ICS Android: transforms are NOT supported.
+    check('Mozilla/5.0 (Linux; U; Android 4.0.4; en-gb; MZ604 Build/I.7.1-45)' +
+        ' AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30',
+        true);
+  });
+  test('Set and clear transform', function() {
+    // This is not an SVG element, so CSS transform support is not consulted.
+    window._webAnimationsUpdateSvgTransformAttr = true;
+    // Set.
+    this.element.style._set('transform', 'translate(10px, 10px) scale(2)');
+    assert.equal(getComputedStyle(this.element).transform,
+        'matrix(2, 0, 0, 2, 10, 10)');
+    assert.equal(this.element.hasAttribute('transform'), false);
+    // Clear.
+    this.element.style._clear('transform');
+    assert.equal(getComputedStyle(this.element).transform, 'none');
+    assert.equal(this.element.hasAttribute('transform'), false);
+  });
+  test('Set and clear supported transform on SVG element', function() {
+    window._webAnimationsUpdateSvgTransformAttr = false;
+    var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    ensureStyleIsPatched(svgElement);
+    this.svgContainer.appendChild(svgElement);
+    // Set.
+    svgElement.style._set('transform', 'translate(10px, 10px) scale(2)');
+    assert.equal(getComputedStyle(svgElement).transform,
+        'matrix(2, 0, 0, 2, 10, 10)');
+    assert.equal(svgElement.hasAttribute('transform'), false);
+    // Clear.
+    svgElement.style._clear('transform');
+    assert.equal(getComputedStyle(svgElement).transform, 'none');
+    assert.equal(svgElement.hasAttribute('transform'), false);
+  });
+  test('Set and clear transform CSS property not supported on SVG element', function() {
+    window._webAnimationsUpdateSvgTransformAttr = true;
+    var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    ensureStyleIsPatched(svgElement);
+    this.svgContainer.appendChild(svgElement);
+    // Set.
+    svgElement.style._set('transform', 'translate(10px, 10px) scale(2)');
+    assert.equal(getComputedStyle(svgElement).transform,
+        'matrix(2, 0, 0, 2, 10, 10)');
+    assert.equal(svgElement.getAttribute('transform'),
+        'matrix(2 0 0 2 10 10)');
+    // Clear.
+    svgElement.style._clear('transform');
+    assert.equal(getComputedStyle(svgElement).transform, 'none');
+    assert.equal(svgElement.getAttribute('transform'), null);
+  });
+  test('Set and clear prefixed transform CSS property not supported on SVG element', function() {
+    window._webAnimationsUpdateSvgTransformAttr = true;
+    var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    ensureStyleIsPatched(svgElement);
+    this.svgContainer.appendChild(svgElement);
+    // Set.
+    svgElement.style._set('msTransform', 'translate(10px, 10px) scale(2)');
+    assert.equal(svgElement.getAttribute('transform'),
+        'matrix(2 0 0 2 10 10)');
+    // Clear.
+    svgElement.style._clear('msTransform');
+    assert.equal(svgElement.getAttribute('transform'), null);
+  });
+  test('Restore transform CSS property not supported on SVG element', function() {
+    window._webAnimationsUpdateSvgTransformAttr = true;
+    var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    svgElement.setAttribute('transform', 'matrix(2 0 0 2 0 0)');
+    ensureStyleIsPatched(svgElement);
+    this.svgContainer.appendChild(svgElement);
+    // Set.
+    svgElement.style._set('transform', 'translate(10px, 10px) scale(2)');
+    assert.equal(getComputedStyle(svgElement).transform,
+        'matrix(2, 0, 0, 2, 10, 10)');
+    assert.equal(svgElement.getAttribute('transform'),
+        'matrix(2 0 0 2 10 10)');
+    // Clear.
+    svgElement.style._clear('transform');
+    assert.equal(getComputedStyle(svgElement).transform, 'none');
+    assert.equal(svgElement.getAttribute('transform'), 'matrix(2 0 0 2 0 0)');
+  });
 });

test/js/dimension-handler.js

@@ -18,6 +18,8 @@ suite('dimension-handler', function() {
         {px: 50.0, em: -6.5});
     assert.deepEqual(webAnimations1.parseLength('calc((5px + 2px)*(1 + 2*(4 + 2*-5)) + 7px - (5em + 6vw/2)*4)'),
         {px: -70, em: -20, vw: -12});
+    assert.deepEqual(webAnimations1.parseLength('calc(-13.2E+1rem/+12e-1/(+1 + +2 - -2 * 2 - -3))'),
+        {rem: -11});
     assert.deepEqual(webAnimations1.parseLength('calc(calc(5px) + calc(((3))) *calc(calc(10px)))'),
         {px: 35});
   });

test/karma-testharness-adapter.js

@@ -18,8 +18,12 @@
   // Behaves like JSON.stringify() except only for strings and outputs strings with single quotes
   // instead of double quotes.
   // This so we can paste test results as expectations while keeping our linter happy.
-  function stringify(string) {
-    return '\'' + string.replace(/\\/g, '\\\\').replace(/\n/g, '\\n').replace(/'/g, '\\\'') + '\'';
+  function stringify(x) {
+    if (typeof x == 'string') {
+      return '\'' + x.replace(/\\/g, '\\\\').replace(/\n/g, '\\n').replace(/'/g, '\\\'') + '\'';
+    }
+    console.assert(typeof x != 'object');
+    return x.toString();
   }
 
   function checkExpectations(testURL, passes, failures, expectedFailures) {
@@ -98,10 +102,12 @@
 
   function checkConfig(config) {
     var requiredProperties = {
+      target: '<String name of polyfill target being tested>',
       testURLList: '<Array of test URLs>',
       skip: '<Object mapping skipped test URLs to the reason for skipping>',
-      expectedFailures: '<Object mapping test URLs to expected inner test failures>',
+      failureConfigurations: '<Array of objects mapping test configuration to test URLs to expected inner test failures>',
       flakyTestIndicator: '<String used in expectedFailures to indicate flaky test (pass/fail)>',
+      withNativeFallback: '<Boolean to indicate whether the native browser fallback should be included>',
     };
     var errorMessage = '';
     if (!config) {
@@ -125,29 +131,64 @@
     return true;
   }
 
+  var filteredConfigurationAttributes = ['target', 'withNativeFallback'];
+
   // Serialises the failures suitable for pasting into expectedFailures: {} in web-platform-tests-expectations.js
-  function formatFailures(failures) {
+  function formatFailures(config, failures) {
+    var result = '    {\n';
+
+    result += '      configuration: {\n';
+    filteredConfigurationAttributes.forEach(function(attribute) {
+      result += '        ' + attribute + ': ' + stringify(config[attribute]) + ',\n';
+    });
+    result += '      },\n';
+
+    result += '      failures: {\n';
     var testURLs = Object.keys(failures);
     testURLs.sort();
-    return testURLs.map(function(testURL) {
+    result += testURLs.map(function(testURL) {
       var tests = Object.keys(failures[testURL]);
       tests.sort();
       return (
-          '    ' + stringify(testURL) + ': {\n' +
+          '        ' + stringify(testURL) + ': {\n' +
           tests.map(function(test) {
             return (
-                '      ' + stringify(test) + ':\n' +
-                '          ' + stringify(failures[testURL][test]) + ',\n');
+                '          ' + stringify(test) + ':\n' +
+                '              ' + stringify(failures[testURL][test]) + ',\n');
           }).join('\n') +
-          '    },\n');
+          '        },\n');
     }).join('\n');
+    result += '      },\n';
+
+    result += '    },\n';
+    return result;
+  }
+
+  function getExpectedFailures(config, testURL) {
+    var result = {};
+    config.failureConfigurations.forEach(function(failureConfiguration) {
+      var configFilter = failureConfiguration.configuration;
+      var filterMatches = filteredConfigurationAttributes.every(function(attribute) {
+        console.assert(attribute in config);
+        console.assert(attribute in configFilter);
+        return configFilter[attribute] == null || config[attribute] == configFilter[attribute];
+      });
+      if (!filterMatches) {
+        return;
+      }
+      var testURLFailures = failureConfiguration.failures[testURL] || [];
+      for (var testName in testURLFailures) {
+        result[testName] = testURLFailures[testName];
+      }
+    });
+    return result;
   }
 
   function runRemainingTests(remainingTestURLs, config, testNameDiv, iframe, outputFailures) {
     if (remainingTestURLs.length == 0) {
       karma.complete();
       window.failures = outputFailures;
-      window.formattedFailures = formatFailures(outputFailures);
+      window.formattedFailures = formatFailures(config, outputFailures);
       return;
     }
 
@@ -167,11 +208,11 @@
     // parent window and call it once testharness.js has loaded.
     window.onTestharnessLoaded = function(innerWindow) {
       innerWindow.add_completion_callback(function(results) {
-        var expectations = config.expectedFailures[testURL];
+        var expectedFailures = getExpectedFailures(config, testURL);
         var failures = {};
         var passes = {};
         results.forEach(function(result) {
-          if (expectations && expectations[result.name] == config.flakyTestIndicator) {
+          if (expectedFailures && expectedFailures[result.name] == config.flakyTestIndicator) {
             failures[result.name] = config.flakyTestIndicator;
             return;
           }
@@ -188,7 +229,7 @@
           outputFailures[testURL] = failures;
         }
 
-        karma.result(checkExpectations(testURL, passes, failures, expectations));
+        karma.result(checkExpectations(testURL, passes, failures, expectedFailures));
         runRemainingTests(remainingTestURLs.slice(1), config, testNameDiv, iframe, outputFailures);
       });
     };

test/resources/testharnessreport.js

@@ -407,17 +407,14 @@ function dump_test_results(tests, status) {
 
 /* BEGIN WEB ANIMATIONS POLYFILL EXTRAS */
 
-// Disable native Web Animations fallback.
-// TODO(alancutter): Make this configurable in testing targets.
-Element.prototype.animate = null;
-
-// The path /base/polyfill.js is expected to be a proxy for the appropriate polyfill script configured in Karma.
-document.write('<script src="/base/polyfill.js"></script>');
-if (window.parent && parent.window.onTestharnessLoaded) {
-    parent.window.onTestharnessLoaded(window);
-} else {
-  metadata_generator.setup();
+// This must be run under a Karma server via "grunt test".
+var config = window.parent.__karma__.config.testharnessTests;
+if (!config.withNativeFallback) {
+    // Disable native Web Animations fallback.
+    Element.prototype.animate = null;
 }
+document.write('<script src="/base/' + config.target + '.min.js"></script>');
+parent.window.onTestharnessLoaded(window);
 
 /* END WEB ANIMATIONS POLYFILL EXTRAS */