1 files changed, 129 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/browser_animation_pseudo-element.js b/devtools/client/inspector/animation/test/browser_animation_pseudo-element.js
new file mode 100644
index 0000000000..00e267f9f8
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_pseudo-element.js
@@ -0,0 +1,129 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for pseudo element.
+
+const TEST_DATA = [
+  {
+    expectedTargetLabel: "::before",
+    expectedAnimationNameLabel: "body",
+    expectedKeyframsGraphPathSegments: [
+      { x: 0, y: 0 },
+      { x: 1000, y: 100 },
+    ],
+  },
+  {
+    expectedTargetLabel: "::before",
+    expectedAnimationNameLabel: "div-before",
+    expectedKeyframsGraphPathSegments: [
+      { x: 0, y: 100 },
+      { x: 1000, y: 0 },
+    ],
+  },
+  {
+    expectedTargetLabel: "::after",
+    expectedAnimationNameLabel: "div-after",
+  },
+  {
+    expectedTargetLabel: "::marker",
+    expectedAnimationNameLabel: "div-marker",
+  },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_pseudo.html");
+  const { animationInspector, inspector, panel } =
+    await openAnimationInspector();
+
+  info("Checking count of animation item for pseudo elements");
+  is(
+    panel.querySelectorAll(".animation-list .animation-item").length,
+    TEST_DATA.length,
+    `Count of animation item should be ${TEST_DATA.length}`
+  );
+
+  info("Checking content of each animation item");
+  for (let i = 0; i < TEST_DATA.length; i++) {
+    const testData = TEST_DATA[i];
+    info(`Checking pseudo element for ${testData.expectedTargetLabel}`);
+    const animationItemEl = await findAnimationItemByIndex(panel, i);
+
+    info("Checking text content of animation target");
+    const animationTargetEl = animationItemEl.querySelector(
+      ".animation-list .animation-item .animation-target"
+    );
+    is(
+      animationTargetEl.textContent,
+      testData.expectedTargetLabel,
+      `Text content of animation target[${i}] should be ${testData.expectedTarget}`
+    );
+
+    info("Checking text content of animation name");
+    const animationNameEl = animationItemEl.querySelector(".animation-name");
+    is(
+      animationNameEl.textContent,
+      testData.expectedAnimationNameLabel,
+      `The animation name should be ${testData.expectedAnimationNameLabel}`
+    );
+  }
+
+  info(
+    "Checking whether node is selected correctly " +
+      "when click on the first inspector icon on Reps component"
+  );
+  let onDetailRendered = animationInspector.once(
+    "animation-keyframes-rendered"
+  );
+  await clickOnTargetNode(animationInspector, panel, 0);
+  await onDetailRendered;
+  assertAnimationCount(panel, 1);
+  assertAnimationNameLabel(panel, TEST_DATA[0].expectedAnimationNameLabel);
+  assertKeyframesGraphPathSegments(
+    panel,
+    TEST_DATA[0].expectedKeyframsGraphPathSegments
+  );
+
+  info("Select <body> again to reset the animation list");
+  await selectNode("body", inspector);
+
+  info(
+    "Checking whether node is selected correctly " +
+      "when click on the second inspector icon on Reps component"
+  );
+  onDetailRendered = animationInspector.once("animation-keyframes-rendered");
+  await clickOnTargetNode(animationInspector, panel, 1);
+  await onDetailRendered;
+  assertAnimationCount(panel, 1);
+  assertAnimationNameLabel(panel, TEST_DATA[1].expectedAnimationNameLabel);
+  assertKeyframesGraphPathSegments(
+    panel,
+    TEST_DATA[1].expectedKeyframsGraphPathSegments
+  );
+});
+
+function assertAnimationCount(panel, expectedCount) {
+  info("Checking count of animation item");
+  is(
+    panel.querySelectorAll(".animation-list .animation-item").length,
+    expectedCount,
+    `Count of animation item should be ${expectedCount}`
+  );
+}
+
+function assertAnimationNameLabel(panel, expectedAnimationNameLabel) {
+  info("Checking the animation name label");
+  is(
+    panel.querySelector(".animation-list .animation-item .animation-name")
+      .textContent,
+    expectedAnimationNameLabel,
+    `The animation name should be ${expectedAnimationNameLabel}`
+  );
+}
+
+function assertKeyframesGraphPathSegments(panel, expectedPathSegments) {
+  info("Checking the keyframes graph path segments");
+  const pathEl = panel.querySelector(".keyframes-graph-path path");
+  assertPathSegments(pathEl, true, expectedPathSegments);
+}