--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
@@ -4,16 +4,18 @@ http://creativecommons.org/publicdomain/
 "use strict";
 
 // Test for following KeyframesProgressBar:
 // * element existence
 // * progress bar position in multi effect timings
 // * progress bar position after changing playback rate
 // * progress bar position when select another animation
 
+requestLongerTimeout(5);
+
 const POSITION_TESTCASES = [
   {
     targetClassName: "cssanimation-linear",
     scrubberPositions: [0, 0.25, 0.5, 0.75, 1],
     expectedPositions: [0, 0.25, 0.5, 0.75, 0],
   },
   {
     targetClassName: "easing-step",
@@ -52,17 +54,16 @@ const POSITION_TESTCASES = [
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
   const { animationInspector, inspector, panel } = await openAnimationInspector();
 
   info("Checking progress bar position in multi effect timings");
-  await clickOnPauseResumeButton(animationInspector, panel);
 
   for (const testcase of POSITION_TESTCASES) {
     info(`Checking progress bar position for ${ testcase.targetClassName }`);
     await selectNodeAndWaitForAnimations(`.${ testcase.targetClassName }`, inspector);
 
     info("Checking progress bar existence");
     const areaEl = panel.querySelector(".keyframes-progress-bar-area");
     ok(areaEl, "progress bar area should exist");

--- a/devtools/client/inspector/animation/test/browser_animation_logic_auto-stop.js
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_auto-stop.js
@@ -6,32 +6,32 @@
 // Animation inspector makes the current time to stop
 // after end of animation duration except iterations infinity.
 // Test followings:
 // * state of animations and UI components after end of animation duration
 // * state of animations and UI components after end of animation duration
 //   but iteration count is infinity
 
 add_task(async function() {
-  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await addTab(URL_ROOT + "doc_simple_animation.html");
   const { animationInspector, inspector, panel } = await openAnimationInspector();
 
   info("Checking state after end of animation duration");
-  await selectNodeAndWaitForAnimations(".easing-step", inspector);
+  await selectNodeAndWaitForAnimations(".long", inspector);
   const pixelsData = getDurationAndRate(animationInspector, panel, 5);
   await clickOnCurrentTimeScrubberController(animationInspector,
                                              panel, 1 - pixelsData.rate);
   await clickOnPauseResumeButton(animationInspector, panel);
   // Must be able to catch rendering event after stopping the animation.
   await waitForSummaryAndDetail(animationInspector);
   await assertStates(animationInspector, panel, false);
 
   info("Checking state after end of animation duration and infinity iterations");
   await clickOnPauseResumeButton(animationInspector, panel);
-  await selectNodeAndWaitForAnimations(".enddelay-with-iterations-infinity", inspector);
+  await selectNodeAndWaitForAnimations(".compositor-all", inspector);
   await clickOnCurrentTimeScrubberController(animationInspector, panel, 1);
   await clickOnPauseResumeButton(animationInspector, panel);
   await assertStates(animationInspector, panel, true);
 });
 
 async function assertStates(animationInspector, panel, shouldRunning) {
   const buttonEl = panel.querySelector(".pause-resume-button");
   const labelEl = panel.querySelector(".current-time-label");

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path.js
@@ -11,384 +11,384 @@
 // * endDelay: path
 
 const TEST_CASES = [
   {
     targetClassName: "cssanimation-normal",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
-        { x: 25000, y: 40.851 },
-        { x: 50000, y: 80.24},
-        { x: 75000, y: 96.05 },
-        { x: 100000, y: 100 },
-        { x: 100000, y: 0 },
+        { x: 250000, y: 40.851 },
+        { x: 500000, y: 80.24},
+        { x: 750000, y: 96.05 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
       ]
     ],
   },
   {
     targetClassName: "cssanimation-linear",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
-        { x: 25000, y: 25 },
-        { x: 50000, y: 50 },
-        { x: 75000, y: 75 },
-        { x: 100000, y: 100 },
-        { x: 100000, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
       ]
     ],
   },
   {
     targetClassName: "delay-positive",
     expectedDelayPath: [
       { x: 0, y: 0 },
-      { x: 50000, y: 0 },
+      { x: 500000, y: 0 },
     ],
     expectedIterationPathList: [
       [
-        { x: 50000, y: 0 },
-        { x: 75000, y: 25 },
-        { x: 100000, y: 50 },
-        { x: 125000, y: 75 },
-        { x: 150000, y: 100 },
-        { x: 150000, y: 0 },
+        { x: 500000, y: 0 },
+        { x: 750000, y: 25 },
+        { x: 1000000, y: 50 },
+        { x: 1250000, y: 75 },
+        { x: 1500000, y: 100 },
+        { x: 1500000, y: 0 },
       ]
     ],
   },
   {
     targetClassName: "delay-negative",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 0, y: 50 },
-        { x: 25000, y: 75 },
-        { x: 50000, y: 100 },
-        { x: 50000, y: 0 },
+        { x: 250000, y: 75 },
+        { x: 500000, y: 100 },
+        { x: 500000, y: 0 },
       ]
     ],
   },
   {
     targetClassName: "easing-step",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
-        { x: 49999, y: 0 },
-        { x: 50000, y: 50 },
-        { x: 99999, y: 50 },
-        { x: 100000, y: 0 },
+        { x: 499999, y: 0 },
+        { x: 500000, y: 50 },
+        { x: 999999, y: 50 },
+        { x: 1000000, y: 0 },
       ]
     ],
   },
   {
     targetClassName: "enddelay-positive",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
-        { x: 25000, y: 25 },
-        { x: 50000, y: 50 },
-        { x: 75000, y: 75 },
-        { x: 100000, y: 100 },
-        { x: 100000, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
       ]
     ],
     expectedEndDelayPath: [
-      { x: 100000, y: 0 },
-      { x: 150000, y: 0 },
+      { x: 1000000, y: 0 },
+      { x: 1500000, y: 0 },
     ],
   },
   {
     targetClassName: "enddelay-negative",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
-        { x: 25000, y: 25 },
-        { x: 50000, y: 50 },
-        { x: 50000, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 500000, y: 0 },
       ]
     ],
   },
   {
     targetClassName: "enddelay-with-fill-forwards",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
-        { x: 25000, y: 25 },
-        { x: 50000, y: 50 },
-        { x: 75000, y: 75 },
-        { x: 100000, y: 100 },
-        { x: 100000, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
       ]
     ],
     expectedEndDelayPath: [
-      { x: 100000, y: 0 },
-      { x: 100000, y: 100 },
-      { x: 150000, y: 100 },
-      { x: 150000, y: 0 },
+      { x: 1000000, y: 0 },
+      { x: 1000000, y: 100 },
+      { x: 1500000, y: 100 },
+      { x: 1500000, y: 0 },
     ],
     expectedForwardsPath: [
-      { x: 150000, y: 0 },
-      { x: 150000, y: 100 },
-      { x: 200000, y: 100 },
-      { x: 200000, y: 0 },
+      { x: 1500000, y: 0 },
+      { x: 1500000, y: 100 },
+      { x: 2000000, y: 100 },
+      { x: 2000000, y: 0 },
     ],
   },
   {
     targetClassName: "enddelay-with-iterations-infinity",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
-        { x: 25000, y: 25 },
-        { x: 50000, y: 50 },
-        { x: 75000, y: 75 },
-        { x: 100000, y: 100 },
-        { x: 100000, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
       ],
       [
-        { x: 100000, y: 0 },
-        { x: 125000, y: 25 },
-        { x: 150000, y: 50 },
-        { x: 175000, y: 75 },
-        { x: 200000, y: 100 },
-        { x: 200000, y: 0 },
+        { x: 1000000, y: 0 },
+        { x: 1250000, y: 25 },
+        { x: 1500000, y: 50 },
+        { x: 1750000, y: 75 },
+        { x: 2000000, y: 100 },
+        { x: 2000000, y: 0 },
       ]
     ],
     isInfinity: true,
   },
   {
     targetClassName: "direction-alternate-with-iterations-infinity",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
-        { x: 25000, y: 25 },
-        { x: 50000, y: 50 },
-        { x: 75000, y: 75 },
-        { x: 100000, y: 100 },
-        { x: 100000, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
       ],
       [
-        { x: 100000, y: 0 },
-        { x: 100000, y: 100 },
-        { x: 125000, y: 75 },
-        { x: 150000, y: 50 },
-        { x: 175000, y: 25 },
-        { x: 200000, y: 0 },
+        { x: 1000000, y: 0 },
+        { x: 1000000, y: 100 },
+        { x: 1250000, y: 75 },
+        { x: 1500000, y: 50 },
+        { x: 1750000, y: 25 },
+        { x: 2000000, y: 0 },
       ]
     ],
     isInfinity: true,
   },
   {
     targetClassName: "direction-alternate-reverse-with-iterations-infinity",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 0, y: 100 },
