| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="resources/shadow-dom.js"></script> |
| <style> |
| div { |
| margin: 10px 10px 10px 10px; |
| border: solid black; |
| } |
| </style> |
| </head> |
| <body> |
| <script> |
| function text(contents) { |
| return document.createTextNode(contents); |
| } |
| |
| function shadowRoot() { |
| return createShadowRootWithAttributes({'applyAuthorStyles': true}, Array.prototype.slice.call(arguments)); |
| } |
| |
| // Test for a content element which is selected by another content element. |
| document.body.appendChild( |
| createDOM('div', {}, |
| shadowRoot( |
| createDOM('div', {}, |
| shadowRoot( |
| createDOM('content', {'select': '#b-content'}), |
| createDOM('div', {}, text('b-1')), |
| createDOM('content', {'select': '#b-2'})), |
| createDOM('content', {'id': 'b-content', 'select': '#b-2'}, |
| createDOM('div', {}, text('should-not-be-used'))), |
| createDOM('div', {}, text('should-not-be-used')))), |
| createDOM('div', {'id': 'b-2'}, text('b-2')))); |
| |
| // debug('Test for a reprojection. Content elements should be used in document order.'); |
| document.body.appendChild( |
| createDOM('div', {}, |
| shadowRoot( |
| createDOM('content', {'select': '#c-1'}), |
| createDOM('div', {}, |
| shadowRoot( |
| createDOM('content', {'select': '.child'})), |
| createDOM('content', {'select': '.child'}))), |
| createDOM('div', {'id': 'c-1', 'class': 'child'}, text('c-1')), |
| createDOM('div', {'id': 'c-2', 'class': 'child'}, text('c-2')))); |
| |
| // debug('Test for complex re-projections.'); |
| document.body.appendChild( |
| createDOM('div', {}, |
| shadowRoot( |
| createDOM('div', {}, |
| shadowRoot( |
| // Select #d-child-1, div, d-5 |
| createDOM('content', {'select': '.foo'}), |
| createDOM('div', {}, text('d-1'))), |
| // Select #d-child-1 |
| createDOM('content', {'select': '#d-child-1'}, |
| createDOM('div', {}, text('Should not be used')), |
| createDOM('content', {'select': '.foo'}, text('Should not select any nodes. This is inactive.'))), |
| createDOM('div', {'class': 'foo'}, |
| shadowRoot( |
| createDOM('div', {}, text('d-2')), |
| // Select #d-child-2 and #d-4. |
| createDOM('content', {'select': '.foo'}), |
| createDOM('div', {}, text('d-3'))), |
| // Select #d-child-2 |
| createDOM('content', {'select': '#d-child-2'}), |
| createDOM('div', {'id': 'd-4', 'class': 'foo'}, text('d-4'))), |
| createDOM('div', {}, text('Should not be selected')), |
| createDOM('div', {'class': 'foo'}, text('d-5')))), |
| createDOM('div', {'id': 'd-child-1', 'class': 'foo'}, text('d-child-1')), |
| createDOM('div', {'class': 'foo'}, text('should-not-be-selected')), |
| createDOM('div', {'id': 'd-child-2', 'class': 'foo'}, text('d-child-2')))); |
| </script> |
| </body> |
| </html> |
