Web Animations: Use of hyphens is no longer supported

third_party/WebKit/LayoutTests/animations/interpolation/resources/interpolation-test.js

 /*
  * Copyright (C) 2015 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 45 matching lines @@
   var interpolationTests = [];
   var compositionTests = [];
   var cssAnimationsData = {
     sharedStyle: null,
     nextID: 0,
   };
   var webAnimationsEnabled = typeof Element.prototype.animate === 'function';
   var expectNoInterpolation = {};
   var afterTestHook = function() {};
 
+  function toCamelCase(property) {
+    for (var i = property.length - 2; i > 0; --i) {
+      if (property[i] === '-') {
+        property = property.substring(0, i) + property[i + 1].toUpperCase() + property.substring(i + 2);
+      }
+    }
+    return property;
+  }
+

[alancutter (OOO until 2018), 2016/03/07 03:08:53]

This helper function should be below the configuration variables.

[Eric Willigers, 2016/03/09 03:21:21]

Done.

   var cssAnimationsInterpolation = {
     name: 'CSS Animations',
     supportsProperty: function() {return true;},
     supportsValue: function() {return true;},
     setup: function() {},
     nonInterpolationExpectations: function(from, to) {
       return expectFlip(from, to, 0.5);
     },
     interpolate: function(property, from, to, at, target) {
       var id = cssAnimationsData.nextID++;
@@ skipping 35 matching lines @@
 
   var webAnimationsInterpolation = {
     name: 'Web Animations',
     supportsProperty: function(property) {return property.indexOf('-webkit-') !== 0;},
     supportsValue: function(value) {return value !== '';},
     setup: function() {},
     nonInterpolationExpectations: function(from, to) {
       return expectFlip(from, to, 0.5);
     },
     interpolate: function(property, from, to, at, target) {
-      // Convert to camelCase
-      for (var i = property.length - 2; i > 0; --i) {
-        if (property[i] === '-') {
-          property = property.substring(0, i) + property[i + 1].toUpperCase() + property.substring(i + 2);
-        }
-      }
+      property = toCamelCase(property);
       this.interpolateKeyframes([
         {offset: 0, [property]: from},
         {offset: 1, [property]: to},
       ], at, target);
     },
     interpolateKeyframes: function(keyframes, at, target) {
       target.animate(keyframes, {
         fill: 'forwards',
         duration: 1,
         easing: createEasing(at),
@@ skipping 195 matching lines @@
     return compositionTest.expectations.map(function(expectation) {
       var actualTargetContainer = createTargetContainer(testContainer, 'actual');
       var expectedTargetContainer = createTargetContainer(testContainer, 'expected');
       expectedTargetContainer.target.style[property] = expectation.is;
       var target = actualTargetContainer.target;
       target.style[property] = underlying;
       target.interpolate = function() {
         webAnimationsInterpolation.interpolateKeyframes([{
           offset: 0,
           composite: fromComposite,
-          [property]: from,
+          [toCamelCase(property)]: from,
         }, {
           offset: 1,
           composite: toComposite,
-          [property]: to,
+          [toCamelCase(property)]: to,
         }], expectation.at, target);
       };
       target.measure = function() {
         var actualValue = getComputedStyle(target)[property];
         test(function() {
           assert_equals(
             normalizeValue(actualValue),
             normalizeValue(getComputedStyle(expectedTargetContainer.target)[property]));
         }, `${testText} at (${expectation.at}) is [${sanitizeUrls(actualValue)}]`);
         if (rebaselineExpectation) {
@@ skipping 56 matching lines @@
   loadScript('../../resources/testharness.js').then(function() {
     return loadScript('../../resources/testharnessreport.js');
   }).then(function() {
     var asyncHandle = async_test('This test uses interpolation-test.js.')
     requestAnimationFrame(function() {
       runTests();
       asyncHandle.done()
     });
   });
 })();