Source/WebCore:
[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 p = document.createElement('p');
96     var text = document.createTextNode('');
97     var b = document.createElement('b');
98     shadowHost.appendChild(p);
99     shadowHost.appendChild(text);
100     shadowHost.appendChild(b);
101
102     var shadowRoot = shadowHost.attachShadow({mode: 'open'});
103
104     var firstSlotElement = document.createElement('slot');
105     shadowRoot.appendChild(firstSlotElement);
106
107     var secondSlotElement = document.createElement('slot');
108     shadowRoot.appendChild(secondSlotElement);
109
110     assert_array_equals(firstSlotElement.getDistributedNodes(), [p, text, b],
111         'getDistributedNodes on a default slot must return the elements without slot attributes and text nodes');
112     assert_array_equals(secondSlotElement.getDistributedNodes(), [],
113         'getDistributedNodes on the second unnamed slot element must return an empty array');
114
115     shadowRoot.removeChild(firstSlotElement);
116     assert_array_equals(firstSlotElement.getDistributedNodes(), [],
117         'getDistributedNodes on a detached formerly-default slot must return an empty array');
118     assert_array_equals(secondSlotElement.getDistributedNodes(), [p, text, b],
119         'getDistributedNodes on the second unnamed slot element after removing the first must return the elements without slot attributes and text nodes');
120
121     shadowRoot.removeChild(secondSlotElement);
122     shadowRoot.appendChild(secondSlotElement);
123     assert_array_equals(firstSlotElement.getDistributedNodes(), [],
124         'Removing and re-inserting a default slot must not change the result of getDistributedNodes on a detached slot');
125     assert_array_equals(secondSlotElement.getDistributedNodes(), [p, text, b],
126         'Removing and re-inserting a default slot must not change the result of getDistributedNodes');
127
128     shadowRoot.insertBefore(firstSlotElement, secondSlotElement);
129     assert_array_equals(firstSlotElement.getDistributedNodes(), [p, text, b],
130         'getDistributedNodes on a newly inserted unnamed slot element must return the elements without slot attributes and text nodes');
131     assert_array_equals(secondSlotElement.getDistributedNodes(), [],
132         'getDistributedNodes on formerly-first but now second unnamed slot element must return an empty array');
133
134 }, 'getDistributedNodes must update when slot elements are inserted or removed');
135
136 </script>
137 </body>
138 </html>