1 files changed, 109 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js b/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js
new file mode 100644
index 0000000000..c1bab42cc2
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js
@@ -0,0 +1,109 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following timeline tick items.
+// * animation list header elements existence
+// * tick labels elements existence
+// * count and text of tick label elements changing by the sidebar width
+
+const TimeScale = require("resource://devtools/client/inspector/animation/utils/timescale.js");
+const {
+  findOptimalTimeInterval,
+} = require("resource://devtools/client/inspector/animation/utils/utils.js");
+
+// Should be kept in sync with TIME_GRADUATION_MIN_SPACING in
+// AnimationTimeTickList component.
+const TIME_GRADUATION_MIN_SPACING = 40;
+
+add_task(async function () {
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".end-delay", ".negative-delay"]);
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+  const timeScale = new TimeScale(animationInspector.state.animations);
+
+  info("Checking animation list header element existence");
+  const listContainerEl = panel.querySelector(".animation-list-container");
+  const listHeaderEl = listContainerEl.querySelector(".devtools-toolbar");
+  ok(
+    listHeaderEl,
+    "The header element should be in animation list container element"
+  );
+
+  info("Checking time tick item elements existence");
+  await assertTickLabels(timeScale, listContainerEl);
+  const timelineTickItemLength =
+    listContainerEl.querySelectorAll(".tick-label").length;
+
+  info("Checking timeline tick item elements after enlarge sidebar width");
+  await setSidebarWidth("100%", inspector);
+  await assertTickLabels(timeScale, listContainerEl);
+  ok(
+    timelineTickItemLength <
+      listContainerEl.querySelectorAll(".tick-label").length,
+    "The timeline tick item elements should increase"
+  );
+});
+
+/**
+ * Assert tick label's position and label.
+ *
+ * @param {TimeScale} - timeScale
+ * @param {Element} - listContainerEl
+ */
+async function assertTickLabels(timeScale, listContainerEl) {
+  const timelineTickListEl = listContainerEl.querySelector(".tick-labels");
+  ok(
+    timelineTickListEl,
+    "The animation timeline tick list element should be in header"
+  );
+
+  const width = timelineTickListEl.offsetWidth;
+  const animationDuration = timeScale.getDuration();
+  const minTimeInterval =
+    (TIME_GRADUATION_MIN_SPACING * animationDuration) / width;
+  const interval = findOptimalTimeInterval(minTimeInterval);
+  const shiftWidth = timeScale.zeroPositionTime % interval;
+  const expectedTickItem =
+    Math.ceil(animationDuration / interval) + (shiftWidth !== 0 ? 1 : 0);
+
+  await waitUntil(
+    () =>
+      timelineTickListEl.querySelectorAll(".tick-label").length ===
+      expectedTickItem
+  );
+  ok(true, "The expected number of timeline ticks were found");
+
+  const timelineTickItemEls =
+    timelineTickListEl.querySelectorAll(".tick-label");
+
+  info("Make sure graduations are evenly distributed and show the right times");
+  for (const [index, tickEl] of timelineTickItemEls.entries()) {
+    const left = parseFloat(tickEl.style.marginInlineStart);
+    let expectedPos =
+      (((index - 1) * interval + shiftWidth) / animationDuration) * 100;
+    if (shiftWidth !== 0 && index === 0) {
+      expectedPos = 0;
+    }
+    is(
+      Math.round(left),
+      Math.round(expectedPos),
+      `Graduation ${index} is positioned correctly`
+    );
+
+    // Note that the distancetoRelativeTime and formatTime functions are tested
+    // separately in xpcshell test test_timeScale.js, so we assume that they
+    // work here.
+    const formattedTime = timeScale.formatTime(
+      timeScale.distanceToRelativeTime(expectedPos, width)
+    );
+    is(
+      tickEl.textContent,
+      formattedTime,
+      `Graduation ${index} has the right text content`
+    );
+  }
+}