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
100
101
102
103
104
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
const TEST_URL = `data:text/html;charset=utf-8,
<video id="with-children" controls>
<div>some content</div>
</video>
<video id="no-children" controls></video>`;
add_task(async function () {
info("Test a <video> element with no children, showAllAnonymousContent=true");
const { inspector, markup } = await setup({ showAllAnonymousContent: true });
info("Find the #no-children element.");
const hostFront = await getNodeFront("#no-children", inspector);
const hostContainer = markup.getContainer(hostFront);
ok(
hostContainer.canExpand,
"<video controls/> has children in the markup view"
);
info("Expand the <video> element");
await expandContainer(inspector, hostContainer);
is(hostContainer.getChildContainers().length, 3, "video has 3 children");
const shadowRootContainer = hostContainer.getChildContainers()[0];
assertContainerHasText(shadowRootContainer, "#shadow-root");
});
add_task(async function () {
info("Test a <video> element with children, showAllAnonymousContent=true");
const { inspector, markup } = await setup({ showAllAnonymousContent: true });
info("Find the #with-children element.");
const hostFront = await getNodeFront("#with-children", inspector);
const hostContainer = markup.getContainer(hostFront);
ok(
hostContainer.canExpand,
"<video controls/> has children in the markup view"
);
info("Expand the <video> element");
await expandContainer(inspector, hostContainer);
is(hostContainer.getChildContainers().length, 4, "video has 4 children");
const shadowRootContainer = hostContainer.getChildContainers()[0];
assertContainerHasText(shadowRootContainer, "#shadow-root");
const divContainer = hostContainer.getChildContainers()[1];
assertContainerHasText(divContainer, "some content");
});
add_task(async function () {
info(
"Test a <video> element with no children, showAllAnonymousContent=false"
);
const { inspector, markup } = await setup({
showAllAnonymousContent: false,
});
info("Find the #no-children element.");
const hostFront = await getNodeFront("#no-children", inspector);
const hostContainer = markup.getContainer(hostFront);
ok(!hostContainer.getChildContainers(), "video has no children");
ok(
!hostContainer.canExpand,
"<video controls/> shows no children in the markup view"
);
});
add_task(async function () {
info("Test a <video> element with children, showAllAnonymousContent=false");
const { inspector, markup } = await setup({
showAllAnonymousContent: false,
});
info("Find the #with-children element.");
const hostFront = await getNodeFront("#with-children", inspector);
const hostContainer = markup.getContainer(hostFront);
ok(
hostContainer.canExpand,
"<video controls/> has children in the markup view"
);
info("Expand the <video> element");
await expandContainer(inspector, hostContainer);
is(hostContainer.getChildContainers().length, 1, "video has 1 child");
const divContainer = hostContainer.getChildContainers()[0];
assertContainerHasText(divContainer, "some content");
});
async function setup({ showAllAnonymousContent }) {
await pushPref(
"devtools.inspector.showAllAnonymousContent",
showAllAnonymousContent
);
const { inspector } = await openInspectorForURL(TEST_URL);
const { markup } = inspector;
return { inspector, markup };
}
|
