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

Side by Side Diff: LayoutTests/fast/dom/shadow/ancestor-pseudo-class.html

Issue 138023007: Renamed :host to :ancestor and made :host to match only shadow host. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 6 years, 11 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
OLDNEW
1 <!doctype html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <script src="../../../resources/js-test.js"></script> 4 <script src="../../../resources/js-test.js"></script>
5 <script src="resources/shadow-dom.js"></script> 5 <script src="resources/shadow-dom.js"></script>
6 <style> 6 <style>
7 :host { 7 :ancestor {
8 background-color: red; 8 background-color: red;
9 } 9 }
10 </style> 10 </style>
11 </head> 11 </head>
12 <body class='mytheme'> 12 <body class='mytheme'>
13 <div> 13 <div>
14 <div id='sandbox'></div> 14 <div id='sandbox'></div>
15 </div> 15 </div>
16 <pre id='console'></pre> 16 <pre id='console'></pre>
17 <script> 17 <script>
18 description('Test whether :host matches a shadow host correctly.'); 18 description('Test whether :ancestor matches a shadow host correctly.');
19 19
20 var sandbox = document.getElementById('sandbox'); 20 var sandbox = document.getElementById('sandbox');
21 21
22 function backgroundColorOf(selector) { 22 function backgroundColorOf(selector) {
23 return window.getComputedStyle(getNodeInTreeOfTrees(selector)).backgroundCol or; 23 return window.getComputedStyle(getNodeInTreeOfTrees(selector)).backgroundCol or;
24 } 24 }
25 25
26 function backgroundColorShouldBe(selector, expected) { 26 function backgroundColorShouldBe(selector, expected) {
27 shouldBeEqualToString('backgroundColorOf(\'' + selector + '\')', expected); 27 shouldBeEqualToString('backgroundColorOf(\'' + selector + '\')', expected);
28 } 28 }
29 29
30 function cleanUp() { 30 function cleanUp() {
31 sandbox.innerHTML = ''; 31 sandbox.innerHTML = '';
32 } 32 }
33 33
34 debug(':host out of shadow tree should not match any shadow hosts.'); 34 debug(':ancestor out of shadow tree should not match any shadow hosts.');
35 35
36 sandbox.appendChild( 36 sandbox.appendChild(
37 createDOM('div', {'id': 'host'}, 37 createDOM('div', {'id': 'host'},
38 createShadowRoot( 38 createShadowRoot(
39 createDOM('div', {}, 39 createDOM('div', {},
40 document.createTextNode('Hello'))))); 40 document.createTextNode('Hello')))));
41 41
42 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); 42 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');
43 43
44 cleanUp(); 44 cleanUp();
45 45
46 debug(':host with * should not match any shadow hosts.'); 46 debug(':ancestor with * should not match any shadow hosts.');
47 47
48 sandbox.appendChild( 48 sandbox.appendChild(
49 createDOM('div', {'id': 'host'}, 49 createDOM('div', {'id': 'host'},
50 createShadowRoot( 50 createShadowRoot(
51 createDOM('style', {}, 51 createDOM('style', {},
52 document.createTextNode('*:host { background-color: green; }')), 52 document.createTextNode('*:ancestor { background-color: green; } ')),
53 createDOM('div', {}, 53 createDOM('div', {},
54 document.createTextNode('Hello'))))); 54 document.createTextNode('Hello')))));
55 55
56 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); 56 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
57 57
58 cleanUp(); 58 cleanUp();
59 59
60 debug(':host with tag selector should not match any shadow hosts.'); 60 debug(':ancestor with tag selector should not match any shadow hosts.');
61 61
62 sandbox.appendChild( 62 sandbox.appendChild(
63 createDOM('div', {'id': 'host'}, 63 createDOM('div', {'id': 'host'},
64 createShadowRoot( 64 createShadowRoot(
65 createDOM('style', {}, 65 createDOM('style', {},
66 document.createTextNode('div:host { background-color: green; }') ), 66 document.createTextNode('div:ancestor { background-color: green; }')),
67 createDOM('div', {}, 67 createDOM('div', {},
68 document.createTextNode('Hello'))))); 68 document.createTextNode('Hello')))));
69 69
70 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); 70 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');
71 71
72 cleanUp(); 72 cleanUp();
73 73
74 debug(':host with class selector should not match any shadow hosts.'); 74 debug(':ancestor with class selector should not match any shadow hosts.');
75 75
76 sandbox.appendChild( 76 sandbox.appendChild(
77 createDOM('div', {'id': 'host', 'class': 'host'}, 77 createDOM('div', {'id': 'host', 'class': 'host'},
78 createShadowRoot( 78 createShadowRoot(
79 createDOM('style', {}, 79 createDOM('style', {},
80 document.createTextNode('.host:host { background-color: green; } ')), 80 document.createTextNode('.host:ancestor { background-color: gree n; }')),
81 createDOM('div', {}, 81 createDOM('div', {},
82 document.createTextNode('Hello'))))); 82 document.createTextNode('Hello')))));
83 83
84 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); 84 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');
85 85
86 cleanUp(); 86 cleanUp();
87 87
88 debug(':host with id selector should not match any shadow hosts.'); 88 debug(':ancestor with id selector should not match any shadow hosts.');
89 89
90 sandbox.appendChild( 90 sandbox.appendChild(
91 createDOM('div', {'id': 'host'}, 91 createDOM('div', {'id': 'host'},
92 createShadowRoot( 92 createShadowRoot(
93 createDOM('style', {}, 93 createDOM('style', {},
94 document.createTextNode('#host:host { background-color: green; } ')), 94 document.createTextNode('#host:ancestor { background-color: gree n; }')),
95 createDOM('div', {}, 95 createDOM('div', {},
96 document.createTextNode('Hello'))))); 96 document.createTextNode('Hello')))));
97 97
98 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); 98 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');
99 99
100 cleanUp(); 100 cleanUp();
101 101
102 debug(':host with attribute selector should not match any shadow hosts.'); 102 debug(':ancestor with attribute selector should not match any shadow hosts.');
103 103
104 sandbox.appendChild( 104 sandbox.appendChild(
105 createDOM('div', {'id': 'host', 'foo': 'bar'}, 105 createDOM('div', {'id': 'host', 'foo': 'bar'},
106 createShadowRoot( 106 createShadowRoot(
107 createDOM('style', {}, 107 createDOM('style', {},
108 document.createTextNode('[foo=bar]:host { background-color: gree n; }')), 108 document.createTextNode('[foo=bar]:ancestor { background-color: green; }')),
109 createDOM('div', {}, 109 createDOM('div', {},
110 document.createTextNode('Hello'))))); 110 document.createTextNode('Hello')))));
111 111
112 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); 112 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');
113 113
114 cleanUp(); 114 cleanUp();
115 115
116 debug(':host in a shadow tree should match its shadow host.'); 116 debug(':ancestor in a shadow tree should match its shadow host.');
117 117
118 sandbox.appendChild( 118 sandbox.appendChild(
119 createDOM('div', {'id': 'host'}, 119 createDOM('div', {'id': 'host'},
120 createShadowRoot( 120 createShadowRoot(
121 createDOM('style', {}, 121 createDOM('style', {},
122 document.createTextNode(':host(body.mytheme) { background-color: green; }')), 122 document.createTextNode(':ancestor(body.mytheme) { background-co lor: green; }')),
123 createDOM('div', {}, 123 createDOM('div', {},
124 document.createTextNode('Hello'))))); 124 document.createTextNode('Hello')))));
125 125
126 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); 126 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
127 127
128 cleanUp(); 128 cleanUp();
129 129
130 debug(':host takes simple selectors and matches when one of the simple selectors matches.'); 130 debug(':ancestor with :host in a shadow tree should match its shadow host.');
131
132 sandbox.appendChild(
133 createDOM('div', {'id': 'host'},
134 createShadowRoot(
135 createDOM('style', {},
136 document.createTextNode(':ancestor(div:host) { background-color: green; }')),
137 createDOM('div', {},
138 document.createTextNode('Hello')))));
139
140 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
141
142 cleanUp();
143
144 debug(':ancestor takes simple selectors and matches when one of the simple selec tors matches.');
131 145
132 sandbox.appendChild( 146 sandbox.appendChild(
133 createDOM('div', {'id': 'parentOfHost'}, 147 createDOM('div', {'id': 'parentOfHost'},
134 createDOM('div', {'id': 'host'}, 148 createDOM('div', {'id': 'host'},
135 createShadowRoot( 149 createShadowRoot(
136 createDOM('style', {}, 150 createDOM('style', {},
137 document.createTextNode(':host(body:not(.mytheme), span, div #parentOfHost) { background-color: green; }')), 151 document.createTextNode(':ancestor(body:not(.mytheme), span, div#parentOfHost) { background-color: green; }')),
138 createDOM('div', {}, 152 createDOM('div', {},
139 document.createTextNode('Hello')))))); 153 document.createTextNode('Hello'))))));
140 154
141 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); 155 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
142 156
143 cleanUp(); 157 cleanUp();
144 158
145 debug(':host matches a shadow host in just a nested shadow tree, not all enclosi ng shadow trees.'); 159 debug(':ancestor matches a shadow host in just a nested shadow tree, not all enc losing shadow trees.');
146 160
147 sandbox.appendChild( 161 sandbox.appendChild(
148 createDOM('div', {'id': 'host1'}, 162 createDOM('div', {'id': 'host1'},
149 createShadowRoot( 163 createShadowRoot(
150 createDOM('div', {'id': 'host2'}, 164 createDOM('div', {'id': 'host2'},
151 createShadowRoot( 165 createShadowRoot(
152 createDOM('style', {}, 166 createDOM('style', {},
153 document.createTextNode(':host { background-color: green ; }')), 167 document.createTextNode(':ancestor { background-color: g reen; }')),
154 createDOM('div', {}, 168 createDOM('div', {},
155 document.createTextNode('Hello'))))))); 169 document.createTextNode('Hello')))))));
156 170
157 backgroundColorShouldBe('host1', 'rgba(0, 0, 0, 0)'); 171 backgroundColorShouldBe('host1', 'rgba(0, 0, 0, 0)');
158 backgroundColorShouldBe('host1/host2', 'rgb(0, 128, 0)'); 172 backgroundColorShouldBe('host1/host2', 'rgb(0, 128, 0)');
159 173
160 debug(':host matches based on a composed tree.'); 174 debug(':ancestor matches based on a composed tree.');
161 175
162 sandbox.appendChild( 176 sandbox.appendChild(
163 createDOM('div', {'id': 'parentOfHost'}, 177 createDOM('div', {'id': 'parentOfHost'},
164 createShadowRoot( 178 createShadowRoot(
165 createDOM('span', {'id': 'spanA'}, 179 createDOM('span', {'id': 'spanA'},
166 createDOM('content', {}))), 180 createDOM('content', {}))),
167 createDOM('div', {'id': 'host'}, 181 createDOM('div', {'id': 'host'},
168 createShadowRoot( 182 createShadowRoot(
169 createDOM('style', {}, 183 createDOM('style', {},
170 document.createTextNode(':host(span#spanA) > div { backgroun d-color: green; }')), 184 document.createTextNode(':ancestor(span#spanA) > div { backg round-color: green; }')),
171 createDOM('div', {'id': 'target'}, 185 createDOM('div', {'id': 'target'},
172 document.createTextNode('Hello')))))); 186 document.createTextNode('Hello'))))));
173 187
174 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); 188 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');
175 189
176 cleanUp(); 190 cleanUp();
177 191
178 debug(':host matches based on a composed tree when having multiple shadow roots. '); 192 debug(':ancestor matches based on a composed tree when having multiple shadow ro ots.');
179 193
180 sandbox.appendChild( 194 sandbox.appendChild(
181 createDOM('div', {'id': 'parentOfHost'}, 195 createDOM('div', {'id': 'parentOfHost'},
182 createShadowRoot( 196 createShadowRoot(
183 createDOM('span', {'id': 'spanA'}, 197 createDOM('span', {'id': 'spanA'},
184 document.createTextNode('no content, no shadow'))), 198 document.createTextNode('no content, no shadow'))),
185 createShadowRoot( 199 createShadowRoot(
186 createDOM('span', {'id': 'spanB'}, 200 createDOM('span', {'id': 'spanB'},
187 createDOM('content', {}))), 201 createDOM('content', {}))),
188 createShadowRoot( 202 createShadowRoot(
189 createDOM('span', {'id': 'spanC'}, 203 createDOM('span', {'id': 'spanC'},
190 createDOM('shadow', {}, 204 createDOM('shadow', {},
191 createDOM('content')))), 205 createDOM('content')))),
192 createDOM('div', {'id': 'host'}, 206 createDOM('div', {'id': 'host'},
193 createShadowRoot( 207 createShadowRoot(
194 createDOM('style', {}, 208 createDOM('style', {},
195 document.createTextNode(':host(span#spanA) > #targetA { back ground-color: red; }')), 209 document.createTextNode(':ancestor(span#spanA) > #targetA { background-color: red; }')),
196 createDOM('style', {}, 210 createDOM('style', {},
197 document.createTextNode(':host(span#spanB) > #targetB { back ground-color: green; }')), 211 document.createTextNode(':ancestor(span#spanB) > #targetB { background-color: green; }')),
198 createDOM('style', {}, 212 createDOM('style', {},
199 document.createTextNode(':host(span#spanC) > #targetC { back ground-color: green; }')), 213 document.createTextNode(':ancestor(span#spanC) > #targetC { background-color: green; }')),
200 createDOM('div', {'id': 'targetA'}, 214 createDOM('div', {'id': 'targetA'},
201 document.createTextNode('Hello')), 215 document.createTextNode('Hello')),
202 createDOM('div', {'id': 'targetB'}, 216 createDOM('div', {'id': 'targetB'},
203 document.createTextNode('Hello')), 217 document.createTextNode('Hello')),
204 createDOM('div', {'id': 'targetC'}, 218 createDOM('div', {'id': 'targetC'},
205 document.createTextNode('Hello')))))); 219 document.createTextNode('Hello'))))));
206 220
207 backgroundColorShouldBe('host/targetA', 'rgba(0, 0, 0, 0)'); 221 backgroundColorShouldBe('host/targetA', 'rgba(0, 0, 0, 0)');
208 backgroundColorShouldBe('host/targetB', 'rgb(0, 128, 0)'); 222 backgroundColorShouldBe('host/targetB', 'rgb(0, 128, 0)');
209 backgroundColorShouldBe('host/targetC', 'rgb(0, 128, 0)'); 223 backgroundColorShouldBe('host/targetC', 'rgb(0, 128, 0)');
210 224
211 cleanUp(); 225 cleanUp();
212 226
213 debug(':host is updated when its matched ancestor changes className or id.'); 227 debug(':ancestor is updated when its matched ancestor changes className or id.') ;
214 228
215 sandbox.appendChild( 229 sandbox.appendChild(
216 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' }, 230 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' },
217 createDOM('div', {'id': 'host'}, 231 createDOM('div', {'id': 'host'},
218 createShadowRoot( 232 createShadowRoot(
219 createDOM('style', {}, 233 createDOM('style', {},
220 document.createTextNode(':host(div#parentOfHost.sometheme) { background-color: green; }')), 234 document.createTextNode(':ancestor(div#parentOfHost.somethem e) { background-color: green; }')),
221 createDOM('div', {}, 235 createDOM('div', {},
222 document.createTextNode('Hello')))))); 236 document.createTextNode('Hello'))))));
223 237
224 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); 238 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
225 document.getElementById('parentOfHost').className = 'mytheme'; 239 document.getElementById('parentOfHost').className = 'mytheme';
226 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); 240 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');
227 241
228 cleanUp(); 242 cleanUp();
229 243
230 sandbox.appendChild( 244 sandbox.appendChild(
231 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' }, 245 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' },
232 createDOM('div', {'id': 'host'}, 246 createDOM('div', {'id': 'host'},
233 createShadowRoot( 247 createShadowRoot(
234 createDOM('style', {}, 248 createDOM('style', {},
235 document.createTextNode(':host(div#parentOfHost.sometheme) { background-color: green; }')), 249 document.createTextNode(':ancestor(div#parentOfHost.somethem e) { background-color: green; }')),
236 createDOM('div', {}, 250 createDOM('div', {},
237 document.createTextNode('Hello')))))); 251 document.createTextNode('Hello'))))));
238 252
239 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); 253 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
240 var parentOfHost = document.getElementById('parentOfHost'); 254 var parentOfHost = document.getElementById('parentOfHost');
241 parentOfHost.id = 'differntIdValue'; 255 parentOfHost.id = 'differntIdValue';
242 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); 256 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');
243 257
244 cleanUp(); 258 cleanUp();
245 259
246 debug('Compare :host with :host.'); 260 debug('Compare :ancestor with :ancestor.');
247 261
248 sandbox.appendChild( 262 sandbox.appendChild(
249 createDOM('div', {'id': 'host'}, 263 createDOM('div', {'id': 'host'},
250 createShadowRoot( 264 createShadowRoot(
251 createDOM('style', {}, 265 createDOM('style', {},
252 document.createTextNode(':host(div:host, div#sandbox) { backgrou nd-color: green; }')), 266 document.createTextNode(':ancestor(div:ancestor, div#sandbox) { background-color: green; }')),
253 createDOM('style', {}, 267 createDOM('style', {},
254 document.createTextNode(':host(body.mytheme) { background-color: red; }')), 268 document.createTextNode(':ancestor(body.mytheme) { background-co lor: red; }')),
255 createDOM('div', {}, 269 createDOM('div', {},
256 document.createTextNode('Hello'))))); 270 document.createTextNode('Hello')))));
257 271
258 // :host(div:host, div#sandbox) wins, because div#sandbox > body.mytheme. 272 // :ancestor(div:ancestor, div#sandbox) wins, because div#sandbox > body.mytheme .
259 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); 273 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
260 274
261 cleanUp(); 275 cleanUp();
262 276
263 sandbox.appendChild( 277 sandbox.appendChild(
264 createDOM('div', {'id': 'host'}, 278 createDOM('div', {'id': 'host'},
265 createShadowRoot( 279 createShadowRoot(
266 createDOM('style', {}, 280 createDOM('style', {},
267 document.createTextNode(':host(div:host, div#nomatch) { backgrou nd-color: green; }')), 281 document.createTextNode(':ancestor(div:ancestor, div#nomatch) { background-color: green; }')),
268 createDOM('style', {}, 282 createDOM('style', {},
269 document.createTextNode(':host(body.mytheme) { background-color: red; }')), 283 document.createTextNode(':ancestor(body.mytheme) { background-co lor: red; }')),
270 createDOM('div', {}, 284 createDOM('div', {},
271 document.createTextNode('Hello'))))); 285 document.createTextNode('Hello')))));
272 286
273 // :host(body.mytheme) wins, because div:host < body.mytheme. 287 // :ancestor(body.mytheme) wins, because div:ancestor < body.mytheme.
274 backgroundColorShouldBe('host', 'rgb(255, 0, 0)'); 288 backgroundColorShouldBe('host', 'rgb(255, 0, 0)');
275 289
276 cleanUp(); 290 cleanUp();
277 291
278 // Test for specificiy of ":host(...) > ...". 292 // Test for specificiy of ":ancestor(...) > ...".
279 sandbox.appendChild( 293 sandbox.appendChild(
280 createDOM('div', {'id': 'host'}, 294 createDOM('div', {'id': 'host'},
281 createShadowRoot( 295 createShadowRoot(
282 createDOM('style', {}, 296 createDOM('style', {},
283 document.createTextNode(':host(div:host, div#host:host) > div { background-color: green; }')), 297 document.createTextNode(':ancestor(div:ancestor, div#host:ancest or) > div { background-color: green; }')),
284 createDOM('style', {}, 298 createDOM('style', {},
285 document.createTextNode(':host(body.mytheme) > div { background- color: red; }')), 299 document.createTextNode(':ancestor(body.mytheme) > div { backgro und-color: red; }')),
286 createDOM('div', {'id': 'target'}, 300 createDOM('div', {'id': 'target'},
287 document.createTextNode('Hello'))))); 301 document.createTextNode('Hello')))));
288 302
289 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); 303 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');
290 304
291 cleanUp(); 305 cleanUp();
292 306
293 sandbox.appendChild( 307 sandbox.appendChild(
294 createDOM('div', {'id': 'host', 'class': 'host'}, 308 createDOM('div', {'id': 'host', 'class': 'host'},
295 createShadowRoot( 309 createShadowRoot(
296 createDOM('style', {}, 310 createDOM('style', {},
297 document.createTextNode(':host(div:host, div#host.host:host) > d iv { background-color: green; }')), 311 document.createTextNode(':ancestor(div:ancestor, div#host.host:a ncestor) > div { background-color: green; }')),
298 createDOM('style', {}, 312 createDOM('style', {},
299 document.createTextNode(':host(body) > div#target { background-c olor: red; }')), 313 document.createTextNode(':ancestor(body) > div#target { backgrou nd-color: red; }')),
300 createDOM('div', {'id': 'target'}, 314 createDOM('div', {'id': 'target'},
301 document.createTextNode('Hello'))))); 315 document.createTextNode('Hello')))));
302 316
303 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); 317 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');
304 318
305 cleanUp(); 319 cleanUp();
306 320
307 sandbox.appendChild( 321 sandbox.appendChild(
308 createDOM('div', {'id': 'host', 'class': 'host'}, 322 createDOM('div', {'id': 'host', 'class': 'host'},
309 createShadowRoot( 323 createShadowRoot(
310 createDOM('style', {}, 324 createDOM('style', {},
311 document.createTextNode(':host(div:host(div:host(div:host(div:ho st)))) > div { background-color: green; }')), 325 document.createTextNode(':ancestor(div:ancestor(div:ancestor(div :ancestor(div:ancestor)))) > div { background-color: green; }')),
312 createDOM('style', {}, 326 createDOM('style', {},
313 document.createTextNode(':host(div) > div { background-color: re d; }')), 327 document.createTextNode(':ancestor(div) > div { background-color : red; }')),
314 createDOM('div', {'id': 'target'}, 328 createDOM('div', {'id': 'target'},
315 document.createTextNode('Hello'))))); 329 document.createTextNode('Hello')))));
316 330
317 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); 331 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');
318 332
319 cleanUp(); 333 cleanUp();
320 334
321 </script> 335 </script>
322 </body> 336 </body>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698