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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the markup view is correctly displayed when a component has children but no
// slots are available under the shadow root.
const TEST_URL = `data:text/html;charset=utf-8,
<style>
.has-before::before { content: "before-content" }
</style>
<div class="root">
<no-slot-component>
<div class="not-nested">light</div>
<div class="nested">
<div class="has-before"></div>
<div>dummy for Bug 1441863</div>
</div>
</no-slot-component>
<slot-component>
<div class="not-nested">light</div>
<div class="nested">
<div class="has-before"></div>
</div>
</slot-component>
</div>
<script>
'use strict';
customElements.define('no-slot-component', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<div class="no-slot-div"></div>';
}
});
customElements.define('slot-component', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<slot></slot>';
}
});
</script>`;
add_task(async function () {
const { inspector } = await openInspectorForURL(TEST_URL);
// We expect that host children are correctly displayed when no slots are defined.
const beforeTree = `
class="root"
no-slot-component
#shadow-root
no-slot-div
class="not-nested"
class="nested"
class="has-before"
dummy for Bug 1441863
slot-component
#shadow-root
slot
div!slotted
div!slotted
class="not-nested"
class="nested"
class="has-before"
::before`;
await assertMarkupViewAsTree(beforeTree, ".root", inspector);
info(
"Move the non-slotted element with class has-before and check the pseudo appears"
);
const mutated = waitForNMutations(inspector, "childList", 3);
SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
const root = content.document.querySelector(".root");
const hasBeforeEl = content.document.querySelector(
"no-slot-component .has-before"
);
root.appendChild(hasBeforeEl);
});
await mutated;
// As the non-slotted has-before is moved into the tree, the before pseudo is expected
// to appear.
const afterTree = `
class="root"
no-slot-component
#shadow-root
no-slot-div
class="not-nested"
class="nested"
dummy for Bug 1441863
slot-component
#shadow-root
slot
div!slotted
div!slotted
class="not-nested"
class="nested"
class="has-before"
::before
class="has-before"
::before`;
await assertMarkupViewAsTree(afterTree, ".root", inspector);
});
|
