Add Node.treeRoot
[WebKit.git] / LayoutTests / fast / shadow-dom / Node-interface-treeRoot.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Shadow DOM: Extensions to Node interface</title>
5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
6 <meta name="assert" content="Node interface must have treeRoot attribute">
7 <link rel="help" href="http://w3c.github.io/webcomponents/spec/shadow/#extensions-to-node-interface">
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('treeRoot' in Node.prototype, 'treeRoot must be defined on Node.prototype');
18     assert_true('treeRoot' in document.createElement('div'), 'treeRoot must be defined on a div element');
19     assert_true('treeRoot' in document.createTextNode(''), 'assignedSlot must be defined on a text node');
20     assert_true('treeRoot' in document.createComment(''), 'assignedSlot must be defined on a comment node');
21     assert_true('treeRoot' in document.createProcessingInstruction('target', 'data'), 'assignedSlot must be defined on a processing instruction node');
22     assert_true('treeRoot' in document, 'assignedSlot must be defined on a document node');
23     assert_true('treeRoot' in document.createElement('div').attachShadow({mode: 'closed'}), 'treeRoot must be defined on a closed shadow root element');
24     assert_true('treeRoot' in document.createElement('div').attachShadow({mode: 'open'}), 'treeRoot must be defined on a open shadow root element');
25 }, 'treeRoot attribute must be defined on Node interface');
26
27 test(function () {
28     var element = document.createElement('div');
29     assert_equals(element.treeRoot, element, 'treeRoot on an element without a parent must return the element itself');
30
31     var text = document.createTextNode('');
32     assert_equals(text.treeRoot, text, 'treeRoot on a text node without a parent must return the text node itself');
33
34     var processingInstruction = document.createProcessingInstruction('target', 'data');
35     assert_equals(processingInstruction.treeRoot, processingInstruction, 'treeRoot on a processing instruction node without a parent must return the processing instruction node itself');
36
37     assert_equals(document.treeRoot, document, 'treeRoot on a document node must return the document itself');
38
39     var closedShadowRoot = document.createElement('div').attachShadow({mode: 'closed'});
40     assert_equals(closedShadowRoot.treeRoot, closedShadowRoot, 'treeRoot on a closed shadow root must return the shadow root itself');
41
42     var openShadowRoot = document.createElement('div').attachShadow({mode: 'open'});
43     assert_equals(openShadowRoot.treeRoot, openShadowRoot, 'treeRoot on a open shadow root must return the shadow root itself');
44 }, 'treeRoot attribute must return the context object when it does not have any parent');
45
46 test(function () {
47     var parent = document.createElement('div');
48
49     var element = document.createElement('div');
50     parent.appendChild(element);
51     assert_equals(element.treeRoot, parent, 'treeRoot on an element with a single ancestor must return the parent node');
52
53     var text = document.createTextNode('');
54     parent.appendChild(text);
55     assert_equals(text.treeRoot, parent, 'treeRoot on a text node with a single ancestor must return the parent node');
56
57     var processingInstruction = document.createProcessingInstruction('target', 'data');
58     parent.appendChild(processingInstruction)
59     assert_equals(processingInstruction.treeRoot, parent, 'treeRoot on a processing instruction node with a single ancestor must return the parent node');
60
61     var hostWithClosedShadowRoot = document.createElement('div');
62     parent.appendChild(hostWithClosedShadowRoot);
63     var closedShadowRoot = hostWithClosedShadowRoot.attachShadow({mode: 'closed'});
64     assert_equals(closedShadowRoot.treeRoot, closedShadowRoot, 'treeRoot on a closed shadow root with a single ancestor on its host must return the shadow root itself');
65
66     var hostWithOpenShadowRoot = document.createElement('div');
67     parent.appendChild(hostWithOpenShadowRoot);
68     var openShadowRoot = hostWithOpenShadowRoot.attachShadow({mode: 'open'});
69     assert_equals(openShadowRoot.treeRoot, openShadowRoot, 'treeRoot on a open shadow root with a single ancestor on its host must return the shadow root itself');
70 }, 'treeRoot attribute must return the parent node of the context object when the context object has a single ancestor not in a document');
71
72 test(function () {
73     var parent = document.createElement('div');
74     document.body.appendChild(parent);
75
76     var element = document.createElement('div');
77     parent.appendChild(element);
78     assert_equals(element.treeRoot, document, 'treeRoot on an element inside a document must return the document');
79
80     var text = document.createTextNode('');
81     parent.appendChild(text);
82     assert_equals(text.treeRoot, document, 'treeRoot on a text node inside a document must return the document');
83
84     var processingInstruction = document.createProcessingInstruction('target', 'data');
85     parent.appendChild(processingInstruction)
86     assert_equals(processingInstruction.treeRoot, document, 'treeRoot on a processing instruction node inside a document must return the document');
87 }, 'treeRoot attribute must return the document when a node is in document and not in a shadow tree');
88
89 function testTreeRootOnNodeInsideShadowTree(mode) {
90     test(function () {
91         var host = document.createElement('div');
92         document.body.appendChild(host);
93
94         var shadowRoot = host.attachShadow({mode: mode});
95         var parent = document.createElement('p');
96         shadowRoot.appendChild(parent);
97
98         var element = document.createElement('span');
99         parent.appendChild(element);
100         assert_equals(element.treeRoot, shadowRoot, 'treeRoot on an element inside a shadow tree must return the shadow root');
101
102         var text = document.createTextNode('');
103         parent.appendChild(text);
104         assert_equals(text.treeRoot, shadowRoot, 'treeRoot on a text node inside a shadow tree must return the shadow root');
105
106         var processingInstruction = document.createProcessingInstruction('target', 'data');
107         parent.appendChild(processingInstruction);
108         assert_equals(processingInstruction.treeRoot, shadowRoot, 'treeRoot on a processing instruction node inside a shadow tree must return the shadow root');
109     }, 'treeRoot attribute must return the ' + mode + ' shadow root of the context object when the shadow host is in a document');
110 }
111
112 testTreeRootOnNodeInsideShadowTree('open');
113 testTreeRootOnNodeInsideShadowTree('closed');
114
115 function testTreeRootOnNodeInsideNestedShadowTree(outerMode, innerMode) {
116     test(function () {
117         var outerHost = document.createElement('div');
118         document.body.appendChild(outerHost);
119         var outerShadowRoot = outerHost.attachShadow({mode: outerMode});
120
121         var innerHost = document.createElement('section');
122         outerShadowRoot.appendChild(innerHost);
123         var innerShadowRoot = innerHost.attachShadow({mode: innerMode});
124
125         var parent = document.createElement('p');
126         innerShadowRoot.appendChild(parent);
127
128         var element = document.createElement('span');
129         parent.appendChild(element);
130         assert_equals(element.treeRoot, innerShadowRoot, 'treeRoot on an element inside a shadow tree must return its root node');
131
132         var text = document.createTextNode('');
133         parent.appendChild(text);
134         assert_equals(text.treeRoot, innerShadowRoot, 'treeRoot on a text node inside a shadow tree must return its root node');
135
136         var processingInstruction = document.createProcessingInstruction('target', 'data');
137         parent.appendChild(processingInstruction);
138         assert_equals(processingInstruction.treeRoot, innerShadowRoot, 'treeRoot on a processing instruction node inside a shadow tree must return its root node');
139     }, 'treeRoot attribute must return the root node of the context object when the context object is inside a ' + innerMode
140         + ' shadow root whose shadow host is in another ' + outerMode + ' shadow root');
141 }
142
143 testTreeRootOnNodeInsideNestedShadowTree('open', 'open');
144 testTreeRootOnNodeInsideNestedShadowTree('open', 'closed');
145 testTreeRootOnNodeInsideNestedShadowTree('closed', 'open');
146 testTreeRootOnNodeInsideNestedShadowTree('closed', 'closed');
147
148 </script>
149 </body>
150 </html>