| 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 |