Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <script src="resources/shadow-dom.js"></script> | 4 <script src="resources/shadow-dom.js"></script> |
| 5 <script src="../../../resources/js-test.js"></script> | 5 <script src="../../../resources/js-test.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 186 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 197 document.createTextNode('some text'))), | 197 document.createTextNode('some text'))), |
| 198 createShadowRoot( | 198 createShadowRoot( |
| 199 createDOM('shadow', {}), | 199 createDOM('shadow', {}), |
| 200 createDOM('span', {'id': 'target'}, | 200 createDOM('span', {'id': 'target'}, |
| 201 document.createTextNode('no border'))))); | 201 document.createTextNode('no border'))))); |
| 202 | 202 |
| 203 borderColorShouldBe('host//target', 'rgb(0, 0, 0)'); | 203 borderColorShouldBe('host//target', 'rgb(0, 0, 0)'); |
| 204 | 204 |
| 205 cleanUp(); | 205 cleanUp(); |
| 206 | 206 |
| 207 | |
| 208 // div::shadow span can match [div -- sr -- span] in its sibling shadow tree. | |
| 209 sandbox.appendChild( | |
| 210 createDOM('div', {'id': 'host'}, | |
| 211 createShadowRoot( | |
| 212 createDOM('style', {}, | |
| 213 document.createTextNode('div::shadow span { border: 1px solid gr een; }')), | |
| 214 createDOM('span', {}, | |
| 215 document.createTextNode('some text'))), | |
| 216 createShadowRoot( | |
| 217 createDOM('shadow', {}), | |
| 218 createDOM('div', {'id': 'host2'}, | |
| 219 createShadowRoot( | |
| 220 createDOM('span', {'id': 'target'}, | |
| 221 document.createTextNode('green border'))))))); | |
| 222 | |
| 223 borderColorShouldBe('host//host2/target', 'rgb(0, 128, 0)'); | |
| 224 | |
| 225 cleanUp(); | |
| 226 | |
| 227 // :host div::shadow div should match. | 207 // :host div::shadow div should match. |
| 228 sandbox.appendChild( | 208 sandbox.appendChild( |
| 229 createDOM('div', {'id': 'host'}, | 209 createDOM('div', {'id': 'host'}, |
| 230 createShadowRoot( | 210 createShadowRoot( |
| 231 createDOM('style', {}, | 211 createDOM('style', {}, |
| 232 document.createTextNode(':host div::shadow div { border: 1px sol id green; }')), | 212 document.createTextNode(':host div::shadow div { border: 1px sol id green; }')), |
| 233 createDOM('div', {'id': 'host2'}, | 213 createDOM('div', {'id': 'host2'}, |
| 234 createShadowRoot( | 214 createShadowRoot( |
| 235 createDOM('div', {'id': 'target'}, | 215 createDOM('div', {'id': 'target'}, |
| 236 document.createTextNode('green border'))))))); | 216 document.createTextNode('green border'))))))); |
| (...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 299 document.createTextNode('sibling')))), | 279 document.createTextNode('sibling')))), |
| 300 createDOM('div', {'id': 'host2'}, | 280 createDOM('div', {'id': 'host2'}, |
| 301 createShadowRoot( | 281 createShadowRoot( |
| 302 createDOM('div', {'id': 'target'}, | 282 createDOM('div', {'id': 'target'}, |
| 303 document.createTextNode('no border'))))))); | 283 document.createTextNode('no border'))))))); |
| 304 | 284 |
| 305 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)'); | 285 borderColorShouldBe('host/host2/target', 'rgb(0, 0, 0)'); |
| 306 | 286 |
| 307 cleanUp(); | 287 cleanUp(); |
| 308 | 288 |
| 309 // div::shadow span in an insert shadow tree cannot match any element in active shadow tree. | |
|
kochi
2014/05/29 07:47:20
Looks like this comment is valid, though...
| |
| 310 sandbox.appendChild( | |
| 311 createDOM('div', {'id': 'host'}, | |
| 312 createShadowRoot( | |
| 313 createDOM('style', {}, | |
| 314 document.createTextNode('div::shadow span { border: 1px solid gr een; }')), | |
| 315 createDOM('span', {}, | |
| 316 document.createTextNode('some text'))), | |
| 317 createShadowRoot( | |
| 318 createDOM('div', {'id': 'host2'}, | |
| 319 createShadowRoot( | |
| 320 createDOM('span', {'id': 'target'}, | |
| 321 document.createTextNode('green border'))))))); | |
| 322 | |
| 323 borderColorShouldBe('host//host2/target', 'rgb(0, 128, 0)'); | |
| 324 | |
| 325 cleanUp(); | |
| 326 | |
| 327 sandbox.appendChild( | 289 sandbox.appendChild( |
| 328 createDOM('div', {'id': 'host'}, | 290 createDOM('div', {'id': 'host'}, |
| 329 createShadowRoot( | 291 createShadowRoot( |
| 330 createDOM('style', {}, | 292 createDOM('style', {}, |
| 331 document.createTextNode('.x-bar .x-zot::shadow div { border: 1px solid red; }')), | 293 document.createTextNode('.x-bar .x-zot::shadow div { border: 1px solid red; }')), |
| 332 createDOM('div', {'id': 'x-foo'}, | 294 createDOM('div', {'id': 'x-foo'}, |
| 333 document.createTextNode('x-foo')), | 295 document.createTextNode('x-foo')), |
| 334 createDOM('div', {'id': 'x-bar-host', 'class': 'x-bar'}, | 296 createDOM('div', {'id': 'x-bar-host', 'class': 'x-bar'}, |
| 335 createShadowRoot( | 297 createShadowRoot( |
| 336 createDOM('div', {'id': 'x-bar-target'}, | 298 createDOM('div', {'id': 'x-bar-target'}, |
| 337 document.createTextNode('x-bar')), | 299 document.createTextNode('x-bar')), |
| 338 createDOM('div', {'id': 'x-zot-host', 'class': 'x-zot'}, | 300 createDOM('div', {'id': 'x-zot-host', 'class': 'x-zot'}, |
| 339 createShadowRoot( | 301 createShadowRoot( |
| 340 createDOM('div', {'id': 'x-zot-target'}, | 302 createDOM('div', {'id': 'x-zot-target'}, |
| 341 document.createTextNode('x-zot'))))))))); | 303 document.createTextNode('x-zot'))))))))); |
| 342 | 304 |
| 343 borderColorShouldNotBe('host/x-bar-host/x-zot-host/x-zot-target', 'rgb(255, 0, 0 )'); | 305 borderColorShouldNotBe('host/x-bar-host/x-zot-host/x-zot-target', 'rgb(255, 0, 0 )'); |
| 344 cleanUp(); | 306 cleanUp(); |
| 345 | 307 |
| 346 </script> | 308 </script> |
| 347 </html> | 309 </html> |
| 348 | |
| OLD | NEW |