1 files changed, 113 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/browser_animation_logic_mutations.js b/devtools/client/inspector/animation/test/browser_animation_logic_mutations.js
new file mode 100644
index 0000000000..56228a60c2
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_mutations.js
@@ -0,0 +1,113 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following mutations:
+// * add animation
+// * remove animation
+// * modify animation
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([
+    ".compositor-all",
+    ".compositor-notall",
+    ".no-compositor",
+    ".still",
+  ]);
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+
+  info("Checking the mutation for add an animation");
+  const originalAnimationCount = animationInspector.state.animations.length;
+  await setClassAttribute(animationInspector, ".still", "ball no-compositor");
+  await waitUntil(
+    () =>
+      animationInspector.state.animations.length === originalAnimationCount + 1
+  );
+  ok(true, "Count of animation should be plus one to original count");
+
+  info(
+    "Checking added animation existence even the animation name is duplicated"
+  );
+  is(
+    getAnimationNameCount(panel, "no-compositor"),
+    2,
+    "Count of animation should be plus one to original count"
+  );
+
+  info("Checking the mutation for remove an animation");
+  await setClassAttribute(
+    animationInspector,
+    ".compositor-notall",
+    "ball still"
+  );
+  await waitUntil(
+    () => animationInspector.state.animations.length === originalAnimationCount
+  );
+  ok(
+    true,
+    "Count of animation should be same to original count since we remove an animation"
+  );
+
+  info("Checking the mutation for modify an animation");
+  await selectNode(".compositor-all", inspector);
+  await setStyle(
+    animationInspector,
+    ".compositor-all",
+    "animationDuration",
+    "100s"
+  );
+  await setStyle(
+    animationInspector,
+    ".compositor-all",
+    "animationIterationCount",
+    1
+  );
+  const summaryGraphPathEl = getSummaryGraphPathElement(
+    panel,
+    "compositor-all"
+  );
+  await waitUntil(() => summaryGraphPathEl.viewBox.baseVal.width === 100000);
+  ok(
+    true,
+    "Width of summary graph path should be 100000 " +
+      "after modifing the duration and iteration count"
+  );
+  await setStyle(
+    animationInspector,
+    ".compositor-all",
+    "animationDelay",
+    "100s"
+  );
+  await waitUntil(() => summaryGraphPathEl.viewBox.baseVal.width === 200000);
+  ok(
+    true,
+    "Width of summary graph path should be 200000 after modifing the delay"
+  );
+  ok(
+    summaryGraphPathEl.parentElement.querySelector(".animation-delay-sign"),
+    "Delay sign element shoud exist"
+  );
+});
+
+function getAnimationNameCount(panel, animationName) {
+  return [...panel.querySelectorAll(".animation-name")].reduce(
+    (count, element) =>
+      element.textContent === animationName ? count + 1 : count,
+    0
+  );
+}
+
+function getSummaryGraphPathElement(panel, animationName) {
+  for (const animationNameEl of panel.querySelectorAll(".animation-name")) {
+    if (animationNameEl.textContent === animationName) {
+      return animationNameEl
+        .closest(".animation-summary-graph")
+        .querySelector(".animation-summary-graph-path");
+    }
+  }
+
+  return null;
+}