Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(15)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/dom/shadow/style-with-cat.html

Issue 183803016: Rename ^ and ^^ combinator to /shadow-all/ and /shadow-deep/. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 6 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « LayoutTests/fast/dom/shadow/shadowdom-reprojection-2.html ('k') | LayoutTests/fast/dom/shadow/style-with-cat-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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 ^^ combinator, http://crbug.com/309504.'); 36 description('Test for /shadow-deep/ combinator, http://crbug.com/309504.');
37 37
38 var sandbox = document.getElementById('sandbox'); 38 var sandbox = document.getElementById('sandbox');
39 39
40 // div ^^ span should match host/target. 40 // div /shadow-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 ^^ span { border: 1px solid green; }')) , 45 document.createTextNode('div /shadow-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 ^^ span should match host/host2/target and target2. 55 // div /shadow-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 ^^ span { border: 1px solid green; }')) , 60 document.createTextNode('div /shadow-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 ^^ span { border: 1 px solid green; }')), 77 document.createTextNode('div#sandbox > div > div /shadow-deep/ span { border: 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 ^^ span in inner scope vs div ^^ span in outer scope 90 // Testing div /shadow-deep/ span in inner scope vs div /shadow-deep/ span in ou ter 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 ^^ span { border: 1px solid green; }')) , 95 document.createTextNode('div /shadow-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 ^^ span { border: 1px solid red; }')), 100 document.createTextNode('div /shadow-deep/ span { border : 1px solid 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 ^^ span { border: 1px solid green; }')) , 113 document.createTextNode('div /shadow-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 ^^ span { border: 1px solid green; }')) , 129 document.createTextNode('div /shadow-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 ^^ span wins. 137 // Since :host's specificity is the same as *, div /shadow-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 ^^ span { border: 1px solid green ; }')), 146 document.createTextNode(':host /shadow-deep/ span { border: 1px solid green; }')),
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 ^^ span cannot match, because div cannot match any shadow host. 158 // div /shadow-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 ^^ span { border: 1px solid green; }')), 163 document.createTextNode('div /shadow-deep/ span { border: 1px so lid green; }')),
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 ^^ span, .foo is an ancestor of some shadow host which has span in its h osting shadow tree, should match. 175 // .foo /shadow-deep/ span, .foo is an ancestor of some shadow host which has sp an in its 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 ^^ span { border: 1px solid green; }')), 180 document.createTextNode('.foo /shadow-deep/ span { border: 1px s olid green; }')),
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 ^^ div should match. 196 // :host div /shadow-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 ^^ div { border: 1px solid gr een; }')), 202 document.createTextNode(':host div /shadow-deep/ div { border: 1 px solid 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 ^^ div should not match. 212 // div :host div /shadow-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 ^^ div { border: 1px soli d green; }')), 218 document.createTextNode('div :host div /shadow-deep/ div { borde r: 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 ^ :host ^^ div should not match. 228 // :host /shadow-all/ :host /shadow-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 ^ :host ^^ div { border: 1px soli d green; }')), 234 document.createTextNode(':host /shadow-all/ :host /shadow-deep/ div { border: 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 ^^ div should not match. 246 // div (=shadow host) div /shadow-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 ^^ div { border: 1px solid gr een; }')), 252 document.createTextNode('div > div /shadow-deep/ div { border: 1 px solid 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 ^^ div should match. 262 // div + div /shadow-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 ^^ div { border: 1px solid gr een; }')), 268 document.createTextNode('div + div /shadow-deep/ div { border: 1 px solid 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 ^^ div { border: 1px solid gr een; }')), 284 document.createTextNode('div + div /shadow-deep/ div { border: 1 px solid 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 ^^ div should not match. 298 // :host + div /shadow-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 ^^ div { border: 1px solid green; }')), 304 document.createTextNode(':host + div /shadow-deep/ div { border: 1px solid 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 ^^ div { border: 1px solid green; }')), 322 document.createTextNode(':host + div /shadow-deep/ div { border: 1px solid 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 ^^ span in a sibling shadow tree can match. 336 // div /shadow-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 ^^ span { border: 1px solid green; }')), 341 document.createTextNode('div /shadow-deep/ span { border: 1px so lid green; }')),
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 ^^ * should not match desendant nodes of div#host. 355 // :host /shadow-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 ^^ * { border: 1px solid red; }') ), 360 document.createTextNode(':host /shadow-deep/ * { border: 1px sol id 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 ^^ div#inner h1 { border: 1px sol id red; }')), 374 document.createTextNode('div#outer /shadow-deep/ div#inner h1 { bord er: 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 ^^ span is declared in a shadow tree, but the shadow root does not part icipate in composed tree. 385 // :host /shadow-deep/ span is declared in a shadow tree, but the shadow root do es 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 ^^ span { border: 1px solid red; }')), 391 document.createTextNode(':host /shadow-deep/ span { border: 1px solid red; }')),
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
OLDNEW
« no previous file with comments | « LayoutTests/fast/dom/shadow/shadowdom-reprojection-2.html ('k') | LayoutTests/fast/dom/shadow/style-with-cat-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698