--- a/dom/animation/test/mochitest.ini
+++ b/dom/animation/test/mochitest.ini
@@ -10,35 +10,16 @@ support-files =
   mozilla/file_disable_animations_api_core.html
   mozilla/file_discrete_animations.html
   mozilla/file_restyles.html
   mozilla/file_transition_finish_on_compositor.html
   ../../../layout/style/test/property_database.js
   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]
 [css-transitions/test_animation-finished.html]
 [css-transitions/test_animation-pausing.html]
 [css-transitions/test_animation-ready.html]
 [css-transitions/test_animation-starttime.html]
 [css-transitions/test_csstransition-transitionproperty.html]

--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -240995,16 +240995,21 @@
      {}
     ]
    ],
    "css/css-animations/animationevent-interface.js": [
     [
      {}
     ]
    ],
+   "css/css-animations/support/testcommon.js": [
+    [
+     {}
+    ]
+   ],
    "css/css-backgrounds/OWNERS": [
     [
      {}
     ]
    ],
    "css/css-backgrounds/background-attachment-local/aqua-yellow-32x32.png": [
     [
      {}
@@ -318338,16 +318343,118 @@
     ]
    ],
    "css/css-align/self-alignment/place-self-shorthand-006.html": [
     [
      "/css/css-align/self-alignment/place-self-shorthand-006.html",
      {}
     ]
    ],
+   "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",
      {}
     ]
    ],
    "css/css-animations/animationevent-interface.html": [
     [
@@ -318364,16 +318471,28 @@
    "css/css-animations/animationevent-types.html": [
     [
      "/css/css-animations/animationevent-types.html",
      {
       "timeout": "long"
      }
     ]
    ],
+   "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",
      {}
     ]
    ],
    "css/css-backgrounds/background-331.html": [
     [
@@ -493783,16 +493902,84 @@
   "css/css-align/self-alignment/place-self-shorthand-006.html": [
    "d355eac038a7307e7a969632bc745ad25d8d6f43",
    "testharness"
   ],
   "css/css-align/ttwf-reftest-alignContent.html": [
    "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"
   ],
   "css/css-animations/animation-common-ref.html": [
    "ea85a554ca35bcfbbee1a59651f40045b8f916fb",
    "support"
   ],
@@ -494091,20 +494278,32 @@
   "css/css-animations/animationevent-types.html": [
    "15d495003fa9616fc54a4f6072e531341d51185f",
    "testharness"
   ],
   "css/css-animations/animationstart-and-animationend-events.html": [
    "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"
   ],
   "css/css-backgrounds/background-331.html": [
    "28185e9f9710a676579fa8de6cc39e1febc9e16f",
    "testharness"
   ],

rename from dom/animation/test/css-animations/test_cssanimation-animationname.html
rename to testing/web-platform/tests/css/css-animations/CSSAnimation-animationName.tentative.html
--- a/dom/animation/test/css-animations/test_cssanimation-animationname.html
+++ b/testing/web-platform/tests/css/css-animations/CSSAnimation-animationName.tentative.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <meta charset=utf-8>
 <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 }
 }
 </style>
 <body>
 <div id="log"></div>
 <script>

rename from dom/animation/test/css-animations/test_animation-cancel.html
rename to testing/web-platform/tests/css/css-animations/CSSAnimation-canceling.tentative.html
--- a/dom/animation/test/css-animations/test_animation-cancel.html
+++ b/testing/web-platform/tests/css/css-animations/CSSAnimation-canceling.tentative.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <meta charset=utf-8>
 <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) }
 }
 @keyframes marginLeftAnim {
   to { margin-left: 100px }
 }
 @keyframes marginLeftAnim100To200 {

rename from dom/animation/test/css-animations/test_setting-effect.html
rename to testing/web-platform/tests/css/css-animations/CSSAnimation-effect.tentative.html
--- a/dom/animation/test/css-animations/test_setting-effect.html
+++ b/testing/web-platform/tests/css/css-animations/CSSAnimation-effect.tentative.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <meta charset=utf-8>
 <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 {
     margin-left: 0px;
   }
   to {
     margin-left: 100px;
   }

rename from dom/animation/test/css-animations/test_animation-finished.html
rename to testing/web-platform/tests/css/css-animations/CSSAnimation-finished.tentative.html
--- a/dom/animation/test/css-animations/test_animation-finished.html
+++ b/testing/web-platform/tests/css/css-animations/CSSAnimation-finished.tentative.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <meta charset=utf-8>
 <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) }
 }
 @keyframes def {}
 </style>
 <body>
 <div id="log"></div>

