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
105
106
107
108
109
110
111
112
113
114
115
116
117
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
requestLongerTimeout(1);
// Test a few static pages using webcomponents with ::marker and ::before
// pseudos and check that they are displayed as expected in the markup view.
const TEST_DATA = [
{
// Test that ::before on an empty shadow host is displayed when the host
// has a ::marker.
title: "::before after ::marker, empty node",
url: `data:text/html;charset=utf-8,
<style>
test-component { display: list-item; }
test-component::before { content: "before-host" }
</style>
<test-component></test-component>
<script>
'use strict';
customElements.define('test-component', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: "#MODE#"});
}
});
</script>`,
tree: `
test-component
#shadow-root
::marker
::before`,
},
{
// Test ::before on a shadow host with content is displayed when the host
// has a ::marker.
title: "::before after ::marker, non-empty node",
url: `data:text/html;charset=utf-8,
<style>
test-component { display: list-item }
test-component::before { content: "before-host" }
</style>
<test-component>
<div class="light-dom"></div>
</test-component>
<script>
"use strict";
customElements.define("test-component", class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: "#MODE#"});
shadowRoot.innerHTML = "<slot>default content</slot>";
}
});
</script>`,
tree: `
test-component
#shadow-root
slot
div!slotted
default content
::marker
::before
class="light-dom"`,
},
{
// Test just ::marker on a shadow host
title: "just ::marker, no ::before",
url: `data:text/html;charset=utf-8,
<style>
test-component { display: list-item }
</style>
<test-component></test-component>
<script>
"use strict";
customElements.define("test-component", class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: "#MODE#"});
}
});
</script>`,
tree: `
test-component
#shadow-root
::marker`,
},
];
for (const { url, tree, title } of TEST_DATA) {
// Test each configuration in both open and closed modes
add_task(async function () {
info(`Testing: [${title}] in OPEN mode`);
const { inspector, tab } = await openInspectorForURL(
url.replace(/#MODE#/g, "open")
);
await assertMarkupViewAsTree(tree, "test-component", inspector);
await removeTab(tab);
});
add_task(async function () {
info(`Testing: [${title}] in CLOSED mode`);
const { inspector, tab } = await openInspectorForURL(
url.replace(/#MODE#/g, "closed")
);
await assertMarkupViewAsTree(tree, "test-component", inspector);
await removeTab(tab);
});
}
|
