Add smooth interpolation support for <color> custom properties

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 81 matching lines @@
       target.style.animationName = 'animation' + id;
       target.style.animationDuration = '2e10s';
       target.style.animationDelay = '-1e10s';
       target.style.animationTimingFunction = createEasing(at);
     },
     rebaseline: false,
   };
 
   var cssTransitionsInterpolation = {
     name: 'CSS Transitions',
     supportsProperty: function() {return true;},

[sashab, 2017/01/25 02:55:00]

These fixes are great, but maybe put in separate patch.

[alancutter (OOO until 2018), 2017/01/25 03:55:13]

Done.

     supportsValue: function() {return true;},
     setup: function(property, from, target) {
-      target.style[property] = isNeutralKeyframe(from) ? '' : from;
+      target.style.setProperty(property, isNeutralKeyframe(from) ? '' : from);
     },
     nonInterpolationExpectations: function(from, to) {
       return expectFlip(from, to, -Infinity);
     },
     interpolate: function(property, from, to, at, target) {
       target.style.transitionDuration = '2e10s';
       target.style.transitionDelay = '-1e10s';
       target.style.transitionTimingFunction = createEasing(at);
       target.style.transitionProperty = property;
-      target.style[property] = isNeutralKeyframe(to) ? '' : to;
+      target.style.setProperty(property, isNeutralKeyframe(to) ? '' : to);
     },
     rebaseline: false,
   };
 
   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) {
       this.interpolateComposite(property, from, 'replace', to, 'replace', at, target);
     },
     interpolateComposite: function(property, from, fromComposite, to, toComposite, 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);
+      // Convert standard properties to camelCase.
+      if (!property.startsWith('--')) {
+        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);
+          }
         }
       }
       var keyframes = [];
       if (!isNeutralKeyframe(from)) {
         keyframes.push({
           offset: 0,
           composite: fromComposite,
           [property]: from,
         });
       }
@@ skipping 159 matching lines @@
     var testText = `${interpolationMethod.name}: property <${property}> from ${keyframeText(from)} to ${keyframeText(to)}`;
     var testContainer = createElement(interpolationMethodContainer, 'div', testText);
     createElement(testContainer, 'br');
     var expectations = interpolationTest.expectations;
     if (expectations === expectNoInterpolation) {
       expectations = interpolationMethod.nonInterpolationExpectations(from, to);
     }
     return expectations.map(function(expectation) {
       var actualTargetContainer = createTargetContainer(testContainer, 'actual');
       var expectedTargetContainer = createTargetContainer(testContainer, 'expected');
-      expectedTargetContainer.target.style[property] = expectation.is;
+      expectedTargetContainer.target.style.setProperty(property, expectation.is);
       var target = actualTargetContainer.target;
       interpolationMethod.setup(property, from, target);
       target.interpolate = function() {
         interpolationMethod.interpolate(property, from, to, expectation.at, target);
       };
       target.measure = function() {
-        var actualValue = getComputedStyle(target)[property];
+        var actualValue = getComputedStyle(target).getPropertyValue(property);
         test(function() {
           assert_equals(
             normalizeValue(actualValue),
-            normalizeValue(getComputedStyle(expectedTargetContainer.target)[property]));
+            normalizeValue(getComputedStyle(expectedTargetContainer.target).getPropertyValue(property)));
         }, `${testText} at (${expectation.at}) is [${sanitizeUrls(actualValue)}]`);
         if (rebaselineExpectation) {
           rebaselineExpectation.textContent += `  {at: ${expectation.at}, is: '${actualValue}'},\n`;
         }
       };
       return target;
     });
   }
 
   function createCompositionTestTargets(compositionContainer, compositionTest, rebaselineContainer) {
@@ skipping 25 matching lines @@
       var rebaselineExpectation;
       rebaseline.appendChild(rebaselineExpectation = document.createTextNode(''));
       rebaseline.appendChild(document.createTextNode(']);\n\n'));
     }
     var testText = `Compositing: property <${property}> underlying [${underlying}] from ${fromComposite} [${from}] to ${toComposite} [${to}]`;
     var testContainer = createElement(compositionContainer, 'div', testText);
     createElement(testContainer, 'br');
     return compositionTest.expectations.map(function(expectation) {
       var actualTargetContainer = createTargetContainer(testContainer, 'actual');
       var expectedTargetContainer = createTargetContainer(testContainer, 'expected');
-      expectedTargetContainer.target.style[property] = expectation.is;
+      expectedTargetContainer.target.style.setProperty(property, expectation.is);
       var target = actualTargetContainer.target;
-      target.style[property] = underlying;
+      target.style.setProperty(property, underlying);
       target.interpolate = function() {
         webAnimationsInterpolation.interpolateComposite(property, from, fromComposite, to, toComposite, expectation.at, target);
       };
       target.measure = function() {
-        var actualValue = getComputedStyle(target)[property];
+        var actualValue = getComputedStyle(target).getPropertyValue(property);
         test(function() {
           assert_equals(
             normalizeValue(actualValue),
-            normalizeValue(getComputedStyle(expectedTargetContainer.target)[property]));
+            normalizeValue(getComputedStyle(expectedTargetContainer.target).getPropertyValue(property)));
         }, `${testText} at (${expectation.at}) is [${sanitizeUrls(actualValue)}]`);
         if (rebaselineExpectation) {
           rebaselineExpectation.textContent += `  {at: ${expectation.at}, is: '${actualValue}'},\n`;
         }
       };
       return target;
     });
   }
 
   function validateTestInputs(property, from, to, underlying) {
@@ skipping 70 matching lines @@
       asyncHandle.done()
     });
   });
 
   window.assertInterpolation = assertInterpolation;
   window.assertNoInterpolation = assertNoInterpolation;
   window.assertComposition = assertComposition;
   window.afterTest = afterTest;
   window.neutralKeyframe = neutralKeyframe;
 })();