Make responsive-test.js use Web Animations

third_party/WebKit/LayoutTests/animations/responsive/resources/responsive-test.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /*
 Exported function:
 assertResponsive
 
 Call signature:
 assertResponsive({
@@ skipping 17 matching lines @@
 configuration.
 It starts the interpolation in every configuration, changes the
 state to every other configuration (n * (n - 1) complexity) and asserts that
 each destination configuration's expectations are met.
 Each animation target can be assigned custom styles via the ".target" selector.
 This test is designed to catch stale interpolation caches.
 */
 
 (function() {
 'use strict';
-var sharedStyle = null;
-var animationCount = 0;
 var pendingResponsiveTests = [];
 
 function assertResponsive(options) {
   pendingResponsiveTests.push(options);
 }
 
 function createStateTransitions(configurations) {
   var stateTransitions = [];
   for (var i = 0; i < configurations.length; i++) {
     var beforeConfiguration = configurations[i];
@@ skipping 35 matching lines @@
     console.assert(targets.every(function(target) { return target.parentElement === parent; }));
     parent.style[property] = state.inherited;
   }
   if (state.underlying) {
     for (var target of targets) {
       target.style[property] = state.underlying;
     }
   }
 }
 
-function createAnimationName() {
-  return 'anim' + (animationCount++);
+function createKeyframes(property, from, to) {
+  return [
+    {[property]: from},
+    {[property]: to},
+  ];
 }
 
-function createKeyframes(animationName, property, from, to) {
-  return `
-@keyframes ${animationName} {
-  from { ${property}: ${from}; }
-  to { ${property}: ${to}; }
-}`;
-}
-
-function addGlobalStyle(styleText) {
-  if (!sharedStyle) {
-    sharedStyle = createElement('style', document.documentElement);
-  }
-  sharedStyle.textContent += styleText;
-}
-
-function startPausedAnimations(targets, animationName, fractions) {
+function startPausedAnimations(targets, keyframes, fractions) {
   console.assert(targets.length == fractions.length);
   for (var i = 0; i < targets.length; i++) {
     var target = targets[i];
     var fraction = fractions[i];
-    console.assert(fraction >= 0 && fraction <= 1);
-    target.style.animation = `${animationName} 1s linear both paused`;
-    target.style.animationDelay = `${-fraction}s`;
+    console.assert(fraction >= 0 && fraction < 1);
+    var animation = target.animate(keyframes, 1);
+    animation.currentTime = fraction;
+    animation.pause();
   }
 }
 
 function runPendingResponsiveTests() {
   var stateTransitionTests = [];
   pendingResponsiveTests.forEach(function(options) {
     var property = options.property;
     var from = options.from;
     var to = options.to;
-    var animationName = createAnimationName();
-    addGlobalStyle(createKeyframes(animationName, property, from, to));
+    var keyframes = createKeyframes(property, from, to);
 
     var stateTransitions = createStateTransitions(options.configurations);
     stateTransitions.forEach(function(stateTransition) {
       var before = stateTransition.before;
       var after = stateTransition.after;
       var container = createElement('div', document.body);
       var targets = createTargets(after.expect.length, container);
 
       setState(targets, property, before.state);
-      startPausedAnimations(targets, animationName, after.expect.map(function(expectation) { return expectation.at; }));
+      startPausedAnimations(targets, keyframes, after.expect.map(function(expectation) { return expectation.at; }));
       stateTransitionTests.push({
         applyStateTransition() {
           setState(targets, property, after.state);
         },
         assert() {
           for (var i = 0; i < targets.length; i++) {
             var target = targets[i];
             var expectation = after.expect[i];
             var actual = getComputedStyle(target)[property];
             test(function() {
               assert_equals(actual, expectation.is);
             }, `Animation on property <${property}> from [${from}] to [${to}] with ${JSON.stringify(before.state)} changed to ${JSON.stringify(after.state)} at (${expectation.at}) is [${expectation.is}]`);
           }
         },
       });
     });
   });
 
-  // Force style recalc to instantiate animations internally.
-  getComputedStyle(document.body).color;
-
   // Separate style modification from measurement as different phases to avoid a style recalc storm.
   for (var stateTransitionTest of stateTransitionTests) {
     stateTransitionTest.applyStateTransition();
   }
   for (var stateTransitionTest of stateTransitionTests) {
     stateTransitionTest.assert();
   }
 }
 
 function loadScript(url) {
@@ skipping 12 matching lines @@
   requestAnimationFrame(function() {
     runPendingResponsiveTests();
     asyncHandle.done()
   });
 });
 
 
 window.assertResponsive = assertResponsive;
 
 })();