1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/dom/tests/mochitest/webcomponents/test_shadowroot.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,83 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<!--
1.7 +https://bugzilla.mozilla.org/show_bug.cgi?id=806506
1.8 +-->
1.9 +<head>
1.10 + <title>Test for ShadowRoot</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="movedtoshadow" class="testclass"></div>
1.16 +<svg id="svgmovedtoshadow"></svg>
1.17 +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=806506">Bug 806506</a>
1.18 +<script>
1.19 +// Create ShadowRoot.
1.20 +var element = document.createElement("div");
1.21 +ok(!element.shadowRoot, "div element should not have a shadow root.");
1.22 +var shadow = element.createShadowRoot();
1.23 +is(element.shadowRoot, shadow, "shadowRoot property should return the same shadow root that was just created.");
1.24 +
1.25 +// Move an element from the document to the ShadowRoot.
1.26 +var inShadowEl = document.getElementById("movedtoshadow");
1.27 +var inShadowSVGEl = document.getElementById("svgmovedtoshadow");
1.28 +
1.29 +// Test getElementById
1.30 +ok(!shadow.getElementById("movedtoshadow"), "Element not in ShadowRoot should not be accessible from ShadowRoot API.");
1.31 +ok(!shadow.getElementById("svgmovedtoshadow"), "SVG element not in ShadowRoot should not be accessible from ShadowRoot API.");
1.32 +shadow.appendChild(inShadowEl);
1.33 +shadow.appendChild(inShadowSVGEl);
1.34 +is(shadow.getElementById("movedtoshadow"), inShadowEl, "Element appended to a ShadowRoot should be accessible from ShadowRoot API.");
1.35 +ok(!document.getElementById("movedtoshadow"), "Element appended to a ShadowRoot should not be accessible from document.");
1.36 +is(shadow.getElementById("svgmovedtoshadow"), inShadowSVGEl, "SVG element appended to a ShadowRoot should be accessible from ShadowRoot API.");
1.37 +ok(!document.getElementById("svgmovedtoshadow"), "SVG element appended to a ShadowRoot should not be accessible from document.");
1.38 +
1.39 +// Test getElementsByClassName
1.40 +is(document.getElementsByClassName("testclass").length, 0, "Element removed from DOM should not be accessible by DOM accessors.");
1.41 +is(shadow.getElementsByClassName("testclass").length, 1, "Element added to ShadowRoot should be accessible by ShadowRoot API.");
1.42 +
1.43 +// Test getElementsByTagName{NS}
1.44 +is(document.getElementsByTagName("div").length, 0, "Element removed from DOM should not be accessible from DOM accessors.");
1.45 +is(shadow.getElementsByTagName("div").length, 1, "Elements in the ShadowRoot should be accessible from the ShadowRoot API.");
1.46 +is(document.getElementsByTagName("svg").length, 0, "SVG elements removed from DOM should not be accessible from DOM accessors.");
1.47 +is(shadow.getElementsByTagName("svg").length, 1, "SVG element in the ShadowRoot should be accessible from the ShadowRoot API.");
1.48 +is(shadow.getElementsByTagNameNS("http://www.w3.org/2000/svg", "svg").length, 1, "SVG element in the ShadowRoot should be accessible from the ShadowRoot API.");
1.49 +
1.50 +// Remove elements from ShadowRoot and make sure that they are no longer accessible via the ShadowRoot API.
1.51 +shadow.removeChild(inShadowEl);
1.52 +shadow.removeChild(inShadowSVGEl);
1.53 +ok(!shadow.getElementById("movedtoshadow"), "ShadowRoot API should not be able to access elements removed from ShadowRoot.");
1.54 +ok(!shadow.getElementById("svgmovedtoshadow"), "ShadowRoot API should not be able to access elements removed from ShadowRoot.");
1.55 +is(shadow.getElementsByClassName("testclass").length, 0, "ShadowRoot getElementsByClassName should not be able to access elements removed from ShadowRoot.");
1.56 +is(shadow.getElementsByTagName("svg").length, 0, "ShadowRoot getElementsByTagName should not be able to access elements removed from ShadowRoot.");
1.57 +is(shadow.getElementsByTagNameNS("http://www.w3.org/2000/svg", "svg").length, 0, "ShadowRoot getElementsByTagNameNS should not be able to access elements removed from ShadowRoot.");
1.58 +
1.59 +// Test querySelector on element in a ShadowRoot.
1.60 +element = document.createElement("div");
1.61 +shadow = element.createShadowRoot();
1.62 +var parentDiv = document.createElement("div");
1.63 +var childSpan = document.createElement("span");
1.64 +childSpan.id = "innerdiv";
1.65 +parentDiv.appendChild(childSpan);
1.66 +is(parentDiv.querySelector("#innerdiv"), childSpan, "ID query selector should work on element in ShadowRoot.");
1.67 +is(parentDiv.querySelector("span"), childSpan, "Tag query selector should work on element in ShadowRoot.");
1.68 +
1.69 +// Test that exception is thrown when trying to create a cycle with host node.
1.70 +element = document.createElement("div");
1.71 +shadow = element.createShadowRoot();
1.72 +try {
1.73 + shadow.appendChild(element);
1.74 + ok(false, "Excpetion should be thrown when creating a cycle with host content.");
1.75 +} catch (ex) {
1.76 + ok(true, "Excpetion should be thrown when creating a cycle with host content.");
1.77 +}
1.78 +
1.79 +// Basic innerHTML tests.
1.80 +shadow.innerHTML = '<span id="first"></span><div id="second"></div>';
1.81 +is(shadow.childNodes.length, 2, "There should be two children in the ShadowRoot.");
1.82 +is(shadow.getElementById("second").tagName, "DIV", "Elements created by innerHTML should be accessible by ShadowRoot API.");
1.83 +
1.84 +</script>
1.85 +</body>
1.86 +</html>
