Bug 1468343 - Part 4: Add test for infinity duration. r?jdescottes
MozReview-Commit-ID: Jc9UefSr1To
--- a/devtools/client/inspector/animation/test/browser.ini
+++ b/devtools/client/inspector/animation/test/browser.ini
@@ -1,15 +1,16 @@
[DEFAULT]
tags = devtools
subsuite = devtools
support-files =
current-time-scrubber_head.js
doc_custom_playback_rate.html
doc_frame_script.js
+ doc_infinity_duration.html
doc_multi_easings.html
doc_multi_keyframes.html
doc_multi_timings.html
doc_mutations_fast.html
doc_pseudo.html
doc_short_duration.html
doc_simple_animation.html
head.js
@@ -39,16 +40,19 @@ support-files =
[browser_animation_animation-timeline-tick.js]
[browser_animation_css-transition-with-playstate-idle.js]
[browser_animation_current-time-label.js]
[browser_animation_current-time-scrubber.js]
[browser_animation_current-time-scrubber-rtl.js]
[browser_animation_current-time-scrubber_each-different-creation-time-animations.js]
[browser_animation_empty_on_invalid_nodes.js]
[browser_animation_indication-bar.js]
+[browser_animation_infinity-duration_current-time-scrubber.js]
+[browser_animation_infinity-duration_summary-graph.js]
+[browser_animation_infinity-duration_tick-label.js]
[browser_animation_inspector_exists.js]
[browser_animation_keyframes-graph_computed-value-path-01.js]
[browser_animation_keyframes-graph_computed-value-path-02.js]
[browser_animation_keyframes-graph_computed-value-path_easing-hint.js]
skip-if = (verify && !debug)
[browser_animation_keyframes-graph_keyframe-marker.js]
[browser_animation_keyframes-graph_keyframe-marker-rtl.js]
[browser_animation_keyframes-progress-bar.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_infinity-duration_current-time-scrubber.js
@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the scrubber was working for even the animation of infinity duration.
+
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_infinity_duration.html");
+ await removeAnimatedElementsExcept([".infinity-delay-iteration-start"]);
+ const { animationInspector, panel } = await openAnimationInspector();
+
+ info("Set initial state");
+ await clickOnCurrentTimeScrubberController(animationInspector, panel, 0);
+ const initialCurrentTime = animationInspector.state.animations[0].state.currentTime;
+
+ info("Check whether the animation currentTime was increased");
+ await clickOnCurrentTimeScrubberController(animationInspector, panel, 1);
+ ok(initialCurrentTime <= animationInspector.state.animations[0].state.currentTime,
+ "currentTime should be increased");
+
+ info("Check whether the progress bar was moved");
+ const areaEl = panel.querySelector(".keyframes-progress-bar-area");
+ const barEl = areaEl.querySelector(".keyframes-progress-bar");
+ const controllerBounds = areaEl.getBoundingClientRect();
+ const barBounds = barEl.getBoundingClientRect();
+ const barX = barBounds.x + barBounds.width / 2 - controllerBounds.x;
+ const expectedBarX = controllerBounds.width * 0.5;
+ ok(Math.abs(barX - expectedBarX) < 1,
+ "Progress bar should indicate at progress of 0.5");
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_infinity-duration_summary-graph.js
@@ -0,0 +1,137 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for following summary graph with the animation which has infinity duration.
+// * Tooltips
+// * Graph path
+// * Delay sign
+
+const TEST_DATA = [
+ {
+ targetClass: "infinity",
+ expectedIterationPath: [
+ { x: 0, y: 0 },
+ { x: 200000, y: 0 },
+ ],
+ expectedTooltip: {
+ duration: "\u221E",
+ },
+ },
+ {
+ targetClass: "infinity-delay-iteration-start",
+ expectedDelayPath: [
+ { x: 0, y: 0 },
+ { x: 100000, y: 0 },
+ ],
+ expectedDelaySign: {
+ marginInlineStart: "0%",
+ width: "50%",
+ },
+ expectedIterationPath: [
+ { x: 100000, y: 50 },
+ { x: 200000, y: 50 },
+ ],
+ expectedTooltip: {
+ delay: "100s",
+ duration: "\u221E",
+ iterationStart: "0.5 (\u221E)",
+ },
+ },
+ {
+ targetClass: "limited",
+ expectedIterationPath: [
+ { x: 0, y: 0 },
+ { x: 100000, y: 100 },
+ ],
+ expectedTooltip: {
+ duration: "100s",
+ },
+ },
+];
+
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_infinity_duration.html");
+ const { panel } = await openAnimationInspector();
+
+ for (const testData of TEST_DATA) {
+ const {
+ targetClass,
+ expectedDelayPath,
+ expectedDelaySign,
+ expectedIterationPath,
+ expectedTooltip,
+ } = testData;
+
+ const animationItemEl =
+ findAnimationItemElementsByTargetSelector(panel, `.${ targetClass }`);
+ const summaryGraphEl = animationItemEl.querySelector(".animation-summary-graph");
+
+ info(`Check tooltip for the animation of .${ targetClass }`);
+ assertTooltip(summaryGraphEl, expectedTooltip);
+
+ if (expectedDelayPath) {
+ info(`Check delay path for the animation of .${ targetClass }`);
+ assertDelayPath(summaryGraphEl, expectedDelayPath);
+ }
+
+ if (expectedDelaySign) {
+ info(`Check delay sign for the animation of .${ targetClass }`);
+ assertDelaySign(summaryGraphEl, expectedDelaySign);
+ }
+
+ info(`Check iteration path for the animation of .${ targetClass }`);
+ assertIterationPath(summaryGraphEl, expectedIterationPath);
+ }
+});
+
+function assertDelayPath(summaryGraphEl, expectedPath) {
+ assertPath(summaryGraphEl,
+ ".animation-computed-timing-path .animation-delay-path",
+ expectedPath);
+}
+
+function assertDelaySign(summaryGraphEl, expectedSign) {
+ const signEl = summaryGraphEl.querySelector(".animation-delay-sign");
+
+ is(signEl.style.marginInlineStart, expectedSign.marginInlineStart,
+ `marginInlineStart position should be ${ expectedSign.marginInlineStart }`);
+ is(signEl.style.width, expectedSign.width,
+ `Width should be ${ expectedSign.width }`);
+}
+
+function assertIterationPath(summaryGraphEl, expectedPath) {
+ assertPath(summaryGraphEl,
+ ".animation-computed-timing-path .animation-iteration-path",
+ expectedPath);
+}
+
+function assertPath(summaryGraphEl, pathSelector, expectedPath) {
+ const pathEl = summaryGraphEl.querySelector(pathSelector);
+ assertPathSegments(pathEl, true, expectedPath);
+}
+
+function assertTooltip(summaryGraphEl, expectedTooltip) {
+ const tooltip = summaryGraphEl.getAttribute("title");
+ const {
+ delay,
+ duration,
+ iterationStart,
+ } = expectedTooltip;
+
+ if (delay) {
+ const expected = `Delay: ${ delay }`;
+ ok(tooltip.includes(expected), `Tooltip should include '${ expected }'`);
+ }
+
+ if (duration) {
+ const expected = `Duration: ${ duration }`;
+ ok(tooltip.includes(expected), `Tooltip should include '${ expected }'`);
+ }
+
+ if (iterationStart) {
+ const expected = `Iteration start: ${ iterationStart }`;
+ ok(tooltip.includes(expected), `Tooltip should include '${ expected }'`);
+ }
+}
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_infinity-duration_tick-label.js
@@ -0,0 +1,27 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test of the content of tick label on timeline header
+// with the animation which has infinity duration.
+
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_infinity_duration.html");
+ const { inspector, panel } = await openAnimationInspector();
+
+ info("Check the tick label content with limited duration animation");
+ isnot(
+ panel.querySelector(".animation-list-container .tick-label:last-child").textContent,
+ "\u221E",
+ "The content should not be \u221E"
+ );
+
+ info("Check the tick label content with infinity duration animation only");
+ await selectNodeAndWaitForAnimations(".infinity", inspector);
+ is(
+ panel.querySelector(".animation-list-container .tick-label:last-child").textContent,
+ "\u221E",
+ "The content should be \u221E"
+ );
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_infinity_duration.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <style>
+ div {
+ background-color: lime;
+ height: 100px;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="infinity"></div>
+ <div class="infinity-delay-iteration-start"></div>
+ <div class="limited"></div>
+ <script>
+ "use strict";
+
+ document.querySelector(".infinity").animate(
+ { opacity: [1, 0] },
+ { duration: Infinity }
+ );
+
+ document.querySelector(".infinity-delay-iteration-start").animate(
+ { opacity: [1, 0] },
+ {
+ delay: 100000,
+ duration: Infinity,
+ iterationStart: 0.5,
+ }
+ );
+
+ document.querySelector(".limited").animate(
+ { opacity: [1, 0] },
+ {
+ duration: 100000,
+ }
+ );
+ </script>
+ </body>
+</html>