Bug 1315598 - Part 2: Add test for short duration animation. r=pbro
authorDaisuke Akatsuka <daisuke@mozilla-japan.org>
Mon, 28 Nov 2016 11:26:23 +0900
changeset 324899 dc202d732d647ef6cf4cf204aa60aa0be641d077
parent 324898 eef68eeb10c627989f5a16624a9abd147db33271
child 324900 e972bb041a4e91742496a48672cf63721d3700ee
push id24
push usermaklebus@msu.edu
push dateTue, 20 Dec 2016 03:11:33 +0000
reviewerspbro
bugs1315598
milestone53.0a1
Bug 1315598 - Part 2: Add test for short duration animation. r=pbro MozReview-Commit-ID: IGyhXoPKehI
devtools/client/animationinspector/test/browser.ini
devtools/client/animationinspector/test/browser_animation_timeline_short_duration.js
devtools/client/animationinspector/test/doc_short_duration_animation.html
--- a/devtools/client/animationinspector/test/browser.ini
+++ b/devtools/client/animationinspector/test/browser.ini
@@ -5,16 +5,17 @@ support-files =
   doc_body_animation.html
   doc_end_delay.html
   doc_frame_script.js
   doc_keyframes.html
   doc_modify_playbackRate.html
   doc_negative_animation.html
   doc_pseudo_elements.html
   doc_script_animation.html
+  doc_short_duration_animation.html
   doc_simple_animation.html
   doc_multiple_animation_types.html
   doc_timing_combination_animation.html
   head.js
   !/devtools/client/commandline/test/helpers.js
   !/devtools/client/framework/test/shared-head.js
   !/devtools/client/inspector/test/head.js
   !/devtools/client/inspector/test/shared-head.js
@@ -53,16 +54,17 @@ skip-if = os == "linux" && !debug # Bug 
 [browser_animation_timeline_pause_button_02.js]
 [browser_animation_timeline_pause_button_03.js]
 [browser_animation_timeline_rate_selector.js]
 [browser_animation_timeline_rewind_button.js]
 [browser_animation_timeline_scrubber_exists.js]
 [browser_animation_timeline_scrubber_movable.js]
 [browser_animation_timeline_scrubber_moves.js]
 [browser_animation_timeline_setCurrentTime.js]
