1 files changed, 150 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_layout-by-seek.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_layout-by-seek.js
new file mode 100644
index 0000000000..5f1c808728
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_layout-by-seek.js
@@ -0,0 +1,150 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the layout of graphs were broken by seek and resume.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await removeAnimatedElementsExcept([
+    ".delay-positive",
+    ".delay-negative",
+    ".enddelay-positive",
+    ".enddelay-negative",
+  ]);
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Get initial coordinates result as test data");
+  const initialCoordinatesResult = [];
+
+  for (let i = 0; i < animationInspector.state.animations.length; i++) {
+    const itemEl = await findAnimationItemByIndex(panel, i);
+    const svgEl = itemEl.querySelector("svg");
+    const svgViewBoxX = svgEl.viewBox.baseVal.x;
+    const svgViewBoxWidth = svgEl.viewBox.baseVal.width;
+
+    const pathEl = svgEl.querySelector(".animation-computed-timing-path");
+    const pathX = pathEl.transform.baseVal[0].matrix.e;
+
+    const delayEl = itemEl.querySelector(".animation-delay-sign");
+    let delayX = null;
+    let delayWidth = null;
+
+    if (delayEl) {
+      const computedStyle = delayEl.ownerGlobal.getComputedStyle(delayEl);
+      delayX = computedStyle.left;
+      delayWidth = computedStyle.width;
+    }
+
+    const endDelayEl = itemEl.querySelector(".animation-end-delay-sign");
+    let endDelayX = null;
+    let endDelayWidth = null;
+
+    if (endDelayEl) {
+      const computedStyle = endDelayEl.ownerGlobal.getComputedStyle(endDelayEl);
+      endDelayX = computedStyle.left;
+      endDelayWidth = computedStyle.width;
+    }
+
+    const coordinates = {
+      svgViewBoxX,
+      svgViewBoxWidth,
+      pathX,
+      delayX,
+      delayWidth,
+      endDelayX,
+      endDelayWidth,
+    };
+    initialCoordinatesResult.push(coordinates);
+  }
+
+  info("Set currentTime to rear of the end of animation of .delay-negative.");
+  clickOnCurrentTimeScrubberController(animationInspector, panel, 0.75);
+  await waitUntilAnimationsPlayState(animationInspector, "paused");
+  info("Resume animations");
+  clickOnPauseResumeButton(animationInspector, panel);
+  // As some animations may be finished, we check if some animations will be running.
+  await waitUntil(() =>
+    animationInspector.state.animations.some(
+      a => a.state.playState === "running"
+    )
+  );
+
+  info("Check the layout");
+  const itemEls = panel.querySelectorAll(".animation-item");
+  is(
+    itemEls.length,
+    initialCoordinatesResult.length,
+    "Count of animation item should be same to initial items"
+  );
+
+  info("Check the coordinates");
+  checkExpectedCoordinates(itemEls, initialCoordinatesResult);
+});
+
+function checkExpectedCoordinates(itemEls, initialCoordinatesResult) {
+  for (let i = 0; i < itemEls.length; i++) {
+    const expectedCoordinates = initialCoordinatesResult[i];
+    const itemEl = itemEls[i];
+    const svgEl = itemEl.querySelector("svg");
+    is(
+      svgEl.viewBox.baseVal.x,
+      expectedCoordinates.svgViewBoxX,
+      "X of viewBox of svg should be same"
+    );
+    is(
+      svgEl.viewBox.baseVal.width,
+      expectedCoordinates.svgViewBoxWidth,
+      "Width of viewBox of svg should be same"
+    );
+
+    const pathEl = svgEl.querySelector(".animation-computed-timing-path");
+    is(
+      pathEl.transform.baseVal[0].matrix.e,
+      expectedCoordinates.pathX,
+      "X of tansform of path element should be same"
+    );
+
+    const delayEl = itemEl.querySelector(".animation-delay-sign");
+
+    if (delayEl) {
+      const computedStyle = delayEl.ownerGlobal.getComputedStyle(delayEl);
+      is(
+        computedStyle.left,
+        expectedCoordinates.delayX,
+        "X of delay sign should be same"
+      );
+      is(
+        computedStyle.width,
+        expectedCoordinates.delayWidth,
+        "Width of delay sign should be same"
+      );
+    } else {
+      ok(!expectedCoordinates.delayX, "X of delay sign should exist");
+      ok(!expectedCoordinates.delayWidth, "Width of delay sign should exist");
+    }
+
+    const endDelayEl = itemEl.querySelector(".animation-end-delay-sign");
+
+    if (endDelayEl) {
+      const computedStyle = endDelayEl.ownerGlobal.getComputedStyle(endDelayEl);
+      is(
+        computedStyle.left,
+        expectedCoordinates.endDelayX,
+        "X of endDelay sign should be same"
+      );
+      is(
+        computedStyle.width,
+        expectedCoordinates.endDelayWidth,
+        "Width of endDelay sign should be same"
+      );
+    } else {
+      ok(!expectedCoordinates.endDelayX, "X of endDelay sign should exist");
+      ok(
+        !expectedCoordinates.endDelayWidth,
+        "Width of endDelay sign should exist"
+      );
+    }
+  }
+}