Bug 1253494 - Part2 Add tests for endDelay representation r?pbro
[mq]: add_test_for_endDelay_in_the_animation_inspector
MozReview-Commit-ID: GVm1kpm9Vju
--- 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_simple_animation.html
doc_multiple_animation_types.html
head.js
@@ -41,16 +42,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,17 +18,22 @@ 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");
}
});
});
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>