Web Animations API: Update interpolation test harness to test element.animate()

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

Index: LayoutTests/animations/interpolation/resources/interpolation-test.js
diff --git a/LayoutTests/animations/interpolation/resources/interpolation-test.js b/LayoutTests/animations/interpolation/resources/interpolation-test.js
index 5b5ee62c9dc7a3af620e6e7eb560e3010302e709..0e034a09bab8bb7140fd035b043e2090f5379dc8 100644
--- a/LayoutTests/animations/interpolation/resources/interpolation-test.js
+++ b/LayoutTests/animations/interpolation/resources/interpolation-test.js
@@ -53,6 +53,7 @@
 (function() {
   var webkitPrefix = 'webkitAnimation' in document.documentElement.style ? '-webkit-' : '';
   var isRefTest = false;
+  var webAnimationsTest = typeof document.head.animate === 'function';

[dstockwell, 2014/03/20 00:35:45]

Element.prototype.animate

[alancutter (OOO until 2018), 2014/03/20 04:59:56]

Done.

   var startEvent = webkitPrefix ? 'webkitAnimationStart' : 'animationstart';
   var endEvent = webkitPrefix ? 'webkitAnimationEnd' : 'animationend';
   var testCount = 0;
@@ -69,9 +70,19 @@
       '  background: gold;\n' +
       '}\n';
   var fragment = document.createDocumentFragment();
+  var fragmentAttachedListeners = [];
   var style = document.createElement('style');
+  var cssTests = document.createElement('div');
+  cssTests.id = 'css-tests';
   var afterTestCallback = null;
   fragment.appendChild(style);
+  fragment.appendChild(cssTests);
+
+  if (webAnimationsTest) {
+    var waTests = document.createElement('div');
+    waTests.id = 'web-animations-tests';
+    fragment.appendChild(waTests);
+  }
 
   var updateScheduled = false;
   function maybeScheduleUpdate() {
@@ -83,6 +94,7 @@
       updateScheduled = false;
       style.innerHTML = cssText;
       document.body.appendChild(fragment);
+      fragmentAttachedListeners.forEach(function(listener) {listener();});
     }, 0);
   }
 
@@ -156,8 +168,26 @@
     }));
   }
 
-  function describeTest(params) {
-    return params.property + ': from [' + params.from + '] to [' + params.to + ']';
+  function createTestContainer(description, className) {
+    var testContainer = document.createElement('div');
+    testContainer.setAttribute('description', description);
+    testContainer.classList.add('test');
+    if (className) {
+      testContainer.classList.add(className);
+    }
+    return testContainer;
+  }
+
+  function convertPropertyToCamelCase(property) {
+    return property.replace(/^-/, '').replace(/-\w/g, function(m) {return m[1].toUpperCase();});
+  }
+
+  function describeCSSTest(params) {
+    return 'CSS ' + params.property + ': from [' + params.from + '] to [' + params.to + ']';
+  }
+
+  function describeWATest(params) {
+    return 'element.animate() ' + convertPropertyToCamelCase(params.property) + ': from [' + params.from + '] to [' + params.to + ']';
   }
 
   function assertInterpolation(params, expectations) {
@@ -170,15 +200,22 @@
     }
     var testId = defineKeyframes(params);
     var nextCaseId = 0;
-    var testContainer = document.createElement('div');
-    testContainer.setAttribute('description', describeTest(params));
-    testContainer.classList.add('test');
-    testContainer.classList.add(testId);
-    fragment.appendChild(testContainer);
+    var cssTestContainer = createTestContainer(describeCSSTest(params), testId);
+    cssTests.appendChild(cssTestContainer);
+    if (webAnimationsTest) {
+      var waTestContainer = createTestContainer(describeWATest(params), testId);
+      waTests.appendChild(waTestContainer);
+    }
     expectations.forEach(function(expectation) {
-      testContainer.appendChild(makeInterpolationTest(
-          expectation.at, testId, 'case-' + ++nextCaseId, params, expectation.is));
+      cssTestContainer.appendChild(makeInterpolationTest(
+          true, expectation.at, testId, 'case-' + ++nextCaseId, params, expectation.is));
     });
+    if (webAnimationsTest) {
+      expectations.forEach(function(expectation) {
+        waTestContainer.appendChild(makeInterpolationTest(
+            false, expectation.at, testId, 'case-' + ++nextCaseId, params, expectation.is));
+      });
+    }
     maybeScheduleUpdate();
   }
 
