OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script src="resources/shadow-dom.js"></script> | 4 <script src="resources/shadow-dom.js"></script> |
5 <script src="../../../resources/js-test.js"></script> | 5 <script src="../../../resources/js-test.js"></script> |
6 </head> | 6 </head> |
7 <body> | 7 <body> |
8 <div id='sandbox'></div> | 8 <div id='sandbox'></div> |
9 <pre id='console'></pre> | 9 <pre id='console'></pre> |
10 </body> | 10 </body> |
(...skipping 15 matching lines...) Expand all Loading... |
26 var text = 'borderColorOf(getNodeInTreeOfTrees("' + selector + '"))'; | 26 var text = 'borderColorOf(getNodeInTreeOfTrees("' + selector + '"))'; |
27 var unevaledString = '"' + color.replace(/\\/g, "\\\\").replace(/"/g, "\"")
+ '"'; | 27 var unevaledString = '"' + color.replace(/\\/g, "\\\\").replace(/"/g, "\"")
+ '"'; |
28 shouldNotBe(text, unevaledString); | 28 shouldNotBe(text, unevaledString); |
29 } | 29 } |
30 | 30 |
31 function cleanUp() | 31 function cleanUp() |
32 { | 32 { |
33 document.getElementById('sandbox').innerHTML = ''; | 33 document.getElementById('sandbox').innerHTML = ''; |
34 } | 34 } |
35 | 35 |
36 description('Test for /shadow-deep/ combinator, http://crbug.com/309504.'); | 36 description('Test for /deep/ combinator, http://crbug.com/309504.'); |
37 | 37 |
38 var sandbox = document.getElementById('sandbox'); | 38 var sandbox = document.getElementById('sandbox'); |
39 | 39 |
40 // div /shadow-deep/ span should match host/target. | 40 // div /deep/ span should match host/target. |
41 | 41 |
42 sandbox.appendChild( | 42 sandbox.appendChild( |
43 createDOM('div', {}, | 43 createDOM('div', {}, |
44 createDOM('style', {}, | 44 createDOM('style', {}, |
45 document.createTextNode('div /shadow-deep/ span { border: 1px solid
green; }')), | 45 document.createTextNode('div /deep/ span { border: 1px solid green;
}')), |
46 createDOM('div', {'id': 'host'}, | 46 createDOM('div', {'id': 'host'}, |
47 createShadowRoot( | 47 createShadowRoot( |
48 createDOM('span', {'id': 'target'}, | 48 createDOM('span', {'id': 'target'}, |
49 document.createTextNode('green border, because of hat.')))))
); | 49 document.createTextNode('green border, because of hat.')))))
); |
50 | 50 |
51 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 51 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
52 | 52 |
53 cleanUp(); | 53 cleanUp(); |
54 | 54 |
55 // div /shadow-deep/ span should match host/host2/target and target2. | 55 // div /deep/ span should match host/host2/target and target2. |
56 | 56 |
57 sandbox.appendChild( | 57 sandbox.appendChild( |
58 createDOM('div', {}, | 58 createDOM('div', {}, |
59 createDOM('style', {}, | 59 createDOM('style', {}, |
60 document.createTextNode('div /shadow-deep/ span { border: 1px solid
green; }')), | 60 document.createTextNode('div /deep/ span { border: 1px solid green;
}')), |
61 createDOM('div', {'id': 'host'}, | 61 createDOM('div', {'id': 'host'}, |
62 createShadowRoot( | 62 createShadowRoot( |
63 createDOM('div', {'id': 'host2'}, | 63 createDOM('div', {'id': 'host2'}, |
64 createShadowRoot( | 64 createShadowRoot( |
65 createDOM('span', {'id': 'target'}, | 65 createDOM('span', {'id': 'target'}, |
66 document.createTextNode('green border, because of ha
t.')))))), | 66 document.createTextNode('green border, because of ha
t.')))))), |
67 createDOM('span', {'id': 'target2'}))); | 67 createDOM('span', {'id': 'target2'}))); |
68 | 68 |
69 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)'); | 69 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)'); |
70 borderColorShouldBe('target2', 'rgb(0, 128, 0)'); | 70 borderColorShouldBe('target2', 'rgb(0, 128, 0)'); |
71 | 71 |
72 cleanUp(); | 72 cleanUp(); |
73 | 73 |
74 sandbox.appendChild( | 74 sandbox.appendChild( |
75 createDOM('div', {}, | 75 createDOM('div', {}, |
76 createDOM('style', {}, | 76 createDOM('style', {}, |
77 document.createTextNode('div#sandbox > div > div /shadow-deep/ span
{ border: 1px solid green; }')), | 77 document.createTextNode('div#sandbox > div > div /deep/ span { borde
r: 1px solid green; }')), |
78 createDOM('div', {'id': 'host'}, | 78 createDOM('div', {'id': 'host'}, |
79 createShadowRoot( | 79 createShadowRoot( |
80 createDOM('content', {}), | 80 createDOM('content', {}), |
81 createDOM('span', {'id': 'target'}, | 81 createDOM('span', {'id': 'target'}, |
82 document.createTextNode('green border, because of hat.'))), | 82 document.createTextNode('green border, because of hat.'))), |
83 createDOM('span', {'id': 'target2'})))); | 83 createDOM('span', {'id': 'target2'})))); |
84 | 84 |
85 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 85 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
86 borderColorShouldBe('target2', 'rgb(0, 128, 0)'); | 86 borderColorShouldBe('target2', 'rgb(0, 128, 0)'); |
87 | 87 |
88 cleanUp(); | 88 cleanUp(); |
89 | 89 |
90 // Testing div /shadow-deep/ span in inner scope vs div /shadow-deep/ span in ou
ter scope | 90 // Testing div /deep/ span in inner scope vs div /deep/ span in outer scope |
91 | 91 |
92 sandbox.appendChild( | 92 sandbox.appendChild( |
93 createDOM('div', {}, | 93 createDOM('div', {}, |
94 createDOM('style', {}, | 94 createDOM('style', {}, |
95 document.createTextNode('div /shadow-deep/ span { border: 1px solid
green; }')), | 95 document.createTextNode('div /deep/ span { border: 1px solid green;
}')), |
96 createDOM('div', {'id': 'host'}, | 96 createDOM('div', {'id': 'host'}, |
97 createShadowRoot( | 97 createShadowRoot( |
98 createDOM('div', {'id': 'host2'}, | 98 createDOM('div', {'id': 'host2'}, |
99 createDOM('style', {}, | 99 createDOM('style', {}, |
100 document.createTextNode('div /shadow-deep/ span { border
: 1px solid red; }')), | 100 document.createTextNode('div /deep/ span { border: 1px s
olid red; }')), |
101 createShadowRoot( | 101 createShadowRoot( |
102 createDOM('span', {'id': 'target'}, | 102 createDOM('span', {'id': 'target'}, |
103 document.createTextNode('green border, because of ha
t.')))))), | 103 document.createTextNode('green border, because of ha
t.')))))), |
104 createDOM('span', {'id': 'target2'}))); | 104 createDOM('span', {'id': 'target2'}))); |
105 | 105 |
106 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)'); | 106 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)'); |
107 | 107 |
108 cleanUp(); | 108 cleanUp(); |
109 | 109 |
110 sandbox.appendChild( | 110 sandbox.appendChild( |
111 createDOM('div', {}, | 111 createDOM('div', {}, |
112 createDOM('style', {}, | 112 createDOM('style', {}, |
113 document.createTextNode('div /shadow-deep/ span { border: 1px solid
green; }')), | 113 document.createTextNode('div /deep/ span { border: 1px solid green;
}')), |
114 createDOM('div', {'id': 'host'}, | 114 createDOM('div', {'id': 'host'}, |
115 createShadowRoot( | 115 createShadowRoot( |
116 createDOM('style', {}, | 116 createDOM('style', {}, |
117 document.createTextNode('div > span { border: 1px solid red;
}')), | 117 document.createTextNode('div > span { border: 1px solid red;
}')), |
118 createDOM('div', {}, | 118 createDOM('div', {}, |
119 createDOM('span', {'id': 'target'}, | 119 createDOM('span', {'id': 'target'}, |
120 document.createTextNode('green border, because parent ha
t wins.'))))))); | 120 document.createTextNode('green border, because parent ha
t wins.'))))))); |
121 | 121 |
122 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 122 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
123 | 123 |
124 cleanUp(); | 124 cleanUp(); |
125 | 125 |
126 sandbox.appendChild( | 126 sandbox.appendChild( |
127 createDOM('div', {}, | 127 createDOM('div', {}, |
128 createDOM('style', {}, | 128 createDOM('style', {}, |
129 document.createTextNode('div /shadow-deep/ span { border: 1px solid
green; }')), | 129 document.createTextNode('div /deep/ span { border: 1px solid green;
}')), |
130 createDOM('div', {'id': 'host'}, | 130 createDOM('div', {'id': 'host'}, |
131 createShadowRoot( | 131 createShadowRoot( |
132 createDOM('style', {}, | 132 createDOM('style', {}, |
133 document.createTextNode(':host > span { border: 1px solid re
d; }')), | 133 document.createTextNode(':host > span { border: 1px solid re
d; }')), |
134 createDOM('span', {'id': 'target'}, | 134 createDOM('span', {'id': 'target'}, |
135 document.createTextNode('red border because of specificity.'
)))))); | 135 document.createTextNode('red border because of specificity.'
)))))); |
136 | 136 |
137 // Since :host's specificity is the same as *, div /shadow-deep/ span wins. | 137 // Since :host's specificity is the same as *, div /deep/ span wins. |
138 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 138 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
139 | 139 |
140 cleanUp(); | 140 cleanUp(); |
141 | 141 |
142 sandbox.appendChild( | 142 sandbox.appendChild( |
143 createDOM('div', {'id': 'host'}, | 143 createDOM('div', {'id': 'host'}, |
144 createShadowRoot( | 144 createShadowRoot( |
145 createDOM('style', {}, | 145 createDOM('style', {}, |
146 document.createTextNode(':host /shadow-deep/ span { border: 1px
solid green; }')), | 146 document.createTextNode(':host /deep/ span { border: 1px solid g
reen; }')), |
147 createDOM('span', {}, | 147 createDOM('span', {}, |
148 document.createTextNode('some text'))), | 148 document.createTextNode('some text'))), |
149 createShadowRoot( | 149 createShadowRoot( |
150 createDOM('shadow', {}), | 150 createDOM('shadow', {}), |
151 createDOM('span', {'id': 'target'}, | 151 createDOM('span', {'id': 'target'}, |
152 document.createTextNode('green border'))))); | 152 document.createTextNode('green border'))))); |
153 | 153 |
154 borderColorShouldBe('host//target', 'rgb(0, 128, 0)'); | 154 borderColorShouldBe('host//target', 'rgb(0, 128, 0)'); |
155 | 155 |
156 cleanUp(); | 156 cleanUp(); |
157 | 157 |
158 // div /shadow-deep/ span cannot match, because div cannot match any shadow host
. | 158 // div /deep/ span cannot match, because div cannot match any shadow host. |
159 sandbox.appendChild( | 159 sandbox.appendChild( |
160 createDOM('div', {'id': 'host'}, | 160 createDOM('div', {'id': 'host'}, |
161 createShadowRoot( | 161 createShadowRoot( |
162 createDOM('style', {}, | 162 createDOM('style', {}, |
163 document.createTextNode('div /shadow-deep/ span { border: 1px so
lid green; }')), | 163 document.createTextNode('div /deep/ span { border: 1px solid gre
en; }')), |
164 createDOM('span', {}, | 164 createDOM('span', {}, |
165 document.createTextNode('some text'))), | 165 document.createTextNode('some text'))), |
166 createShadowRoot( | 166 createShadowRoot( |
167 createDOM('shadow', {}), | 167 createDOM('shadow', {}), |
168 createDOM('span', {'id': 'target'}, | 168 createDOM('span', {'id': 'target'}, |
169 document.createTextNode('no border'))))); | 169 document.createTextNode('no border'))))); |
170 | 170 |
171 borderColorShouldBe('host//target', 'rgb(0, 0, 0)'); | 171 borderColorShouldBe('host//target', 'rgb(0, 0, 0)'); |
172 | 172 |
173 cleanUp(); | 173 cleanUp(); |
174 | 174 |
175 // .foo /shadow-deep/ span, .foo is an ancestor of some shadow host which has sp
an in its hosting shadow tree, should match. | 175 // .foo /deep/ span, .foo is an ancestor of some shadow host which has span in i
ts hosting shadow tree, should match. |
176 sandbox.appendChild( | 176 sandbox.appendChild( |
177 createDOM('div', {'id': 'host'}, | 177 createDOM('div', {'id': 'host'}, |
178 createShadowRoot( | 178 createShadowRoot( |
179 createDOM('style', {}, | 179 createDOM('style', {}, |
180 document.createTextNode('.foo /shadow-deep/ span { border: 1px s
olid green; }')), | 180 document.createTextNode('.foo /deep/ span { border: 1px solid gr
een; }')), |
181 createDOM('span', {}, | 181 createDOM('span', {}, |
182 document.createTextNode('some text'))), | 182 document.createTextNode('some text'))), |
183 createShadowRoot( | 183 createShadowRoot( |
184 createDOM('shadow', {}), | 184 createDOM('shadow', {}), |
185 createDOM('div', {'class': 'foo'}, | 185 createDOM('div', {'class': 'foo'}, |
186 createDOM('div', {'id': 'host2'}, | 186 createDOM('div', {'id': 'host2'}, |
187 createShadowRoot( | 187 createShadowRoot( |
188 createDOM('span', {'id': 'target'}, | 188 createDOM('span', {'id': 'target'}, |
189 document.createTextNode('green border')))))))); | 189 document.createTextNode('green border')))))))); |
190 | 190 |
191 borderColorShouldBe('host//host2/target', 'rgb(0, 128, 0)'); | 191 borderColorShouldBe('host//host2/target', 'rgb(0, 128, 0)'); |
192 | 192 |
193 cleanUp(); | 193 cleanUp(); |
194 | 194 |
195 | 195 |
196 // :host div /shadow-deep/ div should match. | 196 // :host div /deep/ div should match. |
197 | 197 |
198 sandbox.appendChild( | 198 sandbox.appendChild( |
199 createDOM('div', {'id': 'host'}, | 199 createDOM('div', {'id': 'host'}, |
200 createShadowRoot( | 200 createShadowRoot( |
201 createDOM('style', {}, | 201 createDOM('style', {}, |
202 document.createTextNode(':host div /shadow-deep/ div { border: 1
px solid green; }')), | 202 document.createTextNode(':host div /deep/ div { border: 1px soli
d green; }')), |
203 createDOM('div', {'id': 'host2'}, | 203 createDOM('div', {'id': 'host2'}, |
204 createShadowRoot( | 204 createShadowRoot( |
205 createDOM('div', {'id': 'target'}, | 205 createDOM('div', {'id': 'target'}, |
206 document.createTextNode('green border'))))))); | 206 document.createTextNode('green border'))))))); |
207 | 207 |
208 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)'); | 208 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)'); |
209 | 209 |
210 cleanUp(); | 210 cleanUp(); |
211 | 211 |
212 // div :host div /shadow-deep/ div should not match. | 212 // div :host div /deep/ div should not match. |
213 | 213 |
214 sandbox.appendChild( | 214 sandbox.appendChild( |
215 createDOM('div', {'id': 'host'}, | 215 createDOM('div', {'id': 'host'}, |
216 createShadowRoot( | 216 createShadowRoot( |
217 createDOM('style', {}, | 217 createDOM('style', {}, |
218 document.createTextNode('div :host div /shadow-deep/ div { borde
r: 1px solid green; }')), | 218 document.createTextNode('div :host div /deep/ div { border: 1px
solid green; }')), |
219 createDOM('div', {'id': 'host2'}, | 219 createDOM('div', {'id': 'host2'}, |
220 createShadowRoot( | 220 createShadowRoot( |
221 createDOM('div', {'id': 'target'}, | 221 createDOM('div', {'id': 'target'}, |
222 document.createTextNode('green border'))))))); | 222 document.createTextNode('green border'))))))); |
223 | 223 |
224 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)'); | 224 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)'); |
225 | 225 |
226 cleanUp(); | 226 cleanUp(); |
227 | 227 |
228 // :host /shadow/ :host /shadow-deep/ div should not match. | 228 // :host /shadow/ :host /deep/ div should not match. |
229 | 229 |
230 sandbox.appendChild( | 230 sandbox.appendChild( |
231 createDOM('div', {'id': 'host'}, | 231 createDOM('div', {'id': 'host'}, |
232 createShadowRoot( | 232 createShadowRoot( |
233 createDOM('style', {}, | 233 createDOM('style', {}, |
234 document.createTextNode(':host /shadow/ :host /shadow-deep/ div
{ border: 1px solid green; }')), | 234 document.createTextNode(':host /shadow/ :host /deep/ div { borde
r: 1px solid green; }')), |
235 createDOM('div', {'id': 'host2'}, | 235 createDOM('div', {'id': 'host2'}, |
236 createShadowRoot( | 236 createShadowRoot( |
237 createDOM('div', {'id': 'host3'}, | 237 createDOM('div', {'id': 'host3'}, |
238 createShadowRoot( | 238 createShadowRoot( |
239 createDOM('div', {'id': 'target'}, | 239 createDOM('div', {'id': 'target'}, |
240 document.createTextNode('no border'))))))))); | 240 document.createTextNode('no border'))))))))); |
241 | 241 |
242 borderColorShouldBe('host/host2/host3/target', 'rgb(0, 0, 0)'); | 242 borderColorShouldBe('host/host2/host3/target', 'rgb(0, 0, 0)'); |
243 | 243 |
244 cleanUp(); | 244 cleanUp(); |
245 | 245 |
246 // div (=shadow host) div /shadow-deep/ div should not match. | 246 // div (=shadow host) div /deep/ div should not match. |
247 | 247 |
248 sandbox.appendChild( | 248 sandbox.appendChild( |
249 createDOM('div', {'id': 'host'}, | 249 createDOM('div', {'id': 'host'}, |
250 createShadowRoot( | 250 createShadowRoot( |
251 createDOM('style', {}, | 251 createDOM('style', {}, |
252 document.createTextNode('div > div /shadow-deep/ div { border: 1
px solid green; }')), | 252 document.createTextNode('div > div /deep/ div { border: 1px soli
d green; }')), |
253 createDOM('div', {'id': 'host2'}, | 253 createDOM('div', {'id': 'host2'}, |
254 createShadowRoot( | 254 createShadowRoot( |
255 createDOM('div', {'id': 'target'}, | 255 createDOM('div', {'id': 'target'}, |
256 document.createTextNode('no border'))))))); | 256 document.createTextNode('no border'))))))); |
257 | 257 |
258 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)'); | 258 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)'); |
259 | 259 |
260 cleanUp(); | 260 cleanUp(); |
261 | 261 |
262 // div + div /shadow-deep/ div should match. | 262 // div + div /deep/ div should match. |
263 | 263 |
264 sandbox.appendChild( | 264 sandbox.appendChild( |
265 createDOM('div', {'id': 'host'}, | 265 createDOM('div', {'id': 'host'}, |
266 createShadowRoot( | 266 createShadowRoot( |
267 createDOM('style', {}, | 267 createDOM('style', {}, |
268 document.createTextNode('div + div /shadow-deep/ div { border: 1
px solid green; }')), | 268 document.createTextNode('div + div /deep/ div { border: 1px soli
d green; }')), |
269 createDOM('div', {}, | 269 createDOM('div', {}, |
270 document.createTextNode('sibling')), | 270 document.createTextNode('sibling')), |
271 createDOM('div', {'id': 'host2'}, | 271 createDOM('div', {'id': 'host2'}, |
272 createShadowRoot( | 272 createShadowRoot( |
273 createDOM('div', {'id': 'target'}, | 273 createDOM('div', {'id': 'target'}, |
274 document.createTextNode('green border'))))))); | 274 document.createTextNode('green border'))))))); |
275 | 275 |
276 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)'); | 276 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)'); |
277 | 277 |
278 cleanUp(); | 278 cleanUp(); |
279 | 279 |
280 sandbox.appendChild( | 280 sandbox.appendChild( |
281 createDOM('div', {'id': 'host'}, | 281 createDOM('div', {'id': 'host'}, |
282 createShadowRoot( | 282 createShadowRoot( |
283 createDOM('style', {}, | 283 createDOM('style', {}, |
284 document.createTextNode('div + div /shadow-deep/ div { border: 1
px solid green; }')), | 284 document.createTextNode('div + div /deep/ div { border: 1px soli
d green; }')), |
285 createDOM('div', {}, | 285 createDOM('div', {}, |
286 document.createTextNode('sibling')), | 286 document.createTextNode('sibling')), |
287 createDOM('div', {'id': 'host2'}, | 287 createDOM('div', {'id': 'host2'}, |
288 createShadowRoot( | 288 createShadowRoot( |
289 createDOM('div', {'id': 'host3'}, | 289 createDOM('div', {'id': 'host3'}, |
290 createShadowRoot( | 290 createShadowRoot( |
291 createDOM('div', {'id': 'target'}, | 291 createDOM('div', {'id': 'target'}, |
292 document.createTextNode('green border'))))))))); | 292 document.createTextNode('green border'))))))))); |
293 | 293 |
294 borderColorShouldBe('host/host2/host3/target', 'rgb(0, 128, 0)'); | 294 borderColorShouldBe('host/host2/host3/target', 'rgb(0, 128, 0)'); |
295 | 295 |
296 cleanUp(); | 296 cleanUp(); |
297 | 297 |
298 // :host + div /shadow-deep/ div should not match. | 298 // :host + div /deep/ div should not match. |
299 | 299 |
300 sandbox.appendChild( | 300 sandbox.appendChild( |
301 createDOM('div', {'id': 'host'}, | 301 createDOM('div', {'id': 'host'}, |
302 createShadowRoot( | 302 createShadowRoot( |
303 createDOM('style', {}, | 303 createDOM('style', {}, |
304 document.createTextNode(':host + div /shadow-deep/ div { border:
1px solid green; }')), | 304 document.createTextNode(':host + div /deep/ div { border: 1px so
lid green; }')), |
305 createDOM('div', {'id': 'siblingShadow'}, | 305 createDOM('div', {'id': 'siblingShadow'}, |
306 createShadowRoot( | 306 createShadowRoot( |
307 createDOM('div', {}, | 307 createDOM('div', {}, |
308 document.createTextNode('sibling')))), | 308 document.createTextNode('sibling')))), |
309 createDOM('div', {'id': 'host2'}, | 309 createDOM('div', {'id': 'host2'}, |
310 createShadowRoot( | 310 createShadowRoot( |
311 createDOM('div', {'id': 'target'}, | 311 createDOM('div', {'id': 'target'}, |
312 document.createTextNode('no border'))))))); | 312 document.createTextNode('no border'))))))); |
313 | 313 |
314 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)'); | 314 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)'); |
315 | 315 |
316 cleanUp(); | 316 cleanUp(); |
317 | 317 |
318 sandbox.appendChild( | 318 sandbox.appendChild( |
319 createDOM('div', {'id': 'host'}, | 319 createDOM('div', {'id': 'host'}, |
320 createShadowRoot( | 320 createShadowRoot( |
321 createDOM('style', {}, | 321 createDOM('style', {}, |
322 document.createTextNode(':host + div /shadow-deep/ div { border:
1px solid green; }')), | 322 document.createTextNode(':host + div /deep/ div { border: 1px so
lid green; }')), |
323 createDOM('div', {}, | 323 createDOM('div', {}, |
324 document.createTextNode('sibling')), | 324 document.createTextNode('sibling')), |
325 createDOM('div', {'id': 'host2'}, | 325 createDOM('div', {'id': 'host2'}, |
326 createShadowRoot( | 326 createShadowRoot( |
327 createDOM('div', {'id': 'host3'}, | 327 createDOM('div', {'id': 'host3'}, |
328 createShadowRoot( | 328 createShadowRoot( |
329 createDOM('div', {'id': 'target'}, | 329 createDOM('div', {'id': 'target'}, |
330 document.createTextNode('no border'))))))))); | 330 document.createTextNode('no border'))))))))); |
331 | 331 |
332 borderColorShouldBe('host/host2/host3/target', 'rgb(0, 0, 0)'); | 332 borderColorShouldBe('host/host2/host3/target', 'rgb(0, 0, 0)'); |
333 | 333 |
334 cleanUp(); | 334 cleanUp(); |
335 | 335 |
336 // div /shadow-deep/ span in a sibling shadow tree can match. | 336 // div /deep/ span in a sibling shadow tree can match. |
337 sandbox.appendChild( | 337 sandbox.appendChild( |
338 createDOM('div', {'id': 'host'}, | 338 createDOM('div', {'id': 'host'}, |
339 createShadowRoot( | 339 createShadowRoot( |
340 createDOM('style', {}, | 340 createDOM('style', {}, |
341 document.createTextNode('div /shadow-deep/ span { border: 1px so
lid green; }')), | 341 document.createTextNode('div /deep/ span { border: 1px solid gre
en; }')), |
342 createDOM('span', {}, | 342 createDOM('span', {}, |
343 document.createTextNode('some text'))), | 343 document.createTextNode('some text'))), |
344 createShadowRoot( | 344 createShadowRoot( |
345 createDOM('shadow', {}), | 345 createDOM('shadow', {}), |
346 createDOM('div', {'id': 'host2'}, | 346 createDOM('div', {'id': 'host2'}, |
347 createShadowRoot( | 347 createShadowRoot( |
348 createDOM('span', {'id': 'target'}, | 348 createDOM('span', {'id': 'target'}, |
349 document.createTextNode('green border'))))))); | 349 document.createTextNode('green border'))))))); |
350 | 350 |
351 borderColorShouldBe('host//host2/target', 'rgb(0, 128, 0)'); | 351 borderColorShouldBe('host//host2/target', 'rgb(0, 128, 0)'); |
352 | 352 |
353 cleanUp(); | 353 cleanUp(); |
354 | 354 |
355 // :host /shadow-deep/ * should not match desendant nodes of div#host. | 355 // :host /deep/ * should not match desendant nodes of div#host. |
356 sandbox.appendChild( | 356 sandbox.appendChild( |
357 createDOM('div', {'id': 'host'}, | 357 createDOM('div', {'id': 'host'}, |
358 createShadowRoot( | 358 createShadowRoot( |
359 createDOM('style', {}, | 359 createDOM('style', {}, |
360 document.createTextNode(':host /shadow-deep/ * { border: 1px sol
id red; }')), | 360 document.createTextNode(':host /deep/ * { border: 1px solid red;
}')), |
361 createDOM('content', {})), | 361 createDOM('content', {})), |
362 createDOM('div', {'id': 'child'}, | 362 createDOM('div', {'id': 'child'}, |
363 document.createTextNode('show not red')))); | 363 document.createTextNode('show not red')))); |
364 | 364 |
365 borderColorShouldNotBe('child', 'rgb(255, 0, 0)'); | 365 borderColorShouldNotBe('child', 'rgb(255, 0, 0)'); |
366 | 366 |
367 cleanUp(); | 367 cleanUp(); |
368 | 368 |
369 // Test for crbug.com/331871. 'div#inner h1' should not cross TreeScope boundary
. | 369 // Test for crbug.com/331871. 'div#inner h1' should not cross TreeScope boundary
. |
370 | 370 |
371 sandbox.appendChild( | 371 sandbox.appendChild( |
372 createDOM('div', {}, | 372 createDOM('div', {}, |
373 createDOM('style', {}, | 373 createDOM('style', {}, |
374 document.createTextNode('div#outer /shadow-deep/ div#inner h1 { bord
er: 1px solid red; }')), | 374 document.createTextNode('div#outer /deep/ div#inner h1 { border: 1px
solid red; }')), |
375 createDOM('div', {'id': 'outer'}, | 375 createDOM('div', {'id': 'outer'}, |
376 createDOM('div', {'id': 'inner'}, | 376 createDOM('div', {'id': 'inner'}, |
377 createShadowRoot( | 377 createShadowRoot( |
378 createDOM('h1', {'id': 'target'}, | 378 createDOM('h1', {'id': 'target'}, |
379 document.createTextNode('no red border'))))))); | 379 document.createTextNode('no red border'))))))); |
380 | 380 |
381 borderColorShouldNotBe('inner/target', 'rgb(255, 0, 0)'); | 381 borderColorShouldNotBe('inner/target', 'rgb(255, 0, 0)'); |
382 | 382 |
383 cleanUp(); | 383 cleanUp(); |
384 | 384 |
385 // :host /shadow-deep/ span is declared in a shadow tree, but the shadow root do
es not participate in composed tree. | 385 // :host /deep/ span is declared in a shadow tree, but the shadow root does not
participate in composed tree. |
386 | 386 |
387 sandbox.appendChild( | 387 sandbox.appendChild( |
388 createDOM('div', {'id': 'host'}, | 388 createDOM('div', {'id': 'host'}, |
389 createShadowRoot( | 389 createShadowRoot( |
390 createDOM('style', {}, | 390 createDOM('style', {}, |
391 document.createTextNode(':host /shadow-deep/ span { border: 1px
solid red; }')), | 391 document.createTextNode(':host /deep/ span { border: 1px solid r
ed; }')), |
392 createDOM('span', {}, | 392 createDOM('span', {}, |
393 document.createTextNode('some text'))), | 393 document.createTextNode('some text'))), |
394 createShadowRoot( | 394 createShadowRoot( |
395 createDOM('span', {'id': 'target'}, | 395 createDOM('span', {'id': 'target'}, |
396 document.createTextNode('not red border'))))); | 396 document.createTextNode('not red border'))))); |
397 | 397 |
398 borderColorShouldNotBe('host//target', 'rgb(255, 0, 0)'); | 398 borderColorShouldNotBe('host//target', 'rgb(255, 0, 0)'); |
399 | 399 |
400 cleanUp(); | 400 cleanUp(); |
401 | 401 |
402 </script> | 402 </script> |
403 </html> | 403 </html> |
404 | 404 |
OLD | NEW |