| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test.js"></script> |
| <script src="resources/shadow-dom.js"></script> |
| </head> |
| <body> |
| <div id="console"></div> |
| <div id="sandbox"></div> |
| <script> |
| description("Tests for Composed Shadow DOM Tree Traversal APIs. Can only run within DRT"); |
| |
| function testFlatTree(node) |
| { |
| var sandbox = document.getElementById('sandbox'); |
| sandbox.innerHTML = ''; |
| sandbox.appendChild(node); |
| document.body.offsetLeft; |
| showFlatTree(node); |
| } |
| |
| debug('ShadowRoot should be used.'); |
| testFlatTree( |
| createDOM('div', {'id': 'a'}, |
| createShadowRoot(createDOM('div', {'id': 'b'})), |
| createDOM('div', {'id': 'c'}))); |
| |
| debug('A content element should select light children'); |
| testFlatTree( |
| createDOM('div', {'id': 'a'}, |
| createShadowRoot(createDOM('div', {'id': 'b'}), |
| createDOM('content')), |
| createDOM('div', {'id': 'c'}), |
| createDOM('div', {'id': 'd'}))); |
| |
| debug('Test for content element selector.'); |
| testFlatTree( |
| createDOM('div', {'id': 'a'}, |
| createShadowRoot(createDOM('div', {'id': 'b'}), |
| createDOM('content', {'select': '#d'})), |
| createDOM('div', {'id': 'c'}), |
| createDOM('div', {'id': 'd'}), |
| createDOM('div', {'id': 'e'}))); |
| |
| debug('Light children should be selected only at once.'); |
| testFlatTree( |
| createDOM('div', {'id': 'a'}, |
| createShadowRoot(createDOM('div', {'id': 'b'}), |
| createDOM('content', {'select': '#d'}), |
| createDOM('content')), |
| createDOM('div', {'id': 'c'}), |
| createDOM('div', {'id': 'd'}), |
| createDOM('div', {'id': 'e'}))); |
| |
| debug('A content element can have fallback elements.'); |
| testFlatTree( |
| createDOM('div', {'id': 'a'}, |
| createShadowRoot(createDOM('div', {'id': 'b'}), |
| createDOM('content', {'select': '#z'}, |
| createDOM('div', {'id': 'f1'}), |
| createDOM('div', {'id': 'f2'}))), |
| createDOM('div', {'id': 'c'}))); |
| |
| debug('Fallback elements should not be used if a content element selects an element.'); |
| testFlatTree( |
| createDOM('div', {'id': 'a'}, |
| createShadowRoot(createDOM('div', {'id': 'b'}), |
| createDOM('content', {'select': '#c'}, |
| createDOM('div', {'id': 'f1'}, |
| createDOM('div', {'id': 'f2'})))), |
| createDOM('div', {'id': 'c'}))); |
| |
| debug('Test for traversal, starting with a fallback element which is not used.'); |
| showFlatTree(getNodeInComposedTree('a/f1')); |
| showNextNode(getNodeInComposedTree('a/f1')); |
| showNextNode(getNodeInComposedTree('a/f2')); |
| debug(''); |
| |
| debug('Test for Nested ShadowRoots.'); |
| testFlatTree( |
| createDOM('div', {'id': 'a'}, |
| createShadowRoot(createDOM('div', {'id': 'b'}, |
| createShadowRoot(createDOM('div', {'id': 'c'}), |
| createDOM('content'), |
| createDOM('div', {'id': 'd'})), |
| createDOM('div', {'id': 'e'})), |
| createDOM('div', {'id': 'f'}), |
| createDOM('content'), |
| createDOM('div', {'id': 'g'})), |
| createDOM('div', {'id': 'h'}), |
| createDOM('div', {'id': 'i'}))); |
| |
| debug('Test for Multiple ShadowRoots.'); |
| testFlatTree( |
| createDOM('div', {'id': 'a'}, |
| createShadowRoot(createDOM('div', {'id': 'b'}), |
| createDOM('content'), |
| createDOM('div', {'id': 'c'})), |
| createShadowRoot(createDOM('div', {'id': 'd'}), |
| createDOM('shadow', {}), |
| createDOM('div', {'id': 'e'})), |
| createDOM('div', {'id': 'f'}))); |
| |
| debug('Test for inactive insertion points.'); |
| testFlatTree( |
| createDOM('div', {'id': 'a'}, |
| createDOM('content', {'id': 'b'}, |
| createDOM('content', {'id': 'c'})))); |
| |
| debug('Test for an orphaned shadow subtree.'); |
| testFlatTree( |
| createDOM('div', {'id': 'a'}, |
| createShadowRoot( |
| createDOM('div', {'id': 'b'}, |
| createDOM('div', {'id': 'c'}))), |
| createShadowRoot( |
| createDOM('div', {'id': 'd'})))); |
| |
| debug('Test for traversal, starting with a node in an orphaned shadow subtree.'); |
| showFlatTree(getNodeInComposedTree('a/b')); |
| |
| debug('Test for a content element which does not select any nodes nor have fallback elements.'); |
| testFlatTree( |
| createDOM('div', {'id': 'a'}, |
| createShadowRoot(createDOM('content', {'select': '#none'}), |
| createDOM('div', {'id': 'b'}), |
| createDOM('content', {'select': '#none'}), |
| createDOM('div', {'id': 'c'}), |
| createDOM('content', {'select': '#none'})))); |
| |
| debug('Test for a nested insertion point.'); |
| testFlatTree( |
| createDOM('div', {'id': 'a'}, |
| createShadowRoot(createDOM('div', {'id': 'b'}, |
| createShadowRoot(createDOM('content', {})), |
| createDOM('content', {}))), |
| createDOM('div', {'id': 'c'}))); |
| |
| debug('Test for nested insertion points. Some of them are either empty insertion points or inactive insertion points.'); |
| testFlatTree( |
| createDOM('div', {'id': 'a'}, |
| createShadowRoot(createDOM('content', {'select': '#none'}), |
| createDOM('div', {'id': 'b'}, |
| createShadowRoot(createDOM('content', {'select': '.select-1'}), |
| createDOM('div', {'id': 'c'}), |
| createDOM('content', {'select': '.select-2'})), |
| createDOM('content', {'class': 'select-1', 'select': '.select-4'}), |
| createDOM('content', {'class': 'select-2', 'select': '#none'}), |
| createDOM('div', {'id': 'd', 'class': 'select-2'}), |
| createDOM('content', {'class': 'select-2', 'select': '#none'}), |
| createDOM('div', {'id': 'e', 'class': 'select-2'}), |
| createDOM('content', {'class': 'select-2', 'select': '#none'}))), |
| createDOM('content', {'id': 'inactive-insertion-point', 'class': 'select-4'}), |
| createDOM('div', {'id': 'should-not-be-selected'}), |
| createDOM('div', {'id': 'f', 'class': 'select-4'}))); |
| |
| debug('Test for a re-projection.'); |
| testFlatTree( |
| createDOM('div', {'id': 'a'}, |
| createShadowRoot( |
| createDOM('div', {'id': 'b'}, |
| createShadowRoot(createDOM('content', {'select': '#c'})), |
| createDOM('content', {'select': '#c'}))), |
| createDOM('div', {'id': 'c'}))); |
| |
| debug('Test for a content element which is selected by another content element.'); |
| testFlatTree( |
| createDOM('div', {'id': 'a'}, |
| createShadowRoot( |
| createDOM('div', {'id': 'b'}, |
| createShadowRoot(createDOM('content', {'select': '#content'}), |
| createDOM('div', {'id': 'most-inner-child'}), |
| createDOM('content', {'select': '#host-child'})), |
| createDOM('content', {'id': 'content', 'select': '#host-child'}, |
| createDOM('div', {'id': 'should-not-be-used'})), |
| createDOM('div', {'id': 'inner-child', 'class': 'foo'}))), |
| createDOM('div', {'id': 'host-child'}))); |
| |
| debug('Test for a reprojection. Content elements should be used in document order.'); |
| testFlatTree( |
| createDOM('div', {'id': 'a'}, |
| createShadowRoot( |
| createDOM('content', {'select': '#host-child1'}), |
| createDOM('div', {'id': 'b'}, |
| createShadowRoot(createDOM('content', {'select': '.child'})), |
| createDOM('content', {'select': '.child'}))), |
| createDOM('div', {'id': 'host-child1', 'class': 'child'}), |
| createDOM('div', {'id': 'host-child2', 'class': 'child'}))); |
| |
| debug('Test for complex re-projections.'); |
| testFlatTree( |
| createDOM('div', {'id': 'a'}, |
| createShadowRoot( |
| createDOM('div', {'id': 'b'}, |
| createShadowRoot(createDOM('content', {'select': '.foo'}), |
| createDOM('div', {'id': 'c'})), |
| // Select #child-1 |
| createDOM('content', {'select': '#child-1'}, |
| createDOM('div', {'class': 'should-not-be-used'}), |
| // Should not select any nodes since it's inactive. |
| createDOM('content', {'class': 'should-be-inactive', 'select': '.foo'})), |
| createDOM('div', {'id': 'd', 'class': 'foo'}, |
| createShadowRoot(createDOM('div', {'id': 'e'}), |
| // Should select #child-2 and #g. |
| createDOM('content', {'select': '.foo'}), |
| createDOM('div', {'id': 'f'})), |
| // Select #child-2 |
| createDOM('content', {'select': '#child-2'}), |
| createDOM('div', {'id': 'g', 'class': 'foo'})), |
| createDOM('div', {'class': 'should-not-be-selected'}), |
| createDOM('div', {'id': 'h', 'class': 'foo'}))), |
| createDOM('div', {'id': 'child-1', 'class': 'foo'}), |
| createDOM('div', {'id': 'not-selected', 'class': 'foo'}), |
| createDOM('div', {'id': 'child-2', 'class': 'foo'}))); |
| |
| debug('Test for a shadow insertion point where nothing is distributed.'); |
| testFlatTree( |
| createDOM('div', {'id': 'a'}, |
| createShadowRoot(), |
| createShadowRoot( |
| createDOM('div', {'id': 'b'}), |
| createDOM('shadow', {'id': 'shadow'}, |
| createDOM('div', {'id': 'should-not-be-used'})), |
| createDOM('div', {'id': 'c'})))); |
| </script> |
| </body> |
| </html> |
