From 03df20587e765f5453248aeabbbd98de7c4cc9be Mon Sep 17 00:00:00 2001
From: Daisuke Akatsuka <dakatsuka@mozilla.com>
Date: Mon, 21 May 2018 18:53:42 +0900
Subject: [PATCH] Bug 1450526 - Part 5: Add test for pseudo element. r=pbro

MozReview-Commit-ID: 2BihXbtTmKo

--HG--
extra : rebase_source : 1012db7391c2f906d2f790b081ac4495942fe471
---
 .../inspector/animation/test/browser.ini      |  2 +
 .../test/browser_animation_pseudo-element.js  | 79 +++++++++++++++++++
 .../inspector/animation/test/doc_pseudo.html  | 62 +++++++++++++++
 3 files changed, 143 insertions(+)
 create mode 100644 devtools/client/inspector/animation/test/browser_animation_pseudo-element.js
 create mode 100644 devtools/client/inspector/animation/test/doc_pseudo.html

diff --git a/devtools/client/inspector/animation/test/browser.ini b/devtools/client/inspector/animation/test/browser.ini
index e1eaecafcabc..42cf7651b06f 100644
--- a/devtools/client/inspector/animation/test/browser.ini
+++ b/devtools/client/inspector/animation/test/browser.ini
@@ -7,6 +7,7 @@ support-files =
   doc_multi_easings.html
   doc_multi_keyframes.html
   doc_multi_timings.html
+  doc_pseudo.html
   doc_simple_animation.html
   head.js
   !/devtools/client/inspector/test/head.js
@@ -44,6 +45,7 @@ support-files =
 [browser_animation_pause-resume-button.js]
 [browser_animation_pause-resume-button_spacebar.js]
 [browser_animation_playback-rate-selector.js]
+[browser_animation_pseudo-element.js]
 [browser_animation_rewind-button.js]
 [browser_animation_summary-graph_animation-name.js]
 [browser_animation_summary-graph_compositor.js]
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 000000000000..cae58a00392d
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_pseudo-element.js
@@ -0,0 +1,79 @@
+/* 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",
+  },
+  {
+    expectedTargetLabel: "::before",
+    expectedAnimationNameLabel: "div-before",
+  },
+  {
+    expectedTargetLabel: "::after",
+    expectedAnimationNameLabel: "div-after",
+  },
+];
+
+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");
+  const animationItemEls = panel.querySelectorAll(".animation-list .animation-item");
+
+  for (let i = 0; i < animationItemEls.length; i++) {
+    const testData = TEST_DATA[i];
+    info(`Checking pseudo element for ${ testData.expectedTargetLabel }`);
+    const animationItemEl = animationItemEls[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");
+  await clickOnTargetNode(animationInspector, panel, 0);
+
+  info("Checking count of animation item");
+  is(panel.querySelectorAll(".animation-list .animation-item").length, 1,
+    "Count of animation item should be 1");
+
+  info("Checking content of animation item");
+  is(panel.querySelector(".animation-list .animation-item .animation-name").textContent,
+     TEST_DATA[0].expectedAnimationNameLabel,
+     `The animation name should be ${ TEST_DATA[0].expectedAnimationNameLabel }`);
+
+  info("Select <body> again to reset the animation list");
+  await selectNodeAndWaitForAnimations("body", inspector);
+
+  info("Checking whether node is selected correctly " +
+       "when click on the second inspector icon on Reps component");
+  await clickOnTargetNode(animationInspector, panel, 1);
+
+  info("Checking count of animation item");
+  is(panel.querySelectorAll(".animation-list .animation-item").length, 1,
+     "Count of animation item should be 1");
+
+  info("Checking content of animation item");
+  is(panel.querySelector(".animation-list .animation-item .animation-name").textContent,
+     TEST_DATA[1].expectedAnimationNameLabel,
+     `The animation name should be ${ TEST_DATA[1].expectedAnimationNameLabel }`);
+});
diff --git a/devtools/client/inspector/animation/test/doc_pseudo.html b/devtools/client/inspector/animation/test/doc_pseudo.html
new file mode 100644
index 000000000000..07d71c01479c
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_pseudo.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    body::before {
+      animation: body 10s infinite;
+      background-color: lime;
+      content: "body-before";
+      width: 100px;
+    }
+
+    .div-before::before {
+      animation: div-before 10s infinite;
+      background-color: lime;
+      content: "div-before";
+      width: 100px;
+    }
+
+    .div-after::after {
+      animation: div-after 10s infinite;
+      background-color: lime;
+      content: "div-after";
+      width: 100px;
+    }
+
+    @keyframes body {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    @keyframes div-before {
+      from {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+      }
+    }
+
+    @keyframes div-after {
+      from {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.9;
+      }
+      to {
+        opacity: 0;
+      }
+    }
+    </style>
+  </head>
+  <body>
+    <div class="div-before"></div>
+    <div class="div-after"></div>
+  </body>
+</html>