+[browser_animation_timeline_short_duration.js]
 [browser_animation_timeline_shows_delay.js]
 [browser_animation_timeline_shows_endDelay.js]
 [browser_animation_timeline_shows_iterations.js]
 [browser_animation_timeline_shows_name_label.js]
 [browser_animation_timeline_shows_time_info.js]
 [browser_animation_timeline_takes_rate_into_account.js]
 [browser_animation_timeline_ui.js]
 [browser_animation_toggle_button_resets_on_navigate.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_short_duration.js
@@ -0,0 +1,97 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+requestLongerTimeout(2);
+
+// Test short duration (e.g. 1ms) animation.
+
+add_task(function* () {
+  yield addTab(URL_ROOT + "doc_short_duration_animation.html");
+  const { panel, inspector } = yield openAnimationInspector();
+
+  const timelineComponent = panel.animationsTimelineComponent;
+
+  info("Check the listed time blocks");
+  for (let i = 0; i < timelineComponent.timeBlocks.length; i++) {
+    info(`Check the time block ${i}`);
+    const {containerEl, animation: {state}} = timelineComponent.timeBlocks[i];
+    checkSummaryGraph(containerEl, state);
+  }
+
+  info("Check the time block one by one");
+  info("Check #onetime");
+  yield selectNodeAndWaitForAnimations("#onetime", inspector);
+  let timeBlock = timelineComponent.timeBlocks[0];
+  let containerEl = timeBlock.containerEl;
+  let state = timeBlock.animation.state;
+  checkSummaryGraph(containerEl, state, true);
+
+  info("Check #infinite");
+  yield selectNodeAndWaitForAnimations("#infinite", inspector);
+  timeBlock = timelineComponent.timeBlocks[0];
+  containerEl = timeBlock.containerEl;
+  state = timeBlock.animation.state;
+  checkSummaryGraph(containerEl, state, true);
+});
+
+function checkSummaryGraph(el, state, isDetail) {
+  info("Check the coordinates of summary graph");
+  const pathEls = el.querySelectorAll(".iteration-path");
+  let expectedIterationCount = 0;
+  if (isDetail) {
+    expectedIterationCount = state.iterationCount ? state.iterationCount : 1;
+  } else {
+    expectedIterationCount = state.iterationCount ? state.iterationCount : 2;
+  }
+  is(pathEls.length, expectedIterationCount,
+     `The count of path shoud be ${ expectedIterationCount }`);
+  pathEls.forEach((pathEl, index) => {
+    const startX = index * state.duration;
+    const endX = startX + state.duration;
+
+    const pathSegList = pathEl.pathSegList;
+    const firstPathSeg = pathSegList.getItem(0);
+    is(firstPathSeg.x, startX,
+       `The x of first segment should be ${ startX }`);
+    is(firstPathSeg.y, 0, "The y of first segment should be 0");
+
+    // The easing of test animation is 'linear'.
+    // Therefore, the y of second path segment will be 0.
+    const secondPathSeg = pathSegList.getItem(1);
+    is(secondPathSeg.x, startX,
+       `The x of second segment should be ${ startX }`);
+    is(secondPathSeg.y, 0, "The y of second segment should be 0");
+
+    const thirdLastPathSeg = pathSegList.getItem(pathSegList.numberOfItems - 4);
+    approximate(thirdLastPathSeg.x, endX - 0.001, 0.005,
+                `The x of third last segment should be approximately ${ endX - 0.001 }`);
+    approximate(thirdLastPathSeg.y, 0.999, 0.005,
+                " The y of third last segment should be approximately "
+                + thirdLastPathSeg.x);
+
+    // The test animation is not 'forwards' fill-mode.
+    // Therefore, the y of second last path segment will be 0.
+    const secondLastPathSeg =
+      pathSegList.getItem(pathSegList.numberOfItems - 3);
+    is(secondLastPathSeg.x, endX,
+       `The x of second last segment should be ${ endX }`);
+    is(secondLastPathSeg.y, 0, "The y of second last segment should be 0");
+
+    const lastPathSeg = pathSegList.getItem(pathSegList.numberOfItems - 2);
+    is(lastPathSeg.x, endX, `The x of last segment should be ${ endX }`);
+    is(lastPathSeg.y, 0, "The y of last segment should be 0");
+
+    const closePathSeg = pathSegList.getItem(pathSegList.numberOfItems - 1);
+    is(closePathSeg.pathSegType, closePathSeg.PATHSEG_CLOSEPATH,
+       `The actual last segment should be close path`);
+  });
+}
+
+function approximate(value, expected, permissibleRange, message) {
+  const min = expected - permissibleRange;
+  const max = expected + permissibleRange;
+  ok(min <= value && value <= max, message);
+}
new file mode 100644
--- /dev/null
+++ b/devtools/client/animationinspector/test/doc_short_duration_animation.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style>
+    div {
+      display: inline-block;
+      width: 100px;
+      height: 100px;
+      background-color: lime;
+    }
+    </style>
+  </head>
+  <body>
+    <div id="onetime"></div>
+    <div id="twotimes"></div>
+    <div id="infinite"></div>
+    <script>
+    "use strict";
+    let target = document.querySelector("#onetime");
+    target.animate({ opacity: [0, 1] },
+                   { duration: 1, iterations: 1 }).pause();
+    target = document.querySelector("#twotimes");
+    target.animate({ opacity: [0, 1] },
+                   { duration: 1, iterations: 2 }).pause();
+    target = document.querySelector("#infinite");
+    target.animate({ opacity: [0, 1] },
+                   { duration: 1, iterations: Infinity }).pause();
+    </script>
+  </body>
+</html>