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-context(*) { | 7 :host-context(*) { |
8 background-color: red; | 8 background-color: red; |
9 } | 9 } |
10 </style> | 10 </style> |
(...skipping 159 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
170 createDOM('div', {'id': 'host2'}, | 170 createDOM('div', {'id': 'host2'}, |
171 createShadowRoot( | 171 createShadowRoot( |
172 createDOM('style', {}, | 172 createDOM('style', {}, |
173 document.createTextNode(':host-context(*) { background-c
olor: green; }')), | 173 document.createTextNode(':host-context(*) { background-c
olor: green; }')), |
174 createDOM('div', {}, | 174 createDOM('div', {}, |
175 document.createTextNode('Hello'))))))); | 175 document.createTextNode('Hello'))))))); |
176 | 176 |
177 backgroundColorShouldBe('host1', 'rgba(0, 0, 0, 0)'); | 177 backgroundColorShouldBe('host1', 'rgba(0, 0, 0, 0)'); |
178 backgroundColorShouldBe('host1/host2', 'rgb(0, 128, 0)'); | 178 backgroundColorShouldBe('host1/host2', 'rgb(0, 128, 0)'); |
179 | 179 |
180 debug(':host-context matches based on a composed tree.'); | 180 debug(':host-context matches based on a flat tree.'); |
181 | 181 |
182 sandbox.appendChild( | 182 sandbox.appendChild( |
183 createDOM('div', {'id': 'parentOfHost'}, | 183 createDOM('div', {'id': 'parentOfHost'}, |
184 createShadowRoot( | 184 createShadowRoot( |
185 createDOM('span', {'id': 'spanA'}, | 185 createDOM('span', {'id': 'spanA'}, |
186 createDOM('content', {}))), | 186 createDOM('content', {}))), |
187 createDOM('div', {'id': 'host'}, | 187 createDOM('div', {'id': 'host'}, |
188 createShadowRoot( | 188 createShadowRoot( |
189 createDOM('style', {}, | 189 createDOM('style', {}, |
190 document.createTextNode(':host-context(span#spanA) > div { b
ackground-color: green; }')), | 190 document.createTextNode(':host-context(span#spanA) > div { b
ackground-color: green; }')), |
191 createDOM('div', {'id': 'target'}, | 191 createDOM('div', {'id': 'target'}, |
192 document.createTextNode('Hello')))))); | 192 document.createTextNode('Hello')))))); |
193 | 193 |
194 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); | 194 backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)'); |
195 | 195 |
196 cleanUp(); | 196 cleanUp(); |
197 | 197 |
198 debug(':host-context matches based on a composed tree when having multiple shado
w roots.'); | 198 debug(':host-context matches based on a flat tree when having multiple shadow ro
ots.'); |
199 | 199 |
200 sandbox.appendChild( | 200 sandbox.appendChild( |
201 createDOM('div', {'id': 'parentOfHost'}, | 201 createDOM('div', {'id': 'parentOfHost'}, |
202 createShadowRoot( | 202 createShadowRoot( |
203 createDOM('span', {'id': 'spanA'}, | 203 createDOM('span', {'id': 'spanA'}, |
204 document.createTextNode('no content, no shadow'))), | 204 document.createTextNode('no content, no shadow'))), |
205 createShadowRoot( | 205 createShadowRoot( |
206 createDOM('span', {'id': 'spanB'}, | 206 createDOM('span', {'id': 'spanB'}, |
207 createDOM('content', {}))), | 207 createDOM('content', {}))), |
208 createShadowRoot( | 208 createShadowRoot( |
(...skipping 137 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
346 document.createTextNode(':host-context { background-color: red;
}')), | 346 document.createTextNode(':host-context { background-color: red;
}')), |
347 createDOM('div', {}, | 347 createDOM('div', {}, |
348 document.createTextNode('Hello'))))); | 348 document.createTextNode('Hello'))))); |
349 | 349 |
350 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); | 350 backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)'); |
351 | 351 |
352 cleanUp(); | 352 cleanUp(); |
353 | 353 |
354 </script> | 354 </script> |
355 </body> | 355 </body> |
OLD | NEW |