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

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

 /*
  * Copyright (C) 2013 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 35 matching lines @@
  *    results. This function may not be used in a ref test.
  *  * convertToReference - This is intended to be used interactively to
  *    construct a reference given the results of a test. To build a
  *    reference, run the test, open the inspector and trigger this
  *    function, then copy/paste the results.
  */
 'use strict';
 (function() {
   var webkitPrefix = 'webkitAnimation' in document.documentElement.style ? '-webkit-' : '';
   var isRefTest = false;
+  var webAnimationsTest = typeof Element.prototype.animate === 'function';
   var startEvent = webkitPrefix ? 'webkitAnimationStart' : 'animationstart';
   var endEvent = webkitPrefix ? 'webkitAnimationEnd' : 'animationend';
   var testCount = 0;
   var animationEventCount = 0;
   // FIXME: This should be 0, but 0 duration animations are broken in at least
   // pre-Web-Animations Blink, WebKit and Gecko.
   var durationSeconds = 0.001;
   var iterationCount = 0.5;
   var delaySeconds = 0;
   var cssText = '.test:hover:before {\n' +
       '  content: attr(description);\n' +
       '  position: absolute;\n' +
       '  z-index: 1000;\n' +
       '  background: gold;\n' +
       '}\n';
   var fragment = document.createDocumentFragment();
+  var fragmentAttachedListeners = [];
   var style = document.createElement('style');
+  var cssTests = document.createElement('div');
+  cssTests.id = 'css-tests';
+  cssTests.textContent = 'CSS Animations:';
   var afterTestCallback = null;
   fragment.appendChild(style);
+  fragment.appendChild(cssTests);
+
+  if (webAnimationsTest) {
+    var waTests = document.createElement('div');
+    waTests.id = 'web-animations-tests';
+    waTests.textContent = 'Web Animations API:';
+    fragment.appendChild(waTests);
+  }
 
   var updateScheduled = false;
   function maybeScheduleUpdate() {
     if (updateScheduled) {
       return;
     }
     updateScheduled = true;
     setTimeout(function() {
       updateScheduled = false;
       style.innerHTML = cssText;
       document.body.appendChild(fragment);
+      fragmentAttachedListeners.forEach(function(listener) {listener();});
     }, 0);
   }
 
   function dumpResults() {
     var targets = document.querySelectorAll('.target.active');
     if (isRefTest) {
       // Convert back to reference to avoid cases where the computed style is
       // out of sync with the compositor.
       for (var i = 0; i < targets.length; i++) {
         targets[i].convertToReference();
       }
       style.parentNode.removeChild(style);
     } else {
-      var resultString = '';
+      var cssResultString = 'CSS Animations:\n';
+      var waResultString = 'Web Animations API:\n';
       for (var i = 0; i < targets.length; i++) {
-        resultString += targets[i].getResultString() + '\n';
+        if (targets[i].isCSSTest) {
+          cssResultString += targets[i].getResultString() + '\n';
+        } else {
+          waResultString += targets[i].getResultString() + '\n';
+        }
       }
-      var results = document.createElement('div');
-      results.style.whiteSpace = 'pre';
-      results.textContent = resultString;
+      var results = document.createElement('pre');
+      results.textContent = cssResultString + (webAnimationsTest ? '\n' + waResultString : '');
       results.id = 'results';
       document.body.appendChild(results);
     }
   }
 
   function convertToReference() {
     console.assert(isRefTest);
     var scripts = document.querySelectorAll('script');
     for (var i = 0; i < scripts.length; i++) {
       scripts[i].parentNode.removeChild(scripts[i]);
@@ skipping 33 matching lines @@
 
   function testInterpolationAt(fractions, params) {
     if (!Array.isArray(fractions)) {
       fractions = [fractions];
     }
     assertInterpolation(params, fractions.map(function(fraction) {
       return {at: fraction};
     }));
   }
 
-  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) {
     // If the prefixed property is not supported, try to unprefix it.
     if (/^-[^-]+-/.test(params.property) && !CSS.supports(params.property, 'initial')) {
       var unprefixed = params.property.replace(/^-[^-]+-/, '');
       if (CSS.supports(unprefixed, 'initial')) {
         params.property = unprefixed;
       }
     }
     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();
   }
 
   var nextKeyframeId = 0;
   function defineKeyframes(params) {
     var testId = 'test-' + ++nextKeyframeId;
     cssText += '@' + webkitPrefix + 'keyframes ' + testId + ' { \n' +
         '  0% { ' + params.property + ': ' + params.from + '; }\n' +
         '  100% { ' + params.property + ': ' + params.to + '; }\n' +
         '}\n';
@@ skipping 44 matching lines @@
         var url = /url\(([^\)]*)\)/g.exec(matches[i])[1];
         var anchor = document.createElement('a');
         anchor.href = url;
         anchor.pathname = '...' + anchor.pathname.substring(anchor.pathname.lastIndexOf('/'));
         value = value.replace(matches[i], 'url(' + anchor.href + ')');
       }
     }
     return value;
   }
 
