Bug 1253494 part 2 - Add tests for endDelay representation r=pbro
authorRyo Motozawa <motozawa@mozilla-japan.org>
Wed, 23 Mar 2016 10:43:50 +0900
changeset 290553 214a78b9334d7bb05ecc9e26d8ed1190318418b2
parent 290552 170088059bf79fd3f43eb3ec77b062f6e6ba9e99
child 290554 880f8af31133bd65dde834e9472a66189335a79e
push id19656
push usergwagner@mozilla.com
push dateMon, 04 Apr 2016 13:43:23 +0000
treeherderb2g-inbound@e99061fde28a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1253494
milestone48.0a1
Bug 1253494 part 2 - Add tests for endDelay representation r=pbro MozReview-Commit-ID: GVm1kpm9Vju
devtools/client/animationinspector/test/browser.ini
devtools/client/animationinspector/test/browser_animation_timeline_shows_endDelay.js
devtools/client/animationinspector/test/browser_animation_timeline_shows_time_info.js
devtools/client/animationinspector/test/doc_end_delay.html
devtools/client/animationinspector/test/doc_simple_animation.html
--- a/devtools/client/animationinspector/test/browser.ini
+++ b/devtools/client/animationinspector/test/browser.ini
@@ -1,14 +1,15 @@
 [DEFAULT]
 tags = devtools
 subsuite = devtools
 skip-if = e10s && debug # bug 1252283
 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_script_animation.html
   doc_simple_animation.html
   doc_multiple_animation_types.html
   head.js
@@ -43,16 +44,17 @@ skip-if = os == "linux" && !debug # Bug 
 [browser_animation_timeline_pause_button.js]
 skip-if = os == "linux" && bits == 32 # Bug 1220974
 [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_shows_delay.js]
+[browser_animation_timeline_shows_endDelay.js]
 [browser_animation_timeline_shows_iterations.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]
 [browser_animation_toggle_button_toggles_animations.js]
 [browser_animation_toolbar_exists.js]
 [browser_animation_ui_updates_when_animation_data_changes.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_shows_endDelay.js
@@ -0,0 +1,44 @@
+/* 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);
+
+// Check that animation endDelay is visualized in the timeline when the
+// animation is delayed.
+// Also check that negative endDelays do not overflow the UI, and are shown
+// like positive endDelays.
+
+add_task(function*() {
+  yield addTab(URL_ROOT + "doc_end_delay.html");
+  let {inspector, panel} = yield openAnimationInspector();
+
+  let selectors = ["#target1", "#target2", "#target3", "#target4"];
+  for (let i = 0; i < selectors.length; i++) {
+    let selector = selectors[i];
+    yield selectNode(selector, inspector);
+    let timelineEl = panel.animationsTimelineComponent.rootWrapperEl;
+    let animationEl = timelineEl.querySelectorAll(".animation")[0];
+    checkEndDelayAndName(animationEl);
+  }
+});
+
+function checkEndDelayAndName(animationEl) {
+  let endDelay = animationEl.querySelector(".end-delay");
+  let name = animationEl.querySelector(".name");
+  let targetNode = animationEl.querySelector(".target");
+
+  // Check that the endDelay element does not cause the timeline to overflow.
+  let endDelayLeft = Math.round(endDelay.getBoundingClientRect().x);
+  let sidebarWidth = Math.round(targetNode.getBoundingClientRect().width);
+  ok(endDelayLeft >= sidebarWidth,
+     "The endDelay element isn't displayed over the sidebar");
+
+  // Check that the endDelay is not displayed on top of the name.
+  let endDelayRight = Math.round(endDelay.getBoundingClientRect().right);
+  let nameLeft = Math.round(name.getBoundingClientRect().left);
+  ok(endDelayRight >= nameLeft,
+     "The endDelay element does not span over the name element");
+}
--- a/devtools/client/animationinspector/test/browser_animation_timeline_shows_time_info.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_shows_time_info.js
@@ -18,18 +18,23 @@ add_task(function*() {
   let timeBlockNameEls = timelineEl.querySelectorAll(".time-block .name");
 
   // Verify that each time-block's name element has a tooltip that looks sort of
   // ok. We don't need to test the actual content.
   [...timeBlockNameEls].forEach((el, i) => {
     ok(el.hasAttribute("title"), "The tooltip is defined for animation " + i);
 
     let title = el.getAttribute("title");
-    ok(title.match(/Delay: [\d.-]+s/), "The tooltip shows the delay");
+    if (controller.animationPlayers[i].state.delay) {
+      ok(title.match(/Delay: [\d.-]+s/), "The tooltip shows the delay");
+    }
     ok(title.match(/Duration: [\d.]+s/), "The tooltip shows the duration");
+    if (controller.animationPlayers[i].state.endDelay) {
+      ok(title.match(/End delay: [\d.-]+s/), "The tooltip shows the endDelay");
+    }
     if (controller.animationPlayers[i].state.iterationCount !== 1) {
       ok(title.match(/Repeats: /), "The tooltip shows the iterations");
     } else {
       ok(!title.match(/Repeats: /), "The tooltip doesn't show the iterations");
     }
     ok(!title.match(/Iteration start:/),
       "The tooltip doesn't show the iteration start");
   });
new file mode 100644
--- /dev/null
+++ b/devtools/client/animationinspector/test/doc_end_delay.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <style>
+  .target {
+    width: 50px;
+    height: 50px;
+    background: blue;
+  }
+  </style>
+</head>
+<body>
+  <div id="target1" class="target"></div>
+  <div id="target2" class="target"></div>
+  <div id="target3" class="target"></div>
+  <div id="target4" class="target"></div>
+  <script>
+    "use strict";
+
+    var el = document.getElementById("target1");
+    el.animate(
+      { opacity: [ 0, 1 ] },
+      { id: "endDelay_animation1",
+        duration: 1000000,
+        endDelay: 500000,
+        fill: "none" }
+    );
+
+    el = document.getElementById("target2");
+    el.animate(
+      { opacity: [ 0, 1 ] },
+      { id: "endDelay_animation2",
+        duration: 1000000,
+        endDelay: -500000,
+        fill: "none" }
+    );
+
+    el = document.getElementById("target3");
+    el.animate(
+      { opacity: [ 0, 1 ] },
+      { id: "endDelay_animation3",
+        duration: 1000000,
+        endDelay: -1500000,
+        fill: "forwards" }
+    );
+
+    el = document.getElementById("target4");
+    el.animate(
+      { opacity: [ 0, 1 ] },
+      { id: "endDelay_animation4",
+        duration: 100000,
+        delay: 100000,
+        endDelay: -1500000,
+        fill: "forwards" }
+    );
+
+  </script>
+</body>
+</html>
--- a/devtools/client/animationinspector/test/doc_simple_animation.html
+++ b/devtools/client/animationinspector/test/doc_simple_animation.html
@@ -123,10 +123,22 @@
   <div class="ball multi"></div>
   <div class="ball delayed"></div>
   <div class="ball multi-finite"></div>
   <div class="ball short"></div>
   <div class="ball long"></div>
   <div class="ball negative-delay"></div>
   <div class="ball no-compositor"></div>
   <div class="ball pseudo"></div>
+  <div class="ball" id="endDelayed"></div>
+  <script>
+    "use strict";
+
+    var el = document.getElementById("endDelayed");
+    el.animate(
+      { opacity: [ 0, 1 ] },
+      { duration: 1000000,
+        endDelay: 500000,
+        fill: "none" }
+    );
+  </script>
 </body>
 </html>