Fix 50% flip handling of CSS Animations using CSS wide keywords

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 40 matching lines @@
   var cssAnimationsData = {
     sharedStyle: null,
     nextID: 0,
   };
   var webAnimationsEnabled = typeof Element.prototype.animate === 'function';
   var expectNoInterpolation = {};
   var afterTestHook = function() {};
 
   var cssAnimationsInterpolation = {
     name: 'CSS Animations',
-    supports: function() {return true;},
+    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 + ';}' +
         '}';
       target.style.animationName = 'animation' + id;
       target.style.animationDuration = '2e10s';
       target.style.animationDelay = '-1e10s';
       target.style.animationTimingFunction = createEasing(at);
     },
   };
 
   var cssTransitionsInterpolation = {
     name: 'CSS Transitions',
-    supports: function() {return true;},
+    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;
     },
   };
 
   var webAnimationsInterpolation = {
     name: 'Web Animations',
-    supports: function(property) {return property.indexOf('-webkit-') != 0;},
+    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',
@@ skipping 49 matching lines @@
   }
 
   function createTargetContainer(parent) {
     var targetContainer = createElement(parent);
     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;
   }
 
   function roundNumbers(value) {
     return value.
         // Round numbers to two decimal places.
         replace(/-?\d*\.\d+(e-?\d+)?/g, function(n) {
           return (parseFloat(n).toFixed(2)).
               replace(/\.\d+/, function(m) {
@@ skipping 23 matching lines @@
         // Place whitespace between tokens.
         replace(/([\w\d.]+|[^\s])/g, '$1 ').
         replace(/\s+/g, ' ');
   }
 
   function assertNoInterpolation(options) {
     assertInterpolation(options, expectNoInterpolation);
   }
 
   function assertInterpolation(options, expectations) {
-    console.assert(CSS.supports(options.property, options.from));
-    console.assert(CSS.supports(options.property, options.to));
+    if (options.from) {
+      console.assert(CSS.supports(options.property, options.from));
+    }
+    if (options.to) {
+      console.assert(CSS.supports(options.property, options.to));
+    }
     interpolationTests.push({
       options: options,
       expectations: expectations,
     });
   }
 
   function createTestTargets(interpolationMethods, interpolationTests, container) {
     var targets = [];
     interpolationMethods.forEach(function(interpolationMethod) {
       var methodContainer = createElement(container);
       interpolationTests.forEach(function(interpolationTest) {
         var property = interpolationTest.options.property;
-        if (!interpolationMethod.supports(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 (interpolationTest.options.method && interpolationTest.options.method != interpolationMethod.name) {
-          return;
-        }
-        var from = interpolationTest.options.from;
-        var to = interpolationTest.options.to;
         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);
@@ skipping 55 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()
     });
   });
 })();