OLD | NEW |
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 :ancestor { |
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> |
18 description('Test whether :host matches a shadow host correctly.'); | 18 description('Test whether :ancestor matches a shadow host correctly.'); |
19 | 19 |
20 var sandbox = document.getElementById('sandbox'); | 20 var sandbox = document.getElementById('sandbox'); |
21 | 21 |
22 function backgroundColorOf(selector) { | 22 function backgroundColorOf(selector) { |
23 return window.getComputedStyle(getNodeInTreeOfTrees(selector)).backgroundCol
or; | 23 return window.getComputedStyle(getNodeInTreeOfTrees(selector)).backgroundCol
or; |
24 } | 24 } |
25 | 25 |
26 function backgroundColorShouldBe(selector, expected) { | 26 function backgroundColorShouldBe(selector, expected) { |
27 shouldBeEqualToString('backgroundColorOf(\'' + selector + '\')', expected); | 27 shouldBeEqualToString('backgroundColorOf(\'' + selector + '\')', expected); |
28 } | 28 } |
29 | 29 |
30 function cleanUp() { | 30 function cleanUp() { |
31 sandbox.innerHTML = ''; | 31 sandbox.innerHTML = ''; |
32 } | 32 } |
33 | 33 |
34 debug(':host out of shadow tree should not match any shadow hosts.'); | 34 debug(':ancestor out of shadow tree should not match any shadow hosts.'); |
35 | 35 |
36 sandbox.appendChild( | 36 sandbox.appendChild( |
37 createDOM('div', {'id': 'host'}, | 37 createDOM('div', {'id': 'host'}, |
38 createShadowRoot( | 38 createShadowRoot( |
39 createDOM('div', {}, | 39 createDOM('div', {}, |
40 document.createTextNode('Hello'))))); | 40 document.createTextNode('Hello'))))); |
41 | 41 |
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 with * should not match any shadow hosts.'); | 46 debug(':ancestor 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 { background-color: green; }')), | 52 document.createTextNode('*:ancestor { background-color: green; }
')), |
53 createDOM('div', {}, | 53 createDOM('div', {}, |
54 document.createTextNode('Hello'))))); | 54 document.createTextNode('Hello'))))); |
55 | 55 |
56 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); | 56 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
57 | 57 |
58 cleanUp(); | 58 cleanUp(); |
59 | 59 |
60 debug(':host with tag selector should not match any shadow hosts.'); | 60 debug(':ancestor 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 { background-color: green; }')
), | 66 document.createTextNode('div:ancestor { background-color: green;
}')), |
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 with class selector should not match any shadow hosts.'); | 74 debug(':ancestor 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 { background-color: green; }
')), | 80 document.createTextNode('.host:ancestor { background-color: gree
n; }')), |
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 with id selector should not match any shadow hosts.'); | 88 debug(':ancestor 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 { background-color: green; }
')), | 94 document.createTextNode('#host:ancestor { background-color: gree
n; }')), |
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 with attribute selector should not match any shadow hosts.'); | 102 debug(':ancestor 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 { background-color: gree
n; }')), | 108 document.createTextNode('[foo=bar]:ancestor { background-color:
green; }')), |
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(':ancestor 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'}, |
120 createShadowRoot( | 120 createShadowRoot( |
121 createDOM('style', {}, | 121 createDOM('style', {}, |
122 document.createTextNode(':host(body.mytheme) { background-color:
green; }')), | 122 document.createTextNode(':ancestor(body.mytheme) { background-co
lor: green; }')), |
123 createDOM('div', {}, | 123 createDOM('div', {}, |
124 document.createTextNode('Hello'))))); | 124 document.createTextNode('Hello'))))); |
125 | 125 |
126 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); | 126 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
127 | 127 |
128 cleanUp(); | 128 cleanUp(); |
129 | 129 |
130 debug(':host takes simple selectors and matches when one of the simple selectors
matches.'); | 130 debug(':ancestor with :host in a shadow tree should match its shadow host.'); |
| 131 |
| 132 sandbox.appendChild( |
| 133 createDOM('div', {'id': 'host'}, |
| 134 createShadowRoot( |
| 135 createDOM('style', {}, |
| 136 document.createTextNode(':ancestor(div:host) { background-color:
green; }')), |
| 137 createDOM('div', {}, |
| 138 document.createTextNode('Hello'))))); |
| 139 |
| 140 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
| 141 |
| 142 cleanUp(); |
| 143 |
| 144 debug(':ancestor takes simple selectors and matches when one of the simple selec
tors matches.'); |
131 | 145 |
132 sandbox.appendChild( | 146 sandbox.appendChild( |
133 createDOM('div', {'id': 'parentOfHost'}, | 147 createDOM('div', {'id': 'parentOfHost'}, |
134 createDOM('div', {'id': 'host'}, | 148 createDOM('div', {'id': 'host'}, |
135 createShadowRoot( | 149 createShadowRoot( |
136 createDOM('style', {}, | 150 createDOM('style', {}, |
137 document.createTextNode(':host(body:not(.mytheme), span, div
#parentOfHost) { background-color: green; }')), | 151 document.createTextNode(':ancestor(body:not(.mytheme), span,
div#parentOfHost) { background-color: green; }')), |
138 createDOM('div', {}, | 152 createDOM('div', {}, |
139 document.createTextNode('Hello')))))); | 153 document.createTextNode('Hello')))))); |
140 | 154 |
141 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); | 155 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
142 | 156 |
143 cleanUp(); | 157 cleanUp(); |
144 | 158 |
145 debug(':host matches a shadow host in just a nested shadow tree, not all enclosi
ng shadow trees.'); | 159 debug(':ancestor matches a shadow host in just a nested shadow tree, not all enc
losing shadow trees.'); |
146 | 160 |
147 sandbox.appendChild( | 161 sandbox.appendChild( |
148 createDOM('div', {'id': 'host1'}, | 162 createDOM('div', {'id': 'host1'}, |
149 createShadowRoot( | 163 createShadowRoot( |
150 createDOM('div', {'id': 'host2'}, | 164 createDOM('div', {'id': 'host2'}, |
151 createShadowRoot( | 165 createShadowRoot( |
152 createDOM('style', {}, | 166 createDOM('style', {}, |
153 document.createTextNode(':host { background-color: green
; }')), | 167 document.createTextNode(':ancestor { background-color: g
reen; }')), |
154 createDOM('div', {}, | 168 createDOM('div', {}, |
155 document.createTextNode('Hello'))))))); | 169 document.createTextNode('Hello'))))))); |
156 | 170 |
157 backgroundColorShouldBe('host1', 'rgba(0, 0, 0, 0)'); | 171 backgroundColorShouldBe('host1', 'rgba(0, 0, 0, 0)'); |
158 backgroundColorShouldBe('host1/host2', 'rgb(0, 128, 0)'); | 172 backgroundColorShouldBe('host1/host2', 'rgb(0, 128, 0)'); |
159 | 173 |
160 debug(':host matches based on a composed tree.'); | 174 debug(':ancestor matches based on a composed tree.'); |
161 | 175 |
162 sandbox.appendChild( | 176 sandbox.appendChild( |
163 createDOM('div', {'id': 'parentOfHost'}, | 177 createDOM('div', {'id': 'parentOfHost'}, |
164 createShadowRoot( | 178 createShadowRoot( |
165 createDOM('span', {'id': 'spanA'}, | 179 createDOM('span', {'id': 'spanA'}, |
166 createDOM('content', {}))), | 180 createDOM('content', {}))), |
167 createDOM('div', {'id': 'host'}, | 181 createDOM('div', {'id': 'host'}, |
168 createShadowRoot( | 182 createShadowRoot( |
169 createDOM('style', {}, | 183 createDOM('style', {}, |
170 document.createTextNode(':host(span#spanA) > div { backgroun
d-color: green; }')), | 184 document.createTextNode(':ancestor(span#spanA) > div { backg
round-color: green; }')), |
171 createDOM('div', {'id': 'target'}, | 185 createDOM('div', {'id': 'target'}, |
172 document.createTextNode('Hello')))))); | 186 document.createTextNode('Hello')))))); |
173 | 187 |
174 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 188 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
175 | 189 |
176 cleanUp(); | 190 cleanUp(); |
177 | 191 |
178 debug(':host matches based on a composed tree when having multiple shadow roots.
'); | 192 debug(':ancestor matches based on a composed tree when having multiple shadow ro
ots.'); |
179 | 193 |
180 sandbox.appendChild( | 194 sandbox.appendChild( |
181 createDOM('div', {'id': 'parentOfHost'}, | 195 createDOM('div', {'id': 'parentOfHost'}, |
182 createShadowRoot( | 196 createShadowRoot( |
183 createDOM('span', {'id': 'spanA'}, | 197 createDOM('span', {'id': 'spanA'}, |
184 document.createTextNode('no content, no shadow'))), | 198 document.createTextNode('no content, no shadow'))), |
185 createShadowRoot( | 199 createShadowRoot( |
186 createDOM('span', {'id': 'spanB'}, | 200 createDOM('span', {'id': 'spanB'}, |
187 createDOM('content', {}))), | 201 createDOM('content', {}))), |
188 createShadowRoot( | 202 createShadowRoot( |
189 createDOM('span', {'id': 'spanC'}, | 203 createDOM('span', {'id': 'spanC'}, |
190 createDOM('shadow', {}, | 204 createDOM('shadow', {}, |
191 createDOM('content')))), | 205 createDOM('content')))), |
192 createDOM('div', {'id': 'host'}, | 206 createDOM('div', {'id': 'host'}, |
193 createShadowRoot( | 207 createShadowRoot( |
194 createDOM('style', {}, | 208 createDOM('style', {}, |
195 document.createTextNode(':host(span#spanA) > #targetA { back
ground-color: red; }')), | 209 document.createTextNode(':ancestor(span#spanA) > #targetA {
background-color: red; }')), |
196 createDOM('style', {}, | 210 createDOM('style', {}, |
197 document.createTextNode(':host(span#spanB) > #targetB { back
ground-color: green; }')), | 211 document.createTextNode(':ancestor(span#spanB) > #targetB {
background-color: green; }')), |
198 createDOM('style', {}, | 212 createDOM('style', {}, |
199 document.createTextNode(':host(span#spanC) > #targetC { back
ground-color: green; }')), | 213 document.createTextNode(':ancestor(span#spanC) > #targetC {
background-color: green; }')), |
200 createDOM('div', {'id': 'targetA'}, | 214 createDOM('div', {'id': 'targetA'}, |
201 document.createTextNode('Hello')), | 215 document.createTextNode('Hello')), |
202 createDOM('div', {'id': 'targetB'}, | 216 createDOM('div', {'id': 'targetB'}, |
203 document.createTextNode('Hello')), | 217 document.createTextNode('Hello')), |
204 createDOM('div', {'id': 'targetC'}, | 218 createDOM('div', {'id': 'targetC'}, |
205 document.createTextNode('Hello')))))); | 219 document.createTextNode('Hello')))))); |
206 | 220 |
207 backgroundColorShouldBe('host/targetA', 'rgba(0, 0, 0, 0)'); | 221 backgroundColorShouldBe('host/targetA', 'rgba(0, 0, 0, 0)'); |
208 backgroundColorShouldBe('host/targetB', 'rgb(0, 128, 0)'); | 222 backgroundColorShouldBe('host/targetB', 'rgb(0, 128, 0)'); |
209 backgroundColorShouldBe('host/targetC', 'rgb(0, 128, 0)'); | 223 backgroundColorShouldBe('host/targetC', 'rgb(0, 128, 0)'); |
210 | 224 |
211 cleanUp(); | 225 cleanUp(); |
212 | 226 |
213 debug(':host is updated when its matched ancestor changes className or id.'); | 227 debug(':ancestor is updated when its matched ancestor changes className or id.')
; |
214 | 228 |
215 sandbox.appendChild( | 229 sandbox.appendChild( |
216 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' }, | 230 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' }, |
217 createDOM('div', {'id': 'host'}, | 231 createDOM('div', {'id': 'host'}, |
218 createShadowRoot( | 232 createShadowRoot( |
219 createDOM('style', {}, | 233 createDOM('style', {}, |
220 document.createTextNode(':host(div#parentOfHost.sometheme) {
background-color: green; }')), | 234 document.createTextNode(':ancestor(div#parentOfHost.somethem
e) { background-color: green; }')), |
221 createDOM('div', {}, | 235 createDOM('div', {}, |
222 document.createTextNode('Hello')))))); | 236 document.createTextNode('Hello')))))); |
223 | 237 |
224 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); | 238 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
225 document.getElementById('parentOfHost').className = 'mytheme'; | 239 document.getElementById('parentOfHost').className = 'mytheme'; |
226 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); | 240 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
227 | 241 |
228 cleanUp(); | 242 cleanUp(); |
229 | 243 |
230 sandbox.appendChild( | 244 sandbox.appendChild( |
231 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' }, | 245 createDOM('div', {'id': 'parentOfHost', 'class': 'sometheme' }, |
232 createDOM('div', {'id': 'host'}, | 246 createDOM('div', {'id': 'host'}, |
233 createShadowRoot( | 247 createShadowRoot( |
234 createDOM('style', {}, | 248 createDOM('style', {}, |
235 document.createTextNode(':host(div#parentOfHost.sometheme) {
background-color: green; }')), | 249 document.createTextNode(':ancestor(div#parentOfHost.somethem
e) { background-color: green; }')), |
236 createDOM('div', {}, | 250 createDOM('div', {}, |
237 document.createTextNode('Hello')))))); | 251 document.createTextNode('Hello')))))); |
238 | 252 |
239 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); | 253 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
240 var parentOfHost = document.getElementById('parentOfHost'); | 254 var parentOfHost = document.getElementById('parentOfHost'); |
241 parentOfHost.id = 'differntIdValue'; | 255 parentOfHost.id = 'differntIdValue'; |
242 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); | 256 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
243 | 257 |
244 cleanUp(); | 258 cleanUp(); |
245 | 259 |
246 debug('Compare :host with :host.'); | 260 debug('Compare :ancestor with :ancestor.'); |
247 | 261 |
248 sandbox.appendChild( | 262 sandbox.appendChild( |
249 createDOM('div', {'id': 'host'}, | 263 createDOM('div', {'id': 'host'}, |
250 createShadowRoot( | 264 createShadowRoot( |
251 createDOM('style', {}, | 265 createDOM('style', {}, |
252 document.createTextNode(':host(div:host, div#sandbox) { backgrou
nd-color: green; }')), | 266 document.createTextNode(':ancestor(div:ancestor, div#sandbox) {
background-color: green; }')), |
253 createDOM('style', {}, | 267 createDOM('style', {}, |
254 document.createTextNode(':host(body.mytheme) { background-color:
red; }')), | 268 document.createTextNode(':ancestor(body.mytheme) { background-co
lor: red; }')), |
255 createDOM('div', {}, | 269 createDOM('div', {}, |
256 document.createTextNode('Hello'))))); | 270 document.createTextNode('Hello'))))); |
257 | 271 |
258 // :host(div:host, div#sandbox) wins, because div#sandbox > body.mytheme. | 272 // :ancestor(div:ancestor, div#sandbox) wins, because div#sandbox > body.mytheme
. |
259 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); | 273 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); |
260 | 274 |
261 cleanUp(); | 275 cleanUp(); |
262 | 276 |
263 sandbox.appendChild( | 277 sandbox.appendChild( |
264 createDOM('div', {'id': 'host'}, | 278 createDOM('div', {'id': 'host'}, |
265 createShadowRoot( | 279 createShadowRoot( |
266 createDOM('style', {}, | 280 createDOM('style', {}, |
267 document.createTextNode(':host(div:host, div#nomatch) { backgrou
nd-color: green; }')), | 281 document.createTextNode(':ancestor(div:ancestor, div#nomatch) {
background-color: green; }')), |
268 createDOM('style', {}, | 282 createDOM('style', {}, |
269 document.createTextNode(':host(body.mytheme) { background-color:
red; }')), | 283 document.createTextNode(':ancestor(body.mytheme) { background-co
lor: red; }')), |
270 createDOM('div', {}, | 284 createDOM('div', {}, |
271 document.createTextNode('Hello'))))); | 285 document.createTextNode('Hello'))))); |
272 | 286 |
273 // :host(body.mytheme) wins, because div:host < body.mytheme. | 287 // :ancestor(body.mytheme) wins, because div:ancestor < body.mytheme. |
274 backgroundColorShouldBe('host', 'rgb(255, 0, 0)'); | 288 backgroundColorShouldBe('host', 'rgb(255, 0, 0)'); |
275 | 289 |
276 cleanUp(); | 290 cleanUp(); |
277 | 291 |
278 // Test for specificiy of ":host(...) > ...". | 292 // Test for specificiy of ":ancestor(...) > ...". |
279 sandbox.appendChild( | 293 sandbox.appendChild( |
280 createDOM('div', {'id': 'host'}, | 294 createDOM('div', {'id': 'host'}, |
281 createShadowRoot( | 295 createShadowRoot( |
282 createDOM('style', {}, | 296 createDOM('style', {}, |
283 document.createTextNode(':host(div:host, div#host:host) > div {
background-color: green; }')), | 297 document.createTextNode(':ancestor(div:ancestor, div#host:ancest
or) > div { background-color: green; }')), |
284 createDOM('style', {}, | 298 createDOM('style', {}, |
285 document.createTextNode(':host(body.mytheme) > div { background-
color: red; }')), | 299 document.createTextNode(':ancestor(body.mytheme) > div { backgro
und-color: red; }')), |
286 createDOM('div', {'id': 'target'}, | 300 createDOM('div', {'id': 'target'}, |
287 document.createTextNode('Hello'))))); | 301 document.createTextNode('Hello'))))); |
288 | 302 |
289 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 303 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
290 | 304 |
291 cleanUp(); | 305 cleanUp(); |
292 | 306 |
293 sandbox.appendChild( | 307 sandbox.appendChild( |
294 createDOM('div', {'id': 'host', 'class': 'host'}, | 308 createDOM('div', {'id': 'host', 'class': 'host'}, |
295 createShadowRoot( | 309 createShadowRoot( |
296 createDOM('style', {}, | 310 createDOM('style', {}, |
297 document.createTextNode(':host(div:host, div#host.host:host) > d
iv { background-color: green; }')), | 311 document.createTextNode(':ancestor(div:ancestor, div#host.host:a
ncestor) > div { background-color: green; }')), |
298 createDOM('style', {}, | 312 createDOM('style', {}, |
299 document.createTextNode(':host(body) > div#target { background-c
olor: red; }')), | 313 document.createTextNode(':ancestor(body) > div#target { backgrou
nd-color: red; }')), |
300 createDOM('div', {'id': 'target'}, | 314 createDOM('div', {'id': 'target'}, |
301 document.createTextNode('Hello'))))); | 315 document.createTextNode('Hello'))))); |
302 | 316 |
303 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 317 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
304 | 318 |
305 cleanUp(); | 319 cleanUp(); |
306 | 320 |
307 sandbox.appendChild( | 321 sandbox.appendChild( |
308 createDOM('div', {'id': 'host', 'class': 'host'}, | 322 createDOM('div', {'id': 'host', 'class': 'host'}, |
309 createShadowRoot( | 323 createShadowRoot( |
310 createDOM('style', {}, | 324 createDOM('style', {}, |
311 document.createTextNode(':host(div:host(div:host(div:host(div:ho
st)))) > div { background-color: green; }')), | 325 document.createTextNode(':ancestor(div:ancestor(div:ancestor(div
:ancestor(div:ancestor)))) > div { background-color: green; }')), |
312 createDOM('style', {}, | 326 createDOM('style', {}, |
313 document.createTextNode(':host(div) > div { background-color: re
d; }')), | 327 document.createTextNode(':ancestor(div) > div { background-color
: red; }')), |
314 createDOM('div', {'id': 'target'}, | 328 createDOM('div', {'id': 'target'}, |
315 document.createTextNode('Hello'))))); | 329 document.createTextNode('Hello'))))); |
316 | 330 |
317 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 331 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
318 | 332 |
319 cleanUp(); | 333 cleanUp(); |
320 | 334 |
321 </script> | 335 </script> |
322 </body> | 336 </body> |
OLD | NEW |