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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 183803016: Rename ^ and ^^ combinator to /shadow-all/ and /shadow-deep/. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: 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-with-cat-expected.txt ('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 ^ combinator, http://crbug.com/309504.'); 38 description('Test for /shadow-all/ combinator, 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 ^ span { border: 1px solid green; }')), 45 document.createTextNode('div /shadow-all/ span { border: 1px solid g reen; }')),
46 createDOM('div', {'id': 'host'}, 46 createDOM('div', {'id': 'host'},
47 createShadowRoot( 47 createShadowRoot(
48 createDOM('span', {'id': 'target'}, 48 createDOM('span', {'id': 'target'},
49 document.createTextNode('green border, because of hat.'))))) ); 49 document.createTextNode('green border, because of hat.'))))) );
50 50
51 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); 51 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
52 52
53 cleanUp(); 53 cleanUp();
54 54
55 // Cascade order 55 // Cascade order
56 sandbox.appendChild( 56 sandbox.appendChild(
57 createDOM('div', {}, 57 createDOM('div', {},
58 createDOM('style', {}, 58 createDOM('style', {},
59 document.createTextNode('div ^ span { border: 1px solid green; }')), 59 document.createTextNode('div /shadow-all/ span { border: 1px solid g reen; }')),
60 createDOM('div', {'id': 'host'}, 60 createDOM('div', {'id': 'host'},
61 createShadowRoot( 61 createShadowRoot(
62 createDOM('style', {}, 62 createDOM('style', {},
63 document.createTextNode('span { border: 1px solid red; }')), 63 document.createTextNode('span { border: 1px solid red; }')),
64 createDOM('span', {'id': 'target'}, 64 createDOM('span', {'id': 'target'},
65 document.createTextNode('green border, because of hat.'))))) ); 65 document.createTextNode('green border, because of hat.'))))) );
66 66
67 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); 67 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
68 68
69 cleanUp(); 69 cleanUp();
70 70
71 sandbox.appendChild( 71 sandbox.appendChild(
72 createDOM('div', {}, 72 createDOM('div', {},
73 createDOM('style', {}, 73 createDOM('style', {},
74 document.createTextNode('div ^ span { border: 1px solid green; }')), 74 document.createTextNode('div /shadow-all/ span { border: 1px solid g reen; }')),
75 createDOM('div', {'id': 'host'}, 75 createDOM('div', {'id': 'host'},
76 createShadowRoot( 76 createShadowRoot(
77 createDOM('style', {}, 77 createDOM('style', {},
78 document.createTextNode('span#target { border: 1px solid red ; }')), 78 document.createTextNode('span#target { border: 1px solid red ; }')),
79 createDOM('span', {'id': 'target'}, 79 createDOM('span', {'id': 'target'},
80 document.createTextNode('green border, because of hat.'))))) ); 80 document.createTextNode('green border, because of hat.'))))) );
81 81
82 // Need to clarify the spec, i.e. using specificity? Currently rgb(255,0,0). 82 // Need to clarify the spec, i.e. using specificity? Currently rgb(255,0,0).
83 borderColorShouldBe('host/target', 'rgb(255, 0, 0)'); 83 borderColorShouldBe('host/target', 'rgb(255, 0, 0)');
84 84
85 cleanUp(); 85 cleanUp();
86 86
87 sandbox.appendChild( 87 sandbox.appendChild(
88 createDOM('div', {}, 88 createDOM('div', {},
89 createDOM('style', {}, 89 createDOM('style', {},
90 document.createTextNode('div#sandbox > div > div ^ span { border: 1p x solid green; }')), 90 document.createTextNode('div#sandbox > div > div /shadow-all/ span { border: 1px solid green; }')),
91 createDOM('div', {'id': 'host'}, 91 createDOM('div', {'id': 'host'},
92 createShadowRoot( 92 createShadowRoot(
93 createDOM('span', {'id': 'target'}, 93 createDOM('span', {'id': 'target'},
94 document.createTextNode('green border, because of hat.'))))) ); 94 document.createTextNode('green border, because of hat.'))))) );
95 95
96 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); 96 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
97 97
98 cleanUp(); 98 cleanUp();
99 99
100 sandbox.appendChild( 100 sandbox.appendChild(
101 createDOM('div', {}, 101 createDOM('div', {},
102 createDOM('style', {}, 102 createDOM('style', {},
103 document.createTextNode('div ^ span { border: 1px solid green; }')), 103 document.createTextNode('div /shadow-all/ span { border: 1px solid g reen; }')),
104 createDOM('div', {'id': 'host'}, 104 createDOM('div', {'id': 'host'},
105 createShadowRoot( 105 createShadowRoot(
106 createDOM('style', {}, 106 createDOM('style', {},
107 document.createTextNode('div > span { border: 1px solid red; }')), 107 document.createTextNode('div > span { border: 1px solid red; }')),
108 createDOM('div', {}, 108 createDOM('div', {},
109 createDOM('span', {'id': 'target'}, 109 createDOM('span', {'id': 'target'},
110 document.createTextNode('green border, because parent ha t wins.'))))))); 110 document.createTextNode('green border, because parent ha t wins.')))))));
111 111
112 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); 112 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
113 113
114 cleanUp(); 114 cleanUp();
115 115
116 sandbox.appendChild( 116 sandbox.appendChild(
117 createDOM('div', {}, 117 createDOM('div', {},
118 createDOM('style', {}, 118 createDOM('style', {},
119 document.createTextNode('div ^ span { border: 1px solid green; }')), 119 document.createTextNode('div /shadow-all/ span { border: 1px solid g reen; }')),
120 createDOM('div', {'id': 'host'}, 120 createDOM('div', {'id': 'host'},
121 createShadowRoot( 121 createShadowRoot(
122 createDOM('style', {}, 122 createDOM('style', {},
123 document.createTextNode(':host > span { border: 1px solid re d; }')), 123 document.createTextNode(':host > span { border: 1px solid re d; }')),
124 createDOM('span', {'id': 'target'}, 124 createDOM('span', {'id': 'target'},
125 document.createTextNode('red border because of specificity.' )))))); 125 document.createTextNode('red border because of specificity.' ))))));
126 126
127 // Since :host's specificity is the same as *, div ^^ span wins. 127 // Since :host's specificity is the same as *, div /shadow-all/ span wins.
128 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); 128 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
129 129
130 cleanUp(); 130 cleanUp();
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(':host ^ span { border: 1px solid green; }')), 136 document.createTextNode(':host /shadow-all/ span { border: 1px s olid green; }')),
137 createDOM('span', {}, 137 createDOM('span', {},
138 document.createTextNode('some text'))), 138 document.createTextNode('some text'))),
139 createShadowRoot( 139 createShadowRoot(
140 createDOM('shadow', {}), 140 createDOM('shadow', {}),
141 createDOM('span', {'id': 'target'}, 141 createDOM('span', {'id': 'target'},
142 document.createTextNode('green border'))))); 142 document.createTextNode('green border')))));
143 143
144 borderColorShouldBe('host//target', 'rgb(0, 128, 0)'); 144 borderColorShouldBe('host//target', 'rgb(0, 128, 0)');
145 145
146 cleanUp(); 146 cleanUp();
147 147
148 // div ^ span's div cannot match a shadow host whose shadow tree contains the st yle. 148 // div /shadow-all/ span's div cannot match a shadow host whose shadow tree cont ains the style.
149 sandbox.appendChild( 149 sandbox.appendChild(
150 createDOM('div', {'id': 'host'}, 150 createDOM('div', {'id': 'host'},
151 createShadowRoot( 151 createShadowRoot(
152 createDOM('style', {}, 152 createDOM('style', {},
153 document.createTextNode('div ^ span { border: 1px solid green; } ')), 153 document.createTextNode('div /shadow-all/ span { border: 1px sol id green; }')),
154 createDOM('span', {}, 154 createDOM('span', {},
155 document.createTextNode('some text'))), 155 document.createTextNode('some text'))),
156 createShadowRoot( 156 createShadowRoot(
157 createDOM('shadow', {}), 157 createDOM('shadow', {}),
158 createDOM('span', {'id': 'target'}, 158 createDOM('span', {'id': 'target'},
159 document.createTextNode('no border'))))); 159 document.createTextNode('no border')))));
160 160
161 borderColorShouldBe('host//target', 'rgb(0, 0, 0)'); 161 borderColorShouldBe('host//target', 'rgb(0, 0, 0)');
162 162
163 cleanUp(); 163 cleanUp();
164 164
165 165
166 // div ^ span can match [div -- sr -- span] in its sibling shadow tree. 166 // div /shadow-all/ span can match [div -- sr -- span] in its sibling shadow tre e.
167 sandbox.appendChild( 167 sandbox.appendChild(
168 createDOM('div', {'id': 'host'}, 168 createDOM('div', {'id': 'host'},
169 createShadowRoot( 169 createShadowRoot(
170 createDOM('style', {}, 170 createDOM('style', {},
171 document.createTextNode('div ^ span { border: 1px solid green; } ')), 171 document.createTextNode('div /shadow-all/ span { border: 1px sol id green; }')),
172 createDOM('span', {}, 172 createDOM('span', {},
173 document.createTextNode('some text'))), 173 document.createTextNode('some text'))),
174 createShadowRoot( 174 createShadowRoot(
175 createDOM('shadow', {}), 175 createDOM('shadow', {}),
176 createDOM('div', {'id': 'host2'}, 176 createDOM('div', {'id': 'host2'},
177 createShadowRoot( 177 createShadowRoot(
178 createDOM('span', {'id': 'target'}, 178 createDOM('span', {'id': 'target'},
179 document.createTextNode('green border'))))))); 179 document.createTextNode('green border')))))));
180 180
181 borderColorShouldBe('host//host2/target', 'rgb(0, 128, 0)'); 181 borderColorShouldBe('host//host2/target', 'rgb(0, 128, 0)');
182 182
183 cleanUp(); 183 cleanUp();
184 184
185 // :host div ^ div should match. 185 // :host div /shadow-all/ div should match.
186 sandbox.appendChild( 186 sandbox.appendChild(
187 createDOM('div', {'id': 'host'}, 187 createDOM('div', {'id': 'host'},
188 createShadowRoot( 188 createShadowRoot(
189 createDOM('style', {}, 189 createDOM('style', {},
190 document.createTextNode(':host div ^ div { border: 1px solid gre en; }')), 190 document.createTextNode(':host div /shadow-all/ div { border: 1p x solid green; }')),
191 createDOM('div', {'id': 'host2'}, 191 createDOM('div', {'id': 'host2'},
192 createShadowRoot( 192 createShadowRoot(
193 createDOM('div', {'id': 'target'}, 193 createDOM('div', {'id': 'target'},
194 document.createTextNode('green border'))))))); 194 document.createTextNode('green border')))))));
195 195
196 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)'); 196 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)');
197 197
198 cleanUp(); 198 cleanUp();
199 199
200 // div:host 200 // div:host
201 sandbox.appendChild( 201 sandbox.appendChild(
202 createDOM('div', {'id': 'host'}, 202 createDOM('div', {'id': 'host'},
203 createShadowRoot( 203 createShadowRoot(
204 createDOM('style', {}, 204 createDOM('style', {},
205 document.createTextNode('div:host ^ span { border: 1px solid gre en; }')), 205 document.createTextNode('div:host /shadow-all/ span { border: 1p x solid green; }')),
206 createDOM('span', {'id': 'target'}, 206 createDOM('span', {'id': 'target'},
207 document.createTextNode('no border, because div:host matches not hing.'))))); 207 document.createTextNode('no border, because div:host matches not hing.')))));
208 208
209 borderColorShouldBe('host/target', 'rgb(0, 0, 0)'); 209 borderColorShouldBe('host/target', 'rgb(0, 0, 0)');
210 210
211 cleanUp(); 211 cleanUp();
212 212
213 // div (=shadow host) div ^ div should not match. 213 // div (=shadow host) div /shadow-all/ div should not match.
214 214
215 sandbox.appendChild( 215 sandbox.appendChild(
216 createDOM('div', {'id': 'host'}, 216 createDOM('div', {'id': 'host'},
217 createShadowRoot( 217 createShadowRoot(
218 createDOM('style', {}, 218 createDOM('style', {},
219 document.createTextNode('div > div ^ div { border: 1px solid gre en; }')), 219 document.createTextNode('div > div /shadow-all/ div { border: 1p x solid green; }')),
220 createDOM('div', {'id': 'host2'}, 220 createDOM('div', {'id': 'host2'},
221 createShadowRoot( 221 createShadowRoot(
222 createDOM('div', {'id': 'target'}, 222 createDOM('div', {'id': 'target'},
223 document.createTextNode('no border'))))))); 223 document.createTextNode('no border')))))));
224 224
225 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)'); 225 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)');
226 226
227 cleanUp(); 227 cleanUp();
228 228
229 // div + div ^ div should match. 229 // div + div /shadow-all/ div should match.
230 230
231 sandbox.appendChild( 231 sandbox.appendChild(
232 createDOM('div', {'id': 'host'}, 232 createDOM('div', {'id': 'host'},
233 createShadowRoot( 233 createShadowRoot(
234 createDOM('style', {}, 234 createDOM('style', {},
235 document.createTextNode('div + div ^ div { border: 1px solid gre en; }')), 235 document.createTextNode('div + div /shadow-all/ div { border: 1p x solid green; }')),
236 createDOM('div', {}, 236 createDOM('div', {},
237 document.createTextNode('sibling')), 237 document.createTextNode('sibling')),
238 createDOM('div', {'id': 'host2'}, 238 createDOM('div', {'id': 'host2'},
239 createShadowRoot( 239 createShadowRoot(
240 createDOM('div', {'id': 'target'}, 240 createDOM('div', {'id': 'target'},
241 document.createTextNode('green border'))))))); 241 document.createTextNode('green border')))))));
242 242
243 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)'); 243 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)');
244 244
245 cleanUp(); 245 cleanUp();
246 246
247 // :host + div ^ div should not match. 247 // :host + div /shadow-all/ div should not match.
248 248
249 sandbox.appendChild( 249 sandbox.appendChild(
250 createDOM('div', {'id': 'host'}, 250 createDOM('div', {'id': 'host'},
251 createShadowRoot( 251 createShadowRoot(
252 createDOM('style', {}, 252 createDOM('style', {},
253 document.createTextNode(':host + div ^ div { border: 1px solid g reen; }')), 253 document.createTextNode(':host + div /shadow-all/ div { border: 1px solid green; }')),
254 createDOM('div', {'id': 'siblingShadow'}, 254 createDOM('div', {'id': 'siblingShadow'},
255 createShadowRoot( 255 createShadowRoot(
256 createDOM('div', {}, 256 createDOM('div', {},
257 document.createTextNode('sibling')))), 257 document.createTextNode('sibling')))),
258 createDOM('div', {'id': 'host2'}, 258 createDOM('div', {'id': 'host2'},
259 createShadowRoot( 259 createShadowRoot(
260 createDOM('div', {'id': 'target'}, 260 createDOM('div', {'id': 'target'},
261 document.createTextNode('no border'))))))); 261 document.createTextNode('no border')))))));
262 262
263 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)'); 263 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)');
264 264
265 cleanUp(); 265 cleanUp();
266 266
267 // div ^ span in an insert shadow tree cannot match any element in active shadow tree. 267 // div /shadow-all/ span in an insert shadow tree cannot match any element in ac tive shadow tree.
268 sandbox.appendChild( 268 sandbox.appendChild(
269 createDOM('div', {'id': 'host'}, 269 createDOM('div', {'id': 'host'},
270 createShadowRoot( 270 createShadowRoot(
271 createDOM('style', {}, 271 createDOM('style', {},
272 document.createTextNode('div ^ span { border: 1px solid red; }') ), 272 document.createTextNode('div /shadow-all/ span { border: 1px sol id red; }')),
273 createDOM('span', {}, 273 createDOM('span', {},
274 document.createTextNode('some text'))), 274 document.createTextNode('some text'))),
275 createShadowRoot( 275 createShadowRoot(
276 createDOM('div', {'id': 'host2'}, 276 createDOM('div', {'id': 'host2'},
277 createShadowRoot( 277 createShadowRoot(
278 createDOM('span', {'id': 'target'}, 278 createDOM('span', {'id': 'target'},
279 document.createTextNode('green border'))))))); 279 document.createTextNode('green border')))))));
280 280
281 borderColorShouldNotBe('host//host2/target', 'rgb(255, 0, 0)'); 281 borderColorShouldNotBe('host//host2/target', 'rgb(255, 0, 0)');
282 282
283 cleanUp(); 283 cleanUp();
284 284
285 </script> 285 </script>
286 </html> 286 </html>
287 287
OLDNEW
« no previous file with comments | « LayoutTests/fast/dom/shadow/style-with-cat-expected.txt ('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