| <!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 a shadow element's getDistributedNodes()."); |
| |
| var sandbox = document.getElementById('sandbox'); |
| |
| function prepareTree(root) { |
| sandbox.innerHTML = ''; |
| sandbox.appendChild(root); |
| } |
| |
| function assertDistributedNodes(insertionPointId, expectedDistributedNodes) { |
| debug('\ngetDistributedNodes() for "' + insertionPointId + '" should return [' + expectedDistributedNodes + ']'); |
| var insertionPoint = getNodeInComposedTree(insertionPointId); |
| var distributedNodes = insertionPoint.getDistributedNodes(); |
| window.distributedNodes = distributedNodes; |
| window.expectedDistributedNodes = expectedDistributedNodes; |
| shouldBe("distributedNodes.length", "expectedDistributedNodes.length"); |
| for (var i = 0; i < distributedNodes.length && i < expectedDistributedNodes.length; ++i) { |
| shouldBe("distributedNodes.item(" + i + ")", "getNodeInComposedTree(expectedDistributedNodes[" + i + "])"); |
| } |
| } |
| |
| prepareTree( |
| createDOM('shadow', {'id': 'shadow'})); |
| assertDistributedNodes('shadow', []); |
| |
| prepareTree( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('shadow', {'id': 'shadow'})))); |
| assertDistributedNodes('host/shadow', []); |
| |
| prepareTree( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('shadow', {'id': 'shadow'}, |
| createDOM('div', {'id': 'shadow-child'}))))); |
| assertDistributedNodes('host/shadow', []); |
| |
| prepareTree( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('shadow', {'id': 'shadow'})), |
| createDOM('div', {'id': 'host-child'}))); |
| assertDistributedNodes('host/shadow', ['host-child']); |
| |
| prepareTree( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('shadow', {'id': 'shadow'}, |
| createDOM('div'))), |
| createDOM('div', {'id': 'host-child'}))); |
| assertDistributedNodes('host/shadow', ['host-child']); |
| |
| prepareTree( |
| createDOM('details', {'id': 'details'}, |
| createShadowRoot( |
| createDOM('shadow', {'id': 'shadow'})), |
| createDOM('div', {'id': 'details-child'}))); |
| // A <detail> element has one UA shadow root. |
| assertDistributedNodes('details//shadow', []); |
| debug("Since shadow insertion points don't work for DETAILS elements, this causes a warning message."); |
| |
| prepareTree( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('div', {'id': 'older-child'})), |
| createShadowRoot( |
| createDOM('shadow', {'id': 'shadow'})))); |
| assertDistributedNodes('host//shadow', ['host/older-child']); |
| |
| prepareTree( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('div', {'id': 'older-child-1'}), |
| createDOM('content', {'id': 'content'}), |
| createDOM('div', {'id': 'older-child-2'})), |
| createShadowRoot( |
| createDOM('shadow', {'id': 'shadow'})), |
| createDOM('div', {'id': 'host-child'}))); |
| assertDistributedNodes('host//shadow', ['host/older-child-1', 'host-child', 'host/older-child-2']); |
| |
| prepareTree( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('div', {'id': 'older-child-1'}), |
| createDOM('content', {'id': 'content'}), |
| createDOM('div', {'id': 'older-child-2'})), |
| createShadowRoot( |
| createDOM('shadow', {'id': 'shadow'})), |
| createDOM('div', {'id': 'host-child'}))); |
| assertDistributedNodes('host//shadow', ['host/older-child-1', 'host-child', 'host/older-child-2']); |
| |
| prepareTree( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('div', {'id': 'older-child-1'}), |
| createDOM('content', {'id': 'content'}), |
| createDOM('div', {'id': 'older-child-2'})), |
| createShadowRoot( |
| createDOM('shadow', {'id': 'shadow'})))); |
| assertDistributedNodes('host//shadow', ['host/older-child-1', 'host/older-child-2']); |
| |
| prepareTree( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('div', {'id': 'older-child-1'}), |
| createDOM('content', {'id': 'content'}, |
| createDOM('div', {'id': 'older-content-child'})), |
| createDOM('div', {'id': 'older-child-2'})), |
| createShadowRoot( |
| createDOM('shadow', {'id': 'shadow'})))); |
| assertDistributedNodes('host//shadow', ['host/older-child-1', 'host/older-content-child', 'host/older-child-2']); |
| |
| prepareTree( |
| createDOM('div', {'id': 'host'}, |
| createShadowRoot( |
| createDOM('div', {'id': 'oldest-child-1'}), |
| createDOM('content', {'id': 'content'}), |
| createDOM('div', {'id': 'oldest-child-2'})), |
| createShadowRoot( |
| createDOM('div', {'id': 'older-child-1'}), |
| createDOM('shadow', {'id': 'older-shadow'}), |
| createDOM('div', {'id': 'older-child-2'})), |
| createShadowRoot( |
| createDOM('shadow', {'id': 'shadow'})), |
| createDOM('div', {'id': 'host-child'}))); |
| assertDistributedNodes('host//older-shadow', ['host/oldest-child-1', 'host-child', 'host/oldest-child-2']); |
| assertDistributedNodes('host///shadow', ['host//older-child-1', 'host/oldest-child-1', 'host-child', 'host/oldest-child-2', 'host//older-child-2']); |
| |
| </script> |
| </body> |
| </html> |
