Bug 1466031 - Move CSS animations / Web animation integration tests to web-platform-tests; r=hiro

--HG--
rename : dom/animation/test/css-animations/test_cssanimation-animationname.html => testing/web-platform/tests/css/css-animations/CSSAnimation-animationName.tentative.html
rename : dom/animation/test/css-animations/test_animation-cancel.html => testing/web-platform/tests/css/css-animations/CSSAnimation-canceling.tentative.html
rename : dom/animation/test/css-animations/test_setting-effect.html => testing/web-platform/tests/css/css-animations/CSSAnimation-effect.tentative.html
rename : dom/animation/test/css-animations/test_animation-finished.html => testing/web-platform/tests/css/css-animations/CSSAnimation-finished.tentative.html
rename : dom/animation/test/css-animations/test_animation-computed-timing.html => testing/web-platform/tests/css/css-animations/CSSAnimation-getComputedTiming.tentative.html
rename : dom/animation/test/css-animations/test_animation-currenttime.html => testing/web-platform/tests/css/css-animations/CSSAnimation-getCurrentTime.tentative.html
rename : dom/animation/test/css-animations/test_animation-id.html => testing/web-platform/tests/css/css-animations/CSSAnimation-id.tentative.html
rename : dom/animation/test/css-animations/test_animation-pausing.html => testing/web-platform/tests/css/css-animations/CSSAnimation-pausing.tentative.html
rename : dom/animation/test/css-animations/test_animation-playstate.html => testing/web-platform/tests/css/css-animations/CSSAnimation-playState.tentative.html
rename : dom/animation/test/css-animations/test_animation-ready.html => testing/web-platform/tests/css/css-animations/CSSAnimation-ready.tentative.html
rename : dom/animation/test/css-animations/test_animation-starttime.html => testing/web-platform/tests/css/css-animations/CSSAnimation-startTime.tentative.html
rename : dom/animation/test/css-animations/test_pseudoElement-get-animations.html => testing/web-platform/tests/css/css-animations/CSSPseudoElement-getAnimations.tentative.html
rename : dom/animation/test/css-animations/test_document-get-animations.html => testing/web-platform/tests/css/css-animations/Document-getAnimations.tentative.html
rename : dom/animation/test/css-animations/test_animations-dynamic-changes.html => testing/web-platform/tests/css/css-animations/Element-getAnimations-dynamic-changes.tentative.html
rename : dom/animation/test/css-animations/test_element-get-animations.html => testing/web-platform/tests/css/css-animations/Element-getAnimations.tentative.html
rename : dom/animation/test/css-animations/test_keyframeeffect-getkeyframes.html => testing/web-platform/tests/css/css-animations/KeyframeEffect-getKeyframes.tentative.html
rename : dom/animation/test/css-animations/test_effect-target.html => testing/web-platform/tests/css/css-animations/KeyframeEffect-target.tentative.html
rename : dom/animation/test/css-animations/test_event-dispatch.html => testing/web-platform/tests/css/css-animations/event-dispatch.tentative.html
rename : dom/animation/test/css-animations/test_event-order.html => testing/web-platform/tests/css/css-animations/event-order.tentative.html
rename : dom/animation/test/testcommon.js => testing/web-platform/tests/css/css-animations/support/testcommon.js
extra : rebase_source : 87f112f3018504414a7d6d17d66c4980b58017d0

dom/animation/test/mochitest.ini

@@ -15,25 +15,6 @@ support-files =
   testcommon.js
   !/dom/events/test/event_leak_utils.js
 
