Update style/layout when a slot is added or removed
[WebKit.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 getDistributedNodes() 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('getDistributedNodes' in HTMLSlotElement.prototype, '"getDistributedNodes" 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.getDistributedNodes(), [], 'getDistributedNodes must return an empty array when there are no nodes in the shadow tree');
48
49     shadowHost.appendChild(child);
50     assert_array_equals(slotElement.getDistributedNodes(), [child], 'getDistributedNodes on a default slot must return an element without slot element');
51
52     child.setAttribute('slot', 'foo');
53     assert_array_equals(slotElement.getDistributedNodes(), [], 'getDistributedNodes on a default slot must not return an element with non-empty slot attribute');
54
55     child.setAttribute('slot', '');
56     assert_array_equals(slotElement.getDistributedNodes(), [child], 'getDistributedNodes on a default slot must return an element with empty slot attribute');
57
58     slotElement.setAttribute('name', 'bar');
59     assert_array_equals(slotElement.getDistributedNodes(), [], 'getDistributedNodes on a named slot must not return an element with empty slot attribute');
60
61     slotElement.setAttribute('name', '');
62     assert_array_equals(slotElement.getDistributedNodes(), [child], 'getDistributedNodes on an empty name slot must return an element with empty slot attribute');
63
64 }, 'getDistributedNodes 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.getDistributedNodes(), [p, b], 'getDistributedNodes must return the distributed nodes');
78
79     slotElement.name = 'foo';
80     assert_array_equals(slotElement.getDistributedNodes(), [], 'getDistributedNodes must be empty when there are no matching elements for the slot name');
81
82     b.slot = 'foo';
83     assert_array_equals(slotElement.getDistributedNodes(), [b], 'getDistributedNodes must return the nodes with the matching slot name');
84
85     p.slot = 'foo';
86     assert_array_equals(slotElement.getDistributedNodes(), [p, b], 'getDistributedNodes must return the nodes with the matching slot name in the tree order');
87
88     slotElement.name = null;
89     assert_array_equals(slotElement.getDistributedNodes(), [], 'getDistributedNodes must be empty for a default slot when all elements have "slot" attributes specified');
90
91 }, 'getDistributedNodes 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.getDistributedNodes(), [], 'getDistributedNodes must be empty when there are no matching elements for the slot name');
104
105     slotElement.name = null;
106     assert_array_equals(slotElement.getDistributedNodes(), [child], 'getDistributedNodes must be empty when there are no matching elements for the slot name');
107
108 }, 'getDistributedNodes 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 b = document.createElement('b');
115     shadowHost.appendChild(p);
116     shadowHost.appendChild(text);
117     shadowHost.appendChild(b);
118
119     var shadowRoot = shadowHost.attachShadow({mode: 'open'});
120
121     var firstSlotElement = document.createElement('slot');
122     shadowRoot.appendChild(firstSlotElement);
123
124     var secondSlotElement = document.createElement('slot');
125     shadowRoot.appendChild(secondSlotElement);
126
127     assert_array_equals(firstSlotElement.getDistributedNodes(), [p, text, b],
128         'getDistributedNodes on a default slot must return the elements without slot attributes and text nodes');
129     assert_array_equals(secondSlotElement.getDistributedNodes(), [],
130         'getDistributedNodes on the second unnamed slot element must return an empty array');
131
132     shadowRoot.removeChild(firstSlotElement);
133     assert_array_equals(firstSlotElement.getDistributedNodes(), [],
134         'getDistributedNodes on a detached formerly-default slot must return an empty array');
135     assert_array_equals(secondSlotElement.getDistributedNodes(), [p, text, b],
136         'getDistributedNodes on the second unnamed slot element after removing the first must return the elements without slot attributes and text nodes');
137
138     shadowRoot.removeChild(secondSlotElement);
139     shadowRoot.appendChild(secondSlotElement);
140     assert_array_equals(firstSlotElement.getDistributedNodes(), [],
141         'Removing and re-inserting a default slot must not change the result of getDistributedNodes on a detached slot');
142     assert_array_equals(secondSlotElement.getDistributedNodes(), [p, text, b],
143         'Removing and re-inserting a default slot must not change the result of getDistributedNodes');
144
145     shadowRoot.insertBefore(firstSlotElement, secondSlotElement);
146     assert_array_equals(firstSlotElement.getDistributedNodes(), [p, text, b],
147         'getDistributedNodes on a newly inserted unnamed slot element must return the elements without slot attributes and text nodes');
148     assert_array_equals(secondSlotElement.getDistributedNodes(), [],
149         'getDistributedNodes on formerly-first but now second unnamed slot element must return an empty array');
150
151 }, 'getDistributedNodes must update when slot elements are inserted or removed');
152
153 </script>
154 </body>
155 </html>