Use neutralKeyframe sentinal instead of '' for interpolation-test.js tests

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 32 matching lines @@
  *        generated according to each interpolation method's handling of values
  *        that don't interpolate.
  *  - assertComposition({property, underlying, [addFrom], [addTo], [replaceFrom], [replaceTo]}, [{at: fraction, is: value}])
  *        Similar to assertInterpolation() instead using only the Web Animations API
  *        to animate composite specified keyframes (add or replace) on top of
  *        an underlying value.
  *        Exactly one of (addFrom, replaceFrom) must be specified.
  *        Exactly one of (addTo, replaceTo) must be specified.
  *  - afterTest(callback)
  *        Calls callback after all the tests have executed.
+ *
+ * The following object is exported:
+ *  - neutralKeyframe
+ *        Can be used as the from/to value to use a neutral keyframe.
  */
 'use strict';
 (function() {
   var interpolationTests = [];
   var compositionTests = [];
   var cssAnimationsData = {
     sharedStyle: null,
     nextID: 0,
   };
   var webAnimationsEnabled = typeof Element.prototype.animate === 'function';
   var expectNoInterpolation = {};
   var afterTestHook = function() {};
+  var neutralKeyframe = {};
+  function isNeutralKeyframe(keyframe) {
+    return keyframe === neutralKeyframe;
+  }
 
   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++;
       if (!cssAnimationsData.sharedStyle) {
         cssAnimationsData.sharedStyle = createElement(document.body, 'style');
       }
       cssAnimationsData.sharedStyle.textContent += '' +
         '@keyframes animation' + id + ' {' +
-          'from {' + property + ': ' + from + ';}' +
-          'to {' + property + ': ' + to + ';}' +
+          (isNeutralKeyframe(from) ? '' : `from {${property}: ${from};}`) +
+          (isNeutralKeyframe(to) ? '' : `to {${property}: ${to};}`) +
         '}';
       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;},
     supportsValue: function() {return true;},
     setup: function(property, from, target) {
-      target.style[property] = from;
+      target.style[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] = to;
+      target.style[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);
         }
       }
-      this.interpolateKeyframes([
-        {offset: 0, [property]: from},
-        {offset: 1, [property]: to},
-      ], at, target);
-    },
-    interpolateKeyframes: function(keyframes, at, target) {
+      var keyframes = [];
+      if (!isNeutralKeyframe(from)) {
+        keyframes.push({
+          offset: 0,
+          composite: fromComposite,
+          [property]: from,
+        });
+      }
+      if (!isNeutralKeyframe(to)) {
+        keyframes.push({
+          offset: 1,
+          composite: toComposite,
+          [property]: to,
+        });
+      }
       target.animate(keyframes, {
         fill: 'forwards',
         duration: 1,
         easing: createEasing(at),
         delay: -0.5,
         iterations: 0.5,
       });
     },
     rebaseline: false,
   };
@@ skipping 108 matching lines @@
     if (options.to) {
       console.assert(CSS.supports(options.property, options.to));
     }
     interpolationTests.push({options, expectations});
   }
 
   function assertComposition(options, expectations) {
     compositionTests.push({options, expectations});
   }
 
+  function keyframeText(keyframe) {
+    return isNeutralKeyframe(keyframe) ? 'neutral' : `[${keyframe}]`;
+  }
+
+  function keyframeCode(keyframe) {
+    return isNeutralKeyframe(keyframe) ? 'neutralKeyframe' : `'${keyframe}'`;
+  }
+
   function createInterpolationTestTargets(interpolationMethod, interpolationMethodContainer, interpolationTest, rebaselineContainer) {
     var property = interpolationTest.options.property;
     var from = interpolationTest.options.from;
     var to = interpolationTest.options.to;
     if ((interpolationTest.options.method && interpolationTest.options.method != interpolationMethod.name)
       || !interpolationMethod.supportsProperty(property)
       || !interpolationMethod.supportsValue(from)
       || !interpolationMethod.supportsValue(to)) {
       return;
     }
     if (interpolationMethod.rebaseline) {
       var rebaseline = createElement(rebaselineContainer, 'pre');
       rebaseline.appendChild(document.createTextNode(`\
 assertInterpolation({
   property: '${property}',
-  from: '${from}',
-  to: '${to}',
+  from: ${keyframeCode(from)},
+  to: ${keyframeCode(to)},
 }, [\n`));
       var rebaselineExpectation;
       rebaseline.appendChild(rebaselineExpectation = document.createTextNode(''));
       rebaseline.appendChild(document.createTextNode(']);\n\n'));
     }
-    var testText = `${interpolationMethod.name}: property <${property}> from [${from}] to [${to}]`;
+    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;
@@ skipping 43 matching lines @@
     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;
       var target = actualTargetContainer.target;
       target.style[property] = underlying;
       target.interpolate = function() {
-        webAnimationsInterpolation.interpolateKeyframes([{
-          offset: 0,
-          composite: fromComposite,
-          [toCamelCase(property)]: from,
-        }, {
-          offset: 1,
-          composite: toComposite,
-          [toCamelCase(property)]: to,
-        }], expectation.at, target);
+        webAnimationsInterpolation.interpolateComposite(property, from, fromComposite, to, toComposite, 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) {
           rebaselineExpectation.textContent += `  {at: ${expectation.at}, is: '${actualValue}'},\n`;
@@ skipping 40 matching lines @@
     if (window.testRunner) {
       container.remove();
     }
     afterTestHook();
   }
 
   function afterTest(f) {
     afterTestHook = f;
   }
 
-  window.assertInterpolation = assertInterpolation;
-  window.assertNoInterpolation = assertNoInterpolation;
-  window.assertComposition = assertComposition;
-  window.afterTest = afterTest;
-
   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()
     });
   });
+
+  window.assertInterpolation = assertInterpolation;
+  window.assertNoInterpolation = assertNoInterpolation;
+  window.assertComposition = assertComposition;
+  window.afterTest = afterTest;
+  window.neutralKeyframe = neutralKeyframe;
 })();