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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/dom/shadow/host-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
« LayoutTests/fast/dom/shadow/ancestor-pseudo-class-expected.txt ('K') | « LayoutTests/fast/dom/shadow/ancestor-pseudo-class-expected.txt ('k') | LayoutTests/fast/dom/shadow/host-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 :host { 7 :host {
8 background-color: red; 8 background-color: red;
9 } 9 }
10 </style> 10 </style>
(...skipping 98 matching lines...) Expand 10 before | Expand all | Expand 10 after
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(':host 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', 'class': 'foobar'},
120 createShadowRoot( 120 createShadowRoot(
121 createDOM('style', {}, 121 createDOM('style', {},
122 document.createTextNode(':host(body.mytheme) { background-color: green; }')), 122 document.createTextNode(':host(div.foobar) { background-color: gr een; }')),
123 createDOM('div', {}, 123 createDOM('div', {},
124 document.createTextNode('Hello'))))); 124 document.createTextNode('Hello')))));
125 125
126 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
127
128 cleanUp();
129
130 debug(':host with :ancestor in a shadow tree should match its shadow host.');
131
132 sandbox.appendChild(
133 createDOM('div', {'id': 'host', 'class': 'foobar'},
134 createShadowRoot(
135 createDOM('style', {},
136 document.createTextNode(':host(:ancestor(body.mytheme)) { backgro und-color: green; }')),
137 createDOM('div', {},
138 document.createTextNode('Hello')))));
139
126 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); 140 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
127 141
128 cleanUp(); 142 cleanUp();
129 143
130 debug(':host takes simple selectors and matches when one of the simple selectors matches.'); 144 debug(':host takes simple selectors and matches when one of the simple selectors matches.');
131 145
132 sandbox.appendChild( 146 sandbox.appendChild(
133 createDOM('div', {'id': 'parentOfHost'}, 147 createDOM('div', {'id': 'host'},
134 createDOM('div', {'id': 'host'}, 148 createShadowRoot(
135 createShadowRoot( 149 createDOM('style', {},
136 createDOM('style', {}, 150 document.createTextNode(':host(body:not(.mytheme), span, div#hos t) { background-color: green; }')),
137 document.createTextNode(':host(body:not(.mytheme), span, div #parentOfHost) { background-color: green; }')), 151 createDOM('div', {},
138 createDOM('div', {}, 152 document.createTextNode('Hello')))));
139 document.createTextNode('Hello'))))));
140 153
141 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); 154 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
142 155
143 cleanUp(); 156 cleanUp();
144 157
145 debug(':host matches a shadow host in just a nested shadow tree, not all enclosi ng shadow trees.'); 158 debug(':host matches a shadow host in just a nested shadow tree, not all enclosi ng shadow trees.');
146 159
147 sandbox.appendChild( 160 sandbox.appendChild(
148 createDOM('div', {'id': 'host1'}, 161 createDOM('div', {'id': 'host1'},
149 createShadowRoot( 162 createShadowRoot(
150 createDOM('div', {'id': 'host2'}, 163 createDOM('div', {'id': 'host2'},
151 createShadowRoot( 164 createShadowRoot(
152 createDOM('style', {}, 165 createDOM('style', {},
153 document.createTextNode(':host { background-color: green ; }')), 166 document.createTextNode(':host { background-color: green ; }')),
154 createDOM('div', {}, 167 createDOM('div', {},
155 document.createTextNode('Hello'))))))); 168 document.createTextNode('Hello')))))));
156 169
157 backgroundColorShouldBe('host1', 'rgba(0, 0, 0, 0)'); 170 backgroundColorShouldBe('host1', 'rgba(0, 0, 0, 0)');
158 backgroundColorShouldBe('host1/host2', 'rgb(0, 128, 0)'); 171 backgroundColorShouldBe('host1/host2', 'rgb(0, 128, 0)');
159 172
160 debug(':host matches based on a composed tree.'); 173 debug(':host is updated when its matched host changes className or id.');
161 174
162 sandbox.appendChild( 175 sandbox.appendChild(
163 createDOM('div', {'id': 'parentOfHost'}, 176 createDOM('div', {'id': 'host', 'class': 'sometheme' },
164 createShadowRoot( 177 createShadowRoot(
165 createDOM('span', {'id': 'spanA'}, 178 createDOM('style', {},
166 createDOM('content', {}))), 179 document.createTextNode(':host(.sometheme) { background-color: g reen; }')),
167 createDOM('div', {'id': 'host'}, 180 createDOM('div', {},
168 createShadowRoot( 181 document.createTextNode('Hello')))));
169 createDOM('style', {},
170 document.createTextNode(':host(span#spanA) > div { backgroun d-color: green; }')),
171 createDOM('div', {'id': 'target'},
172 document.createTextNode('Hello'))))));
173
174 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');
175
176 cleanUp();
177
178 debug(':host matches based on a composed tree when having multiple shadow roots. ');
179
180 sandbox.appendChild(
181 createDOM('div', {'id': 'parentOfHost'},
182 createShadowRoot(
183 createDOM('span', {'id': 'spanA'},
184 document.createTextNode('no content, no shadow'))),
185 createShadowRoot(
186 createDOM('span', {'id': 'spanB'},
187 createDOM('content', {}))),
188 createShadowRoot(
189 createDOM('span', {'id': 'spanC'},
190 createDOM('shadow', {},
191 createDOM('content')))),
192 createDOM('div', {'id': 'host'},
193 createShadowRoot(
194 createDOM('style', {},
195 document.createTextNode(':host(span#spanA) > #targetA { back ground-color: red; }')),
196 createDOM('style', {},
197 document.createTextNode(':host(span#spanB) > #targetB { back ground-color: green; }')),
198 createDOM('style', {},
199 document.createTextNode(':host(span#spanC) > #targetC { back ground-color: green; }')),
200 createDOM('div', {'id': 'targetA'},
201 document.createTextNode('Hello')),
202 createDOM('div', {'id': 'targetB'},
203 document.createTextNode('Hello')),
204 createDOM('div', {'id': 'targetC'},
205 document.createTextNode('Hello'))))));
206
207 backgroundColorShouldBe('host/targetA', 'rgba(0, 0, 0, 0)');
208 backgroundColorShouldBe('host/targetB', 'rgb(0, 128, 0)');
209 backgroundColorShouldBe('host/targetC', 'rgb(0, 128, 0)');
210
211 cleanUp();
212
213 debug(':host is updated when its matched ancestor changes className or id.');
214
215 sandbox.appendChild(
216 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' },
217 createDOM('div', {'id': 'host'},
218 createShadowRoot(
219 createDOM('style', {},
220 document.createTextNode(':host(div#parentOfHost.sometheme) { background-color: green; }')),
221 createDOM('div', {},
222 document.createTextNode('Hello'))))));
223 182
224 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); 183 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
225 document.getElementById('parentOfHost').className = 'mytheme'; 184 document.getElementById('host').className = 'mytheme';
226 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); 185 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');
227 186
228 cleanUp(); 187 cleanUp();
229 188
230 sandbox.appendChild( 189 sandbox.appendChild(
231 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' }, 190 createDOM('div', {'id': 'host', 'class': 'sometheme'},
232 createDOM('div', {'id': 'host'}, 191 createShadowRoot(
233 createShadowRoot( 192 createDOM('style', {},
234 createDOM('style', {}, 193 document.createTextNode(':host(div#host.sometheme) { background- color: green; }')),
235 document.createTextNode(':host(div#parentOfHost.sometheme) { background-color: green; }')), 194 createDOM('div', {},
236 createDOM('div', {}, 195 document.createTextNode('Hello')))));
237 document.createTextNode('Hello'))))));
238 196
239 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); 197 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
240 var parentOfHost = document.getElementById('parentOfHost'); 198 var host = document.getElementById('host');
241 parentOfHost.id = 'differntIdValue'; 199 host.id = 'host2';
242 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); 200 backgroundColorShouldBe('host2', 'rgba(0, 0, 0, 0)');
243 201
244 cleanUp(); 202 cleanUp();
245 203
246 debug('Compare :host with :host.'); 204 debug('Compare :host with :host.');
247 205
248 sandbox.appendChild( 206 sandbox.appendChild(
249 createDOM('div', {'id': 'host'}, 207 createDOM('div', {'id': 'host'},
250 createShadowRoot( 208 createShadowRoot(
251 createDOM('style', {}, 209 createDOM('style', {},
252 document.createTextNode(':host(div:host, div#sandbox) { backgrou nd-color: green; }')), 210 document.createTextNode(':host(div:host, div#sandbox) { backgrou nd-color: green; }')),
253 createDOM('style', {}, 211 createDOM('style', {},
254 document.createTextNode(':host(body.mytheme) { background-color: red; }')), 212 document.createTextNode(':host(body.mytheme) { background-color: red; }')),
255 createDOM('div', {}, 213 createDOM('div', {},
256 document.createTextNode('Hello'))))); 214 document.createTextNode('Hello')))));
257 215
258 // :host(div:host, div#sandbox) wins, because div#sandbox > body.mytheme. 216 // :host(div:host, div#sandbox) wins, because div#sandbox > body.mytheme.
259 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); 217 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
260 218
261 cleanUp(); 219 cleanUp();
262 220
263 sandbox.appendChild( 221 sandbox.appendChild(
264 createDOM('div', {'id': 'host'}, 222 createDOM('div', {'id': 'host', 'class': 'foobar' },
265 createShadowRoot( 223 createShadowRoot(
266 createDOM('style', {}, 224 createDOM('style', {},
267 document.createTextNode(':host(div:host, div#nomatch) { backgrou nd-color: green; }')), 225 document.createTextNode(':host(div:host, div#nomatch) { backgrou nd-color: green; }')),
268 createDOM('style', {}, 226 createDOM('style', {},
269 document.createTextNode(':host(body.mytheme) { background-color: red; }')), 227 document.createTextNode(':host(div.foobar) { background-color: r ed; }')),
270 createDOM('div', {}, 228 createDOM('div', {},
271 document.createTextNode('Hello'))))); 229 document.createTextNode('Hello')))));
272 230
273 // :host(body.mytheme) wins, because div:host < body.mytheme. 231 // :host(div.foobar) wins, because div:host < div.foobar.
274 backgroundColorShouldBe('host', 'rgb(255, 0, 0)'); 232 backgroundColorShouldBe('host', 'rgb(255, 0, 0)');
275 233
276 cleanUp(); 234 cleanUp();
277 235
278 // Test for specificiy of ":host(...) > ...". 236 // Test for specificiy of ":host(...) > ...".
279 sandbox.appendChild( 237 sandbox.appendChild(
280 createDOM('div', {'id': 'host'}, 238 createDOM('div', {'id': 'host', 'class': 'foobar' },
281 createShadowRoot( 239 createShadowRoot(
282 createDOM('style', {}, 240 createDOM('style', {},
283 document.createTextNode(':host(div:host, div#host:host) > div { background-color: green; }')), 241 document.createTextNode(':host(div:host, div#host:host) > div { background-color: green; }')),
284 createDOM('style', {}, 242 createDOM('style', {},
285 document.createTextNode(':host(body.mytheme) > div { background- color: red; }')), 243 document.createTextNode(':host(div.foobar) > div { background-co lor: red; }')),
286 createDOM('div', {'id': 'target'}, 244 createDOM('div', {'id': 'target'},
287 document.createTextNode('Hello'))))); 245 document.createTextNode('Hello')))));
288 246
289 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); 247 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');
290 248
291 cleanUp(); 249 cleanUp();
292 250
293 sandbox.appendChild( 251 sandbox.appendChild(
294 createDOM('div', {'id': 'host', 'class': 'host'}, 252 createDOM('div', {'id': 'host', 'class': 'host'},
295 createShadowRoot( 253 createShadowRoot(
296 createDOM('style', {}, 254 createDOM('style', {},
297 document.createTextNode(':host(div:host, div#host.host:host) > d iv { background-color: green; }')), 255 document.createTextNode(':host(div:host, div#host.host:host) > d iv { background-color: green; }')),
298 createDOM('style', {}, 256 createDOM('style', {},
299 document.createTextNode(':host(body) > div#target { background-c olor: red; }')), 257 document.createTextNode(':host(div) > div#target { background-co lor: red; }')),
300 createDOM('div', {'id': 'target'}, 258 createDOM('div', {'id': 'target'},
301 document.createTextNode('Hello'))))); 259 document.createTextNode('Hello')))));
302 260
303 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); 261 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');
304 262
305 cleanUp(); 263 cleanUp();
306 264
307 sandbox.appendChild( 265 sandbox.appendChild(
308 createDOM('div', {'id': 'host', 'class': 'host'}, 266 createDOM('div', {'id': 'host', 'class': 'host'},
309 createShadowRoot( 267 createShadowRoot(
310 createDOM('style', {}, 268 createDOM('style', {},
311 document.createTextNode(':host(div:host(div:host(div:host(div:ho st)))) > div { background-color: green; }')), 269 document.createTextNode(':host(div:host(div:host(div:host(div:ho st)))) > div { background-color: green; }')),
312 createDOM('style', {}, 270 createDOM('style', {},
313 document.createTextNode(':host(div) > div { background-color: re d; }')), 271 document.createTextNode(':host(div) > div { background-color: re d; }')),
314 createDOM('div', {'id': 'target'}, 272 createDOM('div', {'id': 'target'},
315 document.createTextNode('Hello'))))); 273 document.createTextNode('Hello')))));
316 274
317 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); 275 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');
318 276
319 cleanUp(); 277 cleanUp();
320 278
321 </script> 279 </script>
322 </body> 280 </body>
OLDNEW
« LayoutTests/fast/dom/shadow/ancestor-pseudo-class-expected.txt ('K') | « LayoutTests/fast/dom/shadow/ancestor-pseudo-class-expected.txt ('k') | LayoutTests/fast/dom/shadow/host-pseudo-class-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698