blob: 1970884623815945a59397ac280bd5b1ce937d94 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that animation inspector does not fail when rendering an animation that
// transitions from the playState "idle".
const PAGE_URL = `data:text/html;charset=utf-8,
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
opacity: 0;
transition-duration: 5000ms;
transition-property: opacity;
}
div.visible {
opacity: 1;
}
</style>
</head>
<body>
<div>test</div>
</body>
</html>`;
add_task(async function () {
const tab = await addTab(PAGE_URL);
const { animationInspector, panel } = await openAnimationInspector();
info("Toggle the visible class to start the animation");
await toggleVisibleClass(tab);
info("Wait until the scrubber is displayed");
await waitUntil(() => panel.querySelector(".current-time-scrubber"));
const scrubberEl = panel.querySelector(".current-time-scrubber");
info("Wait until animations are paused");
await waitUntilAnimationsPaused(animationInspector);
// Check the initial position of the scrubber to detect the animation.
const scrubberX = scrubberEl.getBoundingClientRect().x;
info("Toggle the visible class to start the animation");
await toggleVisibleClass(tab);
info("Wait until the scrubber starts moving");
await waitUntil(() => scrubberEl.getBoundingClientRect().x != scrubberX);
info("Wait until animations are paused");
await waitUntilAnimationsPaused(animationInspector);
// Query the scrubber element again to check that the UI is still rendered.
ok(
!!panel.querySelector(".current-time-scrubber"),
"The scrubber element is still rendered in the animation inspector panel"
);
});
/**
* Local helper to toggle the "visible" class on the element with a transition defined.
*/
async function toggleVisibleClass(tab) {
await SpecialPowers.spawn(tab.linkedBrowser, [], async function () {
const win = content.wrappedJSObject;
win.document.querySelector("div").classList.toggle("visible");
});
}
async function waitUntilAnimationsPaused(animationInspector) {
await waitUntil(() => {
const animations = animationInspector.state.animations;
return animations.every(animation => {
const state = animation.state.playState;
return state === "paused" || state === "finished";
});
});
}
|