@@ -243,7 +280,7 @@
     return value;
   }
 
-  function makeInterpolationTest(fraction, testId, caseId, params, expectation) {
+  function makeInterpolationTest(cssTest, fraction, testId, caseId, params, expectation) {
     console.assert(expectation === undefined || !isRefTest);
     var targetContainer = createTargetContainer(caseId);
     var target = targetContainer.querySelector('.target') || targetContainer;
@@ -262,6 +299,7 @@
       var value = getComputedStyle(this).getPropertyValue(params.property);
       var result = '';
       var reason = '';
+      var property = cssTest ? params.property : convertPropertyToCamelCase(params.property);
       if (expectation !== undefined) {
         var parsedExpectation = getComputedStyle(replica).getPropertyValue(params.property);
         var pass = normalizeValue(value) === normalizeValue(parsedExpectation);
@@ -270,7 +308,7 @@
             (expectation === parsedExpectation ? '' : ' (parsed as [' + sanitizeUrls(parsedExpectation) + '])');
         value = pass ? expectation : sanitizeUrls(value);
       }
-      return result + params.property + ' from [' + params.from + '] to ' +
+      return result + property + ' from [' + params.from + '] to ' +
           '[' + params.to + '] was [' + value + ']' +
           ' at ' + fraction + reason;
     };
@@ -278,13 +316,29 @@
       this.style[params.property] = getComputedStyle(this).getPropertyValue(params.property);
     };
     var easing = createEasing(fraction);
-    cssText += '.' + testId + ' .' + caseId + '.active {\n' +
-        '  ' + webkitPrefix + 'animation: ' + testId + ' ' + durationSeconds + 's forwards;\n' +
-        '  ' + webkitPrefix + 'animation-timing-function: ' + easing + ';\n' +
-        '  ' + webkitPrefix + 'animation-iteration-count: ' + iterationCount + ';\n' +
-        '  ' + webkitPrefix + 'animation-delay: ' + delaySeconds + 's;\n' +
-        '}\n';
     testCount++;
+    if (cssTest) {
+      cssText += '.' + testId + ' .' + caseId + '.active {\n' +
+          '  ' + webkitPrefix + 'animation: ' + testId + ' ' + durationSeconds + 's forwards;\n' +
+          '  ' + webkitPrefix + 'animation-timing-function: ' + easing + ';\n' +
+          '  ' + webkitPrefix + 'animation-iteration-count: ' + iterationCount + ';\n' +
+          '  ' + webkitPrefix + 'animation-delay: ' + delaySeconds + 's;\n' +
+          '}\n';
+    } else {
+      var keyframes = [{}, {}];
+      keyframes[0][convertPropertyToCamelCase(params.property)] = params.from;
+      keyframes[1][convertPropertyToCamelCase(params.property)] = params.to;
+      fragmentAttachedListeners.push(function() {
+        target.animate(keyframes, {
+            fill: 'forwards',
+            duration: 1,
+            easing: easing,
+            delay: -0.5,
+            iterations: 0.5,
+          });
+        animationEnded();
+      });
+    }
     var testFragment = document.createDocumentFragment();
     testFragment.appendChild(targetContainer);
     replica && testFragment.appendChild(replicaContainer);
@@ -318,7 +372,7 @@
     return !finished && animationEventCount === testCount;
   }
 
-  function endEventListener() {
+  function animationEnded() {
     animationEventCount++;
     if (!isLastAnimationEvent()) {
       return;
@@ -328,7 +382,7 @@
 
   if (window.internals) {
     durationSeconds = 0;
-    document.documentElement.addEventListener(endEvent, endEventListener);
+    document.documentElement.addEventListener(endEvent, animationEnded);
   } else if (webkitPrefix) {
     durationSeconds = 1e9;
     iterationCount = 1;
@@ -341,7 +395,7 @@
       setTimeout(finishTest, 0);
     });
   } else {
-    document.documentElement.addEventListener(endEvent, endEventListener);
+    document.documentElement.addEventListener(endEvent, animationEnded);
   }
 
   if (!window.testRunner) {