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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 210813003: Rename :ancestor to :host-context. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Patch for landing 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/hostcontext-first-child-expected.txt ('k') | LayoutTests/fast/dom/shadow/hostcontext-pseudo-class-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/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 :ancestor { 7 :host-context {
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 :ancestor matches a shadow host correctly.'); 18 description('Test whether :host-context 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(':ancestor out of shadow tree should not match any shadow hosts.'); 34 debug(':host-context 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(':ancestor with * should not match any shadow hosts.'); 46 debug(':host-context 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('*:ancestor { background-color: green; } ')), 52 document.createTextNode('*:host-context { background-color: gree n; }')),
53 createDOM('div', {}, 53 createDOM('div', {},
54 document.createTextNode('Hello'))))); 54 document.createTextNode('Hello')))));
55 55
56 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); 56 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');
57 57
58 cleanUp(); 58 cleanUp();
59 59
60 debug(':ancestor with tag selector should not match any shadow hosts.'); 60 debug(':host-context 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:ancestor { background-color: green; }')), 66 document.createTextNode('div:host-context { background-color: gr een; }')),
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(':ancestor with class selector should not match any shadow hosts.'); 74 debug(':host-context 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:ancestor { background-color: gree n; }')), 80 document.createTextNode('.host:host-context { background-color: green; }')),
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(':ancestor with id selector should not match any shadow hosts.'); 88 debug(':host-context 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:ancestor { background-color: gree n; }')), 94 document.createTextNode('#host:host-context { background-color: green; }')),
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(':ancestor with attribute selector should not match any shadow hosts.'); 102 debug(':host-context 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]:ancestor { background-color: green; }')), 108 document.createTextNode('[foo=bar]:host-context { background-col or: 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(':ancestor in a shadow tree should match its shadow host.'); 116 debug(':host-context 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(':ancestor(body.mytheme) { background-co lor: green; }')), 122 document.createTextNode(':host-context(body.mytheme) { backgroun d-color: 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(':ancestor with :host in a shadow tree should match its shadow host.'); 130 debug(':host-context with :host in a shadow tree should match its shadow host.') ;
131 131
132 sandbox.appendChild( 132 sandbox.appendChild(
133 createDOM('div', {'id': 'host'}, 133 createDOM('div', {'id': 'host'},
134 createShadowRoot( 134 createShadowRoot(
135 createDOM('style', {}, 135 createDOM('style', {},
136 document.createTextNode(':ancestor(div:host) { background-color: green; }')), 136 document.createTextNode(':host-context(div:host) { background-co lor: green; }')),
137 createDOM('div', {}, 137 createDOM('div', {},
138 document.createTextNode('Hello'))))); 138 document.createTextNode('Hello')))));
139 139
140 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); 140 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
141 141
142 cleanUp(); 142 cleanUp();
143 143
144 debug(':ancestor takes simple selectors and matches when one of the simple selec tors matches.'); 144 debug(':host-context takes simple selectors and matches when one of the simple s electors matches.');
145 145
146 sandbox.appendChild( 146 sandbox.appendChild(
147 createDOM('div', {'id': 'parentOfHost'}, 147 createDOM('div', {'id': 'parentOfHost'},
148 createDOM('div', {'id': 'host'}, 148 createDOM('div', {'id': 'host'},
149 createShadowRoot( 149 createShadowRoot(
150 createDOM('style', {}, 150 createDOM('style', {},
151 document.createTextNode(':ancestor(body:not(.mytheme), span, div#parentOfHost) { background-color: green; }')), 151 document.createTextNode(':host-context(body:not(.mytheme), s pan, div#parentOfHost) { background-color: green; }')),
152 createDOM('div', {}, 152 createDOM('div', {},
153 document.createTextNode('Hello')))))); 153 document.createTextNode('Hello'))))));
154 154
155 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); 155 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
156 156
157 cleanUp(); 157 cleanUp();
158 158
159 debug(':ancestor matches a shadow host in just a nested shadow tree, not all enc losing shadow trees.'); 159 debug(':host-context matches a shadow host in just a nested shadow tree, not all enclosing shadow trees.');
160 160
161 sandbox.appendChild( 161 sandbox.appendChild(
162 createDOM('div', {'id': 'host1'}, 162 createDOM('div', {'id': 'host1'},
163 createShadowRoot( 163 createShadowRoot(
164 createDOM('div', {'id': 'host2'}, 164 createDOM('div', {'id': 'host2'},
165 createShadowRoot( 165 createShadowRoot(
166 createDOM('style', {}, 166 createDOM('style', {},
167 document.createTextNode(':ancestor { background-color: g reen; }')), 167 document.createTextNode(':host-context { background-colo r: green; }')),
168 createDOM('div', {}, 168 createDOM('div', {},
169 document.createTextNode('Hello'))))))); 169 document.createTextNode('Hello')))))));
170 170
171 backgroundColorShouldBe('host1', 'rgba(0, 0, 0, 0)'); 171 backgroundColorShouldBe('host1', 'rgba(0, 0, 0, 0)');
172 backgroundColorShouldBe('host1/host2', 'rgb(0, 128, 0)'); 172 backgroundColorShouldBe('host1/host2', 'rgb(0, 128, 0)');
173 173
174 debug(':ancestor matches based on a composed tree.'); 174 debug(':host-context matches based on a composed tree.');
175 175
176 sandbox.appendChild( 176 sandbox.appendChild(
177 createDOM('div', {'id': 'parentOfHost'}, 177 createDOM('div', {'id': 'parentOfHost'},
178 createShadowRoot( 178 createShadowRoot(
179 createDOM('span', {'id': 'spanA'}, 179 createDOM('span', {'id': 'spanA'},
180 createDOM('content', {}))), 180 createDOM('content', {}))),
181 createDOM('div', {'id': 'host'}, 181 createDOM('div', {'id': 'host'},
182 createShadowRoot( 182 createShadowRoot(
183 createDOM('style', {}, 183 createDOM('style', {},
184 document.createTextNode(':ancestor(span#spanA) > div { backg round-color: green; }')), 184 document.createTextNode(':host-context(span#spanA) > div { b ackground-color: green; }')),
185 createDOM('div', {'id': 'target'}, 185 createDOM('div', {'id': 'target'},
186 document.createTextNode('Hello')))))); 186 document.createTextNode('Hello'))))));
187 187
188 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); 188 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');
189 189
190 cleanUp(); 190 cleanUp();
191 191
192 debug(':ancestor matches based on a composed tree when having multiple shadow ro ots.'); 192 debug(':host-context matches based on a composed tree when having multiple shado w roots.');
193 193
194 sandbox.appendChild( 194 sandbox.appendChild(
195 createDOM('div', {'id': 'parentOfHost'}, 195 createDOM('div', {'id': 'parentOfHost'},
196 createShadowRoot( 196 createShadowRoot(
197 createDOM('span', {'id': 'spanA'}, 197 createDOM('span', {'id': 'spanA'},
198 document.createTextNode('no content, no shadow'))), 198 document.createTextNode('no content, no shadow'))),
199 createShadowRoot( 199 createShadowRoot(
200 createDOM('span', {'id': 'spanB'}, 200 createDOM('span', {'id': 'spanB'},
201 createDOM('content', {}))), 201 createDOM('content', {}))),
202 createShadowRoot( 202 createShadowRoot(
203 createDOM('span', {'id': 'spanC'}, 203 createDOM('span', {'id': 'spanC'},
204 createDOM('shadow', {}, 204 createDOM('shadow', {},
205 createDOM('content')))), 205 createDOM('content')))),
206 createDOM('div', {'id': 'host'}, 206 createDOM('div', {'id': 'host'},
207 createShadowRoot( 207 createShadowRoot(
208 createDOM('style', {}, 208 createDOM('style', {},
209 document.createTextNode(':ancestor(span#spanA) > #targetA { background-color: red; }')), 209 document.createTextNode(':host-context(span#spanA) > #target A { background-color: red; }')),
210 createDOM('style', {}, 210 createDOM('style', {},
211 document.createTextNode(':ancestor(span#spanB) > #targetB { background-color: green; }')), 211 document.createTextNode(':host-context(span#spanB) > #target B { background-color: green; }')),
212 createDOM('style', {}, 212 createDOM('style', {},
213 document.createTextNode(':ancestor(span#spanC) > #targetC { background-color: green; }')), 213 document.createTextNode(':host-context(span#spanC) > #target C { background-color: green; }')),
214 createDOM('div', {'id': 'targetA'}, 214 createDOM('div', {'id': 'targetA'},
215 document.createTextNode('Hello')), 215 document.createTextNode('Hello')),
216 createDOM('div', {'id': 'targetB'}, 216 createDOM('div', {'id': 'targetB'},
217 document.createTextNode('Hello')), 217 document.createTextNode('Hello')),
218 createDOM('div', {'id': 'targetC'}, 218 createDOM('div', {'id': 'targetC'},
219 document.createTextNode('Hello')))))); 219 document.createTextNode('Hello'))))));
220 220
221 backgroundColorShouldBe('host/targetA', 'rgba(0, 0, 0, 0)'); 221 backgroundColorShouldBe('host/targetA', 'rgba(0, 0, 0, 0)');
222 backgroundColorShouldBe('host/targetB', 'rgb(0, 128, 0)'); 222 backgroundColorShouldBe('host/targetB', 'rgb(0, 128, 0)');
223 backgroundColorShouldBe('host/targetC', 'rgb(0, 128, 0)'); 223 backgroundColorShouldBe('host/targetC', 'rgb(0, 128, 0)');
224 224
225 cleanUp(); 225 cleanUp();
226 226
227 debug(':ancestor is updated when its matched ancestor changes className or id.') ; 227 debug(':host-context is updated when its matched ancestor changes className or i d.');
228 228
229 sandbox.appendChild( 229 sandbox.appendChild(
230 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' }, 230 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' },
231 createDOM('div', {'id': 'host'}, 231 createDOM('div', {'id': 'host'},
232 createShadowRoot( 232 createShadowRoot(
233 createDOM('style', {}, 233 createDOM('style', {},
234 document.createTextNode(':ancestor(div#parentOfHost.somethem e) { background-color: green; }')), 234 document.createTextNode(':host-context(div#parentOfHost.some theme) { background-color: green; }')),
235 createDOM('div', {}, 235 createDOM('div', {},
236 document.createTextNode('Hello')))))); 236 document.createTextNode('Hello'))))));
237 237
238 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); 238 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
239 document.getElementById('parentOfHost').className = 'mytheme'; 239 document.getElementById('parentOfHost').className = 'mytheme';
240 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); 240 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');
241 241
242 cleanUp(); 242 cleanUp();
243 243
244 sandbox.appendChild( 244 sandbox.appendChild(
245 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' }, 245 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' },
246 createDOM('div', {'id': 'host'}, 246 createDOM('div', {'id': 'host'},
247 createShadowRoot( 247 createShadowRoot(
248 createDOM('style', {}, 248 createDOM('style', {},
249 document.createTextNode(':ancestor(div#parentOfHost.somethem e) { background-color: green; }')), 249 document.createTextNode(':host-context(div#parentOfHost.some theme) { background-color: green; }')),
250 createDOM('div', {}, 250 createDOM('div', {},
251 document.createTextNode('Hello')))))); 251 document.createTextNode('Hello'))))));
252 252
253 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); 253 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
254 var parentOfHost = document.getElementById('parentOfHost'); 254 var parentOfHost = document.getElementById('parentOfHost');
255 parentOfHost.id = 'differntIdValue'; 255 parentOfHost.id = 'differntIdValue';
256 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); 256 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');
257 257
258 cleanUp(); 258 cleanUp();
259 259
260 debug('Compare :ancestor with :ancestor.'); 260 debug('Compare :host-context with :host-context.');
261 261
262 sandbox.appendChild( 262 sandbox.appendChild(
263 createDOM('div', {'id': 'host'}, 263 createDOM('div', {'id': 'host'},
264 createShadowRoot( 264 createShadowRoot(
265 createDOM('style', {}, 265 createDOM('style', {},
266 document.createTextNode(':ancestor(div:ancestor, div#sandbox) { background-color: green; }')), 266 document.createTextNode(':host-context(div:host-context, div#san dbox) { background-color: green; }')),
267 createDOM('style', {}, 267 createDOM('style', {},
268 document.createTextNode(':ancestor(body.mytheme) { background-co lor: red; }')), 268 document.createTextNode(':host-context(body.mytheme) { backgroun d-color: red; }')),
269 createDOM('div', {}, 269 createDOM('div', {},
270 document.createTextNode('Hello'))))); 270 document.createTextNode('Hello')))));
271 271
272 // :ancestor(div:ancestor, div#sandbox) wins, because div#sandbox > body.mytheme . 272 // :host-context(div:host-context, div#sandbox) wins, because div#sandbox > body .mytheme.
273 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); 273 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
274 274
275 cleanUp(); 275 cleanUp();
276 276
277 sandbox.appendChild( 277 sandbox.appendChild(
278 createDOM('div', {'id': 'host'}, 278 createDOM('div', {'id': 'host'},
279 createShadowRoot( 279 createShadowRoot(
280 createDOM('style', {}, 280 createDOM('style', {},
281 document.createTextNode(':ancestor(div:ancestor, div#nomatch) { background-color: green; }')), 281 document.createTextNode(':host-context(div:host-context, div#nom atch) { background-color: green; }')),
282 createDOM('style', {}, 282 createDOM('style', {},
283 document.createTextNode(':ancestor(body.mytheme) { background-co lor: red; }')), 283 document.createTextNode(':host-context(body.mytheme) { backgroun d-color: red; }')),
284 createDOM('div', {}, 284 createDOM('div', {},
285 document.createTextNode('Hello'))))); 285 document.createTextNode('Hello')))));
286 286
287 // :ancestor(body.mytheme) wins, because div:ancestor < body.mytheme. 287 // :host-context(body.mytheme) wins, because div:host-context < body.mytheme.
288 backgroundColorShouldBe('host', 'rgb(255, 0, 0)'); 288 backgroundColorShouldBe('host', 'rgb(255, 0, 0)');
289 289
290 cleanUp(); 290 cleanUp();
291 291
292 // Test for specificiy of ":ancestor(...) > ...". 292 // Test for specificiy of ":host-context(...) > ...".
293 sandbox.appendChild( 293 sandbox.appendChild(
294 createDOM('div', {'id': 'host'}, 294 createDOM('div', {'id': 'host'},
295 createShadowRoot( 295 createShadowRoot(
296 createDOM('style', {}, 296 createDOM('style', {},
297 document.createTextNode(':ancestor(div:ancestor, div#host:ancest or) > div { background-color: green; }')), 297 document.createTextNode(':host-context(div:host-context, div#hos t:host-context) > div { background-color: green; }')),
298 createDOM('style', {}, 298 createDOM('style', {},
299 document.createTextNode(':ancestor(body.mytheme) > div { backgro und-color: red; }')), 299 document.createTextNode(':host-context(body.mytheme) > div { bac kground-color: red; }')),
300 createDOM('div', {'id': 'target'}, 300 createDOM('div', {'id': 'target'},
301 document.createTextNode('Hello'))))); 301 document.createTextNode('Hello')))));
302 302
303 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); 303 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');
304 304
305 cleanUp(); 305 cleanUp();
306 306
307 sandbox.appendChild( 307 sandbox.appendChild(
308 createDOM('div', {'id': 'host', 'class': 'host'}, 308 createDOM('div', {'id': 'host', 'class': 'host'},
309 createShadowRoot( 309 createShadowRoot(
310 createDOM('style', {}, 310 createDOM('style', {},
311 document.createTextNode(':ancestor(div:ancestor, div#host.host:a ncestor) > div { background-color: green; }')), 311 document.createTextNode(':host-context(div:host-context, div#hos t.host:host-context) > div { background-color: green; }')),
312 createDOM('style', {}, 312 createDOM('style', {},
313 document.createTextNode(':ancestor(body) > div#target { backgrou nd-color: red; }')), 313 document.createTextNode(':host-context(body) > div#target { back ground-color: red; }')),
314 createDOM('div', {'id': 'target'}, 314 createDOM('div', {'id': 'target'},
315 document.createTextNode('Hello'))))); 315 document.createTextNode('Hello')))));
316 316
317 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); 317 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');
318 318
319 cleanUp(); 319 cleanUp();
320 320
321 sandbox.appendChild( 321 sandbox.appendChild(
322 createDOM('div', {'id': 'host', 'class': 'host'}, 322 createDOM('div', {'id': 'host', 'class': 'host'},
323 createShadowRoot( 323 createShadowRoot(
324 createDOM('style', {}, 324 createDOM('style', {},
325 document.createTextNode(':ancestor(div:ancestor(div:ancestor(div :ancestor(div:ancestor)))) > div { background-color: green; }')), 325 document.createTextNode(':host-context(div:host-context(div:host -context(div:host-context(div:host-context)))) > div { background-color: green; }')),
326 createDOM('style', {}, 326 createDOM('style', {},
327 document.createTextNode(':ancestor(div) > div { background-color : red; }')), 327 document.createTextNode(':host-context(div) > div { background-c olor: red; }')),
328 createDOM('div', {'id': 'target'}, 328 createDOM('div', {'id': 'target'},
329 document.createTextNode('Hello'))))); 329 document.createTextNode('Hello')))));
330 330
331 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); 331 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');
332 332
333 cleanUp(); 333 cleanUp();
334 334
335 </script> 335 </script>
336 </body> 336 </body>
OLDNEW
« no previous file with comments | « LayoutTests/fast/dom/shadow/hostcontext-first-child-expected.txt ('k') | LayoutTests/fast/dom/shadow/hostcontext-pseudo-class-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698