4 <script src="../../../resources/js-test.js"></script>
5 <script src="../../dom/shadow/resources/shadow-dom.js"></script>
7 shouldBeDefined("window.internals");
11 function borderColorShouldBe(node, color)
13 borderColor = document.defaultView.getComputedStyle(node, null).getPropertyValue('border-color');
14 shouldBeEqualToString('borderColor', color);
19 document.getElementById('sandbox').innerHTML = '';
24 debug('test a scoped style in document is applied to a node in shadow dom subtree when apply-author-styles is true.');
25 document.getElementById('sandbox').appendChild(
27 createDOM('style', {'scoped': 'scoped'},
28 document.createTextNode('div { border: 1px solid red; }')),
29 createDOM('div', {'id': 'host'},
31 createDOM('div', {'id': 'target'})))));
34 getNodeInTreeOfTrees('host/').applyAuthorStyles = false;
35 borderColorShouldBe(getNodeInTreeOfTrees('host/target'), 'rgb(0, 0, 0)');
38 getNodeInTreeOfTrees('host/').applyAuthorStyles = true;
39 borderColorShouldBe(getNodeInTreeOfTrees('host/target'), 'rgb(255, 0, 0)');
44 function testEnclosingShadow()
46 debug('test a style in an enclosing shadow dom tree is applied to a node in shadow subtree when apply-author-styles is true.');
47 document.getElementById('sandbox').appendChild(
48 createDOM('div', {'id': 'host'},
50 createDOM('style', {},
51 document.createTextNode('div { border: 1px solid red; }')),
52 createDOM('div', {'id': 'enclosed'},
54 createDOM('div', {'id': 'target'}))))));
57 getNodeInTreeOfTrees('host/enclosed/').applyAuthorStyles = false;
58 borderColorShouldBe(getNodeInTreeOfTrees('host/enclosed/target'), 'rgb(0, 0, 0)');
61 getNodeInTreeOfTrees('host/enclosed/').applyAuthorStyles = true;
62 borderColorShouldBe(getNodeInTreeOfTrees('host/enclosed/target'), 'rgb(255, 0, 0)');
67 function testEnclosingShadowWithScoped()
69 debug('test a scoped style in an enclosing shadow dom tree is applied to a node in shadow subtree when apply-author-styles is true and the node is in the scope.');
70 document.getElementById('sandbox').appendChild(
71 createDOM('div', {'id': 'host'},
74 createDOM('style', {'scoped': 'scoped'},
75 document.createTextNode('div { border: 1px solid red; }')),
76 createDOM('div', {'id': 'outerInScope'},
78 createDOM('div', {'id': 'targetInScope'})))),
79 createDOM('div', {'id': 'outerOutOfScope'},
81 createDOM('div', {'id': 'targetOutOfScope'}))))));
85 getNodeInTreeOfTrees('host/outerInScope/').applyAuthorStyles = false;
86 getNodeInTreeOfTrees('host/outerOutOfScope/').applyAuthorStyles = false;
88 borderColorShouldBe(getNodeInTreeOfTrees('host/outerInScope/targetInScope'), 'rgb(0, 0, 0)');
89 borderColorShouldBe(getNodeInTreeOfTrees('host/outerOutOfScope/targetOutOfScope'), 'rgb(0, 0, 0)');
92 getNodeInTreeOfTrees('host/outerInScope/').applyAuthorStyles = true;
93 getNodeInTreeOfTrees('host/outerOutOfScope/').applyAuthorStyles = true;
94 borderColorShouldBe(getNodeInTreeOfTrees('host/outerInScope/targetInScope'), 'rgb(255, 0, 0)');
95 borderColorShouldBe(getNodeInTreeOfTrees('host/outerOutOfScope/targetOutOfScope'), 'rgb(0, 0, 0)');
100 function testNestedShadow()
102 debug('test styles declared in enclosing shadow trees should be applied to an enclosed shadow tree whose apply-atur-styles is true.');
103 document.getElementById('sandbox').appendChild(
105 createDOM('style', {'scoped': 'scoped'},
106 document.createTextNode('div { border: 1px solid red; }')),
107 createDOM('div', {'id': 'host'},
109 createDOM('style', {},
110 document.createTextNode('div { border: 1px solid blue; }')),
111 createDOM('div', {'id': 'outerMost'},
113 createDOM('div', {'id': 'outer'},
115 createDOM('div', {'id': 'target'})))))))));
117 getNodeInTreeOfTrees('host/').applyAuthorStyles = false;
118 getNodeInTreeOfTrees('host/outerMost/').applyAuthorStyles = false;
119 getNodeInTreeOfTrees('host/outerMost/outer/').applyAuthorStyles = false;
121 // No styles should be applied.
122 borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rgb(0, 0, 0)');
124 getNodeInTreeOfTrees('host/outerMost/outer/').applyAuthorStyles = true;
125 // A style in document should be applied.
126 borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rgb(0, 0, 255)');
128 getNodeInTreeOfTrees('host/outerMost/').applyAuthorStyles = true;
129 // Not depend on apply-author-styles flags of parent shadow trees.
130 borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rgb(0, 0, 255)');
135 function testMultipleShadow()
137 debug('test a style in document is applied to nodes in multiple shadow subtrees when apply-author-styles is true.');
138 document.getElementById('sandbox').appendChild(
139 createDOM('div', {'id': 'host'},
141 createDOM('shadow', {}),
142 createDOM('div', {'id': 'oldestShadow'})),
144 createDOM('style', {'scoped': 'scoped'},
145 document.createTextNode('div { border: 1px solid blue }')),
146 createDOM('shadow', {}),
147 createDOM('div', {'id': 'olderShadow'})),
149 createDOM('shadow', {}),
150 createDOM('div', {'id': 'target'})),
152 createDOM('style', {'scoped': 'scoped'},
153 document.createTextNode('div { border: 1px solid red; }')),
154 createDOM('div', {})));
156 getNodeInTreeOfTrees('host/').applyAuthorStyles = false;
157 getNodeInTreeOfTrees('host//').applyAuthorStyles = false;
158 getNodeInTreeOfTrees('host///').applyAuthorStyles = false;
161 borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(0, 0, 0)');
162 borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 255)');
163 borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(0, 0, 0)');
165 // document ---+--- oldestShadow
171 // apply-author-styles affects between shadow and document.
172 getNodeInTreeOfTrees('host///').applyAuthorStyles = true;
173 borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(0, 0, 0)');
174 borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 255)');
175 borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(255, 0, 0)');
177 // apply-author-styles affects between older shadow and document.
178 getNodeInTreeOfTrees('host///').applyAuthorStyles = false;
179 getNodeInTreeOfTrees('host//').applyAuthorStyles = true;
180 borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(0, 0, 0)');
181 borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 255)');
182 borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(0, 0, 0)');
184 // apply-author-styles affects between oldest shadow and document.
185 getNodeInTreeOfTrees('host//').applyAuthorStyles = false;
186 getNodeInTreeOfTrees('host/').applyAuthorStyles = true;
187 borderColorShouldBe(getNodeInTreeOfTrees('host/oldestShadow'), 'rgb(255, 0, 0)');
188 borderColorShouldBe(getNodeInTreeOfTrees('host//olderShadow'), 'rgb(0, 0, 255)');
189 borderColorShouldBe(getNodeInTreeOfTrees('host///target'), 'rgb(0, 0, 0)');
194 function testOrderOfApplyStyle()
196 debug('test a style is applied in document order.');
198 document.getElementById('sandbox').appendChild(
200 createDOM('style', {'scoped': 'scoped'},
201 document.createTextNode('div { border: 1px solid red }')),
202 createDOM('div', {'id': 'host'},
204 createDOM('style', {},
205 document.createTextNode('div { border: 1px solid blue; }')),
206 createDOM('div', {'id': 'outerMost'},
208 createDOM('style', {},
209 document.createTextNode('div { border: 1px solid green; }')),
210 createDOM('div', {'id': 'outer'},
212 createDOM('style', {},
213 document.createTextNode('div { border: 1px solid yellow; }')),
214 createDOM('div', {'id': 'target'})))))))));
216 getNodeInTreeOfTrees('host/').applyAuthorStyles = true;
217 getNodeInTreeOfTrees('host/outerMost/').applyAuthorStyles = true;
218 getNodeInTreeOfTrees('host/outerMost/outer/').applyAuthorStyles = true;
220 // The last scoped style should be applied.
221 borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rgb(255, 255, 0)');
223 getNodeInTreeOfTrees('host/outerMost/outer/').innerHTML = '<div id="target">target</div>';
224 // The outer's scoped style should be applied.
225 borderColorShouldBe(getNodeInTreeOfTrees('host/outerMost/outer/target'), 'rgb(0, 128, 0)');
230 function runTests() {
232 testEnclosingShadow();
233 testEnclosingShadowWithScoped();
235 testMultipleShadow();
236 testOrderOfApplyStyle();
240 <body onload="runTests()">
241 <div id='sandbox'></div>