Bug 1467344 - Move tests from dom/animations/tests/css-transitions to WPT; r=hiro

--HG--
rename : dom/animation/test/css-transitions/test_animation-computed-timing.html => testing/web-platform/tests/css/css-transitions/AnimationEffect-getComputedTiming.tentative.html
rename : dom/animation/test/css-transitions/test_pseudoElement-get-animations.html => testing/web-platform/tests/css/css-transitions/CSSPseudoElement-getAnimations.tentative.html
rename : dom/animation/test/css-transitions/test_animation-cancel.html => testing/web-platform/tests/css/css-transitions/CSSTransition-canceling.tentative.html
rename : dom/animation/test/css-transitions/test_animation-currenttime.html => testing/web-platform/tests/css/css-transitions/CSSTransition-currentTime.tentative.html
rename : dom/animation/test/css-transitions/test_setting-effect.html => testing/web-platform/tests/css/css-transitions/CSSTransition-effect.tentative.html
rename : dom/animation/test/css-transitions/test_animation-finished.html => testing/web-platform/tests/css/css-transitions/CSSTransition-finished.tentative.html
rename : dom/animation/test/css-transitions/test_animation-ready.html => testing/web-platform/tests/css/css-transitions/CSSTransition-ready.tentative.html
rename : dom/animation/test/css-transitions/test_animation-starttime.html => testing/web-platform/tests/css/css-transitions/CSSTransition-startTime.tentative.html
rename : dom/animation/test/css-transitions/test_csstransition-transitionproperty.html => testing/web-platform/tests/css/css-transitions/CSSTransition-transitionProperty.tentative.html
rename : dom/animation/test/css-transitions/test_document-get-animations.html => testing/web-platform/tests/css/css-transitions/Document-getAnimations.tentative.html
rename : dom/animation/test/css-transitions/test_element-get-animations.html => testing/web-platform/tests/css/css-transitions/Element-getAnimations.tentative.html
rename : dom/animation/test/css-transitions/test_keyframeeffect-getkeyframes.html => testing/web-platform/tests/css/css-transitions/KeyframeEffect-getKeyframes.tentative.html
rename : dom/animation/test/css-transitions/test_effect-target.html => testing/web-platform/tests/css/css-transitions/KeyframeEffect-target.tentative.html
rename : dom/animation/test/css-transitions/test_event-dispatch.html => testing/web-platform/tests/css/css-transitions/event-dispatch.tentative.html
extra : rebase_source : f09d4ff00f5be59ec5f90b211eebb074bdc17781

dom/animation/test/mochitest.ini

@@ -22,20 +22,6 @@ support-files =
   testcommon.js
   !/dom/events/test/event_leak_utils.js
 
-[css-transitions/test_animation-cancel.html]
-[css-transitions/test_animation-computed-timing.html]
-[css-transitions/test_animation-currenttime.html]
-[css-transitions/test_animation-finished.html]
-[css-transitions/test_animation-ready.html]
-[css-transitions/test_animation-starttime.html]
-[css-transitions/test_csstransition-transitionproperty.html]
-[css-transitions/test_document-get-animations.html]
-[css-transitions/test_effect-target.html]
-[css-transitions/test_element-get-animations.html]
-[css-transitions/test_event-dispatch.html]
-[css-transitions/test_keyframeeffect-getkeyframes.html]
-[css-transitions/test_pseudoElement-get-animations.html]
-[css-transitions/test_setting-effect.html]
 [document-timeline/test_document-timeline.html]
 skip-if = (verify && !debug && (os == 'mac'))
 [document-timeline/test_request_animation_frame.html]

testing/web-platform/meta/MANIFEST.json

@@ -334188,6 +334188,84 @@
      {}
     ]
    ],