rename from dom/animation/test/css-animations/test_animation-computed-timing.html
rename to testing/web-platform/tests/css/css-animations/CSSAnimation-getComputedTiming.tentative.html
--- a/dom/animation/test/css-animations/test_animation-computed-timing.html
+++ b/testing/web-platform/tests/css/css-animations/CSSAnimation-getComputedTiming.tentative.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <meta charset=utf-8>
 <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 }
   to { margin-left: 200px }
 }
 </style>
 <body>
 <div id="log"></div>

rename from dom/animation/test/css-animations/test_animation-currenttime.html
rename to testing/web-platform/tests/css/css-animations/CSSAnimation-getCurrentTime.tentative.html
--- a/dom/animation/test/css-animations/test_animation-currenttime.html
+++ b/testing/web-platform/tests/css/css-animations/CSSAnimation-getCurrentTime.tentative.html
@@ -14,17 +14,17 @@
 @keyframes anim {
   from { margin-left: 100px; }
   to { margin-left: 200px; }
 }
 
 </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>
 <script type="text/javascript">
 
 'use strict';
 
 promise_test(async t => {

rename from dom/animation/test/css-animations/test_animation-id.html
rename to testing/web-platform/tests/css/css-animations/CSSAnimation-id.tentative.html
--- a/dom/animation/test/css-animations/test_animation-id.html
+++ b/testing/web-platform/tests/css/css-animations/CSSAnimation-id.tentative.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <meta charset=utf-8>
 <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>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 

rename from dom/animation/test/css-animations/test_animation-pausing.html
rename to testing/web-platform/tests/css/css-animations/CSSAnimation-pausing.tentative.html
--- a/dom/animation/test/css-animations/test_animation-pausing.html
+++ b/testing/web-platform/tests/css/css-animations/CSSAnimation-pausing.tentative.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <meta charset=utf-8>
 <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 }
   100% { margin-left: 10000px }
 }
 </style>
 <body>
 <div id="log"></div>

rename from dom/animation/test/css-animations/test_animation-playstate.html
rename to testing/web-platform/tests/css/css-animations/CSSAnimation-playState.tentative.html
--- a/dom/animation/test/css-animations/test_animation-playstate.html
+++ b/testing/web-platform/tests/css/css-animations/CSSAnimation-playState.tentative.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <meta charset=utf-8>
 <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>
 <body>
 <div id="log"></div>
 <script>
 'use strict';
 

rename from dom/animation/test/css-animations/test_animation-ready.html
rename to testing/web-platform/tests/css/css-animations/CSSAnimation-ready.tentative.html
--- a/dom/animation/test/css-animations/test_animation-ready.html
+++ b/testing/web-platform/tests/css/css-animations/CSSAnimation-ready.tentative.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <meta charset=utf-8>
 <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) }
 }
 </style>
 <body>
 <div id="log"></div>
 <script>

rename from dom/animation/test/css-animations/test_animation-starttime.html
rename to testing/web-platform/tests/css/css-animations/CSSAnimation-startTime.tentative.html
--- a/dom/animation/test/css-animations/test_animation-starttime.html
+++ b/testing/web-platform/tests/css/css-animations/CSSAnimation-startTime.tentative.html
@@ -14,17 +14,17 @@
 @keyframes anim {
   from { margin-left: 100px; }
   to { margin-left: 200px; }
 }
 
 </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>
 <script type="text/javascript">
 
 'use strict';
 
 test(t => {

rename from dom/animation/test/css-animations/test_pseudoElement-get-animations.html
rename to testing/web-platform/tests/css/css-animations/CSSPseudoElement-getAnimations.tentative.html
--- a/dom/animation/test/css-animations/test_pseudoElement-get-animations.html
+++ b/testing/web-platform/tests/css/css-animations/CSSPseudoElement-getAnimations.tentative.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <meta charset=utf-8>
 <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 { }
 .before::before {
   animation: anim1 10s;
   content: '';
 }
 .after-with-mix-anims-trans::after {

rename from dom/animation/test/css-animations/test_document-get-animations.html
rename to testing/web-platform/tests/css/css-animations/Document-getAnimations.tentative.html
--- a/dom/animation/test/css-animations/test_document-get-animations.html
+++ b/testing/web-platform/tests/css/css-animations/Document-getAnimations.tentative.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <meta charset=utf-8>
 <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 }
 }
 @keyframes animTop {
   to { top: 100px }
 }
 @keyframes animBottom {

rename from dom/animation/test/css-animations/test_animations-dynamic-changes.html
rename to testing/web-platform/tests/css/css-animations/Element-getAnimations-dynamic-changes.tentative.html
--- a/dom/animation/test/css-animations/test_animations-dynamic-changes.html
+++ b/testing/web-platform/tests/css/css-animations/Element-getAnimations-dynamic-changes.tentative.html
@@ -1,16 +1,16 @@
 <!doctype html>
 <meta charset=utf-8>
 <title>
 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 }
 }
 @keyframes anim2 { }
 </style>
 <body>
 <div id="log"></div>

