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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
|
<!DOCTYPE html>
<html>
<head>
<title>Shadow DOM: HTMLSlotElement interface</title>
<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
<meta name="assert" content="HTMLSlotElement must exist on window with name attribute and getAssignedNode() method">
<link rel="help" href="https://w3c.github.io/webcomponents/spec/shadow/#the-slot-element">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<script>
test(function () {
assert_true('HTMLSlotElement' in window, 'HTMLSlotElement must be defined on window');
assert_equals(Object.getPrototypeOf(HTMLSlotElement.prototype), HTMLElement.prototype, 'HTMLSlotElement should inherit from HTMLElement');
assert_true(document.createElement('slot') instanceof HTMLSlotElement, 'slot element should be an instance of HTMLSlotElement');
assert_true(document.createElement('slot') instanceof HTMLElement, 'slot element should be an instance of HTMLElement');
}, 'HTMLSlotElement must be defined on window');
test(function () {
assert_true('name' in HTMLSlotElement.prototype, '"name" attribute must be defined on HTMLSlotElement.prototype');
var slotElement = document.createElement('slot');
assert_equals(slotElement.name, '', '"name" attribute must return the empty string when "name" content attribute is not set');
slotElement.setAttribute('name', 'foo');
assert_equals(slotElement.name, 'foo', '"name" attribute must return the value of the "name" content attribute');
slotElement.name = 'bar';
assert_equals(slotElement.name, 'bar', '"name" attribute must return the assigned value');
assert_equals(slotElement.getAttribute('name'), 'bar', '"name" attribute must update the "name" content attribute');
}, '"name" attribute on HTMLSlotElement must reflect "name" attribute');
function testSlotOutsideShadowTree(options)
{
test(function () {
assert_true('assignedNodes' in HTMLSlotElement.prototype, '"assignedNodes" method must be defined on HTMLSlotElement.prototype');
var slotElement = document.createElement('slot');
assert_array_equals(slotElement.assignedNodes(options), [], 'assignedNodes() must return an empty array when the slot element is not in any tree');
document.body.appendChild(slotElement);
assert_array_equals(slotElement.assignedNodes(options), [], 'assignedNodes() must return an empty array when the slot element is in a document tree');
}, 'assignedNodes(' + (options ? JSON.stringify(options) : '')
+ ') on a HTMLSlotElement must return an empty array when the slot element is not in a tree or in a document tree');
}
testSlotOutsideShadowTree(null);
testSlotOutsideShadowTree({flattened: false});
testSlotOutsideShadowTree({flattened: true});
function testSingleLevelOfSlotting(options)
{
test(function () {
assert_true('assignedNodes' in HTMLSlotElement.prototype, '"assignedNodes" method must be defined on HTMLSlotElement.prototype');
var shadowHost = document.createElement('div');
var child = document.createElement('p');
var shadowRoot = shadowHost.attachShadow({mode: 'open'});
var slotElement = document.createElement('slot');
shadowRoot.appendChild(slotElement);
assert_array_equals(slotElement.assignedNodes(options), [], 'assignedNodes() must return an empty array when there are no nodes in the shadow tree');
shadowHost.appendChild(child);
assert_array_equals(slotElement.assignedNodes(options), [child], 'assignedNodes() on a default slot must return an element without slot element');
child.setAttribute('slot', 'foo');
assert_array_equals(slotElement.assignedNodes(options), [], 'assignedNodes() on a default slot must not return an element with non-empty slot attribute');
child.setAttribute('slot', '');
assert_array_equals(slotElement.assignedNodes(options), [child], 'assignedNodes() on a default slot must return an element with empty slot attribute');
slotElement.setAttribute('name', 'bar');
assert_array_equals(slotElement.assignedNodes(options), [], 'assignedNodes() on a named slot must not return an element with empty slot attribute');
slotElement.setAttribute('name', '');
assert_array_equals(slotElement.assignedNodes(options), [child], 'assignedNodes() on an empty name slot must return an element with empty slot attribute');
}, 'assignedNodes(' + (options ? JSON.stringify(options) : '') + ') must return the list of assigned nodes when none of the assigned nodes themselves are slots');
}
testSingleLevelOfSlotting(null);
testSingleLevelOfSlotting({flattened: false});
testSingleLevelOfSlotting({flattened: true});
function testMutatingSlottedContents(options)
{
test(function () {
var shadowHost = document.createElement('div');
var p = document.createElement('p');
var b = document.createElement('b');
shadowHost.appendChild(p);
shadowHost.appendChild(b);
var shadowRoot = shadowHost.attachShadow({mode: 'open'});
var slotElement = document.createElement('slot');
shadowRoot.appendChild(slotElement);
assert_array_equals(slotElement.assignedNodes(options), [p, b], 'assignedNodes must return the distributed nodes');
slotElement.name = 'foo';
assert_array_equals(slotElement.assignedNodes(options), [], 'assignedNodes must be empty when there are no matching elements for the slot name');
b.slot = 'foo';
assert_array_equals(slotElement.assignedNodes(options), [b], 'assignedNodes must return the nodes with the matching slot name');
p.slot = 'foo';
assert_array_equals(slotElement.assignedNodes(options), [p, b], 'assignedNodes must return the nodes with the matching slot name in the tree order');
slotElement.removeAttribute('name');
assert_array_equals(slotElement.assignedNodes(options), [], 'assignedNodes must be empty for a default slot when all elements have "slot" attributes specified');
}, 'assignedNodes(' + (options ? JSON.stringify(options) : '') + ') must update when slot and name attributes are modified');
}
testMutatingSlottedContents(null);
testMutatingSlottedContents({flattened: false});
testMutatingSlottedContents({flattened: true});
function testMutatingSlotName(options)
{
test(function () {
var shadowHost = document.createElement('div');
var child = document.createElement('span');
shadowHost.appendChild(child);
var shadowRoot = shadowHost.attachShadow({mode: 'open'});
var slotElement = document.createElement('slot');
slotElement.name = 'foo';
shadowRoot.appendChild(slotElement);
assert_array_equals(slotElement.assignedNodes(options), [], 'assignedNodes must be empty when there are no matching elements for the slot name');
slotElement.removeAttribute('name');
assert_array_equals(slotElement.assignedNodes(options), [child], 'assignedNodes must be empty when there are no matching elements for the slot name');
}, 'assignedNodes(' + (options ? JSON.stringify(options) : '') + ') must update when a default slot is introduced dynamically by a slot rename');
}
testMutatingSlotName(null);
testMutatingSlotName({flattened: false});
testMutatingSlotName({flattened: true});
function testInsertingAndRemovingSlots(options)
{
test(function () {
var shadowHost = document.createElement('div');
var p = document.createElement('p');
var text = document.createTextNode('');
var comment = document.createComment('');
var processingInstruction = document.createProcessingInstruction('target', 'data');
var b = document.createElement('b');
shadowHost.appendChild(p);
shadowHost.appendChild(text);
shadowHost.appendChild(comment);
shadowHost.appendChild(processingInstruction);
shadowHost.appendChild(b);
var shadowRoot = shadowHost.attachShadow({mode: 'open'});
var firstSlotElement = document.createElement('slot');
shadowRoot.appendChild(firstSlotElement);
var secondSlotElement = document.createElement('slot');
shadowRoot.appendChild(secondSlotElement);
assert_array_equals(firstSlotElement.assignedNodes(options), [p, text, b],
'assignedNodes on a default slot must return the elements without slot attributes and text nodes');
assert_array_equals(secondSlotElement.assignedNodes(options), [],
'assignedNodes on the second unnamed slot element must return an empty array');
shadowRoot.removeChild(firstSlotElement);
assert_array_equals(firstSlotElement.assignedNodes(options), [],
'assignedNodes on a detached formerly-default slot must return an empty array');
assert_array_equals(secondSlotElement.assignedNodes(options), [p, text, b],
'assignedNodes on the second unnamed slot element after removing the first must return the elements without slot attributes and text nodes');
shadowRoot.removeChild(secondSlotElement);
shadowRoot.appendChild(secondSlotElement);
assert_array_equals(firstSlotElement.assignedNodes(options), [],
'Removing and re-inserting a default slot must not change the result of assignedNodes on a detached slot');
assert_array_equals(secondSlotElement.assignedNodes(options), [p, text, b],
'Removing and re-inserting a default slot must not change the result of assignedNodes');
shadowRoot.insertBefore(firstSlotElement, secondSlotElement);
assert_array_equals(firstSlotElement.assignedNodes(options), [p, text, b],
'assignedNodes on a newly inserted unnamed slot element must return the elements without slot attributes and text nodes');
assert_array_equals(secondSlotElement.assignedNodes(options), [],
'assignedNodes on formerly-first but now second unnamed slot element must return an empty array');
}, 'assignedNodes(' + (options ? JSON.stringify(options) : '') + ') must update when slot elements are inserted or removed');
}
testInsertingAndRemovingSlots(null);
testInsertingAndRemovingSlots({flattened: false});
testInsertingAndRemovingSlots({flattened: true});
test(function () {
var outerHost = document.createElement('div');
var outerChild = document.createElement('span');
outerHost.appendChild(outerChild);
var outerShadow = outerHost.attachShadow({mode: 'closed'});
var innerHost = document.createElement('div');
var outerSlot = document.createElement('slot');
var innerChild = document.createElement('b');
outerShadow.appendChild(innerHost);
innerHost.appendChild(outerSlot);
innerHost.appendChild(innerChild);
var innerShadow = innerHost.attachShadow({mode: 'closed'});
var innerSlot = document.createElement('slot');
innerShadow.appendChild(innerSlot);
assert_array_equals(outerSlot.assignedNodes(), [outerChild], 'assignedNodes() on a default slot must return the assigned nodes');
assert_array_equals(outerSlot.assignedNodes({flatten: false}), [outerChild], 'assignedNodes({flatten: false}) on a default slot must return the assigned nodes');
assert_array_equals(outerSlot.assignedNodes({flatten: true}), [outerChild], 'assignedNodes({flatten: true}) on a default slot must return the assigned nodes if they are not themselves slots');
assert_array_equals(innerSlot.assignedNodes(), [outerSlot, innerChild], 'assignedNodes() on a default slot must return the assigned nodes');
assert_array_equals(innerSlot.assignedNodes({flatten: false}), [outerSlot, innerChild], 'assignedNodes({flatten: false}) on a default slot must return the assigned nodes');
assert_array_equals(innerSlot.assignedNodes({flatten: true}), [outerChild, innerChild], 'assignedNodes({flatten: true}) on a default slot must return the distributed nodes');
outerSlot.name = 'foo';
assert_array_equals(outerSlot.assignedNodes(), [], 'assignedNodes() on a named slot must return an empty array if there are no matching elements');
assert_array_equals(outerSlot.assignedNodes({flatten: false}), [], 'assignedNodes({flatten: false}) on a named slot must return an empty array if there are no matching elements');
assert_array_equals(outerSlot.assignedNodes({flatten: true}), [], 'assignedNodes({flatten: true}) on a named slot must return an empty array if there are no matching elements');
assert_array_equals(innerSlot.assignedNodes(), [outerSlot, innerChild], 'assignedNodes() on a default slot must return the assigned nodes');
assert_array_equals(innerSlot.assignedNodes({flatten: false}), [outerSlot, innerChild], 'assignedNodes({flatten: false}) on a default slot must return the assigned nodes');
assert_array_equals(innerSlot.assignedNodes({flatten: true}), [innerChild], 'assignedNodes({flatten: true}) on a default slot must return the distributed nodes');
outerChild.slot = 'foo';
assert_array_equals(outerSlot.assignedNodes(), [outerChild], 'assignedNodes() on a named slot must return matching elements');
assert_array_equals(outerSlot.assignedNodes({flatten: false}), [outerChild], 'assignedNodes({flatten: false}) on a named slot must return matching elements');
assert_array_equals(outerSlot.assignedNodes({flatten: true}), [outerChild], 'assignedNodes({flatten: true}) on a named slot must return matching elements');
assert_array_equals(innerSlot.assignedNodes(), [outerSlot, innerChild], 'assignedNodes() on a default slot must return the assigned nodes');
assert_array_equals(innerSlot.assignedNodes({flatten: false}), [outerSlot, innerChild], 'assignedNodes({flatten: false}) on a default slot must return the assigned nodes');
assert_array_equals(innerSlot.assignedNodes({flatten: true}), [outerChild, innerChild], 'assignedNodes({flatten: true}) on a default slot must return the distributed nodes');
var newInnerSlot = document.createElement('slot');
innerShadow.insertBefore(newInnerSlot, innerSlot);
assert_array_equals(newInnerSlot.assignedNodes(), [outerSlot, innerChild], 'assignedNodes() on a default slot must return the assigned nodes');
assert_array_equals(newInnerSlot.assignedNodes({flatten: false}), [outerSlot, innerChild], 'assignedNodes({flatten: false}) on a default slot must return the assigned nodes');
assert_array_equals(newInnerSlot.assignedNodes({flatten: true}), [outerChild, innerChild], 'assignedNodes({flatten: true}) on a default slot must return the distributed nodes');
assert_array_equals(innerSlot.assignedNodes(), [], 'assignedNodes() on a nameless slot element which appears after a default slot must return an empty array');
assert_array_equals(innerSlot.assignedNodes({flatten: false}), [], 'assignedNodes({flatten: false}) on a nameless slot element which appears after a default slot must return an empty array');
assert_array_equals(innerSlot.assignedNodes({flatten: true}), [], 'assignedNodes({flatten: true}) on a nameless slot element which appears after a default slot must return an empty array');
innerShadow.removeChild(newInnerSlot);
assert_array_equals(newInnerSlot.assignedNodes(), [], 'assignedNodes() must return an empty array when the slot element is not in any tree');
assert_array_equals(newInnerSlot.assignedNodes({flatten: false}), [], 'assignedNodes({flatten: false}) must return an empty array when the slot element is not in any tree');
assert_array_equals(newInnerSlot.assignedNodes({flatten: true}), [], 'assignedNodes({flatten: true}) must return an empty array when the slot element is not in any tree');
assert_array_equals(innerSlot.assignedNodes(), [outerSlot, innerChild], 'assignedNodes() on a default slot must return the assigned nodes');
assert_array_equals(innerSlot.assignedNodes({flatten: false}), [outerSlot, innerChild], 'assignedNodes({flatten: false}) on a default slot must return the assigned nodes');
assert_array_equals(innerSlot.assignedNodes({flatten: true}), [outerChild, innerChild], 'assignedNodes({flatten: true}) on a default slot must return the distributed nodes');
}, 'assignedNodes({flatten: true}) must return the distributed nodes, and assignedNodes() and assignedNodes({flatten: false}) must returned the assigned nodes');
</script>
</body>
</html>
|
