174 lines
9.4 KiB
HTML
174 lines
9.4 KiB
HTML
<!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>
|
|
|