Bug 1468343 - Part 4: Add test for infinity duration. r?jdescottes draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Tue, 26 Jun 2018 17:21:24 +0900
changeset 810624 216053b3b12c7e6f1556ae261d96ada16984e0df
parent 810623 c3f3389cacb36292af4b31e0149633351c5206a4
child 810737 2f2108bf24756a0b27c60facb30aed8826757b37
push id114054
push userbmo:dakatsuka@mozilla.com
push dateTue, 26 Jun 2018 08:32:31 +0000
reviewersjdescottes
bugs1468343
milestone63.0a1
Bug 1468343 - Part 4: Add test for infinity duration. r?jdescottes MozReview-Commit-ID: Jc9UefSr1To
devtools/client/inspector/animation/test/browser.ini
devtools/client/inspector/animation/test/browser_animation_infinity-duration_current-time-scrubber.js
devtools/client/inspector/animation/test/browser_animation_infinity-duration_summary-graph.js
devtools/client/inspector/animation/test/browser_animation_infinity-duration_tick-label.js
devtools/client/inspector/animation/test/doc_infinity_duration.html
--- 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>