| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test.js"></script> |
| <script src="resources/shadow-dom.js"></script> |
| </head> |
| <body> |
| <script> |
| description("Tests for content element's getDistributedNodes()."); |
| |
| document.body.appendChild( |
| createDOM('div', {}, |
| createDOM('div', {'id': 'host-1'}, |
| createShadowRoot( |
| createDOM('content', {'id': 'content-1'})), |
| createDOM('div', {'id': 'child-1'})), |
| createDOM('div', {'id': 'host-2'}, |
| createShadowRoot( |
| createDOM('content', {'id': 'content-2'}), |
| createDOM('div', {'id': 'host-3'}, |
| createShadowRoot( |
| createDOM('content', {'id': 'content-3'})), |
| createDOM('div', {'id': 'child-3'}))), |
| createDOM('div', {'id': 'child-2'})))); |
| |
| |
| var content1 = getNodeInComposedTree('host-1/content-1'); |
| var content2 = getNodeInComposedTree('host-2/content-2'); |
| var content3 = getNodeInComposedTree('host-2/host-3/content-3'); |
| |
| var child1 = getNodeInComposedTree('child-1'); |
| var child2 = getNodeInComposedTree('child-2'); |
| var child3 = getNodeInComposedTree('host-2/child-3'); |
| |
| var distributedNodes1 = content1.getDistributedNodes(); |
| var distributedNodes2 = content2.getDistributedNodes(); |
| var distributedNodes3 = content3.getDistributedNodes(); |
| |
| function assertNodeList(nodeList, expectedNodes) |
| { |
| window.nodeList = nodeList; |
| window.expectedNodes = expectedNodes; |
| shouldBe("nodeList.length", "expectedNodes.length"); |
| for (var i = 0; i < nodeList.length; ++i) { |
| shouldBe("nodeList.item(" + i + ")", "expectedNodes[" + i + "]"); |
| } |
| } |
| |
| assertNodeList(distributedNodes1, [child1]); |
| assertNodeList(distributedNodes2, [child2]); |
| assertNodeList(distributedNodes3, [child3]); |
| |
| debug('Verify that getDistributedNodes() returns a static NodeList.'); |
| document.getElementById('host-1').innerHTML = ''; |
| assertNodeList(distributedNodes1, [child1]); |
| assertNodeList(content1.getDistributedNodes(), []); |
| |
| </script> |
| </body> |
| </html> |
