Bug 1449477: Add test for short duration. r?gl
MozReview-Commit-ID: 6ZkqS0iDqcG
--- a/devtools/client/inspector/animation/test/browser.ini
+++ b/devtools/client/inspector/animation/test/browser.ini
@@ -5,16 +5,17 @@ support-files =
current-time-scrubber_head.js
doc_custom_playback_rate.html
doc_frame_script.js
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
keyframes-graph_keyframe-marker_head.js
summary-graph_delay-sign_head.js
summary-graph_end-delay-sign_head.js
!/devtools/client/inspector/test/head.js
!/devtools/client/inspector/test/shared-head.js
!/devtools/client/shared/test/frame-script-utils.js
@@ -60,16 +61,17 @@ skip-if = (verify && !debug)
[browser_animation_logic_scroll-amount.js]
[browser_animation_pause-resume-button.js]
[browser_animation_pause-resume-button_end-time.js]
[browser_animation_pause-resume-button_respectively.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_short-duration.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_delay-sign-rtl.js]
[browser_animation_summary-graph_end-delay-sign.js]
[browser_animation_summary-graph_end-delay-sign-rtl.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_short-duration.js
@@ -0,0 +1,39 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test tooltips and iteration path of summary graph with short duration animation.
+
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_short_duration.html");
+ const { panel } = await openAnimationInspector();
+
+ const animationItemEl =
+ findAnimationItemElementsByTargetSelector(panel, ".short");
+ const summaryGraphEl = animationItemEl.querySelector(".animation-summary-graph");
+
+ info("Check tooltip");
+ assertTooltip(summaryGraphEl);
+
+ info("Check iteration path");
+ assertIterationPath(summaryGraphEl);
+});
+
+function assertTooltip(summaryGraphEl) {
+ const tooltip = summaryGraphEl.getAttribute("title");
+ const expected = "Duration: 0s";
+ ok(tooltip.includes(expected), `Tooltip should include '${ expected }'`);
+}
+
+function assertIterationPath(summaryGraphEl) {
+ const pathEl =
+ summaryGraphEl.querySelector(
+ ".animation-computed-timing-path .animation-iteration-path");
+ const expected = [
+ { x: 0, y: 0 },
+ { x: 0.999, y: 99.9 },
+ { x: 1, y: 0 },
+ ];
+ assertPathSegments(pathEl, true, expected);
+}
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_short_duration.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <style>
+ div {
+ background-color: lime;
+ height: 100px;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="short"></div>
+ <script>
+ "use strict";
+
+ document.querySelector(".short").animate(
+ { opacity: [1, 0] },
+ {
+ duration: 1,
+ iterations: Infinity,
+ }
+ );
+ </script>
+ </body>
+</html>