| 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 </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 175 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 186 createDOM('style', {}, | 186 createDOM('style', {}, |
| 187 document.createTextNode(':host { border: 1px solid green
; }')), | 187 document.createTextNode(':host { border: 1px solid green
; }')), |
| 188 createDOM('content', {})), | 188 createDOM('content', {})), |
| 189 createDOM('div', {'id': 'host-child'}, | 189 createDOM('div', {'id': 'host-child'}, |
| 190 document.createTextNode('Hello, Host!')))))); | 190 document.createTextNode('Hello, Host!')))))); |
| 191 | 191 |
| 192 shouldHaveBorderColor('host/target', 'rgb(0, 128, 0)'); | 192 shouldHaveBorderColor('host/target', 'rgb(0, 128, 0)'); |
| 193 | 193 |
| 194 cleanUp(); | 194 cleanUp(); |
| 195 | 195 |
| 196 debug('Test the case where there exists a style scoped in a contanining treescop
e.'); | |
| 197 | |
| 198 sandbox.appendChild( | |
| 199 createDOM('style', {}, | |
| 200 document.createTextNode('div:last-child { border: 1px solid blue; }'))); | |
| 201 sandbox.appendChild( | |
| 202 createDOM('div', {}, | |
| 203 createDOM('style', {'scoped': 'scoped'}, | |
| 204 document.createTextNode(':last-child { border: 1px solid red }')), | |
| 205 createDOM('div', {'id': 'host'}, | |
| 206 createShadowRoot( | |
| 207 createDOM('style', {}, | |
| 208 document.createTextNode(':host { border: 1px solid green; }'
)), | |
| 209 createDOM('content', {})), | |
| 210 createDOM('div', {'id': 'host-child'}, | |
| 211 document.createTextNode('Hello, Host!'))))); | |
| 212 | |
| 213 // Rules from style scoped win, because styles in shadow trees are treated as re
gistered with a root node of a containing treescope. | |
| 214 shouldHaveBorderColor('host', 'rgb(255, 0, 0)'); | |
| 215 | |
| 216 cleanUp(); | |
| 217 | |
| 218 debug('Test that style sharing is disabled when styles in shadow trees would mat
ch shadow hosts.'); | 196 debug('Test that style sharing is disabled when styles in shadow trees would mat
ch shadow hosts.'); |
| 219 | 197 |
| 220 sandbox.appendChild( | 198 sandbox.appendChild( |
| 221 createDOM('div', {'id': 'hostA'}, | 199 createDOM('div', {'id': 'hostA'}, |
| 222 createShadowRoot( | 200 createShadowRoot( |
| 223 createDOM('style', {}, | 201 createDOM('style', {}, |
| 224 document.createTextNode(':host { border: 1px solid red; }')), | 202 document.createTextNode(':host { border: 1px solid red; }')), |
| 225 createDOM('content', {})), | 203 createDOM('content', {})), |
| 226 createDOM('div', {}))); | 204 createDOM('div', {}))); |
| 227 | 205 |
| 228 sandbox.appendChild( | 206 sandbox.appendChild( |
| 229 createDOM('div', {'id': 'hostB'}, | 207 createDOM('div', {'id': 'hostB'}, |
| 230 createShadowRoot( | 208 createShadowRoot( |
| 231 createDOM('style', {}, | 209 createDOM('style', {}, |
| 232 document.createTextNode(':host { border: 1px solid green; }')), | 210 document.createTextNode(':host { border: 1px solid green; }')), |
| 233 createDOM('content', {})), | 211 createDOM('content', {})), |
| 234 createDOM('div', {}))); | 212 createDOM('div', {}))); |
| 235 | 213 |
| 236 // for checking style sharing | 214 // for checking style sharing |
| 237 shouldHaveBorderColor('hostA', 'rgb(255, 0, 0)'); | 215 shouldHaveBorderColor('hostA', 'rgb(255, 0, 0)'); |
| 238 shouldHaveBorderColor('hostB', 'rgb(0, 128, 0)'); | 216 shouldHaveBorderColor('hostB', 'rgb(0, 128, 0)'); |
| 239 | 217 |
| 240 cleanUp(); | 218 cleanUp(); |
| 241 </script> | 219 </script> |
| 242 </html> | 220 </html> |
| OLD | NEW |