1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/dom/tests/mochitest/webcomponents/test_shadow_element.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,173 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<!--
1.7 +https://bugzilla.mozilla.org/show_bug.cgi?id=887538
1.8 +-->
1.9 +<head>
1.10 + <title>Test for HTMLShadowElement</title>
1.11 + <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.12 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
1.13 +</head>
1.14 +<body>
1.15 +<div id="grabme"></div>
1.16 +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=887538">Bug 887538</a>
1.17 +<script>
1.18 +var host = document.createElement("span");
1.19 +
1.20 +// Create three shadow roots on a single host and make sure that shadow elements
1.21 +// are associated with the correct shadow root.
1.22 +var firstShadow = host.createShadowRoot();
1.23 +firstShadow.innerHTML = '<shadow id="shadowone"></shadow>';
1.24 +var secondShadow = host.createShadowRoot();
1.25 +secondShadow.innerHTML = '<shadow id="shadowtwo"></shadow>';
1.26 +var thirdShadow = host.createShadowRoot();
1.27 +thirdShadow.innerHTML = '<shadow id="shadowthree"></shadow>';
1.28 +
1.29 +is(firstShadow.getElementById("shadowone").olderShadowRoot, null, "Shadow element in oldest ShadowRoot should not be associated with a ShadowRoot.");
1.30 +is(secondShadow.getElementById("shadowtwo").olderShadowRoot, firstShadow, "Shadow element should be associated with older ShadowRoot.");
1.31 +is(thirdShadow.getElementById("shadowthree").olderShadowRoot, secondShadow, "Shadow element should be associated with older ShadowRoot.");
1.32 +
1.33 +// Only the first ShadowRoot in tree order is an insertion point.
1.34 +host = document.createElement("span");
1.35 +firstShadow = host.createShadowRoot();
1.36 +secondShadow = host.createShadowRoot();
1.37 +secondShadow.innerHTML = '<shadow id="shadowone"></shadow><shadow id="shadowtwo"></shadow>';
1.38 +var shadowElemOne = secondShadow.getElementById("shadowone");
1.39 +var shadowElemTwo = secondShadow.getElementById("shadowtwo");
1.40 +
1.41 +is(shadowElemOne.olderShadowRoot, firstShadow, "First <shadow> in tree order should be an insertion point.");
1.42 +is(shadowElemTwo.olderShadowRoot, null, "Second <shadow> in tree order should not be an insertion point.");
1.43 +
1.44 +// Remove the first <shadow> element and make sure the second <shadow> element becomes an insertion point.
1.45 +secondShadow.removeChild(shadowElemOne);
1.46 +is(shadowElemOne.olderShadowRoot, null, "<shadow> element not in a ShadowRoot is not an insertion point.");
1.47 +is(shadowElemTwo.olderShadowRoot, firstShadow, "Second <shadow> element should become insertion point after first is removed.");
1.48 +
1.49 +// Insert a <shadow> element before the current shadow insertion point and make sure that it becomes an insertion point.
1.50 +secondShadow.insertBefore(shadowElemOne, shadowElemTwo);
1.51 +is(shadowElemOne.olderShadowRoot, firstShadow, "<shadow> element inserted as first in tree order should become an insertion point.");
1.52 +is(shadowElemTwo.olderShadowRoot, null, "<shadow> element should no longer be an insertion point it another is inserted before.");
1.53 +
1.54 +// <shadow> element in fallback content is not an insertion point.
1.55 +host = document.createElement("span");
1.56 +firstShadow = host.createShadowRoot();
1.57 +secondShadow = host.createShadowRoot();
1.58 +secondShadow.innerHTML = '<content><shadow id="shadowone"></shadow></content><shadow id="shadowtwo"></shadow>';
1.59 +shadowElemOne = secondShadow.getElementById("shadowone");
1.60 +shadowElemTwo = secondShadow.getElementById("shadowtwo");
1.61 +
1.62 +is(shadowElemOne.olderShadowRoot, null, "<shadow> element in fallback content is not an insertion point.");
1.63 +is(shadowElemTwo.olderShadowRoot, null, "<shadow> element preceeded by another <shadow> element is not an insertion point.");
1.64 +
1.65 +// <shadow> element that is descendant of shadow element is not an insertion point.
1.66 +host = document.createElement("span");
1.67 +firstShadow = host.createShadowRoot();
1.68 +secondShadow = host.createShadowRoot();
1.69 +secondShadow.innerHTML = '<shadow><shadow id="shadowone"></shadow></shadow>';
1.70 +shadowElemOne = secondShadow.getElementById("shadowone");
1.71 +is(shadowElemOne.olderShadowRoot, null, "<shadow> element that is descendant of shadow element is not an insertion point.");
1.72 +
1.73 +// Check projection of <content> elements through <shadow> elements.
1.74 +host = document.createElement("span");
1.75 +firstShadow = host.createShadowRoot();
1.76 +secondShadow = host.createShadowRoot();
1.77 +firstShadow.innerHTML = '<content id="firstcontent"></content>';
1.78 +secondShadow.innerHTML = '<shadow><span id="one"></span><content id="secondcontent"></content><span id="four"></span></shadow>';
1.79 +host.innerHTML = '<span id="two"></span><span id="three"></span>';
1.80 +var firstContent = firstShadow.getElementById("firstcontent");
1.81 +var secondContent = secondShadow.getElementById("secondcontent");
1.82 +var firstDistNodes = firstContent.getDistributedNodes();
1.83 +var secondDistNodes = secondContent.getDistributedNodes();
1.84 +
1.85 +is(secondDistNodes.length, 2, "There should be two distributed nodes from the host.");
1.86 +ok(secondDistNodes[0].id == "two" &&
1.87 + secondDistNodes[1].id == "three", "Nodes projected from host should preserve order.");
1.88 +
1.89 +is(firstDistNodes.length, 4, "There should be four distributed nodes, two from the first shadow, two from the second shadow.");
1.90 +ok(firstDistNodes[0].id == "one" &&
1.91 + firstDistNodes[1].id == "two" &&
1.92 + firstDistNodes[2].id == "three" &&
1.93 + firstDistNodes[3].id == "four", "Reprojection through shadow should preserve node order.");
1.94 +
1.95 +// Remove a node from the host and make sure that it is removed from all insertion points.
1.96 +host.removeChild(host.firstChild);
1.97 +firstDistNodes = firstContent.getDistributedNodes();
1.98 +secondDistNodes = secondContent.getDistributedNodes();
1.99 +
1.100 +is(secondDistNodes.length, 1, "There should be one distriubted node remaining after removing node from host.");
1.101 +ok(secondDistNodes[0].id == "three", "Span with id=two should have been removed from content element.");
1.102 +is(firstDistNodes.length, 3, "There should be three distributed nodes remaining after removing node from host.");
1.103 +ok(firstDistNodes[0].id == "one" &&
1.104 + firstDistNodes[1].id == "three" &&
1.105 + firstDistNodes[2].id == "four", "Reprojection through shadow should preserve node order.");
1.106 +
1.107 +// Check projection of <shadow> elements to <content> elements.
1.108 +host = document.createElement("span");
1.109 +firstShadow = host.createShadowRoot();
1.110 +secondShadow = host.createShadowRoot();
1.111 +secondShadow.innerHTML = '<span id="firstspan"><shadow></shadow></span>';
1.112 +thirdShadow = secondShadow.getElementById("firstspan").createShadowRoot();
1.113 +thirdShadow.innerHTML = '<content id="firstcontent"></content>';
1.114 +firstContent = thirdShadow.getElementById("firstcontent");
1.115 +var shadowChild = document.createElement("span");
1.116 +firstShadow.appendChild(shadowChild);
1.117 +
1.118 +is(firstContent.getDistributedNodes()[0], shadowChild, "Elements in shadow insertioin point should be projected into content insertion points.");
1.119 +
1.120 +// Remove child of ShadowRoot and check that projected node is removed from insertion point.
1.121 +firstShadow.removeChild(firstShadow.firstChild);
1.122 +
1.123 +is(firstContent.getDistributedNodes().length, 0, "Reprojected element was removed from ShadowRoot, thus it should be removed from content insertion point.");
1.124 +
1.125 +// Check deeply nested projection of <shadow> elements.
1.126 +host = document.createElement("span");
1.127 +firstShadow = host.createShadowRoot();
1.128 +firstShadow.innerHTML = '<content></content>';
1.129 +secondShadow = host.createShadowRoot();
1.130 +secondShadow.innerHTML = '<shadow><content></content></shadow>';
1.131 +thirdShadow = host.createShadowRoot();
1.132 +thirdShadow.innerHTML = '<span id="firstspan"><shadow><content></content></shadow></span>';
1.133 +var fourthShadow = thirdShadow.getElementById("firstspan").createShadowRoot();
1.134 +fourthShadow.innerHTML = '<content id="firstcontent"></content>';
1.135 +firstContent = fourthShadow.getElementById("firstcontent");
1.136 +host.innerHTML = '<span></span>';
1.137 +
1.138 +is(firstContent.getDistributedNodes()[0], host.firstChild, "Child of host should be projected to insertion point.");
1.139 +
1.140 +// Remove node and make sure that it is removed from distributed nodes.
1.141 +host.removeChild(host.firstChild);
1.142 +
1.143 +is(firstContent.getDistributedNodes().length, 0, "Node removed from host should be removed from insertion point.");
1.144 +
1.145 +// Check projection of fallback content through <shadow> elements.
1.146 +host = document.createElement("span");
1.147 +firstShadow = host.createShadowRoot();
1.148 +firstShadow.innerHTML = '<content><span id="firstspan"></span></content>';
1.149 +secondShadow = host.createShadowRoot();
1.150 +secondShadow.innerHTML = '<span id="secondspan"><shadow id="firstshadow"></shadow></span>';
1.151 +firstShadowElem = secondShadow.getElementById("firstshadow");
1.152 +thirdShadow = secondShadow.getElementById("secondspan").createShadowRoot();
1.153 +thirdShadow.innerHTML = '<content id="firstcontent"></content>';
1.154 +firstContent = thirdShadow.getElementById("firstcontent");
1.155 +
1.156 +is(firstContent.getDistributedNodes().length, 1, "There should be one node distributed from fallback content.");
1.157 +is(firstContent.getDistributedNodes()[0], firstShadow.getElementById("firstspan"), "Fallback content should be distributed.");
1.158 +
1.159 +// Add some content to the host (causing the fallback content to be dropped) and make sure distribution nodes are updated.
1.160 +
1.161 +var newElem = document.createElement("div");
1.162 +firstShadowElem.appendChild(newElem);
1.163 +
1.164 +is(firstContent.getDistributedNodes().length, 1, "There should be one node distributed from the host.");
1.165 +is(firstContent.getDistributedNodes()[0], newElem, "Distributed node should be from host, not fallback content.");
1.166 +
1.167 +// Remove the distribution node and check that fallback content is used.
1.168 +firstShadowElem.removeChild(newElem);
1.169 +
1.170 +is(firstContent.getDistributedNodes().length, 1, "There should be one node distributed from fallback content.");
1.171 +is(firstContent.getDistributedNodes()[0], firstShadow.getElementById("firstspan"), "Fallback content should be distributed after removing node from host.");
1.172 +
1.173 +</script>
1.174 +</body>
1.175 +</html>
1.176 +