-[css-animations/test_animations-dynamic-changes.html]
-[css-animations/test_animation-cancel.html]
-[css-animations/test_animation-computed-timing.html]
-[css-animations/test_animation-currenttime.html]
-[css-animations/test_animation-finished.html]
-[css-animations/test_animation-id.html]
-[css-animations/test_animation-pausing.html]
-[css-animations/test_animation-playstate.html]
-[css-animations/test_animation-ready.html]
-[css-animations/test_animation-starttime.html]
-[css-animations/test_cssanimation-animationname.html]
-[css-animations/test_document-get-animations.html]
-[css-animations/test_effect-target.html]
-[css-animations/test_element-get-animations.html]
-[css-animations/test_event-dispatch.html]
-[css-animations/test_event-order.html]
-[css-animations/test_keyframeeffect-getkeyframes.html]
-[css-animations/test_pseudoElement-get-animations.html]
-[css-animations/test_setting-effect.html]
 [css-transitions/test_animation-cancel.html]
 [css-transitions/test_animation-computed-timing.html]
 [css-transitions/test_animation-currenttime.html]

testing/web-platform/meta/MANIFEST.json

@@ -241000,6 +241000,11 @@
      {}
     ]
    ],
+   "css/css-animations/support/testcommon.js": [
+    [
+     {}
+    ]
+   ],
    "css/css-backgrounds/OWNERS": [
     [
      {}
@@ -318343,6 +318348,108 @@
      {}
     ]
    ],
