diff options
Diffstat (limited to 'dom/tests/mochitest/webcomponents/test_nested_content_element.html')
-rw-r--r-- | dom/tests/mochitest/webcomponents/test_nested_content_element.html | 127 |
1 files changed, 0 insertions, 127 deletions
diff --git a/dom/tests/mochitest/webcomponents/test_nested_content_element.html b/dom/tests/mochitest/webcomponents/test_nested_content_element.html deleted file mode 100644 index 1d98d2996..000000000 --- a/dom/tests/mochitest/webcomponents/test_nested_content_element.html +++ /dev/null @@ -1,127 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=806506 ---> -<head> - <title>Test for HTMLContent element</title> - <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> - <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> -</head> -<body> -<div id="grabme"></div> -<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=806506">Bug 806506</a> -<script> - -/** - * Constructs a node with a nested ShadowRoot with the following structure: - * <span> - - - - - - - - - - <ShadowRoot> - * <span> <span> - - - - - - - - - - <ShadowRoot> - * id=one id=four <span> - * data-color=red data-color=orange id=eleven - * <span> <span> <content> - * id=two id=five id=twelve - * data-color=blue data-color=purple select=secondSelect - * <span> <content> <span> - * id=three id=six id=thirteen - * data-color=green select=firstSelect - * <span> - * id=seven - * <content> - * id=eight - * <span> - * id=nine - * <span> - * id=ten - * data-color=grey - */ -function constructTree(firstSelect, secondSelect) { - var rootSpan = document.createElement("span"); - rootSpan.innerHTML = '<span id="one" data-color="red"></span><span id="two" data-color="blue"></span><span id="three" data-color="green"></span>'; - var firstShadow = rootSpan.createShadowRoot(); - firstShadow.innerHTML = '<span id="four" data-color="orange"><span id="five" data-color="purple"></span><content id="six" select="' + firstSelect + '"><span id="seven"></span><content id="eight"></content><span id="nine"></span></content><span id="ten"></span></span>'; - var secondShadow = firstShadow.firstChild.createShadowRoot(); - secondShadow.innerHTML = '<span id="eleven"></span><content id="twelve" select="' + secondSelect + '"></content><span id="thirteen"></span>'; - return rootSpan; -} - -// Create a tree with content that matches on everything and check node distribution. -var allSpan = constructTree("*", "*"); -var firstContent = allSpan.shadowRoot.getElementById("six"); -var firstDistNodes = firstContent.getDistributedNodes(); -is(firstDistNodes.length, 3, "Universal selector should match all nodes."); -// Check the order of the distributed nodes. -is(firstDistNodes.item(0).id, "one", "First distributed node should have id of 'one'"); -is(firstDistNodes.item(1).id, "two", "Second distributed node should have id of 'two'"); -is(firstDistNodes.item(2).id, "three", "Third distributed node should have id of 'three'"); -var secondContent = allSpan.shadowRoot.firstChild.shadowRoot.getElementById("twelve"); -var secondDistNodes = secondContent.getDistributedNodes(); -is(secondDistNodes.length, 5, "Universial selector should match all nodes including those distributed into content."); -// Check the order of the distribute nodes. -is(secondDistNodes.item(0).id, "five", "First distributed node should have id of 'five'"); -is(secondDistNodes.item(1).id, "one", "Second distributed (reprojected) node should have id of 'one'"); -is(secondDistNodes.item(2).id, "two", "Third distributed (reprojected) node should have id of 'two'"); -is(secondDistNodes.item(3).id, "three", "Fourth distributed (reprojected) node should have id of 'three'"); -is(secondDistNodes.item(4).id, "ten", "Fifth distributed node should have id of 'ten'"); - -// Append an element after id=two and make sure that it is inserted into the corrent -// position in the insertion points. -var additionalSpan = document.createElement("span"); -additionalSpan.id = "additional"; - -// Insert the additional span in the third position, before the span with id=three. -allSpan.insertBefore(additionalSpan, allSpan.childNodes.item(2)); -firstDistNodes = firstContent.getDistributedNodes(); -secondDistNodes = secondContent.getDistributedNodes(); -is(firstDistNodes.length, 4, "First insertion point should match one more node."); -is(firstDistNodes.item(2).id, "additional", "Additional span should have been inserted into the third position of the first insertion point."); - -is(secondDistNodes.length, 6, "Second insertion point should match one more node."); -is(secondDistNodes.item(3).id, "additional", "Additional span should have been inserted into the fourth position of the second insertion point."); - -function nodeListDoesNotContain(nodeList, element) { - for (var i = 0; i < nodeList.length; i++) { - if (nodeList[i] == element) { - return false; - } - } - return true; -} - -// Remove the span with id=one and check that it is removed from all insertion points. -allSpan = constructTree("*", "*"); -var spanOne = allSpan.firstChild; -allSpan.removeChild(spanOne); -firstContent = allSpan.shadowRoot.getElementById("six"); -ok(nodeListDoesNotContain(firstContent.getDistributedNodes(), spanOne), "Child removed from host should not appear in insertion point node list."); -secondContent = allSpan.shadowRoot.firstChild.shadowRoot.getElementById("twelve"); -ok(nodeListDoesNotContain(secondContent.getDistributedNodes(), spanOne), "Child removed from host should not appear in nested insertion point node list."); - -// Make sure <content> in fallback content is inactive. -// First insertion point will not match anything and will use fallback content. -allSpan = constructTree("#nomatch", "*"); -var fallbackInsertionPoint = allSpan.shadowRoot.getElementById("eight"); -is(fallbackInsertionPoint.getDistributedNodes().length, 0, "Insertion points in default content should be inactive."); - -// Insertion points with non-universal selectors. -allSpan = constructTree("span[data-color=blue]", "*"); -firstContent = allSpan.shadowRoot.getElementById("six"); -is(firstContent.getDistributedNodes().length, 1, "Insertion point selector should only match one node."); -is(firstContent.getDistributedNodes()[0].dataset.color, "blue", "Projected node should match selector."); -secondContent = allSpan.shadowRoot.firstChild.shadowRoot.getElementById("twelve"); -is(secondContent.getDistributedNodes().length, 3, "Second insertion point should match two children and one reprojected node."); -is(secondContent.getDistributedNodes()[1].dataset.color, "blue", "Projected node should match selector."); - -allSpan = constructTree("span[data-color=blue]", "span[data-color=blue]"); -firstContent = allSpan.shadowRoot.getElementById("six"); -is(firstContent.getDistributedNodes().length, 1, "Insertion point selector should only match one node."); -is(firstContent.getDistributedNodes()[0].dataset.color, "blue", "Projected node should match selector."); -secondContent = allSpan.shadowRoot.firstChild.shadowRoot.getElementById("twelve"); -is(secondContent.getDistributedNodes().length, 1, "Insertion point should only match reprojected node."); -is(secondContent.getDistributedNodes()[0].dataset.color, "blue", "Projected node should match selector."); - -// Make sure that dynamically appended default content will get distributed. -</script> -</body> -</html> - |