| 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 154 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 165 document.createTextNode('some text'))), | 165 document.createTextNode('some text'))), |
| 166 createShadowRoot( | 166 createShadowRoot( |
| 167 createDOM('shadow', {}), | 167 createDOM('shadow', {}), |
| 168 createDOM('span', {'id': 'target'}, | 168 createDOM('span', {'id': 'target'}, |
| 169 document.createTextNode('no border'))))); | 169 document.createTextNode('no border'))))); |
| 170 | 170 |
| 171 borderColorShouldBe('host//target', 'rgb(0, 0, 0)'); | 171 borderColorShouldBe('host//target', 'rgb(0, 0, 0)'); |
| 172 | 172 |
| 173 cleanUp(); | 173 cleanUp(); |
| 174 | 174 |
| 175 // .foo /deep/ span, .foo is an ancestor of some shadow host which has span in i
ts hosting shadow tree, should match. | |
| 176 sandbox.appendChild( | |
| 177 createDOM('div', {'id': 'host'}, | |
| 178 createShadowRoot( | |
| 179 createDOM('style', {}, | |
| 180 document.createTextNode('.foo /deep/ span { border: 1px solid gr
een; }')), | |
| 181 createDOM('span', {}, | |
| 182 document.createTextNode('some text'))), | |
| 183 createShadowRoot( | |
| 184 createDOM('shadow', {}), | |
| 185 createDOM('div', {'class': 'foo'}, | |
| 186 createDOM('div', {'id': 'host2'}, | |
| 187 createShadowRoot( | |
| 188 createDOM('span', {'id': 'target'}, | |
| 189 document.createTextNode('green border')))))))); | |
| 190 | |
| 191 borderColorShouldBe('host//host2/target', 'rgb(0, 128, 0)'); | |
| 192 | |
| 193 cleanUp(); | |
| 194 | |
| 195 | |
| 196 // :host div /deep/ div should match. | 175 // :host div /deep/ div should match. |
| 197 | 176 |
| 198 sandbox.appendChild( | 177 sandbox.appendChild( |
| 199 createDOM('div', {'id': 'host'}, | 178 createDOM('div', {'id': 'host'}, |
| 200 createShadowRoot( | 179 createShadowRoot( |
| 201 createDOM('style', {}, | 180 createDOM('style', {}, |
| 202 document.createTextNode(':host div /deep/ div { border: 1px soli
d green; }')), | 181 document.createTextNode(':host div /deep/ div { border: 1px soli
d green; }')), |
| 203 createDOM('div', {'id': 'host2'}, | 182 createDOM('div', {'id': 'host2'}, |
| 204 createShadowRoot( | 183 createShadowRoot( |
| 205 createDOM('div', {'id': 'target'}, | 184 createDOM('div', {'id': 'target'}, |
| (...skipping 120 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 326 createShadowRoot( | 305 createShadowRoot( |
| 327 createDOM('div', {'id': 'host3'}, | 306 createDOM('div', {'id': 'host3'}, |
| 328 createShadowRoot( | 307 createShadowRoot( |
| 329 createDOM('div', {'id': 'target'}, | 308 createDOM('div', {'id': 'target'}, |
| 330 document.createTextNode('no border'))))))))); | 309 document.createTextNode('no border'))))))))); |
| 331 | 310 |
| 332 borderColorShouldBe('host/host2/host3/target', 'rgb(0, 0, 0)'); | 311 borderColorShouldBe('host/host2/host3/target', 'rgb(0, 0, 0)'); |
| 333 | 312 |
| 334 cleanUp(); | 313 cleanUp(); |
| 335 | 314 |
| 336 // div /deep/ span in a sibling shadow tree can match. | |
| 337 sandbox.appendChild( | |
| 338 createDOM('div', {'id': 'host'}, | |
| 339 createShadowRoot( | |
| 340 createDOM('style', {}, | |
| 341 document.createTextNode('div /deep/ span { border: 1px solid gre
en; }')), | |
| 342 createDOM('span', {}, | |
| 343 document.createTextNode('some text'))), | |
| 344 createShadowRoot( | |
| 345 createDOM('shadow', {}), | |
| 346 createDOM('div', {'id': 'host2'}, | |
| 347 createShadowRoot( | |
| 348 createDOM('span', {'id': 'target'}, | |
| 349 document.createTextNode('green border'))))))); | |
| 350 | |
| 351 borderColorShouldBe('host//host2/target', 'rgb(0, 128, 0)'); | |
| 352 | |
| 353 cleanUp(); | |
| 354 | |
| 355 // :host /deep/ * should not match desendant nodes of div#host. | 315 // :host /deep/ * should not match desendant nodes of div#host. |
| 356 sandbox.appendChild( | 316 sandbox.appendChild( |
| 357 createDOM('div', {'id': 'host'}, | 317 createDOM('div', {'id': 'host'}, |
| 358 createShadowRoot( | 318 createShadowRoot( |
| 359 createDOM('style', {}, | 319 createDOM('style', {}, |
| 360 document.createTextNode(':host /deep/ * { border: 1px solid red;
}')), | 320 document.createTextNode(':host /deep/ * { border: 1px solid red;
}')), |
| 361 createDOM('content', {})), | 321 createDOM('content', {})), |
| 362 createDOM('div', {'id': 'child'}, | 322 createDOM('div', {'id': 'child'}, |
| 363 document.createTextNode('show not red')))); | 323 document.createTextNode('show not red')))); |
| 364 | 324 |
| (...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 415 createShadowRoot( | 375 createShadowRoot( |
| 416 createDOM('div', {'id': 'x-zot-target'}, | 376 createDOM('div', {'id': 'x-zot-target'}, |
| 417 document.createTextNode('x-zot')))))))))); | 377 document.createTextNode('x-zot')))))))))); |
| 418 | 378 |
| 419 borderColorShouldNotBe('host/x-bar-host/x-bar-target', 'rgb(255, 0, 0)'); | 379 borderColorShouldNotBe('host/x-bar-host/x-bar-target', 'rgb(255, 0, 0)'); |
| 420 borderColorShouldNotBe('host/x-bar-host/x-zot-host/x-zot-target', 'rgb(255, 0, 0
)'); | 380 borderColorShouldNotBe('host/x-bar-host/x-zot-host/x-zot-target', 'rgb(255, 0, 0
)'); |
| 421 cleanUp(); | 381 cleanUp(); |
| 422 | 382 |
| 423 </script> | 383 </script> |
| 424 </html> | 384 </html> |
| 425 | |
| OLD | NEW |