1 files changed, 96 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/browser_animation_pause-resume-button_respectively.js b/devtools/client/inspector/animation/test/browser_animation_pause-resume-button_respectively.js
new file mode 100644
index 0000000000..ad84e4c257
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_pause-resume-button_respectively.js
@@ -0,0 +1,96 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether pausing/resuming the each animations correctly.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".animated", ".compositor-all"]);
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+  const buttonEl = panel.querySelector(".pause-resume-button");
+
+  info(
+    "Check '.compositor-all' animation is still running " +
+      "after even pausing '.animated' animation"
+  );
+  await selectNode(".animated", inspector);
+  clickOnPauseResumeButton(animationInspector, panel);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  ok(buttonEl.classList.contains("paused"), "State of button should be paused");
+  await selectNode("body", inspector);
+  await assertStatus(
+    animationInspector.state.animations,
+    buttonEl,
+    ["paused", "running"],
+    false
+  );
+
+  info(
+    "Check both animations are paused after clicking pause/resume " +
+      "while displaying both animations"
+  );
+  clickOnPauseResumeButton(animationInspector, panel);
+  await assertStatus(
+    animationInspector.state.animations,
+    buttonEl,
+    ["paused", "paused"],
+    true
+  );
+
+  info(
+    "Check '.animated' animation is still paused " +
+      "after even resuming '.compositor-all' animation"
+  );
+  await selectNode(".compositor-all", inspector);
+  clickOnPauseResumeButton(animationInspector, panel);
+  await waitUntil(() =>
+    animationInspector.state.animations.some(
+      a => a.state.playState === "running"
+    )
+  );
+  ok(
+    !buttonEl.classList.contains("paused"),
+    "State of button should be running"
+  );
+  await selectNode("body", inspector);
+  await assertStatus(
+    animationInspector.state.animations,
+    buttonEl,
+    ["paused", "running"],
+    false
+  );
+});
+
+async function assertStatus(
+  animations,
+  buttonEl,
+  expectedAnimationStates,
+  shouldButtonPaused
+) {
+  await waitUntil(() => {
+    for (let i = 0; i < expectedAnimationStates.length; i++) {
+      const animation = animations[i];
+      const state = expectedAnimationStates[i];
+      if (animation.state.playState !== state) {
+        return false;
+      }
+    }
+    return true;
+  });
+  expectedAnimationStates.forEach((state, index) => {
+    is(
+      animations[index].state.playState,
+      state,
+      `Animation ${index} should be ${state}`
+    );
+  });
+
+  is(
+    buttonEl.classList.contains("paused"),
+    shouldButtonPaused,
+    "State of button is correct"
+  );
+}