<!
DOCTYPE HTML>
<
html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=806506
-->
<
head>
<
title>Test for ShadowRoot</
title>
<
script type=
"text/javascript" src=
"head.js"></
script>
<
script src=
"/tests/SimpleTest/SimpleTest.js"></
script>
<
link rel=
"stylesheet" type=
"text/css" href=
"/tests/SimpleTest/test.css" />
</
head>
<
body>
<a target=
"_blank" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=806506">Bug
806506</a>
<
script>
SimpleTest.waitForExplicitFinish();
var content =
'<div id="movedtoshadow" class="testclass"></div>' +
'<svg id="svgmovedtoshadow"></svg>';
createIframe(content)
.then((aDocument) => {
// Create ShadowRoot.
var element = aDocument.createElement(
"div");
ok(!element.shadowRoot,
"div element should not have a shadow root.");
var shadow = element.attachShadow({mode:
"open"});
is(element.shadowRoot, shadow,
"shadowRoot property should return the same shadow root that was just created.");
// Move an element from the document to the ShadowRoot.
var inShadowEl = aDocument.getElementById(
"movedtoshadow");
var inShadowSVGEl = aDocument.getElementById(
"svgmovedtoshadow");
// Test getElementById
ok(!shadow.getElementById(
"movedtoshadow"),
"Element not in ShadowRoot should not be accessible from ShadowRoot API.");
ok(!shadow.getElementById(
"svgmovedtoshadow"),
"SVG element not in ShadowRoot should not be accessible from ShadowRoot API.");
shadow.appendChild(inShadowEl);
shadow.appendChild(inShadowSVGEl);
is(shadow.getElementById(
"movedtoshadow"), inShadowEl,
"Element appended to a ShadowRoot should be accessible from ShadowRoot API.");
ok(!aDocument.getElementById(
"movedtoshadow"),
"Element appended to a ShadowRoot should not be accessible from document.");
is(shadow.getElementById(
"svgmovedtoshadow"), inShadowSVGEl,
"SVG element appended to a ShadowRoot should be accessible from ShadowRoot API.");
ok(!aDocument.getElementById(
"svgmovedtoshadow"),
"SVG element appended to a ShadowRoot should not be accessible from document.");
// Remove elements from ShadowRoot and make sure that they are no longer accessible via the Shad
owRoot API.
shadow.removeChild(inShadowEl);
shadow.removeChild(inShadowSVGEl);
ok(!shadow.getElementById("movedtoshadow"), "ShadowRoot API should not be able to access elements removed from ShadowRoot.");
ok(!shadow.getElementById("svgmovedtoshadow"), "ShadowRoot API should not be able to access elements removed from ShadowRoot.");
// Test querySelector on element in a ShadowRoot.
element = aDocument.createElement("div");
shadow = element.attachShadow({mode: "open"});
var parentDiv = aDocument.createElement("div");
var childSpan = aDocument.createElement("span");
childSpan.id = "innerdiv";
parentDiv.appendChild(childSpan);
is(parentDiv.querySelector("#innerdiv"), childSpan, "ID query selector should work on element in ShadowRoot.");
is(parentDiv.querySelector("span"), childSpan, "Tag query selector should work on element in ShadowRoot.");
// Test that exception is thrown when trying to create a cycle with host node.
element = aDocument.createElement("div");
shadow = element.attachShadow({mode: "open"});
try {
shadow.appendChild(element);
ok(false, "Excpetion should be thrown when creating a cycle with host content.");
} catch (ex) {
ok(true, "Excpetion should be thrown when creating a cycle with host content.");
}
// Basic innerHTML tests.
shadow.innerHTML = '<span id="first"></span><div id="second"></div>';
is(shadow.childNodes.length, 2, "There should be two children in the ShadowRoot.");
is(shadow.getElementById("second").tagName, "DIV", "Elements created by innerHTML should be accessible by ShadowRoot API.");
SimpleTest.finish();
});
</script>
</body>
</html>