rename from dom/animation/test/css-animations/test_element-get-animations.html
rename to testing/web-platform/tests/css/css-animations/Element-getAnimations.tentative.html
--- a/dom/animation/test/css-animations/test_element-get-animations.html
+++ b/testing/web-platform/tests/css/css-animations/Element-getAnimations.tentative.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <meta charset=utf-8>
 <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 }
 }
 @keyframes anim2 {
   to { top: 100px }
 }
 @keyframes multiPropAnim {

rename from dom/animation/test/css-animations/test_keyframeeffect-getkeyframes.html
rename to testing/web-platform/tests/css/css-animations/KeyframeEffect-getKeyframes.tentative.html
--- a/dom/animation/test/css-animations/test_keyframeeffect-getkeyframes.html
+++ b/testing/web-platform/tests/css/css-animations/KeyframeEffect-getKeyframes.tentative.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <meta charset=utf-8>
 <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 { }
 
 @keyframes anim-empty-frames {
   from { }
   to   { }
 }
 

rename from dom/animation/test/css-animations/test_effect-target.html
rename to testing/web-platform/tests/css/css-animations/KeyframeEffect-target.tentative.html
--- a/dom/animation/test/css-animations/test_effect-target.html
+++ b/testing/web-platform/tests/css/css-animations/KeyframeEffect-target.tentative.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <meta charset=utf-8>
 <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 {
   content: ''
 }
 ::after {
   content: ''
 }

rename from dom/animation/test/css-animations/test_event-dispatch.html
rename to testing/web-platform/tests/css/css-animations/event-dispatch.tentative.html
--- a/dom/animation/test/css-animations/test_event-dispatch.html
+++ b/testing/web-platform/tests/css/css-animations/event-dispatch.tentative.html
@@ -1,15 +1,15 @@
 <!doctype html>
 <meta charset=utf-8>
 <title>Tests for CSS animation event dispatch</title>
 <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; }
     to { margin-left: 100px; }
   }
 </style>
 <body>
 <div id="log"></div>

rename from dom/animation/test/css-animations/test_event-order.html
rename to testing/web-platform/tests/css/css-animations/event-order.tentative.html
--- a/dom/animation/test/css-animations/test_event-order.html
+++ b/testing/web-platform/tests/css/css-animations/event-order.tentative.html
@@ -1,15 +1,15 @@
 <!doctype html>
 <meta charset=utf-8>
 <title>Tests for CSS animation event order</title>
 <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; }
     to { margin-left: 100px; }
   }
 </style>
 <body>
 <div id="log"></div>

