dom/tests/mochitest/webcomponents/test_nested_content_element.html@b8a032363ba2 (annotated)
dom/tests/mochitest/webcomponents/test_nested_content_element.html
Thu, 22 Jan 2015 13:21:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 22 Jan 2015 13:21:57 +0100
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
- permissions
- -rw-r--r--
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
| michael@0 | 1 | <!DOCTYPE HTML> |
| michael@0 | 2 | <html> |
| michael@0 | 3 | <!-- |
| michael@0 | 4 | https://bugzilla.mozilla.org/show_bug.cgi?id=806506 |
| michael@0 | 5 | --> |
| michael@0 | 6 | <head> |
| michael@0 | 7 | <title>Test for HTMLContent element</title> |
| michael@0 | 8 | <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> |
| michael@0 | 9 | <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> |
| michael@0 | 10 | </head> |
| michael@0 | 11 | <body> |
| michael@0 | 12 | <div id="grabme"></div> |
| michael@0 | 13 | <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=806506">Bug 806506</a> |
| michael@0 | 14 | <script> |
| michael@0 | 15 | |
| michael@0 | 16 | /** |
| michael@0 | 17 | * Constructs a node with a nested ShadowRoot with the following structure: |
| michael@0 | 18 | * <span> - - - - - - - - - - <ShadowRoot> |
| michael@0 | 19 | * <span> <span> - - - - - - - - - - <ShadowRoot> |
| michael@0 | 20 | * id=one id=four <span> |
| michael@0 | 21 | * data-color=red data-color=orange id=eleven |
| michael@0 | 22 | * <span> <span> <content> |
| michael@0 | 23 | * id=two id=five id=twelve |
| michael@0 | 24 | * data-color=blue data-color=purple select=secondSelect |
| michael@0 | 25 | * <span> <content> <span> |
| michael@0 | 26 | * id=three id=six id=thirteen |
| michael@0 | 27 | * data-color=green select=firstSelect |
| michael@0 | 28 | * <span> |
| michael@0 | 29 | * id=seven |
| michael@0 | 30 | * <content> |
| michael@0 | 31 | * id=eight |
| michael@0 | 32 | * <span> |
| michael@0 | 33 | * id=nine |
| michael@0 | 34 | * <span> |
| michael@0 | 35 | * id=ten |
| michael@0 | 36 | * data-color=grey |
| michael@0 | 37 | */ |
| michael@0 | 38 | function constructTree(firstSelect, secondSelect) { |
| michael@0 | 39 | var rootSpan = document.createElement("span"); |
| michael@0 | 40 | rootSpan.innerHTML = '<span id="one" data-color="red"></span><span id="two" data-color="blue"></span><span id="three" data-color="green"></span>'; |
| michael@0 | 41 | var firstShadow = rootSpan.createShadowRoot(); |
| michael@0 | 42 | 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>'; |
| michael@0 | 43 | var secondShadow = firstShadow.firstChild.createShadowRoot(); |
| michael@0 | 44 | secondShadow.innerHTML = '<span id="eleven"></span><content id="twelve" select="' + secondSelect + '"></content><span id="thirteen"></span>'; |
| michael@0 | 45 | return rootSpan; |
| michael@0 | 46 | } |
| michael@0 | 47 | |
| michael@0 | 48 | // Create a tree with content that matches on everything and check node distribution. |
| michael@0 | 49 | var allSpan = constructTree("*", "*"); |
| michael@0 | 50 | var firstContent = allSpan.shadowRoot.getElementById("six"); |
| michael@0 | 51 | var firstDistNodes = firstContent.getDistributedNodes(); |
| michael@0 | 52 | is(firstDistNodes.length, 3, "Universal selector should match all nodes."); |
| michael@0 | 53 | // Check the order of the distributed nodes. |
| michael@0 | 54 | is(firstDistNodes.item(0).id, "one", "First distributed node should have id of 'one'"); |
| michael@0 | 55 | is(firstDistNodes.item(1).id, "two", "Second distributed node should have id of 'two'"); |
| michael@0 | 56 | is(firstDistNodes.item(2).id, "three", "Third distributed node should have id of 'three'"); |
| michael@0 | 57 | var secondContent = allSpan.shadowRoot.firstChild.shadowRoot.getElementById("twelve"); |
| michael@0 | 58 | var secondDistNodes = secondContent.getDistributedNodes(); |
| michael@0 | 59 | is(secondDistNodes.length, 5, "Universial selector should match all nodes including those distributed into content."); |
| michael@0 | 60 | // Check the order of the distribute nodes. |
| michael@0 | 61 | is(secondDistNodes.item(0).id, "five", "First distributed node should have id of 'five'"); |
| michael@0 | 62 | is(secondDistNodes.item(1).id, "one", "Second distributed (reprojected) node should have id of 'one'"); |
| michael@0 | 63 | is(secondDistNodes.item(2).id, "two", "Third distributed (reprojected) node should have id of 'two'"); |
| michael@0 | 64 | is(secondDistNodes.item(3).id, "three", "Fourth distributed (reprojected) node should have id of 'three'"); |
| michael@0 | 65 | is(secondDistNodes.item(4).id, "ten", "Fifth distributed node should have id of 'ten'"); |
| michael@0 | 66 | |
| michael@0 | 67 | // Append an element after id=two and make sure that it is inserted into the corrent |
| michael@0 | 68 | // position in the insertion points. |
| michael@0 | 69 | var additionalSpan = document.createElement("span"); |
| michael@0 | 70 | additionalSpan.id = "additional"; |
| michael@0 | 71 | |
| michael@0 | 72 | // Insert the additional span in the third position, before the span with id=three. |
| michael@0 | 73 | allSpan.insertBefore(additionalSpan, allSpan.childNodes.item(2)); |
| michael@0 | 74 | firstDistNodes = firstContent.getDistributedNodes(); |
| michael@0 | 75 | secondDistNodes = secondContent.getDistributedNodes(); |
| michael@0 | 76 | is(firstDistNodes.length, 4, "First insertion point should match one more node."); |
| michael@0 | 77 | is(firstDistNodes.item(2).id, "additional", "Additional span should have been inserted into the third position of the first insertion point."); |
| michael@0 | 78 | |
| michael@0 | 79 | is(secondDistNodes.length, 6, "Second insertion point should match one more node."); |
| michael@0 | 80 | is(secondDistNodes.item(3).id, "additional", "Additional span should have been inserted into the fourth position of the second insertion point."); |
| michael@0 | 81 | |
| michael@0 | 82 | function nodeListDoesNotContain(nodeList, element) { |
| michael@0 | 83 | for (var i = 0; i < nodeList.length; i++) { |
| michael@0 | 84 | if (nodeList[i] == element) { |
| michael@0 | 85 | return false; |
| michael@0 | 86 | } |
| michael@0 | 87 | } |
| michael@0 | 88 | return true; |
| michael@0 | 89 | } |
| michael@0 | 90 | |
| michael@0 | 91 | // Remove the span with id=one and check that it is removed from all insertion points. |
| michael@0 | 92 | allSpan = constructTree("*", "*"); |
| michael@0 | 93 | var spanOne = allSpan.firstChild; |
| michael@0 | 94 | allSpan.removeChild(spanOne); |
| michael@0 | 95 | firstContent = allSpan.shadowRoot.getElementById("six"); |
| michael@0 | 96 | ok(nodeListDoesNotContain(firstContent.getDistributedNodes(), spanOne), "Child removed from host should not appear in insertion point node list."); |
| michael@0 | 97 | secondContent = allSpan.shadowRoot.firstChild.shadowRoot.getElementById("twelve"); |
| michael@0 | 98 | ok(nodeListDoesNotContain(secondContent.getDistributedNodes(), spanOne), "Child removed from host should not appear in nested insertion point node list."); |
| michael@0 | 99 | |
| michael@0 | 100 | // Make sure <content> in fallback content is inactive. |
| michael@0 | 101 | // First insertion point will not match anything and will use fallback content. |
| michael@0 | 102 | allSpan = constructTree("#nomatch", "*"); |
| michael@0 | 103 | var fallbackInsertionPoint = allSpan.shadowRoot.getElementById("eight"); |
| michael@0 | 104 | is(fallbackInsertionPoint.getDistributedNodes().length, 0, "Insertion points in default content should be inactive."); |
| michael@0 | 105 | |
| michael@0 | 106 | // Insertion points with non-universal selectors. |
| michael@0 | 107 | allSpan = constructTree("span[data-color=blue]", "*"); |
| michael@0 | 108 | firstContent = allSpan.shadowRoot.getElementById("six"); |
| michael@0 | 109 | is(firstContent.getDistributedNodes().length, 1, "Insertion point selector should only match one node."); |
| michael@0 | 110 | is(firstContent.getDistributedNodes()[0].dataset.color, "blue", "Projected node should match selector."); |
| michael@0 | 111 | secondContent = allSpan.shadowRoot.firstChild.shadowRoot.getElementById("twelve"); |
| michael@0 | 112 | is(secondContent.getDistributedNodes().length, 3, "Second insertion point should match two children and one reprojected node."); |
| michael@0 | 113 | is(secondContent.getDistributedNodes()[1].dataset.color, "blue", "Projected node should match selector."); |
| michael@0 | 114 | |
| michael@0 | 115 | allSpan = constructTree("span[data-color=blue]", "span[data-color=blue]"); |
| michael@0 | 116 | firstContent = allSpan.shadowRoot.getElementById("six"); |
| michael@0 | 117 | is(firstContent.getDistributedNodes().length, 1, "Insertion point selector should only match one node."); |
| michael@0 | 118 | is(firstContent.getDistributedNodes()[0].dataset.color, "blue", "Projected node should match selector."); |
| michael@0 | 119 | secondContent = allSpan.shadowRoot.firstChild.shadowRoot.getElementById("twelve"); |
| michael@0 | 120 | is(secondContent.getDistributedNodes().length, 1, "Insertion point should only match reprojected node."); |
| michael@0 | 121 | is(secondContent.getDistributedNodes()[0].dataset.color, "blue", "Projected node should match selector."); |
| michael@0 | 122 | |
| michael@0 | 123 | // Make sure that dynamically appended default content will get distributed. |
| michael@0 | 124 | </script> |
| michael@0 | 125 | </body> |
| michael@0 | 126 | </html> |
| michael@0 | 127 |
