Add test coverage for interpolations using CSS wide keywords and neutral keyframes

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 61 matching lines @@
       cssAnimationsData.sharedStyle.textContent += '' +
         '@keyframes animation' + id + ' {' +
           'from {' + property + ': ' + from + ';}' +
           '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;
     },
     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;
     },
+    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) {
       var keyframes = [{}, {}];
       keyframes[0][property] = from;
       keyframes[1][property] = to;
       var player = target.animate(keyframes, {
         fill: 'forwards',
         duration: 1,
         easing: createEasing(at),
         delay: -0.5,
         iterations: 0.5,
       });
     },
+    rebaseline: false,
   };
 
   function expectFlip(from, to, flipAt) {
     return [-0.3, 0, 0.3, 0.5, 0.6, 1, 1.5].map(function(at) {
       return {
         at: at,
         is: at < flipAt ? from : to
       };
     });
   }
@@ skipping 27 matching lines @@
     return new Promise(function(resolve) {
       var script = document.createElement('script');
       script.src = url;
       script.onload = resolve;
       document.head.appendChild(script);
     });
   }
 
   function createTargetContainer(parent) {
     var targetContainer = createElement(parent);
+    targetContainer.classList.add('container');
     var template = document.querySelector('#target-template');
     if (template) {
       targetContainer.appendChild(template.content.cloneNode(true));
     }
     var target = targetContainer.querySelector('.target') || targetContainer;
     target.classList.add('target');
     target.parentElement.classList.add('parent');
     targetContainer.target = target;
     return targetContainer;
   }
@@ skipping 42 matching lines @@
     }
     if (options.to) {
       console.assert(CSS.supports(options.property, options.to));
     }
     interpolationTests.push({
       options: options,
       expectations: expectations,
     });
   }
 
-  function createTestTargets(interpolationMethods, interpolationTests, container) {
+  function createTestTargets(interpolationMethods, interpolationTests, container, rebaselineContainer) {
     var targets = [];
-    interpolationMethods.forEach(function(interpolationMethod) {
+    interpolationMethods.forEach(function(interpolationMethod, interpolationMethodIndex) {
       var methodContainer = createElement(container);
       interpolationTests.forEach(function(interpolationTest) {
         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}',
+}, [\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 testContainer = createElement(methodContainer, 'div', testText);
         createElement(testContainer, 'br');
         var expectations = interpolationTest.expectations;
         if (expectations === expectNoInterpolation) {
           expectations = interpolationMethod.nonInterpolationExpectations(from, to);
         }
         expectations.forEach(function(expectation) {
           var actualTargetContainer = createTargetContainer(testContainer);
           var expectedTargetContainer = createTargetContainer(testContainer);
           expectedTargetContainer.target.classList.add('expected');
           expectedTargetContainer.target.style[property] = expectation.is;
           var target = actualTargetContainer.target;
           target.classList.add('actual');
           interpolationMethod.setup(property, from, target);
           target.interpolate = function() {
             interpolationMethod.interpolate(property, from, 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 (interpolationMethod.rebaseline) {
+              rebaselineExpectation.textContent += `  {at: ${expectation.at}, is: '${actualValue}'},\n`;
+            }
           };
           targets.push(target);
         });
       });
     });
     return targets;
   }
 
   function runInterpolationTests() {
     var interpolationMethods = [
       cssTransitionsInterpolation,
       cssAnimationsInterpolation,
     ];
     if (webAnimationsEnabled) {
       interpolationMethods.push(webAnimationsInterpolation);
     }
+    var rebaselineContainer = createElement(document.body);
     var container = createElement(document.body);
-    var targets = createTestTargets(interpolationMethods, interpolationTests, container);
+    var targets = createTestTargets(interpolationMethods, interpolationTests, container, rebaselineContainer);
     getComputedStyle(document.documentElement).left; // Force a style recalc for transitions.
-    // Separate interpolation and measurement into different phases to avoid (targets.length) style recalcs.
+    // Separate interpolation and measurement into different phases to avoid O(n^2) of the number of targets.
     for (var target of targets) {
       target.interpolate();
     }
     for (var target of targets) {
       target.measure();
     }
     if (window.testRunner) {
       container.remove();
     }
     afterTestHook();
@@ skipping 10 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() {
       runInterpolationTests();
       asyncHandle.done()
     });
   });
 })();