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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/dom/shadow/style-with-shadow-pseudo-element.html

Issue 2843883002: Remove, or rewrite if necessary, tests which use /deep/ or ::shadow (Closed)
Patch Set: Created 3 years, 7 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
« third_party/WebKit/LayoutTests/fast/dom/shadow/dynamically-created-shadow-root.html ('K') | « third_party/WebKit/LayoutTests/fast/dom/shadow/style-with-deep-combinator-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/dom/shadow/style-with-shadow-pseudo-element-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
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="resources/shadow-dom.js"></script>
5 <script src="../../../resources/js-test.js"></script>
6 </head>
7 <body>
8 <div id='sandbox'></div>
9 <pre id='console'></pre>
10 </body>
11 <script>
12
13 var borderColor;
14
15 function borderColorOf(node)
16 {
17 return document.defaultView.getComputedStyle(node, null).getPropertyValue('b order-color');
18 }
19
20 function borderColorShouldBe(selector, color)
21 {
22 var text = 'borderColorOf(getNodeInComposedTree("' + selector + '"))';
23 shouldBeEqualToString(text, color);
24 }
25
26 function borderColorShouldNotBe(selector, color)
27 {
28 var text = 'borderColorOf(getNodeInComposedTree("' + selector + '"))';
29 var unevaledString = '"' + color.replace(/\\/g, "\\\\").replace(/"/g, "\"") + '"';
30 shouldNotBe(text, unevaledString);
31 }
32
33 function cleanUp()
34 {
35 document.getElementById('sandbox').innerHTML = '';
36 }
37
38 description('Test for ::shadow, http://crbug.com/309504.');
39
40 var sandbox = document.getElementById('sandbox');
41
42 sandbox.appendChild(
43 createDOM('div', {},
44 createDOM('style', {},
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; }')),
88 createDOM('div', {'id': 'host'},
89 createShadowRoot(
90 createDOM('span', {'id': 'target'},
91 document.createTextNode('green border, because of ::shadow.' ))))));
92
93 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
94
95 cleanUp();
96
97 // Cascade order
98 sandbox.appendChild(
99 createDOM('div', {},
100 createDOM('style', {},
101 document.createTextNode('div::shadow span { border: 1px solid green; }')),
102 createDOM('div', {'id': 'host'},
103 createShadowRoot(
104 createDOM('style', {},
105 document.createTextNode('span { border: 1px solid red; }')),
106 createDOM('span', {'id': 'target'},
107 document.createTextNode('green border, because of ::shadow.' ))))));
108
109 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
110
111 cleanUp();
112
113 sandbox.appendChild(
114 createDOM('div', {},
115 createDOM('style', {},
116 document.createTextNode('div::shadow span { border: 1px solid green; }')),
117 createDOM('div', {'id': 'host'},
118 createShadowRoot(
119 createDOM('style', {},
120 document.createTextNode('span#target { border: 1px solid red ; }')),
121 createDOM('span', {'id': 'target'},
122 document.createTextNode('green border, because of ::shadow.' ))))));
123
124 borderColorShouldBe('host/target', 'rgb(255, 0, 0)');
125
126 cleanUp();
127
128 sandbox.appendChild(
129 createDOM('div', {},
130 createDOM('style', {},
131 document.createTextNode('div#sandbox > div > div::shadow span { bord er: 1px solid green; }')),
132 createDOM('div', {'id': 'host'},
133 createShadowRoot(
134 createDOM('span', {'id': 'target'},
135 document.createTextNode('green border, because of ::shadow.' ))))));
136
137 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
138
139 cleanUp();
140
141 sandbox.appendChild(
142 createDOM('div', {},
143 createDOM('style', {},
144 document.createTextNode('div::shadow span { border: 1px solid green; }')),
145 createDOM('div', {'id': 'host'},
146 createShadowRoot(
147 createDOM('style', {},
148 document.createTextNode('div > span { border: 1px solid red; }')),
149 createDOM('div', {},
150 createDOM('span', {'id': 'target'},
151 document.createTextNode('green border, because parent :: shadow wins.')))))));
152
153 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
154
155 cleanUp();
156
157 sandbox.appendChild(
158 createDOM('div', {},
159 createDOM('style', {},
160 document.createTextNode('div::shadow span { border: 1px solid green; }')),
161 createDOM('div', {'id': 'host'},
162 createShadowRoot(
163 createDOM('style', {},
164 document.createTextNode(':host > span { border: 1px solid re d; }')),
165 createDOM('span', {'id': 'target'},
166 document.createTextNode('red border because of specificity.' ))))));
167
168 // Since :host's specificity is the same as *, div::shadow span wins.
169 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
170
171 cleanUp();
172
173 sandbox.appendChild(
174 createDOM('div', {'id': 'host'},
175 createShadowRoot(
176 createDOM('style', {},
177 document.createTextNode(':host::shadow span { border: 1px solid green; }')),
178 createDOM('span', {},
179 document.createTextNode('some text'))),
180 createShadowRoot(
181 createDOM('shadow', {}),
182 createDOM('span', {'id': 'target'},
183 document.createTextNode('green border')))));
184
185 borderColorShouldBe('host//target', 'rgb(0, 128, 0)');
186
187 cleanUp();
188
189 // div::shadow span's div cannot match a shadow host whose shadow tree contains the style.
190 sandbox.appendChild(
191 createDOM('div', {'id': 'host'},
192 createShadowRoot(
193 createDOM('style', {},
194 document.createTextNode('div::shadow span { border: 1px solid gr een; }')),
195 createDOM('span', {},
196 document.createTextNode('some text'))),
197 createShadowRoot(
198 createDOM('shadow', {}),
199 createDOM('span', {'id': 'target'},
200 document.createTextNode('no border')))));
201
202 borderColorShouldBe('host//target', 'rgb(0, 0, 0)');
203
204 cleanUp();
205
206 // :host div::shadow div should match.
207 sandbox.appendChild(
208 createDOM('div', {'id': 'host'},
209 createShadowRoot(
210 createDOM('style', {},
211 document.createTextNode(':host div::shadow div { border: 1px sol id green; }')),
212 createDOM('div', {'id': 'host2'},
213 createShadowRoot(
214 createDOM('div', {'id': 'target'},
215 document.createTextNode('green border')))))));
216
217 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)');
218
219 cleanUp();
220
221 // div:host
222 sandbox.appendChild(
223 createDOM('div', {'id': 'host'},
224 createShadowRoot(
225 createDOM('style', {},
226 document.createTextNode('div:host::shadow span { border: 1px sol id green; }')),
227 createDOM('span', {'id': 'target'},
228 document.createTextNode('no border, because div:host matches not hing.')))));
229
230 borderColorShouldBe('host/target', 'rgb(0, 0, 0)');
231
232 cleanUp();
233
234 // div (=shadow host) div::shadow div should not match.
235
236 sandbox.appendChild(
237 createDOM('div', {'id': 'host'},
238 createShadowRoot(
239 createDOM('style', {},
240 document.createTextNode('div > div::shadow div { border: 1px sol id green; }')),
241 createDOM('div', {'id': 'host2'},
242 createShadowRoot(
243 createDOM('div', {'id': 'target'},
244 document.createTextNode('no border')))))));
245
246 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)');
247
248 cleanUp();
249
250 // div + div::shadow div should match.
251
252 sandbox.appendChild(
253 createDOM('div', {'id': 'host'},
254 createShadowRoot(
255 createDOM('style', {},
256 document.createTextNode('div + div::shadow div { border: 1px sol id green; }')),
257 createDOM('div', {},
258 document.createTextNode('sibling')),
259 createDOM('div', {'id': 'host2'},
260 createShadowRoot(
261 createDOM('div', {'id': 'target'},
262 document.createTextNode('green border')))))));
263
264 borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)');
265
266 cleanUp();
267
268 // :host + div::shadow div should not match.
269
270 sandbox.appendChild(
271 createDOM('div', {'id': 'host'},
272 createShadowRoot(
273 createDOM('style', {},
274 document.createTextNode(':host + div::shadow div { border: 1px s olid green; }')),
275 createDOM('div', {'id': 'siblingShadow'},
276 createShadowRoot(
277 createDOM('div', {},
278 document.createTextNode('sibling')))),
279 createDOM('div', {'id': 'host2'},
280 createShadowRoot(
281 createDOM('div', {'id': 'target'},
282 document.createTextNode('no border')))))));
283
284 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)');
285
286 cleanUp();
287
288 sandbox.appendChild(
289 createDOM('div', {'id': 'host'},
290 createShadowRoot(
291 createDOM('style', {},
292 document.createTextNode('.x-bar .x-zot::shadow div { border: 1px solid red; }')),
293 createDOM('div', {'id': 'x-foo'},
294 document.createTextNode('x-foo')),
295 createDOM('div', {'id': 'x-bar-host', 'class': 'x-bar'},
296 createShadowRoot(
297 createDOM('div', {'id': 'x-bar-target'},
298 document.createTextNode('x-bar')),
299 createDOM('div', {'id': 'x-zot-host', 'class': 'x-zot'},
300 createShadowRoot(
301 createDOM('div', {'id': 'x-zot-target'},
302 document.createTextNode('x-zot')))))))));
303
304 borderColorShouldNotBe('host/x-bar-host/x-zot-host/x-zot-target', 'rgb(255, 0, 0 )');
305 cleanUp();
306
307 </script>
308 </html>
OLDNEW
« third_party/WebKit/LayoutTests/fast/dom/shadow/dynamically-created-shadow-root.html ('K') | « third_party/WebKit/LayoutTests/fast/dom/shadow/style-with-deep-combinator-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/dom/shadow/style-with-shadow-pseudo-element-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698