Bug 1494847 - Part 3: Add test for negative playback rate. r=pbro
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Fri, 12 Oct 2018 07:01:40 +0000
changeset 499428 4cb3f0e44e9ff613ab7c79518a64428ac91b1a0c
parent 499427 3d151cbf0921c253e980f94a68535c199babb042
child 499429 0dfb3afc73572ea842e1fbf6ee08644e5570d79d
push id1864
push userffxbld-merge
push dateMon, 03 Dec 2018 15:51:40 +0000
treeherdermozilla-release@f040763d99ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1494847
milestone64.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1494847 - Part 3: Add test for negative playback rate. r=pbro Depends on D7686 Differential Revision: https://phabricator.services.mozilla.com/D7687
devtools/client/inspector/animation/test/browser.ini
devtools/client/inspector/animation/test/browser_animation_timing_negative-playback-rate_current-time-scrubber.js
devtools/client/inspector/animation/test/browser_animation_timing_negative-playback-rate_summary-graph.js
devtools/client/inspector/animation/test/doc_negative_playback_rate.html
--- 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_infinity_duration.html
   doc_multi_easings.html
   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
   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
@@ -88,8 +89,10 @@ skip-if = debug #bug 1480027
 [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]
 [browser_animation_summary-graph_effect-timing-path.js]
 [browser_animation_summary-graph_layout-by-seek.js]
 [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]
new file mode 100644
--- /dev/null
+++ b/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;
+}
new file mode 100644
--- /dev/null
+++ b/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 }'`);
+}
new file mode 100644
--- /dev/null
+++ b/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>