-  function makeInterpolationTest(fraction, testId, caseId, params, expectation) {
+  function makeInterpolationTest(cssTest, fraction, testId, caseId, params, expectation) {

[dstockwell, 2014/03/20 05:47:24]

Instead of a boolean parameter, cssTest could be 'kind' with a string of either
'css' or 'web-animations'. This would make the callsite easier to understand.

[alancutter (OOO until 2018), 2014/03/20 05:55:59]

Done.

     console.assert(expectation === undefined || !isRefTest);
     var targetContainer = createTargetContainer(caseId);
     var target = targetContainer.querySelector('.target') || targetContainer;
     target.classList.add('active');
     var replicaContainer, replica;
     if (expectation !== undefined) {
       replicaContainer = createTargetContainer(caseId);
       replica = replicaContainer.querySelector('.target') || replicaContainer;
       replica.classList.add('replica');
       replica.style.setProperty(params.property, expectation);
     }
+    target.isCSSTest = cssTest;

[dstockwell, 2014/03/20 05:47:24]

here too

[alancutter (OOO until 2018), 2014/03/20 05:55:59]

Done.

     target.getResultString = function() {
       if (!CSS.supports(params.property, expectation)) {
         return 'FAIL: [' + params.property + ': ' + expectation + '] is not supported';
       }
       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);
         result = pass ? 'PASS: ' : 'FAIL: ';
         reason = pass ? '' : ', expected [' + expectation + ']' +
             (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;
     };
     target.convertToReference = function() {
       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);
     testFragment.appendChild(document.createTextNode('\n'));
     return testFragment;
   }
 
   var finished = false;
   function finishTest() {
     finished = true;
@@ skipping 13 matching lines @@
   }
 
   if (window.testRunner) {
     testRunner.waitUntilDone();
   }
 
   function isLastAnimationEvent() {
     return !finished && animationEventCount === testCount;
   }
 
-  function endEventListener() {
+  function animationEnded() {
     animationEventCount++;
     if (!isLastAnimationEvent()) {
       return;
     }
     finishTest();
   }
 
   if (window.internals) {
     durationSeconds = 0;
-    document.documentElement.addEventListener(endEvent, endEventListener);
+    document.documentElement.addEventListener(endEvent, animationEnded);
   } else if (webkitPrefix) {
     durationSeconds = 1e9;
     iterationCount = 1;
     delaySeconds = -durationSeconds / 2;
     document.documentElement.addEventListener(startEvent, function() {
       animationEventCount++;
       if (!isLastAnimationEvent()) {
         return;
       }
       setTimeout(finishTest, 0);
     });
   } else {
-    document.documentElement.addEventListener(endEvent, endEventListener);
+    document.documentElement.addEventListener(endEvent, animationEnded);
   }
 
   if (!window.testRunner) {
     setTimeout(function() {
       if (finished) {
         return;
       }
       finishTest();
     }, 10000);
   }
 
   window.runAsRefTest = runAsRefTest;
   window.testInterpolationAt = testInterpolationAt;
   window.assertInterpolation = assertInterpolation;
   window.convertToReference = convertToReference;
   window.afterTest = afterTest;
 })();