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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 212513002: :host-context should support functional notation only. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Added test for invalid :host-context. 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
« no previous file with comments | « no previous file | 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 :host-context { 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>
(...skipping 24 matching lines...) Expand all
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-context 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('*:host-context { background-color: gree n; }')), 52 document.createTextNode('*:host-context(*) { background-color: r ed; }')),
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(':host-context 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:host-context { background-color: gr een; }')), 66 document.createTextNode('div:host-context(*) { background-color: red; }')),
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-context 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:host-context { background-color: green; }')), 80 document.createTextNode('.host:host-context(*) { background-colo r: red; }')),
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-context 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:host-context { background-color: green; }')), 94 document.createTextNode('#host:host-context(*) { background-colo r: red; }')),
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-context 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]:host-context { background-col or: green; }')), 108 document.createTextNode('[foo=bar]:host-context(*) { background- color: red; }')),
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-context 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(
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after
157 cleanUp(); 157 cleanUp();
158 158
159 debug(':host-context matches a shadow host in just a nested shadow tree, not all enclosing 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(':host-context { background-colo r: green; }')), 167 document.createTextNode(':host-context(*) { background-c olor: 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(':host-context 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'},
(...skipping 78 matching lines...) Expand 10 before | Expand all | Expand 10 after
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 :host-context with :host-context.'); 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(':host-context(div:host-context, div#san dbox) { background-color: green; }')), 266 document.createTextNode(':host-context(div:host-context(*), div# sandbox) { background-color: green; }')),
267 createDOM('style', {}, 267 createDOM('style', {},
268 document.createTextNode(':host-context(body.mytheme) { backgroun d-color: 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 // :host-context(div:host-context, div#sandbox) wins, because div#sandbox > body .mytheme. 272 // :host-context(div:host-context(*), div#sandbox) wins, because div#sandbox > b ody.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(':host-context(div:host-context, div#nom atch) { background-color: green; }')), 281 document.createTextNode(':host-context(div:host-context(*), div# nomatch) { background-color: green; }')),
282 createDOM('style', {}, 282 createDOM('style', {},
283 document.createTextNode(':host-context(body.mytheme) { backgroun d-color: 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 // :host-context(body.mytheme) wins, because div:host-context < 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 ":host-context(...) > ...". 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(':host-context(div:host-context, div#hos t:host-context) > div { background-color: green; }')), 297 document.createTextNode(':host-context(div:host-context(*), div# host:host-context(*)) > div { background-color: green; }')),
298 createDOM('style', {}, 298 createDOM('style', {},
299 document.createTextNode(':host-context(body.mytheme) > div { bac kground-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(':host-context(div:host-context, div#hos t.host:host-context) > div { background-color: green; }')), 311 document.createTextNode(':host-context(div:host-context(*), div# host.host:host-context(*)) > div { background-color: green; }')),
312 createDOM('style', {}, 312 createDOM('style', {},
313 document.createTextNode(':host-context(body) > div#target { back ground-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(':host-context(div:host-context(div:host -context(div:host-context(div:host-context)))) > div { background-color: green; }')), 325 document.createTextNode(':host-context(div:host-context(div:host -context(div:host-context(div:host-context(*))))) > div { background-color: gree n; }')),
326 createDOM('style', {}, 326 createDOM('style', {},
327 document.createTextNode(':host-context(div) > div { background-c olor: 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 debug(':host-context without functional notation should not match any shadow hos ts.');
336
337 sandbox.appendChild(
338 createDOM('div', {'id': 'host'},
339 createShadowRoot(
340 createDOM('style', {},
341 document.createTextNode(':host-context { background-color: red; }')),
342 createDOM('div', {},
343 document.createTextNode('Hello')))));
344
345 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');
346
347 cleanUp();
348
335 </script> 349 </script>
336 </body> 350 </body>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/dom/shadow/hostcontext-pseudo-class-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698