<!DOCTYPE HTML> <html> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=887538 --> <head> <title>Test for HTMLShadowElement</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=887538">Bug 887538</a> <script> var host = document.createElement("span"); // Create three shadow roots on a single host and make sure that shadow elements // are associated with the correct shadow root. var firstShadow = host.createShadowRoot(); firstShadow.innerHTML = '<shadow id="shadowone"></shadow>'; var secondShadow = host.createShadowRoot(); secondShadow.innerHTML = '<shadow id="shadowtwo"></shadow>'; var thirdShadow = host.createShadowRoot(); thirdShadow.innerHTML = '<shadow id="shadowthree"></shadow>'; is(firstShadow.getElementById("shadowone").olderShadowRoot, null, "Shadow element in oldest ShadowRoot should not be associated with a ShadowRoot."); is(secondShadow.getElementById("shadowtwo").olderShadowRoot, firstShadow, "Shadow element should be associated with older ShadowRoot."); is(thirdShadow.getElementById("shadowthree").olderShadowRoot, secondShadow, "Shadow element should be associated with older ShadowRoot."); // Only the first ShadowRoot in tree order is an insertion point. host = document.createElement("span"); firstShadow = host.createShadowRoot(); secondShadow = host.createShadowRoot(); secondShadow.innerHTML = '<shadow id="shadowone"></shadow><shadow id="shadowtwo"></shadow>'; var shadowElemOne = secondShadow.getElementById("shadowone"); var shadowElemTwo = secondShadow.getElementById("shadowtwo"); is(shadowElemOne.olderShadowRoot, firstShadow, "First <shadow> in tree order should be an insertion point."); is(shadowElemTwo.olderShadowRoot, null, "Second <shadow> in tree order should not be an insertion point."); // Remove the first <shadow> element and make sure the second <shadow> element becomes an insertion point. secondShadow.removeChild(shadowElemOne); is(shadowElemOne.olderShadowRoot, null, "<shadow> element not in a ShadowRoot is not an insertion point."); is(shadowElemTwo.olderShadowRoot, firstShadow, "Second <shadow> element should become insertion point after first is removed."); // Insert a <shadow> element before the current shadow insertion point and make sure that it becomes an insertion point. secondShadow.insertBefore(shadowElemOne, shadowElemTwo); is(shadowElemOne.olderShadowRoot, firstShadow, "<shadow> element inserted as first in tree order should become an insertion point."); is(shadowElemTwo.olderShadowRoot, null, "<shadow> element should no longer be an insertion point it another is inserted before."); // <shadow> element in fallback content is not an insertion point. host = document.createElement("span"); firstShadow = host.createShadowRoot(); secondShadow = host.createShadowRoot(); secondShadow.innerHTML = '<content><shadow id="shadowone"></shadow></content><shadow id="shadowtwo"></shadow>'; shadowElemOne = secondShadow.getElementById("shadowone"); shadowElemTwo = secondShadow.getElementById("shadowtwo"); is(shadowElemOne.olderShadowRoot, null, "<shadow> element in fallback content is not an insertion point."); is(shadowElemTwo.olderShadowRoot, null, "<shadow> element preceeded by another <shadow> element is not an insertion point."); // <shadow> element that is descendant of shadow element is not an insertion point. host = document.createElement("span"); firstShadow = host.createShadowRoot(); secondShadow = host.createShadowRoot(); secondShadow.innerHTML = '<shadow><shadow id="shadowone"></shadow></shadow>'; shadowElemOne = secondShadow.getElementById("shadowone"); is(shadowElemOne.olderShadowRoot, null, "<shadow> element that is descendant of shadow element is not an insertion point."); // Check projection of <content> elements through <shadow> elements. host = document.createElement("span"); firstShadow = host.createShadowRoot(); secondShadow = host.createShadowRoot(); firstShadow.innerHTML = '<content id="firstcontent"></content>'; secondShadow.innerHTML = '<shadow><span id="one"></span><content id="secondcontent"></content><span id="four"></span></shadow>'; host.innerHTML = '<span id="two"></span><span id="three"></span>'; var firstContent = firstShadow.getElementById("firstcontent"); var secondContent = secondShadow.getElementById("secondcontent"); var firstDistNodes = firstContent.getDistributedNodes(); var secondDistNodes = secondContent.getDistributedNodes(); is(secondDistNodes.length, 2, "There should be two distributed nodes from the host."); ok(secondDistNodes[0].id == "two" && secondDistNodes[1].id == "three", "Nodes projected from host should preserve order."); is(firstDistNodes.length, 4, "There should be four distributed nodes, two from the first shadow, two from the second shadow."); ok(firstDistNodes[0].id == "one" && firstDistNodes[1].id == "two" && firstDistNodes[2].id == "three" && firstDistNodes[3].id == "four", "Reprojection through shadow should preserve node order."); // Remove a node from the host and make sure that it is removed from all insertion points. host.removeChild(host.firstChild); firstDistNodes = firstContent.getDistributedNodes(); secondDistNodes = secondContent.getDistributedNodes(); is(secondDistNodes.length, 1, "There should be one distriubted node remaining after removing node from host."); ok(secondDistNodes[0].id == "three", "Span with id=two should have been removed from content element."); is(firstDistNodes.length, 3, "There should be three distributed nodes remaining after removing node from host."); ok(firstDistNodes[0].id == "one" && firstDistNodes[1].id == "three" && firstDistNodes[2].id == "four", "Reprojection through shadow should preserve node order."); // Check projection of <shadow> elements to <content> elements. host = document.createElement("span"); firstShadow = host.createShadowRoot(); secondShadow = host.createShadowRoot(); secondShadow.innerHTML = '<span id="firstspan"><shadow></shadow></span>'; thirdShadow = secondShadow.getElementById("firstspan").createShadowRoot(); thirdShadow.innerHTML = '<content id="firstcontent"></content>'; firstContent = thirdShadow.getElementById("firstcontent"); var shadowChild = document.createElement("span"); firstShadow.appendChild(shadowChild); is(firstContent.getDistributedNodes()[0], shadowChild, "Elements in shadow insertioin point should be projected into content insertion points."); // Remove child of ShadowRoot and check that projected node is removed from insertion point. firstShadow.removeChild(firstShadow.firstChild); is(firstContent.getDistributedNodes().length, 0, "Reprojected element was removed from ShadowRoot, thus it should be removed from content insertion point."); // Check deeply nested projection of <shadow> elements. host = document.createElement("span"); firstShadow = host.createShadowRoot(); firstShadow.innerHTML = '<content></content>'; secondShadow = host.createShadowRoot(); secondShadow.innerHTML = '<shadow><content></content></shadow>'; thirdShadow = host.createShadowRoot(); thirdShadow.innerHTML = '<span id="firstspan"><shadow><content></content></shadow></span>'; var fourthShadow = thirdShadow.getElementById("firstspan").createShadowRoot(); fourthShadow.innerHTML = '<content id="firstcontent"></content>'; firstContent = fourthShadow.getElementById("firstcontent"); host.innerHTML = '<span></span>'; is(firstContent.getDistributedNodes()[0], host.firstChild, "Child of host should be projected to insertion point."); // Remove node and make sure that it is removed from distributed nodes. host.removeChild(host.firstChild); is(firstContent.getDistributedNodes().length, 0, "Node removed from host should be removed from insertion point."); // Check projection of fallback content through <shadow> elements. host = document.createElement("span"); firstShadow = host.createShadowRoot(); firstShadow.innerHTML = '<content><span id="firstspan"></span></content>'; secondShadow = host.createShadowRoot(); secondShadow.innerHTML = '<span id="secondspan"><shadow id="firstshadow"></shadow></span>'; firstShadowElem = secondShadow.getElementById("firstshadow"); thirdShadow = secondShadow.getElementById("secondspan").createShadowRoot(); thirdShadow.innerHTML = '<content id="firstcontent"></content>'; firstContent = thirdShadow.getElementById("firstcontent"); is(firstContent.getDistributedNodes().length, 1, "There should be one node distributed from fallback content."); is(firstContent.getDistributedNodes()[0], firstShadow.getElementById("firstspan"), "Fallback content should be distributed."); // Add some content to the host (causing the fallback content to be dropped) and make sure distribution nodes are updated. var newElem = document.createElement("div"); firstShadowElem.appendChild(newElem); is(firstContent.getDistributedNodes().length, 1, "There should be one node distributed from the host."); is(firstContent.getDistributedNodes()[0], newElem, "Distributed node should be from host, not fallback content."); // Remove the distribution node and check that fallback content is used. firstShadowElem.removeChild(newElem); is(firstContent.getDistributedNodes().length, 1, "There should be one node distributed from fallback content."); is(firstContent.getDistributedNodes()[0], firstShadow.getElementById("firstspan"), "Fallback content should be distributed after removing node from host."); </script> </body> </html>