+   "css/css-transitions/AnimationEffect-getComputedTiming.tentative.html": [
+    [
+     "/css/css-transitions/AnimationEffect-getComputedTiming.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-transitions/CSSPseudoElement-getAnimations.tentative.html": [
+    [
+     "/css/css-transitions/CSSPseudoElement-getAnimations.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-transitions/CSSTransition-canceling.tentative.html": [
+    [
+     "/css/css-transitions/CSSTransition-canceling.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-transitions/CSSTransition-currentTime.tentative.html": [
+    [
+     "/css/css-transitions/CSSTransition-currentTime.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-transitions/CSSTransition-effect.tentative.html": [
+    [
+     "/css/css-transitions/CSSTransition-effect.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-transitions/CSSTransition-finished.tentative.html": [
+    [
+     "/css/css-transitions/CSSTransition-finished.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-transitions/CSSTransition-ready.tentative.html": [
+    [
+     "/css/css-transitions/CSSTransition-ready.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-transitions/CSSTransition-startTime.tentative.html": [
+    [
+     "/css/css-transitions/CSSTransition-startTime.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-transitions/CSSTransition-transitionProperty.tentative.html": [
+    [
+     "/css/css-transitions/CSSTransition-transitionProperty.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-transitions/Document-getAnimations.tentative.html": [
+    [
+     "/css/css-transitions/Document-getAnimations.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-transitions/Element-getAnimations.tentative.html": [
+    [
+     "/css/css-transitions/Element-getAnimations.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-transitions/KeyframeEffect-getKeyframes.tentative.html": [
+    [
+     "/css/css-transitions/KeyframeEffect-getKeyframes.tentative.html",
+     {}
+    ]
+   ],
+   "css/css-transitions/KeyframeEffect-target.tentative.html": [
+    [
+     "/css/css-transitions/KeyframeEffect-target.tentative.html",
+     {}
+    ]
+   ],
    "css/css-transitions/before-DOMContentLoaded-001.html": [
     [
      "/css/css-transitions/before-DOMContentLoaded-001.html",
@@ -334218,6 +334296,12 @@
      {}
     ]
    ],
+   "css/css-transitions/event-dispatch.tentative.html": [
+    [
+     "/css/css-transitions/event-dispatch.tentative.html",
+     {}
+    ]
+   ],
    "css/css-transitions/events-001.html": [
     [
      "/css/css-transitions/events-001.html",
@@ -554381,6 +554465,58 @@
    "c8caa6bd7c17de28dcd3f50c6357adc574084225",
    "reftest"
   ],
+  "css/css-transitions/AnimationEffect-getComputedTiming.tentative.html": [
+   "0cb2af829bda07b1a9eb0c27d1eb1419fd0ae817",
+   "testharness"
+  ],
+  "css/css-transitions/CSSPseudoElement-getAnimations.tentative.html": [
+   "386dad05f52daa2637720f302b1b25a742f93ae3",
+   "testharness"
+  ],
+  "css/css-transitions/CSSTransition-canceling.tentative.html": [
+   "9ff276caf908551217ff3e7cbd4dec6e3ea1f247",
+   "testharness"
+  ],
+  "css/css-transitions/CSSTransition-currentTime.tentative.html": [
+   "8395ae6325e3e5abcaa59c10035558662bd2fdaf",
+   "testharness"
+  ],
+  "css/css-transitions/CSSTransition-effect.tentative.html": [
+   "a17b4903c327946900bab3579e957baa8e706098",
+   "testharness"
+  ],
+  "css/css-transitions/CSSTransition-finished.tentative.html": [
+   "3ffe1cbafac3f717a425d664cd54da8c1bdb087d",
+   "testharness"
+  ],
+  "css/css-transitions/CSSTransition-ready.tentative.html": [
+   "767dcbb74cd41aa6340c98878a39379e4c917bf8",
+   "testharness"
+  ],
+  "css/css-transitions/CSSTransition-startTime.tentative.html": [
+   "f2e96da859391d02c76ea6338ebb29d27ab5e847",
+   "testharness"
+  ],
+  "css/css-transitions/CSSTransition-transitionProperty.tentative.html": [
+   "55f6d779476403e261dfbe0f051f24c9fd5de375",
+   "testharness"
+  ],
+  "css/css-transitions/Document-getAnimations.tentative.html": [
+   "bd71bdfaf808306e11fff1f0c3eb619c16105442",
+   "testharness"
+  ],
+  "css/css-transitions/Element-getAnimations.tentative.html": [
+   "176ee0b37fb9e619ad9187122ecb74c58ab3c579",
+   "testharness"
+  ],
+  "css/css-transitions/KeyframeEffect-getKeyframes.tentative.html": [
+   "71a65177d28d440f3de93c152809c5bdd4905890",
+   "testharness"
+  ],
+  "css/css-transitions/KeyframeEffect-target.tentative.html": [
+   "890003a017905538c87fdc198832b85df65b8d5e",
+   "testharness"
+  ],
   "css/css-transitions/META.yml": [
    "581515c493e853d0c4a3c75b340f3bb5785cc635",
    "support"
@@ -554409,6 +554545,10 @@
    "efbc34f77740dce56a29871ecccfc20240381ad5",
    "testharness"
   ],
+  "css/css-transitions/event-dispatch.tentative.html": [
+   "3ebed3b166ec1413bed76841cdf52e5acce1e636",
+   "testharness"
+  ],
   "css/css-transitions/events-001.html": [
    "59d2011b39780def3de6f6899a51c6de2068bf4c",
    "testharness"
@@ -554550,7 +554690,7 @@
    "support"
   ],
   "css/css-transitions/support/helper.js": [
-   "f11e4347abee6ee3cee07e2ee9ec76907c9ab555",
+   "2e7ecff2ae7e60a3250cc787cbf888f1881bfc27",
    "support"
   ],
   "css/css-transitions/support/import-green.css": [

testing/web-platform/tests/css/css-transitions/AnimationEffect-getComputedTiming.tentative.html

@@ -3,7 +3,7 @@
 <title>AnimationEffect.getComputedTiming() for CSS transitions</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/helper.js"></script>
 <style>
 
 .animated-div {

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

@@ -3,7 +3,7 @@
 <title>CSSPseudoElement.getAnimations() for CSS transitions</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/helper.js"></script>
 <style>
 .init::before {
   content: '';

testing/web-platform/tests/css/css-transitions/CSSTransition-canceling.tentative.html

@@ -3,7 +3,7 @@
 <title>Canceling a CSS transition</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/helper.js"></script>
 <div id="log"></div>
 <script>
 'use strict';

testing/web-platform/tests/css/css-transitions/CSSTransition-currentTime.tentative.html

@@ -3,7 +3,7 @@
 <title>CSSTransition.currentTime</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/helper.js"></script>
 <div id="log"></div>
 <script>
 

testing/web-platform/tests/css/css-transitions/CSSTransition-effect.tentative.html

@@ -3,7 +3,7 @@
 <title>CSSTransition.effect</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src='../testcommon.js'></script>
+<script src='support/helper.js'></script>
 <div id="log"></div>
 <script>
 'use strict';

testing/web-platform/tests/css/css-transitions/CSSTransition-finished.tentative.html

@@ -3,7 +3,7 @@
 <title>CSSTransition.finished</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/helper.js"></script>
 <style>
 
 .animated-div {

testing/web-platform/tests/css/css-transitions/CSSTransition-ready.tentative.html

@@ -3,7 +3,7 @@
 <title>CSSTransition.ready</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/helper.js"></script>
 <div id="log"></div>
 <script>
 'use strict';

testing/web-platform/tests/css/css-transitions/CSSTransition-startTime.tentative.html

@@ -3,7 +3,7 @@
 <title>CSSTransition.startTime</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/helper.js"></script>
 <div id="log"></div>
 <script>
 

testing/web-platform/tests/css/css-transitions/CSSTransition-transitionProperty.tentative.html

@@ -3,7 +3,7 @@
 <title>CSSTransition.transitionProperty</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/helper.js"></script>
 <div id="log"></div>
 <script>
 'use strict';

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

@@ -3,7 +3,7 @@
 <title>Document.getAnimations() for CSS transitions</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/helper.js"></script>
 <div id="log"></div>
 <script>
 'use strict';

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

@@ -3,7 +3,7 @@
 <title>Element.getAnimations() for CSS transitions</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/helper.js"></script>
 <div id="log"></div>
 <script>
 'use strict';

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

@@ -3,7 +3,7 @@
 <title>KeyframeEffect.getKeyframes() for CSS transitions</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/helper.js"></script>
 <style>
 :root {
   --var-100px: 100px;

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

@@ -3,7 +3,7 @@
 <title>CSSTransition.effect.target</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/helper.js"></script>
 <div id="log"></div>
 <script>
 'use strict';

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

@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#transition-events">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="../testcommon.js"></script>
+<script src="support/helper.js"></script>
 <div id="log"></div>
 <script>
 'use strict';

testing/web-platform/tests/css/css-transitions/support/helper.js

@@ -94,6 +94,8 @@ root.domFixture = function(selector) {
     }
 };
 
+root.MS_PER_SEC = 1000;
+
 /*
  * The recommended minimum precision to use for time values.
  *
@@ -108,7 +110,14 @@ const TIME_PRECISION = 0.0005; // ms
  */
 root.assert_times_equal = function(actual, expected, description) {
   assert_approx_equals(actual, expected, TIME_PRECISION, description);
-}
+};
+
+/*
+ * Compare a time value based on its precision requirements with a fixed value.
+ */
+root.assert_time_equals_literal = (actual, expected, description) => {
+  assert_approx_equals(actual, expected, TIME_PRECISION, description);
+};
 
 /**
  * Assert that CSSTransition event, |evt|, has the expected property values
@@ -119,7 +128,7 @@ root.assert_end_events_equal = function(evt, propertyName, elapsedTime,
   assert_equals(evt.propertyName, propertyName);
   assert_times_equal(evt.elapsedTime, elapsedTime);
   assert_equals(evt.pseudoElement, pseudoElement);
-}
+};
 
 /**
  * Assert that array of simultaneous CSSTransition events, |evts|, have the
@@ -194,6 +203,76 @@ root.addDiv = function(t, attrs) {
     });
   }
   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.
+ */
+root.addStyle = (t, rules) => {
+  const extraStyle = document.createElement('style');
+  document.head.appendChild(extraStyle);
+  if (rules) {
+    const sheet = extraStyle.sheet;
+    for (const selector in rules) {
+      sheet.insertRule(selector + '{' + rules[selector] + '}',
+                       sheet.cssRules.length);
+    }
+  }
+
+  if (t && typeof t.add_cleanup === 'function') {
+    t.add_cleanup(() => {
+      extraStyle.remove();
+    });
+  }
+};
+
+/**
+ * Promise wrapper for requestAnimationFrame.
+ */
+root.waitForFrame = () => {
+  return new Promise(resolve => {
+    window.requestAnimationFrame(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.
+ */
+root.waitForAnimationFrames = (frameCount, onFrame) => {
+  const timeAtStart = document.timeline.currentTime;
+  return new Promise(resolve => {
+    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]);
+ */
+root.waitForAllAnimations = animations =>
+  Promise.all(animations.map(animation => animation.ready));
 
 })(window);