Bug 1494847 - Part 3: Add test for negative playback rate. r=pbro

Depends on D7686

Differential Revision: https://phabricator.services.mozilla.com/D7687

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/animation/test/browser.ini

@@ -10,6 +10,7 @@ support-files =
   doc_multi_keyframes.html
   doc_multi_timings.html
   doc_mutations_fast.html
+  doc_negative_playback_rate.html
   doc_overflowed_delay_end_delay.html
   doc_pseudo.html
   doc_short_duration.html
@@ -93,3 +94,5 @@ skip-if = debug #bug 1480027
 [browser_animation_summary-graph_negative-delay-path.js]
 [browser_animation_summary-graph_negative-end-delay-path.js]
 [browser_animation_summary-graph_tooltip.js]
+[browser_animation_timing_negative-playback-rate_summary-graph.js]
+[browser_animation_timing_negative-playback-rate_current-time-scrubber.js]

devtools/client/inspector/animation/test/browser_animation_timing_negative-playback-rate_current-time-scrubber.js

@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the scrubber was working in case of negative playback rate.
+
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_negative_playback_rate.html");
+  await removeAnimatedElementsExcept([".normal"]);
+  const { animationInspector, panel } = await openAnimationInspector();
+
+  info("Set initial state");
+  await clickOnCurrentTimeScrubberController(animationInspector, panel, 0);
+  const initialCurrentTime = animationInspector.state.animations[0].state.currentTime;
+  const initialProgressBarX = getProgressBarX(panel);
+
+  info("Check whether the animation currentTime was decreased");
+  await clickOnCurrentTimeScrubberController(animationInspector, panel, 0.5);
+  ok(initialCurrentTime > animationInspector.state.animations[0].state.currentTime,
+    "currentTime should be decreased");
+
+  info("Check whether the progress bar was moved to left");
+  ok(initialProgressBarX > getProgressBarX(panel),
+    "Progress bar should be moved to left");
+});
+
+function getProgressBarX(panel) {
+  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;
+  return barX;
+}

devtools/client/inspector/animation/test/browser_animation_timing_negative-playback-rate_summary-graph.js

