blob: c8f6d029cbc5f89db42d41defe021a29a55c09a3 (
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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that slotted elements are correctly updated when the slot attribute is modified
// on already slotted elements.
const TEST_URL = `data:text/html;charset=utf-8,
<test-component>
<div slot="slot1">slot1-1</div>
<div slot="slot1">slot1-2</div>
<div slot="slot2" id="to-update">slot2-1</div>
<div slot="slot2">slot2-2</div>
</test-component>
<script>
'use strict';
customElements.define('test-component', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<slot name="slot1"></slot><slot name="slot2"></slot>';
}
});
</script>`;
add_task(async function () {
const { inspector } = await openInspectorForURL(TEST_URL);
const tree = `
test-component
#shadow-root
name="slot1"
div!slotted
div!slotted
name="slot2"
div!slotted
div!slotted
slot1-1
slot1-2
slot2-1
slot2-2`;
await assertMarkupViewAsTree(tree, "test-component", inspector);
info("Listening for the markupmutation event");
const mutated = inspector.once("markupmutation");
SpecialPowers.spawn(gBrowser.selectedBrowser, [], function () {
content.document.getElementById("to-update").setAttribute("slot", "slot1");
});
await mutated;
// After mutation we expect slot1 to have one more slotted node, and slot2 one less.
const mutatedTree = `
test-component
#shadow-root
name="slot1"
div!slotted
div!slotted
div!slotted
name="slot2"
div!slotted
slot1-1
slot1-2
slot2-1
slot2-2`;
await assertMarkupViewAsTree(mutatedTree, "test-component", inspector);
});
|