+   "css/css-animations/CSSAnimation-animationName.tentative.html": [
+    [
+     "/css/css-animations/CSSAnimation-animationName.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-animations/CSSAnimation-canceling.tentative.html": [
+    [
+     "/css/css-animations/CSSAnimation-canceling.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-animations/CSSAnimation-effect.tentative.html": [
+    [
+     "/css/css-animations/CSSAnimation-effect.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-animations/CSSAnimation-finished.tentative.html": [
+    [
+     "/css/css-animations/CSSAnimation-finished.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-animations/CSSAnimation-getComputedTiming.tentative.html": [
+    [
+     "/css/css-animations/CSSAnimation-getComputedTiming.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-animations/CSSAnimation-getCurrentTime.tentative.html": [
+    [
+     "/css/css-animations/CSSAnimation-getCurrentTime.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-animations/CSSAnimation-id.tentative.html": [
+    [
+     "/css/css-animations/CSSAnimation-id.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-animations/CSSAnimation-pausing.tentative.html": [
+    [
+     "/css/css-animations/CSSAnimation-pausing.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-animations/CSSAnimation-playState.tentative.html": [
+    [
+     "/css/css-animations/CSSAnimation-playState.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-animations/CSSAnimation-ready.tentative.html": [
+    [
+     "/css/css-animations/CSSAnimation-ready.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-animations/CSSAnimation-startTime.tentative.html": [
+    [
+     "/css/css-animations/CSSAnimation-startTime.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-animations/CSSPseudoElement-getAnimations.tentative.html": [
+    [
+     "/css/css-animations/CSSPseudoElement-getAnimations.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-animations/Document-getAnimations.tentative.html": [
+    [
+     "/css/css-animations/Document-getAnimations.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-animations/Element-getAnimations-dynamic-changes.tentative.html": [
+    [
+     "/css/css-animations/Element-getAnimations-dynamic-changes.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-animations/Element-getAnimations.tentative.html": [
+    [
+     "/css/css-animations/Element-getAnimations.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-animations/KeyframeEffect-getKeyframes.tentative.html": [
+    [
+     "/css/css-animations/KeyframeEffect-getKeyframes.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-animations/KeyframeEffect-target.tentative.html": [
+    [
+     "/css/css-animations/KeyframeEffect-target.tentative.html",
+     {}
+    ]
+   ],
    "css/css-animations/animation-iteration-count-calc.html": [
     [
      "/css/css-animations/animation-iteration-count-calc.html",
@@ -318369,6 +318476,18 @@
      }
     ]
    ],
+   "css/css-animations/event-dispatch.tentative.html": [
+    [
+     "/css/css-animations/event-dispatch.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-animations/event-order.tentative.html": [
+    [
+     "/css/css-animations/event-order.tentative.html",
+     {}
+    ]
+   ],
    "css/css-animations/pending-style-changes-001.html": [
     [
      "/css/css-animations/pending-style-changes-001.html",
@@ -493788,6 +493907,74 @@
    "c7b1d7a341e34e780c452e9e1ffcfdf0e2f15230",
    "visual"
   ],
+  "css/css-animations/CSSAnimation-animationName.tentative.html": [
+   "a1a7b0f5f895cc8c76d92135c0520a4d2f35849c",
+   "testharness"
+  ],
+  "css/css-animations/CSSAnimation-canceling.tentative.html": [
+   "690c85c604a99dce4075b9e78ad07bb35a2a29a6",
+   "testharness"
+  ],
+  "css/css-animations/CSSAnimation-effect.tentative.html": [
+   "239804c0817476dcbcd1daf2845de060dada59bf",
+   "testharness"
+  ],
+  "css/css-animations/CSSAnimation-finished.tentative.html": [
+   "fa8bcfcce8ca629c98321560c50a6fcec13fd2cf",
+   "testharness"
+  ],
+  "css/css-animations/CSSAnimation-getComputedTiming.tentative.html": [
+   "dfb257bf382342c671d890eab920a38af103b09b",
+   "testharness"
+  ],
+  "css/css-animations/CSSAnimation-getCurrentTime.tentative.html": [
+   "3c78d8a3582fbfd393530f723db241bb292b7385",
+   "testharness"
+  ],
+  "css/css-animations/CSSAnimation-id.tentative.html": [
+   "4261e252375b8a8bed12f1a4430a15f717e81c48",
+   "testharness"
+  ],
+  "css/css-animations/CSSAnimation-pausing.tentative.html": [
+   "2fd3852854a1fa7839ad8f0e680a1f8f1cb5ddab",
+   "testharness"
+  ],
+  "css/css-animations/CSSAnimation-playState.tentative.html": [
+   "07de4d59977ac90551ca75f97ad2c3a13ff7f8f4",
+   "testharness"
+  ],
+  "css/css-animations/CSSAnimation-ready.tentative.html": [
+   "7b48e790fb4ef83ed5e40643f23c9fc128a08894",
+   "testharness"
+  ],
+  "css/css-animations/CSSAnimation-startTime.tentative.html": [
+   "e0e36b1420ee396008a64ad2146e42f604f2748e",
+   "testharness"
+  ],
+  "css/css-animations/CSSPseudoElement-getAnimations.tentative.html": [
+   "e0416917dae056418942304cfb1eb7d72764fcd9",
+   "testharness"
+  ],
+  "css/css-animations/Document-getAnimations.tentative.html": [
+   "2a83bd2de29e7e946660b3197a3f0b89e525d109",
+   "testharness"
+  ],
+  "css/css-animations/Element-getAnimations-dynamic-changes.tentative.html": [
+   "dcea0e894abb5b6a90789e1d75c77dde61d5f739",
+   "testharness"
+  ],
+  "css/css-animations/Element-getAnimations.tentative.html": [
+   "4b88172681e568a506d2e98ca8191b97fc4cd71f",
+   "testharness"
+  ],
+  "css/css-animations/KeyframeEffect-getKeyframes.tentative.html": [
+   "fea76b0139adf3edfb80c1118b79065267c1c3b1",
+   "testharness"
+  ],
+  "css/css-animations/KeyframeEffect-target.tentative.html": [
+   "ae35ffd1e94532eaa2c3f2cb38d8e8d021decdb8",
+   "testharness"
+  ],
   "css/css-animations/OWNERS": [
    "1f5f2cd90103ea32e65f81c7d36007d1ac156905",
    "support"
@@ -494096,10 +494283,22 @@
    "d4692e2ac84a6dbbc9efd7937964d43ecd9dd109",
    "manual"
   ],
+  "css/css-animations/event-dispatch.tentative.html": [
+   "e1940173a00e421b4d730db538259643b55db5c4",
+   "testharness"
+  ],
+  "css/css-animations/event-order.tentative.html": [
+   "0115580619b629e47ae0f2635cc84e1e80442a8f",
+   "testharness"
+  ],
   "css/css-animations/pending-style-changes-001.html": [
    "5f2bf4b6712dd230109be62407cd31800451a271",
    "testharness"
   ],
+  "css/css-animations/support/testcommon.js": [
+   "3e2b733b29fca0963c95c0d069b7a518db266004",
+   "support"
+  ],
   "css/css-backgrounds/OWNERS": [
    "656d9f4e3a66f8cb955910171b9997140e4bbd8e",
    "support"

testing/web-platform/tests/css/css-animations/CSSAnimation-animationName.tentative.html

@@ -3,7 +3,7 @@
 <title>CSSAnimation.animationName</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/testcommon.js"></script>
 <style>
 @keyframes xyz {
   to { left: 100px }

testing/web-platform/tests/css/css-animations/CSSAnimation-canceling.tentative.html

@@ -3,7 +3,7 @@
 <title>Canceling a CSS animation</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/testcommon.js"></script>
 <style>
 @keyframes translateAnim {
   to { transform: translate(100px) }

testing/web-platform/tests/css/css-animations/CSSAnimation-effect.tentative.html

@@ -3,7 +3,7 @@
 <title>CSSAnimation.effect</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src='../testcommon.js'></script>
+<script src="support/testcommon.js"></script>
 <style>
 @keyframes anim {
   from {

testing/web-platform/tests/css/css-animations/CSSAnimation-finished.tentative.html

@@ -3,7 +3,7 @@
 <title>CSSAnimation.finished</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/testcommon.js"></script>
 <style>
 @keyframes abc {
   to { transform: translate(10px) }

testing/web-platform/tests/css/css-animations/CSSAnimation-getComputedTiming.tentative.html

@@ -3,7 +3,7 @@
 <title>CSSAnimation.getComputedTiming()</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/testcommon.js"></script>
 <style>
 @keyframes moveAnimation {
   from { margin-left: 100px }

testing/web-platform/tests/css/css-animations/CSSAnimation-getCurrentTime.tentative.html

@@ -19,7 +19,7 @@
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/testcommon.js"></script>
 </head>
 <body>
 <div id="log"></div>

testing/web-platform/tests/css/css-animations/CSSAnimation-id.tentative.html

@@ -3,7 +3,7 @@
 <title>CSSAnimation.id</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/testcommon.js"></script>
 <style>
 @keyframes abc { }
 </style>

testing/web-platform/tests/css/css-animations/CSSAnimation-pausing.tentative.html

@@ -3,7 +3,7 @@
 <title>Pausing a CSSAnimation</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/testcommon.js"></script>
 <style>
 @keyframes anim {
   0% { margin-left: 0px }

testing/web-platform/tests/css/css-animations/CSSAnimation-playState.tentative.html

@@ -3,7 +3,7 @@
 <title>CSSAnimation.playState</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/testcommon.js"></script>
 <style>
 @keyframes anim { }
 </style>

testing/web-platform/tests/css/css-animations/CSSAnimation-ready.tentative.html

@@ -3,7 +3,7 @@
 <title>CSSAnimation.ready</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/testcommon.js"></script>
 <style>
 @keyframes abc {
   to { transform: translate(10px) }

testing/web-platform/tests/css/css-animations/CSSAnimation-startTime.tentative.html

@@ -19,7 +19,7 @@
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/testcommon.js"></script>
 </head>
 <body>
 <div id="log"></div>

testing/web-platform/tests/css/css-animations/CSSPseudoElement-getAnimations.tentative.html

@@ -3,7 +3,7 @@
 <title>CSSPseudoElement.getAnimations() for CSS animations</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/testcommon.js"></script>
 <style>
 @keyframes anim1 { }
 @keyframes anim2 { }

testing/web-platform/tests/css/css-animations/Document-getAnimations.tentative.html

@@ -3,7 +3,7 @@
 <title>Document.getAnimations() for CSS animations</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/testcommon.js"></script>
 <style>
 @keyframes animLeft {
   to { left: 100px }

testing/web-platform/tests/css/css-animations/Element-getAnimations-dynamic-changes.tentative.html

@@ -5,7 +5,7 @@ Element.getAnimations() - Dynamic changes to the list of CSS animations
 </title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/testcommon.js"></script>
 <style>
 @keyframes anim1 {
   to { left: 100px }

testing/web-platform/tests/css/css-animations/Element-getAnimations.tentative.html

@@ -3,7 +3,7 @@
 <title>Element.getAnimations() for CSS animations</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/testcommon.js"></script>
 <style>
 @keyframes anim1 {
   to { left: 100px }

testing/web-platform/tests/css/css-animations/KeyframeEffect-getKeyframes.tentative.html

@@ -3,7 +3,7 @@
 <title>KeyframeEffect.getKeyframes() for CSS animations</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/testcommon.js"></script>
 <style>
 @keyframes anim-empty { }
 

testing/web-platform/tests/css/css-animations/KeyframeEffect-target.tentative.html

@@ -3,7 +3,7 @@
 <title>CSSAnimation.effect.target</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/testcommon.js"></script>
 <style>
 @keyframes anim { }
 ::before {

testing/web-platform/tests/css/css-animations/event-dispatch.tentative.html

@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#event-dispatch"/>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/testcommon.js"></script>
 <style>
   @keyframes anim {
     from { margin-left: 0px; }

testing/web-platform/tests/css/css-animations/event-order.tentative.html

@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#event-dispatch"/>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/testcommon.js"></script>
 <style>
   @keyframes anim {
     from { margin-left: 0px; }

testing/web-platform/tests/css/css-animations/support/testcommon.js

@@ -0,0 +1,177 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Use this variable if you specify duration or some other properties
+ * for script animation.
+ * E.g., div.animate({ opacity: [0, 1] }, 100 * MS_PER_SEC);
+ *
+ * NOTE: Creating animations with short duration may cause intermittent
+ * failures in asynchronous test. For example, the short duration animation
+ * might be finished when animation.ready has been fulfilled because of slow
+ * platforms or busyness of the main thread.
+ * Setting short duration to cancel its animation does not matter but
+ * if you don't want to cancel the animation, consider using longer duration.
+ */
+const MS_PER_SEC = 1000;
+
+/* The recommended minimum precision to use for time values[1].
+ *
+ * [1] https://drafts.csswg.org/web-animations/#precision-of-time-values
+ */
+var TIME_PRECISION = 0.0005; // ms
+
+/*
+ * Allow implementations to substitute an alternative method for comparing
+ * times based on their precision requirements.
+ */
+function assert_times_equal(actual, expected, description) {
+  assert_approx_equals(actual, expected, TIME_PRECISION * 2, description);
+}
+
+/*
+ * Compare a time value based on its precision requirements with a fixed value.
+ */
+function assert_time_equals_literal(actual, expected, description) {
+  assert_approx_equals(actual, expected, TIME_PRECISION, description);
+}
+
+/**
+ * Appends a div to the document body.
+ *
+ * @param t  The testharness.js Test object. If provided, this will be used
+ *           to register a cleanup callback to remove the div when the test
+ *           finishes.
+ *
+ * @param attrs  A dictionary object with attribute names and values to set on
+ *               the div.
+ */
+function addDiv(t, attrs) {
+  var div = document.createElement('div');
+  if (attrs) {
+    for (var attrName in attrs) {
+      div.setAttribute(attrName, attrs[attrName]);
+    }
+  }
+  document.body.appendChild(div);
+  if (t && typeof t.add_cleanup === 'function') {
+    t.add_cleanup(function() {
+      if (div.parentNode) {
+        div.remove();
+      }
+    });
+  }
+  return div;
+}
+
+/**
+ * Appends a style div to the document head.
+ *
+ * @param t  The testharness.js Test object. If provided, this will be used
+ *           to register a cleanup callback to remove the style element
+ *           when the test finishes.
+ *
+ * @param rules  A dictionary object with selector names and rules to set on
+ *               the style sheet.
+ */
+function addStyle(t, rules) {
+  var extraStyle = document.createElement('style');
+  document.head.appendChild(extraStyle);
+  if (rules) {
+    var sheet = extraStyle.sheet;
+    for (var selector in rules) {
+      sheet.insertRule(selector + '{' + rules[selector] + '}',
+                       sheet.cssRules.length);
+    }
+  }
+
+  if (t && typeof t.add_cleanup === 'function') {
+    t.add_cleanup(function() {
+      extraStyle.remove();
+    });
+  }
+}
+
+/**
+ * Promise wrapper for requestAnimationFrame.
+ */
+function waitForFrame() {
+  return new Promise(function(resolve, reject) {
+    window.requestAnimationFrame(resolve);
+  });
+}
+
+/**
+ * Waits for a requestAnimationFrame callback in the next refresh driver tick.
+ * Note that 'dom.animations-api.core.enabled' pref should be true to use this
+ * function.
+ */
+function waitForNextFrame() {
+  const timeAtStart = document.timeline.currentTime;
+  return new Promise(resolve => {
+    window.requestAnimationFrame(() => {
+      if (timeAtStart === document.timeline.currentTime) {
+        window.requestAnimationFrame(resolve);
+      } else {
+        resolve();
+      }
+    });
+  });
+}
+
+/**
+ * Returns a Promise that is resolved after the given number of consecutive
+ * animation frames have occured (using requestAnimationFrame callbacks).
+ *
+ * @param frameCount  The number of animation frames.
+ * @param onFrame  An optional function to be processed in each animation frame.
+ */
+function waitForAnimationFrames(frameCount, onFrame) {
+  const timeAtStart = document.timeline.currentTime;
+  return new Promise(function(resolve, reject) {
+    function handleFrame() {
+      if (onFrame && typeof onFrame === 'function') {
+        onFrame();
+      }
+      if (timeAtStart != document.timeline.currentTime &&
+          --frameCount <= 0) {
+        resolve();
+      } else {
+        window.requestAnimationFrame(handleFrame); // wait another frame
+      }
+    }
+    window.requestAnimationFrame(handleFrame);
+  });
+}
+
+/**
+ * Wrapper that takes a sequence of N animations and returns:
+ *
+ *   Promise.all([animations[0].ready, animations[1].ready, ... animations[N-1].ready]);
+ */
+function waitForAllAnimations(animations) {
+  return Promise.all(animations.map(animation => animation.ready));
+}
+
+/**
+ * Flush the computed style for the given element. This is useful, for example,
+ * when we are testing a transition and need the initial value of a property
+ * to be computed so that when we synchronouslyet set it to a different value
+ * we actually get a transition instead of that being the initial value.
+ */
+function flushComputedStyle(elem) {
+  var cs = getComputedStyle(elem);
+  cs.marginLeft;
+}
+// Waits for a given animation being ready to restyle.
+async function waitForAnimationReadyToRestyle(aAnimation) {
+  await aAnimation.ready;
+  // If |aAnimation| begins at the current timeline time, we will not process
+  // restyling in the initial frame because of aligning with the refresh driver,
+  // the animation frame in which the ready promise is resolved happens to
+  // coincide perfectly with the start time of the animation.  In this case no
+  // restyling is needed in the frame so we have to wait one more frame.
+  if (animationStartsRightNow(aAnimation)) {
+    await waitForNextFrame();
+  }
+}