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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the animation inspector works after switching targets.
const PAGE_ON_CONTENT = `data:text/html;charset=utf-8,
<!DOCTYPE html>
<style type="text/css">
div {
opacity: 0;
transition-duration: 5000ms;
transition-property: opacity;
}
div:hover {
opacity: 1;
}
</style>
<div class="anim">animation</div>
`;
const PAGE_ON_MAIN = "about:networking";
add_task(async function () {
await pushPref("devtools.inspector.three-pane-enabled", false);
info("Open a page that runs on the content process and has animations");
const tab = await addTab(PAGE_ON_CONTENT);
const { animationInspector, inspector } = await openAnimationInspector();
info("Check the length of the initial animations of the content process");
is(
animationInspector.state.animations.length,
0,
"The length of the initial animation is correct"
);
info("Check whether the mutation on content process page is worked or not");
await assertAnimationsMutation(tab, "div", animationInspector, 1);
info("Load a page that runs on the main process");
await navigateTo(
PAGE_ON_MAIN,
tab.linkedBrowser,
animationInspector,
inspector
);
await waitUntil(() => animationInspector.state.animations.length === 0);
ok(true, "The animations are replaced");
info("Check whether the mutation on main process page is worked or not");
await assertAnimationsMutation(tab, "#category-http", animationInspector, 1);
info("Load a content process page again");
await navigateTo(
PAGE_ON_CONTENT,
tab.linkedBrowser,
animationInspector,
inspector
);
await waitUntil(() => animationInspector.state.animations.length === 0);
ok(true, "The animations are replaced again");
info("Check the mutation on content process again");
await assertAnimationsMutation(tab, "div", animationInspector, 1);
});
async function assertAnimationsMutation(
tab,
selector,
animationInspector,
expectedAnimationCount
) {
await hover(tab, selector);
await waitUntil(
() => animationInspector.state.animations.length === expectedAnimationCount
);
ok(true, "Animations mutation is worked");
}
async function navigateTo(uri, browser, animationInspector, inspector) {
const previousAnimationsFront = animationInspector.animationsFront;
const onReloaded = inspector.once("reloaded");
const onUpdated = inspector.once("inspector-updated");
BrowserTestUtils.startLoadingURIString(browser, uri);
await waitUntil(
() => previousAnimationsFront !== animationInspector.animationsFront
);
ok(true, "Target is switched correctly");
await Promise.all([onReloaded, onUpdated]);
}
async function hover(tab, selector) {
await SpecialPowers.spawn(tab.linkedBrowser, [selector], async s => {
const element = content.wrappedJSObject.document.querySelector(s);
InspectorUtils.addPseudoClassLock(element, ":hover", true);
});
}
|