@@ -0,0 +1,214 @@
+/* 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 is negative playback rate.
+// * Tooltips
+// * Graph path
+// * Delay sign
+// * End delay sign
+
+const TEST_DATA = [
+  {
+    targetSelector: ".normal",
+    expectedPathList: [
+      {
+        selector: ".animation-iteration-path",
+        path: [
+          { x: 0, y: 100 },
+          { x: 50000, y: 50 },
+          { x: 100000, y: 0 },
+        ]
+      },
+    ],
+    expectedTooltip: "Playback rate: -1",
+    expectedViewboxWidth: 200000,
+  },
+  {
+    targetSelector: ".normal-playbackrate-2",
+    expectedPathList: [
+      {
+        selector: ".animation-iteration-path",
+        path: [
+          { x: 0, y: 100 },
+          { x: 50000, y: 50 },
+          { x: 100000, y: 0 },
+        ]
+      },
+    ],
+    expectedTooltip: "Playback rate: -2",
+    expectedViewboxWidth: 400000,
+  },
+  {
+    targetSelector: ".positive-delay",
+    expectedSignList: [
+      {
+        selector: ".animation-end-delay-sign",
+        sign: {
+          marginInlineStart: "75%",
+          width: "25%",
+        },
+      }
+    ],
+    expectedPathList: [
+      {
+        selector: ".animation-iteration-path",
+        path: [
+          { x: 0, y: 100 },
+          { x: 50000, y: 50 },
+          { x: 100000, y: 0 },
+        ]
+      },
+    ],
+    expectedTooltip: "Playback rate: -1",
+  },
+  {
+    targetSelector: ".negative-delay",
+    expectedSignList: [
+      {
+        selector: ".animation-end-delay-sign",
+        sign: {
+          marginInlineStart: "50%",
+          width: "25%",
+        },
+      }
+    ],
+    expectedPathList: [
+      {
+        selector: ".animation-iteration-path",
+        path: [
+          { x: 0, y: 100 },
+          { x: 50000, y: 50 },
+          { x: 50000, y: 0 },
+        ]
+      },
+      {
+        selector: ".animation-negative-delay-path path",
+        path: [
+          { x: 50000, y: 50 },
+          { x: 100000, y: 0 },
+        ]
+      },
+    ],
+    expectedTooltip: "Playback rate: -1",
+  },
+  {
+    targetSelector: ".positive-end-delay",
+    expectedSignList: [
+      {
+        selector: ".animation-delay-sign",
+        sign: {
+          isFilled: true,
+          marginInlineStart: "25%",
+          width: "25%",
+        },
+      }
+    ],
+    expectedPathList: [
+      {
+        selector: ".animation-iteration-path",
+        path: [
+          { x: 50000, y: 100 },
+          { x: 100000, y: 50 },
+          { x: 150000, y: 0 },
+        ]
+      },
+    ],
+    expectedTooltip: "Playback rate: -1",
+  },
+  {
+    targetSelector: ".negative-end-delay",
+    expectedSignList: [
+      {
+        selector: ".animation-delay-sign",
+        sign: {
+          isFilled: true,
+          marginInlineStart: "0%",
+          width: "25%",
+        },
+      }
+    ],
+    expectedPathList: [
+      {
+        selector: ".animation-iteration-path",
+        path: [
+          { x: 0, y: 50 },
+          { x: 50000, y: 0 },
+        ]
+      },
+      {
+        selector: ".animation-negative-end-delay-path path",
+        path: [
+          { x: -50000, y: 100 },
+          { x: 0, y: 0 },
+        ]
+      },
+    ],
+    expectedTooltip: "Playback rate: -1",
+  },
+];
+
+add_task(async function() {
+  await addTab(URL_ROOT + "doc_negative_playback_rate.html");
+  const { panel } = await openAnimationInspector();
+
+  for (const testData of TEST_DATA) {
+    const {
+      targetSelector,
+      expectedPathList,
+      expectedSignList,
+      expectedTooltip,
+      expectedViewboxWidth,
+    } = testData;
+
+    const animationItemEl =
+      findAnimationItemElementsByTargetSelector(panel, targetSelector);
+    const summaryGraphEl = animationItemEl.querySelector(".animation-summary-graph");
+
+    info(`Check tooltip for the animation of ${ targetSelector }`);
+    assertTooltip(summaryGraphEl, expectedTooltip);
+
+    if (expectedPathList) {
+      for (const { selector, path } of expectedPathList) {
+        info(`Check path for ${ selector }`);
+        assertPath(summaryGraphEl, selector, path);
+      }
+    }
+
+    if (expectedSignList) {
+      for (const { selector, sign } of expectedSignList) {
+        info(`Check sign for ${ selector }`);
+        assertSign(summaryGraphEl, selector, sign);
+      }
+    }
+
+    if (expectedViewboxWidth) {
+      info("Check width of viewbox of SVG");
+      const svgEl = summaryGraphEl.querySelector(".animation-summary-graph-path");
+      is(svgEl.viewBox.baseVal.width, expectedViewboxWidth,
+        `width of viewbox should be ${ expectedViewboxWidth }`);
+    }
+  }
+});
+
+function assertPath(summaryGraphEl, pathSelector, expectedPath) {
+  const pathEl = summaryGraphEl.querySelector(pathSelector);
+  assertPathSegments(pathEl, true, expectedPath);
+}
+
+function assertSign(summaryGraphEl, selector, expectedSign) {
+  const signEl = summaryGraphEl.querySelector(selector);
+
+  is(signEl.style.marginInlineStart, expectedSign.marginInlineStart,
+     `marginInlineStart position should be ${ expectedSign.marginInlineStart }`);
+  is(signEl.style.width, expectedSign.width,
+     `Width should be ${ expectedSign.width }`);
+  is(signEl.classList.contains("fill"), expectedSign.isFilled || false,
+     "signEl should be correct");
+}
+
+function assertTooltip(summaryGraphEl, expectedTooltip) {
+  const tooltip = summaryGraphEl.getAttribute("title");
+  ok(tooltip.includes(expectedTooltip), `Tooltip should include '${ expectedTooltip }'`);
+}

devtools/client/inspector/animation/test/doc_negative_playback_rate.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    div {
+      background-color: lime;
+      height: 100px;
+    }
+    </style>
+  </head>
+  <body>
+    <script>
+    "use strict";
+
+    const DURATION = 100000;
+    const KEYFRAMES = { backgroundColor: ["lime", "red"] };
+
+    function createAnimation(effect, className, playbackRate = -1) {
+      const div = document.createElement("div");
+      div.classList.add(className);
+      document.body.appendChild(div);
+      effect.duration = DURATION;
+      effect.fill = "forwards";
+      const animation = div.animate(KEYFRAMES, effect);
+      animation.updatePlaybackRate(playbackRate);
+      animation.play();
+    }
+
+    createAnimation({}, "normal");
+    createAnimation({}, "normal-playbackrate-2", -2);
+    createAnimation({ delay: 50000 }, "positive-delay");
+    createAnimation({ delay: -50000 }, "negative-delay");
+    createAnimation({ endDelay: 50000 }, "positive-end-delay");
+    createAnimation({ endDelay: -50000 }, "negative-end-delay");
+    </script>
+  </body>
+</html>