Bug 1450526 - Part 3: Add test for pseudo element. r?pbro
MozReview-Commit-ID: Bmv09NYemqJ
--- a/devtools/client/inspector/animation/test/browser.ini
+++ b/devtools/client/inspector/animation/test/browser.ini
@@ -2,16 +2,17 @@
tags = devtools
subsuite = devtools
support-files =
doc_custom_playback_rate.html
doc_frame_script.js
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
!/devtools/client/inspector/test/shared-head.js
!/devtools/client/shared/test/frame-script-utils.js
!/devtools/client/shared/test/shared-head.js
!/devtools/client/shared/test/test-actor-registry.js
!/devtools/client/shared/test/test-actor.js
@@ -34,16 +35,17 @@ support-files =
[browser_animation_keyframes-graph_keyframe-marker.js]
[browser_animation_keyframes-progress-bar.js]
[browser_animation_logic_auto-stop.js]
[browser_animation_logic_avoid-updating-during-hiding.js]
[browser_animation_logic_mutations.js]
[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]
[browser_animation_summary-graph_computed-timing-path.js]
[browser_animation_summary-graph_computed-timing-path_different-timescale.js]
[browser_animation_summary-graph_delay-sign.js]
[browser_animation_summary-graph_end-delay-sign.js]
[browser_animation_summary-graph_effect-timing-path.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_pseudo-element.js
@@ -0,0 +1,46 @@
+/* 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: "before",
+ },
+ {
+ expectedTargetLabel: "::after",
+ expectedAnimationNameLabel: "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 }`);
+ }
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_pseudo.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <style>
+ .pseudo::before {
+ animation: before 10s infinite;
+ background-color: lime;
+ content: "before";
+ width: 100px;
+ }
+
+ .pseudo::after {
+ animation: after 10s infinite;
+ background-color: lime;
+ content: "after";
+ width: 100px;
+ }
+
+ @keyframes before {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+ }
+
+ @keyframes after {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+ }
+ </style>
+ </head>
+ <body>
+ <div class="pseudo"></div>
+ </body>
+</html>