5e99dcec5515f3866b834a9a783ab3b6cf6ba8a4
[WebKit-https.git] / LayoutTests / fast / shadow-dom / HTMLSlotElement-interface.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Shadow DOM: HTMLSlotElement interface</title>
5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
6 <meta name="assert" content="HTMLSlotElement must exist on window with name attribute and getAssignedNode() method">
7 <link rel="help" href="https://w3c.github.io/webcomponents/spec/shadow/#the-slot-element">
8 <script src="../../resources/testharness.js"></script>
9 <script src="../../resources/testharnessreport.js"></script>
10 <link rel='stylesheet' href='../../resources/testharness.css'>
11 </head>
12 <body>
13 <div id="log"></div>
14 <script>
15
16 test(function () {
17     assert_true('HTMLSlotElement' in window, 'HTMLSlotElement must be defined on window');
18     assert_equals(HTMLSlotElement.prototype.__proto__, HTMLElement.prototype, 'HTMLSlotElement should inherit from HTMLElement');
19     assert_true(document.createElement('slot') instanceof HTMLSlotElement, 'slot element should be an instance of HTMLSlotElement');
20     assert_true(document.createElement('slot') instanceof HTMLElement, 'slot element should be an instance of HTMLElement');
21 }, 'HTMLSlotElement must be defined on window');
22
23 test(function () {
24     assert_true('name' in HTMLSlotElement.prototype, '"name" attribute must be defined on HTMLSlotElement.prototype');
25
26     var slotElement = document.createElement('slot');
27     assert_equals(slotElement.name, '', '"name" attribute must return the empty string when "name" content attribute is not set');
28
29     slotElement.setAttribute('name', 'foo');
30     assert_equals(slotElement.name, 'foo', '"name" attribute must return the value of the "name" content attribute');
31
32     slotElement.name = 'bar';
33     assert_equals(slotElement.name, 'bar', '"name" attribute must return the assigned value');
34     assert_equals(slotElement.getAttribute('name'), 'bar', '"name" attribute must update the "name" content attribute');
35 }, '"name" attribute on HTMLSlotElement must reflect "name" attribute');
36
37 test(function () {
38     assert_true('getAssignedNodes' in HTMLSlotElement.prototype, '"getAssignedNodes" method must be defined on HTMLSlotElement.prototype');
39
40     var shadowHost = document.createElement('div');
41     var child = document.createElement('p');
42
43     var shadowRoot = shadowHost.attachShadow({mode: 'open'});
44     var slotElement = document.createElement('slot');
45     shadowRoot.appendChild(slotElement);
46
47     assert_array_equals(slotElement.getAssignedNodes(), [], 'getAssignedNodes must return an empty array when there are no nodes in the shadow tree');
48
49     shadowHost.appendChild(child);
50     assert_array_equals(slotElement.getAssignedNodes(), [child], 'getAssignedNodes on a default slot must return an element without slot element');
51
52     child.setAttribute('slot', 'foo');
53     assert_array_equals(slotElement.getAssignedNodes(), [], 'getAssignedNodes on a default slot must not return an element with non-empty slot attribute');
54
55     child.setAttribute('slot', '');
56     assert_array_equals(slotElement.getAssignedNodes(), [child], 'getAssignedNodes on a default slot must return an element with empty slot attribute');
57
58     slotElement.setAttribute('name', 'bar');
59     assert_array_equals(slotElement.getAssignedNodes(), [], 'getAssignedNodes on a named slot must not return an element with empty slot attribute');
60
61     slotElement.setAttribute('name', '');
62     assert_array_equals(slotElement.getAssignedNodes(), [child], 'getAssignedNodes on an empty name slot must return an element with empty slot attribute');
63
64 }, 'getAssignedNodes method on HTMLSlotElement must return the list of distributed nodes');
65
66 test(function () {
67     var shadowHost = document.createElement('div');
68     var p = document.createElement('p');
69     var b = document.createElement('b');
70     shadowHost.appendChild(p);
71     shadowHost.appendChild(b);
72
73     var shadowRoot = shadowHost.attachShadow({mode: 'open'});
74     var slotElement = document.createElement('slot');
75     shadowRoot.appendChild(slotElement);
76
77     assert_array_equals(slotElement.getAssignedNodes(), [p, b], 'getAssignedNodes must return the distributed nodes');
78
79     slotElement.name = 'foo';
80     assert_array_equals(slotElement.getAssignedNodes(), [], 'getAssignedNodes must be empty when there are no matching elements for the slot name');
81
82     b.slot = 'foo';
83     assert_array_equals(slotElement.getAssignedNodes(), [b], 'getAssignedNodes must return the nodes with the matching slot name');
84
85     p.slot = 'foo';
86     assert_array_equals(slotElement.getAssignedNodes(), [p, b], 'getAssignedNodes must return the nodes with the matching slot name in the tree order');
87
88     slotElement.removeAttribute('name');
89     assert_array_equals(slotElement.getAssignedNodes(), [], 'getAssignedNodes must be empty for a default slot when all elements have "slot" attributes specified');
90
91 }, 'getAssignedNodes must update when slot and name attributes are modified');
92
93 test(function () {
94     var shadowHost = document.createElement('div');
95     var child = document.createElement('span');
96     shadowHost.appendChild(child);
97
98     var shadowRoot = shadowHost.attachShadow({mode: 'open'});
99     var slotElement = document.createElement('slot');
100     slotElement.name = 'foo';
101     shadowRoot.appendChild(slotElement);
102
103     assert_array_equals(slotElement.getAssignedNodes(), [], 'getAssignedNodes must be empty when there are no matching elements for the slot name');
104
105     slotElement.removeAttribute('name');
106     assert_array_equals(slotElement.getAssignedNodes(), [child], 'getAssignedNodes must be empty when there are no matching elements for the slot name');
107
108 }, 'getAssignedNodes must update when a default slot is introduced dynamically by a slot rename');
109
110 test(function () {
111     var shadowHost = document.createElement('div');
112     var p = document.createElement('p');
113     var text = document.createTextNode('');
114     var comment = document.createComment('');
115     var processingInstruction = document.createProcessingInstruction('target', 'data');
116     var b = document.createElement('b');
117     shadowHost.appendChild(p);
118     shadowHost.appendChild(text);
119     shadowHost.appendChild(comment);
120     shadowHost.appendChild(processingInstruction);
121     shadowHost.appendChild(b);
122
123     var shadowRoot = shadowHost.attachShadow({mode: 'open'});
124
125     var firstSlotElement = document.createElement('slot');
126     shadowRoot.appendChild(firstSlotElement);
127
128     var secondSlotElement = document.createElement('slot');
129     shadowRoot.appendChild(secondSlotElement);
130
131     assert_array_equals(firstSlotElement.getAssignedNodes(), [p, text, b],
132         'getAssignedNodes on a default slot must return the elements without slot attributes and text nodes');
133     assert_array_equals(secondSlotElement.getAssignedNodes(), [],
134         'getAssignedNodes on the second unnamed slot element must return an empty array');
135
136     shadowRoot.removeChild(firstSlotElement);
137     assert_array_equals(firstSlotElement.getAssignedNodes(), [],
138         'getAssignedNodes on a detached formerly-default slot must return an empty array');
139     assert_array_equals(secondSlotElement.getAssignedNodes(), [p, text, b],
140         'getAssignedNodes on the second unnamed slot element after removing the first must return the elements without slot attributes and text nodes');
141
142     shadowRoot.removeChild(secondSlotElement);
143     shadowRoot.appendChild(secondSlotElement);
144     assert_array_equals(firstSlotElement.getAssignedNodes(), [],
145         'Removing and re-inserting a default slot must not change the result of getAssignedNodes on a detached slot');
146     assert_array_equals(secondSlotElement.getAssignedNodes(), [p, text, b],
147         'Removing and re-inserting a default slot must not change the result of getAssignedNodes');
148
149     shadowRoot.insertBefore(firstSlotElement, secondSlotElement);
150     assert_array_equals(firstSlotElement.getAssignedNodes(), [p, text, b],
151         'getAssignedNodes on a newly inserted unnamed slot element must return the elements without slot attributes and text nodes');
152     assert_array_equals(secondSlotElement.getAssignedNodes(), [],
153         'getAssignedNodes on formerly-first but now second unnamed slot element must return an empty array');
154
155 }, 'getAssignedNodes must update when slot elements are inserted or removed');
156
157 </script>
158 </body>
159 </html>