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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 210713002: Implement ::shadow pseudo element and replace /shadow/ with ::shadow. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Fixed patch conflict 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/style-and-shadow-element.html ('k') | LayoutTests/fast/dom/shadow/style-with-hat-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 17 matching lines...) Expand all
28 var text = 'borderColorOf(getNodeInTreeOfTrees("' + selector + '"))'; 28 var text = 'borderColorOf(getNodeInTreeOfTrees("' + selector + '"))';
29 var unevaledString = '"' + color.replace(/\\/g, "\\\\").replace(/"/g, "\"") + '"'; 29 var unevaledString = '"' + color.replace(/\\/g, "\\\\").replace(/"/g, "\"") + '"';
30 shouldNotBe(text, unevaledString); 30 shouldNotBe(text, unevaledString);
31 } 31 }
32 32
33 function cleanUp() 33 function cleanUp()
34 { 34 {
35 document.getElementById('sandbox').innerHTML = ''; 35 document.getElementById('sandbox').innerHTML = '';
36 } 36 }
37 37
38 description('Test for /shadow/ combinator, http://crbug.com/309504.'); 38 description('Test for ::shadow, http://crbug.com/309504.');
39 39
40 var sandbox = document.getElementById('sandbox'); 40 var sandbox = document.getElementById('sandbox');
41 41
42 sandbox.appendChild( 42 sandbox.appendChild(
43 createDOM('div', {}, 43 createDOM('div', {},
44 createDOM('style', {}, 44 createDOM('style', {},
45 document.createTextNode('div /shadow/ span { border: 1px solid green ; }')), 45 document.createTextNode('div::shadow > div { border: 1px solid green ; }')),
46 createDOM('div', {'id': 'host'},
47 createShadowRoot(
48 createDOM('div', {'id': 'top-div'},
49 createDOM('div', {'id': 'not-top-div'}),
50 createDOM('span', {'id': 'not-top-span'})),
51 createDOM('span', {'id': 'top-span'})))));
52
53 borderColorShouldBe('host/top-div', 'rgb(0, 128, 0)');
54 borderColorShouldNotBe('host/top-span', 'rgb(0, 128, 0)');
55 borderColorShouldNotBe('host/not-top-div', 'rgb(0, 128, 0)');
56 borderColorShouldNotBe('host/not-top-span', 'rgb(0, 128, 0)');
57
58 cleanUp();
59
60 sandbox.appendChild(
61 createDOM('div', {},
62 createDOM('style', {},
63 document.createTextNode('::shadow ::shadow ::shadow span { border: 1 px solid green; }')),
64 createDOM('div', {'id': 'host'},
65 createShadowRoot(
66 createDOM('span', {'id': 'span1'}),
67 createDOM('div', {'id': 'host1'},
68 createShadowRoot(
69 createDOM('span', {'id': 'span2'}),
70 createDOM('div', {'id': 'host2'},
71 createShadowRoot(
72 createDOM('span', {'id': 'span3'}),
73 createDOM('div', {'id': 'host3'},
74 createShadowRoot(
75 createDOM('span', {'id': 'span4'}))))))) ))));
76
77 borderColorShouldNotBe('host/span1', 'rgb(0, 128, 0)');
78 borderColorShouldNotBe('host/host1/span2', 'rgb(0, 128, 0)');
79 borderColorShouldBe('host/host1/host2/span3', 'rgb(0, 128, 0)');
80 borderColorShouldNotBe('host/host1/host2/host3/span4', 'rgb(0, 128, 0)');
81
82 cleanUp();
83
84 sandbox.appendChild(
85 createDOM('div', {},
86 createDOM('style', {},
87 document.createTextNode('div::shadow span { border: 1px solid green; }')),
46 createDOM('div', {'id': 'host'}, 88 createDOM('div', {'id': 'host'},
47 createShadowRoot( 89 createShadowRoot(
48 createDOM('span', {'id': 'target'}, 90 createDOM('span', {'id': 'target'},
49 document.createTextNode('green border, because of hat.'))))) ); 91 document.createTextNode('green border, because of hat.'))))) );
50 92
51 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); 93 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
52 94
53 cleanUp(); 95 cleanUp();
54 96
55 // Cascade order 97 // Cascade order
56 sandbox.appendChild( 98 sandbox.appendChild(
57 createDOM('div', {}, 99 createDOM('div', {},
58 createDOM('style', {}, 100 createDOM('style', {},
59 document.createTextNode('div /shadow/ span { border: 1px solid green ; }')), 101 document.createTextNode('div::shadow span { border: 1px solid green; }')),
60 createDOM('div', {'id': 'host'}, 102 createDOM('div', {'id': 'host'},
61 createShadowRoot( 103 createShadowRoot(
62 createDOM('style', {}, 104 createDOM('style', {},
63 document.createTextNode('span { border: 1px solid red; }')), 105 document.createTextNode('span { border: 1px solid red; }')),
64 createDOM('span', {'id': 'target'}, 106 createDOM('span', {'id': 'target'},
65 document.createTextNode('green border, because of hat.'))))) ); 107 document.createTextNode('green border, because of hat.'))))) );
66 108
67 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); 109 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
68 110
69 cleanUp(); 111 cleanUp();
70 112
71 sandbox.appendChild( 113 sandbox.appendChild(
72 createDOM('div', {}, 114 createDOM('div', {},
73 createDOM('style', {}, 115 createDOM('style', {},
74 document.createTextNode('div /shadow/ span { border: 1px solid green ; }')), 116 document.createTextNode('div::shadow span { border: 1px solid green; }')),
75 createDOM('div', {'id': 'host'}, 117 createDOM('div', {'id': 'host'},
76 createShadowRoot( 118 createShadowRoot(
77 createDOM('style', {}, 119 createDOM('style', {},
78 document.createTextNode('span#target { border: 1px solid red ; }')), 120 document.createTextNode('span#target { border: 1px solid red ; }')),
79 createDOM('span', {'id': 'target'}, 121 createDOM('span', {'id': 'target'},
80 document.createTextNode('green border, because of hat.'))))) ); 122 document.createTextNode('green border, because of hat.'))))) );
81 123
82 // Need to clarify the spec, i.e. using specificity? Currently rgb(255,0,0). 124 // Need to clarify the spec, i.e. using specificity? Currently rgb(255,0,0).
83 borderColorShouldBe('host/target', 'rgb(255, 0, 0)'); 125 borderColorShouldBe('host/target', 'rgb(255, 0, 0)');
84 126
85 cleanUp(); 127 cleanUp();
86 128
87 sandbox.appendChild( 129 sandbox.appendChild(
88 createDOM('div', {}, 130 createDOM('div', {},
89 createDOM('style', {}, 131 createDOM('style', {},
90 document.createTextNode('div#sandbox > div > div /shadow/ span { bor der: 1px solid green; }')), 132 document.createTextNode('div#sandbox > div > div::shadow span { bord er: 1px solid green; }')),
91 createDOM('div', {'id': 'host'}, 133 createDOM('div', {'id': 'host'},
92 createShadowRoot( 134 createShadowRoot(
93 createDOM('span', {'id': 'target'}, 135 createDOM('span', {'id': 'target'},
94 document.createTextNode('green border, because of hat.'))))) ); 136 document.createTextNode('green border, because of hat.'))))) );
95 137
96 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); 138 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
97 139
98 cleanUp(); 140 cleanUp();
99 141
100 sandbox.appendChild( 142 sandbox.appendChild(
101 createDOM('div', {}, 143 createDOM('div', {},
102 createDOM('style', {}, 144 createDOM('style', {},
103 document.createTextNode('div /shadow/ span { border: 1px solid green ; }')), 145 document.createTextNode('div::shadow span { border: 1px solid green; }')),
104 createDOM('div', {'id': 'host'}, 146 createDOM('div', {'id': 'host'},
105 createShadowRoot( 147 createShadowRoot(
106 createDOM('style', {}, 148 createDOM('style', {},
107 document.createTextNode('div > span { border: 1px solid red; }')), 149 document.createTextNode('div > span { border: 1px solid red; }')),
108 createDOM('div', {}, 150 createDOM('div', {},
109 createDOM('span', {'id': 'target'}, 151 createDOM('span', {'id': 'target'},
110 document.createTextNode('green border, because parent ha t wins.'))))))); 152 document.createTextNode('green border, because parent ha t wins.')))))));
111 153
112 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); 154 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
113 155
114 cleanUp(); 156 cleanUp();
115 157
116 sandbox.appendChild( 158 sandbox.appendChild(
117 createDOM('div', {}, 159 createDOM('div', {},
118 createDOM('style', {}, 160 createDOM('style', {},
119 document.createTextNode('div /shadow/ span { border: 1px solid green ; }')), 161 document.createTextNode('div::shadow span { border: 1px solid green; }')),
120 createDOM('div', {'id': 'host'}, 162 createDOM('div', {'id': 'host'},
121 createShadowRoot( 163 createShadowRoot(
122 createDOM('style', {}, 164 createDOM('style', {},
123 document.createTextNode(':host > span { border: 1px solid re d; }')), 165 document.createTextNode(':host > span { border: 1px solid re d; }')),
124 createDOM('span', {'id': 'target'}, 166 createDOM('span', {'id': 'target'},
125 document.createTextNode('red border because of specificity.' )))))); 167 document.createTextNode('red border because of specificity.' ))))));
126 168
127 // Since :host's specificity is the same as *, div /shadow/ span wins. 169 // Since :host's specificity is the same as *, div::shadow span wins.
128 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); 170 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
129 171
130 cleanUp(); 172 cleanUp();
131 173
132 sandbox.appendChild( 174 sandbox.appendChild(
133 createDOM('div', {'id': 'host'}, 175 createDOM('div', {'id': 'host'},
134 createShadowRoot( 176 createShadowRoot(
135 createDOM('style', {}, 177 createDOM('style', {},
136 document.createTextNode(':host /shadow/ span { border: 1px solid green; }')), 178 document.createTextNode(':host::shadow span { border: 1px solid green; }')),
137 createDOM('span', {}, 179 createDOM('span', {},
138 document.createTextNode('some text'))), 180 document.createTextNode('some text'))),
139 createShadowRoot( 181 createShadowRoot(
140 createDOM('shadow', {}), 182 createDOM('shadow', {}),
141 createDOM('span', {'id': 'target'}, 183 createDOM('span', {'id': 'target'},
142 document.createTextNode('green border'))))); 184 document.createTextNode('green border')))));
143 185
144 borderColorShouldBe('host//target', 'rgb(0, 128, 0)'); 186 borderColorShouldBe('host//target', 'rgb(0, 128, 0)');
145 187
146 cleanUp(); 188 cleanUp();
147 189
148 // div /shadow/ span's div cannot match a shadow host whose shadow tree contains the style. 190 // div::shadow span's div cannot match a shadow host whose shadow tree contains the style.
149 sandbox.appendChild( 191 sandbox.appendChild(
150 createDOM('div', {'id': 'host'}, 192 createDOM('div', {'id': 'host'},
151 createShadowRoot( 193 createShadowRoot(
152 createDOM('style', {}, 194 createDOM('style', {},
153 document.createTextNode('div /shadow/ span { border: 1px solid g reen; }')), 195 document.createTextNode('div::shadow span { border: 1px solid gr een; }')),
154 createDOM('span', {}, 196 createDOM('span', {},
155 document.createTextNode('some text'))), 197 document.createTextNode('some text'))),
156 createShadowRoot( 198 createShadowRoot(
157 createDOM('shadow', {}), 199 createDOM('shadow', {}),
158 createDOM('span', {'id': 'target'}, 200 createDOM('span', {'id': 'target'},
159 document.createTextNode('no border'))))); 201 document.createTextNode('no border')))));
160 202
161 borderColorShouldBe('host//target', 'rgb(0, 0, 0)'); 203 borderColorShouldBe('host//target', 'rgb(0, 0, 0)');
162 204
163 cleanUp(); 205 cleanUp();
164 206
165 207
166 // div /shadow/ span can match [div -- sr -- span] in its sibling shadow tree. 208 // div::shadow span can match [div -- sr -- span] in its sibling shadow tree.
167 sandbox.appendChild( 209 sandbox.appendChild(
168 createDOM('div', {'id': 'host'}, 210 createDOM('div', {'id': 'host'},
169 createShadowRoot( 211 createShadowRoot(
170 createDOM('style', {}, 212 createDOM('style', {},
171 document.createTextNode('div /shadow/ span { border: 1px solid g reen; }')), 213 document.createTextNode('div::shadow span { border: 1px solid gr een; }')),
172 createDOM('span', {}, 214 createDOM('span', {},
173 document.createTextNode('some text'))), 215 document.createTextNode('some text'))),
174 createShadowRoot( 216 createShadowRoot(
175 createDOM('shadow', {}), 217 createDOM('shadow', {}),
176 createDOM('div', {'id': 'host2'}, 218 createDOM('div', {'id': 'host2'},
177 createShadowRoot( 219 createShadowRoot(
178 createDOM('span', {'id': 'target'}, 220 createDOM('span', {'id': 'target'},
179 document.createTextNode('green border'))))))); 221 document.createTextNode('green border')))))));
180 222
181 borderColorShouldBe('host//host2/target', 'rgb(0, 128, 0)'); 223 borderColorShouldBe('host//host2/target', 'rgb(0, 128, 0)');
182 224
183 cleanUp(); 225 cleanUp();
184 226
185 // :host div /shadow/ div should match. 227 // :host div::shadow div should match.
186 sandbox.appendChild( 228 sandbox.appendChild(
187 createDOM('div', {'id': 'host'}, 229 createDOM('div', {'id': 'host'},
188 createShadowRoot( 230 createShadowRoot(
189 createDOM('style', {}, 231 createDOM('style', {},
190 document.createTextNode(':host div /shadow/ div { border: 1px so lid green; }')), 232 document.createTextNode(':host div::shadow div { border: 1px sol id green; }')),
191 createDOM('div', {'id': 'host2'}, 233 createDOM('div', {'id': 'host2'},
192 createShadowRoot( 234 createShadowRoot(
193 createDOM('div', {'id': 'target'}, 235 createDOM('div', {'id': 'target'},
194 document.createTextNode('green border'))))))); 236 document.createTextNode('green border')))))));
195 237
196 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)'); 238 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)');
197 239
198 cleanUp(); 240 cleanUp();
199 241
200 // div:host 242 // div:host
201 sandbox.appendChild( 243 sandbox.appendChild(
202 createDOM('div', {'id': 'host'}, 244 createDOM('div', {'id': 'host'},
203 createShadowRoot( 245 createShadowRoot(
204 createDOM('style', {}, 246 createDOM('style', {},
205 document.createTextNode('div:host /shadow/ span { border: 1px so lid green; }')), 247 document.createTextNode('div:host::shadow span { border: 1px sol id green; }')),
206 createDOM('span', {'id': 'target'}, 248 createDOM('span', {'id': 'target'},
207 document.createTextNode('no border, because div:host matches not hing.'))))); 249 document.createTextNode('no border, because div:host matches not hing.')))));
208 250
209 borderColorShouldBe('host/target', 'rgb(0, 0, 0)'); 251 borderColorShouldBe('host/target', 'rgb(0, 0, 0)');
210 252
211 cleanUp(); 253 cleanUp();
212 254
213 // div (=shadow host) div /shadow/ div should not match. 255 // div (=shadow host) div::shadow div should not match.
214 256
215 sandbox.appendChild( 257 sandbox.appendChild(
216 createDOM('div', {'id': 'host'}, 258 createDOM('div', {'id': 'host'},
217 createShadowRoot( 259 createShadowRoot(
218 createDOM('style', {}, 260 createDOM('style', {},
219 document.createTextNode('div > div /shadow/ div { border: 1px so lid green; }')), 261 document.createTextNode('div > div::shadow div { border: 1px sol id green; }')),
220 createDOM('div', {'id': 'host2'}, 262 createDOM('div', {'id': 'host2'},
221 createShadowRoot( 263 createShadowRoot(
222 createDOM('div', {'id': 'target'}, 264 createDOM('div', {'id': 'target'},
223 document.createTextNode('no border'))))))); 265 document.createTextNode('no border')))))));
224 266
225 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)'); 267 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)');
226 268
227 cleanUp(); 269 cleanUp();
228 270
229 // div + div /shadow/ div should match. 271 // div + div::shadow div should match.
230 272
231 sandbox.appendChild( 273 sandbox.appendChild(
232 createDOM('div', {'id': 'host'}, 274 createDOM('div', {'id': 'host'},
233 createShadowRoot( 275 createShadowRoot(
234 createDOM('style', {}, 276 createDOM('style', {},
235 document.createTextNode('div + div /shadow/ div { border: 1px so lid green; }')), 277 document.createTextNode('div + div::shadow div { border: 1px sol id green; }')),
236 createDOM('div', {}, 278 createDOM('div', {},
237 document.createTextNode('sibling')), 279 document.createTextNode('sibling')),
238 createDOM('div', {'id': 'host2'}, 280 createDOM('div', {'id': 'host2'},
239 createShadowRoot( 281 createShadowRoot(
240 createDOM('div', {'id': 'target'}, 282 createDOM('div', {'id': 'target'},
241 document.createTextNode('green border'))))))); 283 document.createTextNode('green border')))))));
242 284
243 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)'); 285 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)');
244 286
245 cleanUp(); 287 cleanUp();
246 288
247 // :host + div /shadow/ div should not match. 289 // :host + div::shadow div should not match.
248 290
249 sandbox.appendChild( 291 sandbox.appendChild(
250 createDOM('div', {'id': 'host'}, 292 createDOM('div', {'id': 'host'},
251 createShadowRoot( 293 createShadowRoot(
252 createDOM('style', {}, 294 createDOM('style', {},
253 document.createTextNode(':host + div /shadow/ div { border: 1px solid green; }')), 295 document.createTextNode(':host + div::shadow div { border: 1px s olid green; }')),
254 createDOM('div', {'id': 'siblingShadow'}, 296 createDOM('div', {'id': 'siblingShadow'},
255 createShadowRoot( 297 createShadowRoot(
256 createDOM('div', {}, 298 createDOM('div', {},
257 document.createTextNode('sibling')))), 299 document.createTextNode('sibling')))),
258 createDOM('div', {'id': 'host2'}, 300 createDOM('div', {'id': 'host2'},
259 createShadowRoot( 301 createShadowRoot(
260 createDOM('div', {'id': 'target'}, 302 createDOM('div', {'id': 'target'},
261 document.createTextNode('no border'))))))); 303 document.createTextNode('no border')))))));
262 304
263 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)'); 305 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)');
264 306
265 cleanUp(); 307 cleanUp();
266 308
267 // div /shadow/ span in an older shadow tree cannot match any element in active shadow tree. 309 // div::shadow span in an insert shadow tree cannot match any element in active shadow tree.
268 sandbox.appendChild( 310 sandbox.appendChild(
269 createDOM('div', {'id': 'host'}, 311 createDOM('div', {'id': 'host'},
270 createShadowRoot( 312 createShadowRoot(
271 createDOM('style', {}, 313 createDOM('style', {},
272 document.createTextNode('div /shadow/ span { border: 1px solid g reen; }')), 314 document.createTextNode('div::shadow span { border: 1px solid gr een; }')),
273 createDOM('span', {}, 315 createDOM('span', {},
274 document.createTextNode('some text'))), 316 document.createTextNode('some text'))),
275 createShadowRoot( 317 createShadowRoot(
276 createDOM('div', {'id': 'host2'}, 318 createDOM('div', {'id': 'host2'},
277 createShadowRoot( 319 createShadowRoot(
278 createDOM('span', {'id': 'target'}, 320 createDOM('span', {'id': 'target'},
279 document.createTextNode('green border'))))))); 321 document.createTextNode('green border')))))));
280 322
281 borderColorShouldBe('host//host2/target', 'rgb(0, 128, 0)'); 323 borderColorShouldBe('host//host2/target', 'rgb(0, 128, 0)');
282 324
283 cleanUp(); 325 cleanUp();
284 326
285 </script> 327 </script>
286 </html> 328 </html>
287 329
OLDNEW
« no previous file with comments | « LayoutTests/fast/dom/shadow/style-and-shadow-element.html ('k') | LayoutTests/fast/dom/shadow/style-with-hat-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698