-        { x: 25000, y: 75 },
-        { x: 50000, y: 50 },
-        { x: 75000, y: 25 },
-        { x: 100000, y: 0 },
+        { x: 250000, y: 75 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 25 },
+        { x: 1000000, y: 0 },
       ],
       [
-        { x: 100000, y: 0 },
-        { x: 125000, y: 25 },
-        { x: 150000, y: 50 },
-        { x: 175000, y: 75 },
-        { x: 200000, y: 100 },
-        { x: 200000, y: 0 },
+        { x: 1000000, y: 0 },
+        { x: 1250000, y: 25 },
+        { x: 1500000, y: 50 },
+        { x: 1750000, y: 75 },
+        { x: 2000000, y: 100 },
+        { x: 2000000, y: 0 },
       ]
     ],
     isInfinity: true,
   },
   {
     targetClassName: "direction-reverse-with-iterations-infinity",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
         { x: 0, y: 100 },
-        { x: 25000, y: 75 },
-        { x: 50000, y: 50 },
-        { x: 75000, y: 25 },
-        { x: 100000, y: 0 },
+        { x: 250000, y: 75 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 25 },
+        { x: 1000000, y: 0 },
       ],
       [
-        { x: 100000, y: 0 },
-        { x: 100000, y: 100 },
-        { x: 125000, y: 75 },
-        { x: 150000, y: 50 },
-        { x: 175000, y: 25 },
-        { x: 200000, y: 0 },
+        { x: 1000000, y: 0 },
+        { x: 1000000, y: 100 },
+        { x: 1250000, y: 75 },
+        { x: 1500000, y: 50 },
+        { x: 1750000, y: 25 },
+        { x: 2000000, y: 0 },
       ]
     ],
     isInfinity: true,
   },
   {
     targetClassName: "fill-backwards",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
-        { x: 25000, y: 25 },
-        { x: 50000, y: 50 },
-        { x: 75000, y: 75 },
-        { x: 100000, y: 100 },
-        { x: 100000, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
       ]
     ],
   },
   {
     targetClassName: "fill-backwards-with-delay-iterationstart",
     expectedDelayPath: [
       { x: 0, y: 0 },
       { x: 0, y: 50 },
-      { x: 50000, y: 50 },
-      { x: 50000, y: 0 },
+      { x: 500000, y: 50 },
+      { x: 500000, y: 0 },
     ],
     expectedIterationPathList: [
       [
-        { x: 50000, y: 50 },
-        { x: 75000, y: 75 },
-        { x: 100000, y: 100 },
-        { x: 100000, y: 0 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
       ],
       [
-        { x: 100000, y: 0 },
-        { x: 125000, y: 25 },
-        { x: 150000, y: 50 },
-        { x: 150000, y: 0 },
+        { x: 1000000, y: 0 },
+        { x: 1250000, y: 25 },
+        { x: 1500000, y: 50 },
+        { x: 1500000, y: 0 },
       ]
     ],
   },
   {
     targetClassName: "fill-both",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
-        { x: 25000, y: 25 },
-        { x: 50000, y: 50 },
-        { x: 75000, y: 75 },
-        { x: 100000, y: 100 },
-        { x: 100000, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
       ]
     ],
     expectedForwardsPath: [
-      { x: 100000, y: 0 },
-      { x: 100000, y: 100 },
-      { x: 200000, y: 100 },
-      { x: 200000, y: 0 },
+      { x: 1000000, y: 0 },
+      { x: 1000000, y: 100 },
+      { x: 2000000, y: 100 },
+      { x: 2000000, y: 0 },
     ],
   },
   {
     targetClassName: "fill-both-width-delay-iterationstart",
     expectedDelayPath: [
       { x: 0, y: 0 },
       { x: 0, y: 50 },
-      { x: 50000, y: 50 },
-      { x: 50000, y: 0 },
+      { x: 500000, y: 50 },
+      { x: 500000, y: 0 },
     ],
     expectedIterationPathList: [
       [
-        { x: 50000, y: 50 },
-        { x: 75000, y: 75 },
-        { x: 100000, y: 100 },
-        { x: 100000, y: 0 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
       ],
       [
-        { x: 100000, y: 0 },
-        { x: 125000, y: 25 },
-        { x: 150000, y: 50 },
-        { x: 150000, y: 0 },
+        { x: 1000000, y: 0 },
+        { x: 1250000, y: 25 },
+        { x: 1500000, y: 50 },
+        { x: 1500000, y: 0 },
       ]
     ],
     expectedForwardsPath: [
-      { x: 150000, y: 0 },
-      { x: 150000, y: 50 },
+      { x: 1500000, y: 0 },
+      { x: 1500000, y: 50 },
     ],
   },
   {
     targetClassName: "fill-forwards",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
-        { x: 25000, y: 25 },
-        { x: 50000, y: 50 },
-        { x: 75000, y: 75 },
-        { x: 100000, y: 100 },
-        { x: 100000, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
       ]
     ],
     expectedForwardsPath: [
-      { x: 100000, y: 0 },
-      { x: 100000, y: 100 },
-      { x: 200000, y: 100 },
-      { x: 200000, y: 0 },
+      { x: 1000000, y: 0 },
+      { x: 1000000, y: 100 },
+      { x: 2000000, y: 100 },
+      { x: 2000000, y: 0 },
     ],
   },
   {
     targetClassName: "iterationstart",
     expectedIterationPathList: [
       [
         { x: 0, y: 50 },
-        { x: 25000, y: 75 },
-        { x: 50000, y: 100 },
-        { x: 50000, y: 0 },
+        { x: 250000, y: 75 },
+        { x: 500000, y: 100 },
+        { x: 500000, y: 0 },
       ],
       [
-        { x: 50000, y: 0 },
-        { x: 75000, y: 25 },
-        { x: 100000, y: 50 },
-        { x: 100000, y: 0 },
+        { x: 500000, y: 0 },
+        { x: 750000, y: 25 },
+        { x: 1000000, y: 50 },
+        { x: 1000000, y: 0 },
       ]
     ],
   },
   {
     targetClassName: "no-compositor",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
-        { x: 25000, y: 25 },
-        { x: 50000, y: 50 },
-        { x: 75000, y: 75 },
-        { x: 100000, y: 100 },
-        { x: 100000, y: 0 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 750000, y: 75 },
+        { x: 1000000, y: 100 },
+        { x: 1000000, y: 0 },
       ]
     ],
   },
   {
     targetClassName: "keyframes-easing-step",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
-        { x: 49999, y: 0 },
-        { x: 50000, y: 50 },
-        { x: 99999, y: 50 },
-        { x: 100000, y: 0 },
+        { x: 499999, y: 0 },
+        { x: 500000, y: 50 },
+        { x: 999999, y: 50 },
+        { x: 1000000, y: 0 },
       ]
     ],
   },
   {
     targetClassName: "narrow-keyframes",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
-        { x: 10000, y: 10 },
-        { x: 11000, y: 10 },
-        { x: 11500, y: 10 },
-        { x: 12999, y: 10 },
-        { x: 13000, y: 13 },
-        { x: 13500, y: 13.5 },
+        { x: 100000, y: 10 },
+        { x: 110000, y: 10 },
+        { x: 115000, y: 10 },
+        { x: 129999, y: 10 },
+        { x: 130000, y: 13 },
+        { x: 135000, y: 13.5 },
       ]
     ],
   },
   {
     targetClassName: "duplicate-offsets",
     expectedIterationPathList: [
       [
         { x: 0, y: 0 },
-        { x: 25000, y: 25 },
-        { x: 50000, y: 50 },
-        { x: 99999, y: 50 },
+        { x: 250000, y: 25 },
+        { x: 500000, y: 50 },
+        { x: 999999, y: 50 },
       ]
     ],
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
 

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_effect-timing-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_effect-timing-path.js
@@ -13,20 +13,20 @@ const TEST_CASES = [
   },
   {
     targetClassName: "delay-negative",
   },
   {
     targetClassName: "easing-step",
     expectedPath: [
       { x: 0, y: 0 },
-      { x: 49900, y: 0 },
-      { x: 50000, y: 50 },
-      { x: 99999, y: 50 },
-      { x: 100000, y: 0 },
+      { x: 499999, y: 0 },
+      { x: 500000, y: 50 },
+      { x: 999999, y: 50 },
+      { x: 1000000, y: 0 },
     ],
   },
   {
     targetClassName: "keyframes-easing-step",
   },
 ];
 
 add_task(async function() {

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js
@@ -9,18 +9,18 @@
 
 const TEST_CASES = [
   {
     targetClassName: "delay-positive",
   },
   {
     targetClassName: "delay-negative",
     expectedPath: [
-      { x: -50000, y: 0 },
-      { x: -25000, y: 25 },
+      { x: -500000, y: 0 },
+      { x: -250000, y: 25 },
       { x: 0, y: 50 },
       { x: 0, y: 0 },
     ],
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-end-delay-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-end-delay-path.js
@@ -9,21 +9,21 @@
 
 const TEST_CASES = [
   {
     targetClassName: "enddelay-positive",
   },
   {
     targetClassName: "enddelay-negative",
     expectedPath: [
-      { x: 50000, y: 0 },
-      { x: 50000, y: 50 },
-      { x: 75000, y: 75 },
-      { x: 100000, y: 100 },
-      { x: 100000, y: 0 },
+      { x: 500000, y: 0 },
+      { x: 500000, y: 50 },
+      { x: 750000, y: 75 },
+      { x: 1000000, y: 100 },
+      { x: 1000000, y: 0 },
     ],
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
 
   const { panel } = await openAnimationInspector();

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js
@@ -5,176 +5,176 @@
 
 // Test for existance and content of tooltip on summary graph element.
 
 const TEST_CASES = [
   {
     targetClassName: "cssanimation-normal",
     expectedResult: {
       nameAndType: "cssanimation - CSS Animation",
-      duration: "100s",
+      duration: "1,000s",
     },
   },
   {
     targetClassName: "cssanimation-linear",
     expectedResult: {
       nameAndType: "cssanimation - CSS Animation",
-      duration: "100s",
+      duration: "1,000s",
       animationTimingFunction: "linear",
     },
   },
   {
     targetClassName: "delay-positive",
     expectedResult: {
       nameAndType: "test-delay-animation - Script Animation",
-      delay: "50s",
-      duration: "100s",
+      delay: "500s",
+      duration: "1,000s",
     },
   },
   {
     targetClassName: "delay-negative",
     expectedResult: {
       nameAndType: "test-negative-delay-animation - Script Animation",
-      delay: "-50s",
-      duration: "100s",
+      delay: "-500s",
+      duration: "1,000s",
     },
   },
   {
     targetClassName: "easing-step",
     expectedResult: {
       nameAndType: "Script Animation",
-      duration: "100s",
+      duration: "1,000s",
       easing: "steps(2)",
     },
   },
   {
     targetClassName: "enddelay-positive",
     expectedResult: {
       nameAndType: "Script Animation",
-      duration: "100s",
-      endDelay: "50s",
+      duration: "1,000s",
+      endDelay: "500s",
     },
   },
   {
     targetClassName: "enddelay-negative",
     expectedResult: {
       nameAndType: "Script Animation",
-      duration: "100s",
-      endDelay: "-50s",
+      duration: "1,000s",
+      endDelay: "-500s",
     },
   },
   {
     targetClassName: "enddelay-with-fill-forwards",
     expectedResult: {
       nameAndType: "Script Animation",
-      duration: "100s",
-      endDelay: "50s",
+      duration: "1,000s",
+      endDelay: "500s",
       fill: "forwards",
     },
   },
   {
     targetClassName: "enddelay-with-iterations-infinity",
     expectedResult: {
       nameAndType: "Script Animation",
-      duration: "100s",
-      endDelay: "50s",
+      duration: "1,000s",
+      endDelay: "500s",
       iterations: "\u221E",
     },
   },
   {
     targetClassName: "direction-alternate-with-iterations-infinity",
     expectedResult: {
       nameAndType: "Script Animation",
-      duration: "100s",
+      duration: "1,000s",
       direction: "alternate",
       iterations: "\u221E",
     },
   },
   {
     targetClassName: "direction-alternate-reverse-with-iterations-infinity",
     expectedResult: {
       nameAndType: "Script Animation",
-      duration: "100s",
+      duration: "1,000s",
       direction: "alternate-reverse",
       iterations: "\u221E",
     },
   },
   {
     targetClassName: "direction-reverse-with-iterations-infinity",
     expectedResult: {
       nameAndType: "Script Animation",
-      duration: "100s",
+      duration: "1,000s",
       direction: "reverse",
       iterations: "\u221E",
     },
   },
   {
     targetClassName: "fill-backwards",
     expectedResult: {
       nameAndType: "Script Animation",
-      duration: "100s",
+      duration: "1,000s",
       fill: "backwards",
     },
   },
   {
     targetClassName: "fill-backwards-with-delay-iterationstart",
     expectedResult: {
       nameAndType: "Script Animation",
-      delay: "50s",
-      duration: "100s",
+      delay: "500s",
+      duration: "1,000s",
       fill: "backwards",
       iterationStart: "0.5",
     },
   },
   {
     targetClassName: "fill-both",
     expectedResult: {
       nameAndType: "Script Animation",
-      duration: "100s",
+      duration: "1,000s",
       fill: "both",
     },
   },
   {
     targetClassName: "fill-both-width-delay-iterationstart",
     expectedResult: {
       nameAndType: "Script Animation",
-      delay: "50s",
-      duration: "100s",
+      delay: "500s",
+      duration: "1,000s",
       fill: "both",
       iterationStart: "0.5",
     },
   },
   {
     targetClassName: "fill-forwards",
     expectedResult: {
       nameAndType: "Script Animation",
-      duration: "100s",
+      duration: "1,000s",
       fill: "forwards",
     },
   },
   {
     targetClassName: "iterationstart",
     expectedResult: {
       nameAndType: "Script Animation",
-      duration: "100s",
+      duration: "1,000s",
       iterationStart: "0.5",
     },
   },
   {
     targetClassName: "no-compositor",
     expectedResult: {
       nameAndType: "Script Animation",
-      duration: "100s",
+      duration: "1,000s",
     },
   },
   {
     targetClassName: "keyframes-easing-step",
     expectedResult: {
       nameAndType: "Script Animation",
-      duration: "100s",
+      duration: "1,000s",
     },
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
 
   const { panel } = await openAnimationInspector();

--- a/devtools/client/inspector/animation/test/doc_multi_timings.html
+++ b/devtools/client/inspector/animation/test/doc_multi_timings.html
@@ -5,21 +5,21 @@
     <style>
     div {
       background-color: lime;
       height: 100px;
       width: 100px;
     }
 
     .cssanimation-normal {
-      animation: cssanimation 100s;
+      animation: cssanimation 1000s;
     }
 
     .cssanimation-linear {
-      animation: cssanimation 100s linear;
+      animation: cssanimation 1000s linear;
     }
 
     @keyframes cssanimation {
       from {
         opacity: 0;
       }
       to {
         opacity: 1;
@@ -28,52 +28,52 @@
     </style>
   </head>
   <body>
     <div class="cssanimation-normal"></div>
     <div class="cssanimation-linear"></div>
     <script>
     "use strict";
 
-    const duration = 100000;
+    const duration = 1000000;
 
     function createAnimation(keyframes, effect, className) {
       const div = document.createElement("div");
       div.classList.add(className);
       document.body.appendChild(div);
       effect.duration = duration;
       div.animate(keyframes, effect);
     }
 
     createAnimation({ opacity: [0, 1] },
-                    { delay: 50000, id: "test-delay-animation" },
+                    { delay: 500000, id: "test-delay-animation" },
                     "delay-positive");
 
     createAnimation({ opacity: [0, 1] },
-                    { delay: -50000, id: "test-negative-delay-animation" },
+                    { delay: -500000, id: "test-negative-delay-animation" },
                     "delay-negative");
 
     createAnimation({ opacity: [0, 1] },
                     { easing: "steps(2)" },
                     "easing-step");
 
     createAnimation({ opacity: [0, 1] },
-                    { endDelay: 50000 },
+                    { endDelay: 500000 },
                     "enddelay-positive");
 
     createAnimation({ opacity: [0, 1] },
-                    { endDelay: -50000 },
+                    { endDelay: -500000 },
                     "enddelay-negative");
 
     createAnimation({ opacity: [0, 1] },
-                    { endDelay: 50000, fill: "forwards" },
+                    { endDelay: 500000, fill: "forwards" },
                     "enddelay-with-fill-forwards");
 
     createAnimation({ opacity: [0, 1] },
-                    { endDelay: 50000, iterations: Infinity },
+                    { endDelay: 500000, iterations: Infinity },
                     "enddelay-with-iterations-infinity");
 
     createAnimation({ opacity: [0, 1] },
                     { direction: "alternate", iterations: Infinity },
                     "direction-alternate-with-iterations-infinity");
 
     createAnimation({ opacity: [0, 1] },
                     { direction: "alternate-reverse", iterations: Infinity },
@@ -83,25 +83,25 @@
                     { direction: "reverse", iterations: Infinity },
                     "direction-reverse-with-iterations-infinity");
 
     createAnimation({ opacity: [0, 1] },
                     { fill: "backwards" },
                     "fill-backwards");
 
     createAnimation({ opacity: [0, 1] },
-                    { fill: "backwards", delay: 50000, iterationStart: 0.5 },
+                    { fill: "backwards", delay: 500000, iterationStart: 0.5 },
                      "fill-backwards-with-delay-iterationstart");
 
     createAnimation({ opacity: [0, 1] },
                     { fill: "both" },
                     "fill-both");
 
     createAnimation({ opacity: [0, 1] },
-                    { fill: "both", delay: 50000, iterationStart: 0.5 },
+                    { fill: "both", delay: 500000, iterationStart: 0.5 },
                     "fill-both-width-delay-iterationstart");
 
     createAnimation({ opacity: [0, 1] },
                     { fill: "forwards" },
                     "fill-forwards");
 
     createAnimation({ opacity: [0, 1] },
                     { iterationStart: 0.5 },