Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-21 17:25:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1253494 part 2 - Add tests for endDelay representation r=pbro

Browse Source 
MozReview-Commit-ID: GVm1kpm9Vju

--HG--
extra : rebase_source : 6ea1809790f941c4937d607191f93d9bc781a074
This commit is contained in:
Ryo Motozawa 2016-03-23 10:43:50 +09:00
parent 30f6b9f115
commit 4ce6bfc757
5 changed files with 124 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
devtools/client/animationinspector/test/browser.ini
View File

@ -4,6 +4,7 @@ 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
@ -48,6 +49,7 @@ skip-if = os == "linux" && bits == 32 # Bug 1220974
[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]

44
devtools/client/animationinspector/test/browser_animation_timeline_shows_endDelay.js Normal file
View File

@ -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");
}

7
devtools/client/animationinspector/test/browser_animation_timeline_shows_time_info.js
View File

@ -23,8 +23,13 @@ add_task(function*() {
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 {

60
devtools/client/animationinspector/test/doc_end_delay.html Normal file
View File

@ -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>

12
devtools/client/animationinspector/test/doc_simple_animation.html
View File

@ -128,5 +128,17 @@
<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>