copy from dom/animation/test/testcommon.js
copy to testing/web-platform/tests/css/css-animations/support/testcommon.js
--- a/dom/animation/test/testcommon.js
+++ b/testing/web-platform/tests/css/css-animations/support/testcommon.js
@@ -31,117 +31,16 @@ function assert_times_equal(actual, expe
 
 /*
  * 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);
 }
 
-/*
- * Compare matrix string like 'matrix(1, 0, 0, 1, 100, 0)'.
- * This function allows error, 0.01, because on Android when we are scaling down
- * the document, it results in some errors.
- */
-function assert_matrix_equals(actual, expected, description) {
-  var matrixRegExp = /^matrix\((.+),(.+),(.+),(.+),(.+),(.+)\)/;
-  assert_regexp_match(actual, matrixRegExp,
-    'Actual value should be a matrix')
-  assert_regexp_match(expected, matrixRegExp,
-    'Expected value should be a matrix');
-
-  var actualMatrixArray = actual.match(matrixRegExp).slice(1).map(Number);
-  var expectedMatrixArray = expected.match(matrixRegExp).slice(1).map(Number);
-
-  assert_equals(actualMatrixArray.length, expectedMatrixArray.length,
-    'Array lengths should be equal (got \'' + expected + '\' and \'' + actual +
-    '\'): ' + description);
-  for (var i = 0; i < actualMatrixArray.length; i++) {
-    assert_approx_equals(actualMatrixArray[i], expectedMatrixArray[i], 0.01,
-      'Matrix array should be equal (got \'' + expected + '\' and \'' + actual +
-      '\'): ' + description);
-  }
-}
-
-/**
- * Compare given values which are same format of
- * KeyframeEffectReadonly::GetProperties.
- */
-function assert_properties_equal(actual, expected) {
-  assert_equals(actual.length, expected.length);
-
-  const compareProperties = (a, b) =>
-    a.property == b.property ? 0 : (a.property < b.property ? -1 : 1);
-
-  const sortedActual   = actual.sort(compareProperties);
-  const sortedExpected = expected.sort(compareProperties);
-
-  const serializeValues = values =>
-    values.map(value =>
-      '{ ' +
-          [ 'offset', 'value', 'easing', 'composite' ].map(
-            member => `${member}: ${value[member]}`
-          ).join(', ') +
-                      ' }')
-          .join(', ');
-
-  for (let i = 0; i < sortedActual.length; i++) {
-    assert_equals(sortedActual[i].property,
-                  sortedExpected[i].property,
-                  'CSS property name should match');
-    assert_equals(serializeValues(sortedActual[i].values),
-                  serializeValues(sortedExpected[i].values),
-                  `Values arrays do not match for `
-                  + `${sortedActual[i].property} property`);
-  }
-}
-
-/**
- * Construct a object which is same to a value of
- * KeyframeEffectReadonly::GetProperties().
- * The method returns undefined as a value in case of missing keyframe.
- * Therefor, we can use undefined for |value| and |easing| parameter.
- * @param offset - keyframe offset. e.g. 0.1
- * @param value - any keyframe value. e.g. undefined '1px', 'center', 0.5
- * @param composite - 'replace', 'add', 'accumulate'
- * @param easing - e.g. undefined, 'linear', 'ease' and so on
- * @return Object -
- *   e.g. { offset: 0.1, value: '1px', composite: 'replace', easing: 'ease'}
- */
-function valueFormat(offset, value, composite, easing) {
-  return { offset: offset, value: value, easing: easing, composite: composite };
-}
-
-/**
- * Appends a div to the document body and creates an animation on the div.
- * NOTE: This function asserts when trying to create animations with durations
- * shorter than 100s because the shorter duration may cause intermittent
- * failures.  If you are not sure how long it is suitable, use 100s; it's
- * long enough but shorter than our test framework timeout (330s).
- * If you really need to use shorter durations, use animate() function directly.
- *
- * @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.
- * @param frames  The keyframes passed to Element.animate().
- * @param options  The options passed to Element.animate().
- */
-function addDivAndAnimate(t, attrs, frames, options) {
-  let animDur = (typeof options === 'object') ?
-    options.duration : options;
-  assert_greater_than_equal(animDur, 100 * MS_PER_SEC,
-      'Clients of this addDivAndAnimate API must request a duration ' +
-      'of at least 100s, to avoid intermittent failures from e.g.' +
-      'the main thread being busy for an extended period');
-
-  return addDiv(t, attrs).animate(frames, options);
-}
-
 /**
  * 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
@@ -189,32 +88,16 @@ function addStyle(t, rules) {
   if (t && typeof t.add_cleanup === 'function') {
     t.add_cleanup(function() {
       extraStyle.remove();
     });
   }
 }
 
 /**
- * Takes a CSS property (e.g. margin-left) and returns the equivalent IDL
- * name (e.g. marginLeft).
- */
-function propertyToIDL(property) {
-  var prefixMatch = property.match(/^-(\w+)-/);
-  if (prefixMatch) {
-    var prefix = prefixMatch[1] === 'moz' ? 'Moz' : prefixMatch[1];
-    property = prefix + property.substring(prefixMatch[0].length - 1);
-  }
-  // https://drafts.csswg.org/cssom/#css-property-to-idl-attribute
-  return property.replace(/-([a-z])/gi, function(str, group) {
-    return group.toUpperCase();
-  });
-}
-
-/**
  * Promise wrapper for requestAnimationFrame.
  */
 function waitForFrame() {
   return new Promise(function(resolve, reject) {
     window.requestAnimationFrame(resolve);
   });
 }
 
@@ -257,177 +140,34 @@ function waitForAnimationFrames(frameCou
         window.requestAnimationFrame(handleFrame); // wait another frame
       }
     }
     window.requestAnimationFrame(handleFrame);
   });
 }
 
 /**
- * Promise wrapper for requestIdleCallback.
- */
-function waitForIdle() {
-  return new Promise(resolve => {
-    requestIdleCallback(resolve);
-  });
-}
-
-/**
  * 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(function(animation) {
-    return animation.ready;
-  }));
+  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;
 }
-
-if (opener) {
-  for (var funcName of ["async_test", "assert_not_equals", "assert_equals",
-                        "assert_approx_equals", "assert_less_than",
-                        "assert_less_than_equal", "assert_greater_than",
-                        "assert_between_inclusive",
-                        "assert_true", "assert_false",
-                        "assert_class_string", "assert_throws",
-                        "assert_unreached", "assert_regexp_match",
-                        "promise_test", "test"]) {
-    if (opener[funcName]) {
-      window[funcName] = opener[funcName].bind(opener);
-    }
-  }
-
-  window.EventWatcher = opener.EventWatcher;
-
-  function done() {
-    opener.add_completion_callback(function() {
-      self.close();
-    });
-    opener.done();
-  }
-}
-
-/*
- * Returns a promise that is resolved when the document has finished loading.
- */
-function waitForDocumentLoad() {
-  return new Promise(function(resolve, reject) {
-    if (document.readyState === "complete") {
-      resolve();
-    } else {
-      window.addEventListener("load", resolve);
-    }
-  });
-}
-
-/*
- * Enters test refresh mode, and restores the mode when |t| finishes.
- */
-function useTestRefreshMode(t) {
-  function ensureNoSuppressedPaints() {
-    return new Promise(resolve => {
-      function checkSuppressedPaints() {
-        if (!SpecialPowers.DOMWindowUtils.paintingSuppressed) {
-          resolve();
-        } else {
-          window.requestAnimationFrame(checkSuppressedPaints);
-        }
-      }
-      checkSuppressedPaints();
-    });
-  }
-
-  return ensureNoSuppressedPaints().then(() => {
-    SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(0);
-    t.add_cleanup(() => {
-      SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
-    });
-  });
-}
-
-/**
- * Returns true if off-main-thread animations.
- */
-function isOMTAEnabled() {
-  const OMTAPrefKey = 'layers.offmainthreadcomposition.async-animations';
-  return SpecialPowers.DOMWindowUtils.layerManagerRemote &&
-         SpecialPowers.getBoolPref(OMTAPrefKey);
-}
-
-/**
- * Append an SVG element to the target element.
- *
- * @param target The element which want to append.
- * @param attrs  A array object with attribute name and values to set on
- *               the SVG element.
- * @return An SVG outer element.
- */
-function addSVGElement(target, tag, attrs) {
-  if (!target) {
-    return null;
-  }
-  var element = document.createElementNS('http://www.w3.org/2000/svg', tag);
-  if (attrs) {
-    for (var attrName in attrs) {
-      element.setAttributeNS(null, attrName, attrs[attrName]);
-    }
-  }
-  target.appendChild(element);
-  return element;
-}
-
-/*
- * Get Animation distance between two specified values for a specific property.
- *
- * @param target The target element.
- * @param prop The CSS property.
- * @param v1 The first property value.
- * @param v2 The Second property value.
- *
- * @return The distance between |v1| and |v2| for |prop| on |target|.
- */
-function getDistance(target, prop, v1, v2) {
-  if (!target) {
-    return 0.0;
-  }
-  return SpecialPowers.DOMWindowUtils
-           .computeAnimationDistance(target, prop, v1, v2);
-}
-
-/*
- * A promise wrapper for waiting MozAfterPaint.
- */
-function waitForPaints() {
-  // FIXME: Bug 1415065. Instead waiting for two requestAnimationFrames, we
-  // should wait for MozAfterPaint once after MozAfterPaint is fired properly
-  // (bug 1341294).
-  return waitForAnimationFrames(2);
-}
-
-// Returns true if |aAnimation| begins at the current timeline time.  We
-// sometimes need to detect this case because if we started an animation
-// asynchronously (e.g. using play()) and then ended up running the next frame
-// at precisely the time the animation started (due to aligning with vsync
-// refresh rate) then we won't end up restyling in that frame.
-function animationStartsRightNow(aAnimation) {
-  return aAnimation.startTime === aAnimation.timeline.currentTime &&
-         aAnimation.currentTime === 0;
-}
-
 // 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.