The Tor Browser / file comparison
comparison: dom/tests/mochitest/webcomponents/test_shadowroot.html
dom/tests/mochitest/webcomponents/test_shadowroot.html
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
equal
deleted
inserted
replaced
| -1:000000000000 | 0:4f1e26179a45 |
|---|---|
| 1 <!DOCTYPE HTML> | |
| 2 <html> | |
| 3 <!-- | |
| 4 https://bugzilla.mozilla.org/show_bug.cgi?id=806506 | |
| 5 --> | |
| 6 <head> | |
| 7 <title>Test for ShadowRoot</title> | |
| 8 <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> | |
| 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> | |
| 10 </head> | |
| 11 <body> | |
| 12 <div id="movedtoshadow" class="testclass"></div> | |
| 13 <svg id="svgmovedtoshadow"></svg> | |
| 14 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=806506">Bug 806506</a> | |
| 15 <script> | |
| 16 // Create ShadowRoot. | |
| 17 var element = document.createElement("div"); | |
| 18 ok(!element.shadowRoot, "div element should not have a shadow root."); | |
| 19 var shadow = element.createShadowRoot(); | |
| 20 is(element.shadowRoot, shadow, "shadowRoot property should return the same shadow root that was just created."); | |
| 21 | |
| 22 // Move an element from the document to the ShadowRoot. | |
| 23 var inShadowEl = document.getElementById("movedtoshadow"); | |
| 24 var inShadowSVGEl = document.getElementById("svgmovedtoshadow"); | |
| 25 | |
| 26 // Test getElementById | |
| 27 ok(!shadow.getElementById("movedtoshadow"), "Element not in ShadowRoot should not be accessible from ShadowRoot API."); | |
| 28 ok(!shadow.getElementById("svgmovedtoshadow"), "SVG element not in ShadowRoot should not be accessible from ShadowRoot API."); | |
| 29 shadow.appendChild(inShadowEl); | |
| 30 shadow.appendChild(inShadowSVGEl); | |
| 31 is(shadow.getElementById("movedtoshadow"), inShadowEl, "Element appended to a ShadowRoot should be accessible from ShadowRoot API."); | |
| 32 ok(!document.getElementById("movedtoshadow"), "Element appended to a ShadowRoot should not be accessible from document."); | |
| 33 is(shadow.getElementById("svgmovedtoshadow"), inShadowSVGEl, "SVG element appended to a ShadowRoot should be accessible from ShadowRoot API."); | |
| 34 ok(!document.getElementById("svgmovedtoshadow"), "SVG element appended to a ShadowRoot should not be accessible from document."); | |
| 35 | |
| 36 // Test getElementsByClassName | |
| 37 is(document.getElementsByClassName("testclass").length, 0, "Element removed from DOM should not be accessible by DOM accessors."); | |
| 38 is(shadow.getElementsByClassName("testclass").length, 1, "Element added to ShadowRoot should be accessible by ShadowRoot API."); | |
| 39 | |
| 40 // Test getElementsByTagName{NS} | |
| 41 is(document.getElementsByTagName("div").length, 0, "Element removed from DOM should not be accessible from DOM accessors."); | |
| 42 is(shadow.getElementsByTagName("div").length, 1, "Elements in the ShadowRoot should be accessible from the ShadowRoot API."); | |
| 43 is(document.getElementsByTagName("svg").length, 0, "SVG elements removed from DOM should not be accessible from DOM accessors."); | |
| 44 is(shadow.getElementsByTagName("svg").length, 1, "SVG element in the ShadowRoot should be accessible from the ShadowRoot API."); | |
| 45 is(shadow.getElementsByTagNameNS("http://www.w3.org/2000/svg", "svg").length, 1, "SVG element in the ShadowRoot should be accessible from the ShadowRoot API."); | |
| 46 | |
| 47 // Remove elements from ShadowRoot and make sure that they are no longer accessible via the ShadowRoot API. | |
| 48 shadow.removeChild(inShadowEl); | |
| 49 shadow.removeChild(inShadowSVGEl); | |
| 50 ok(!shadow.getElementById("movedtoshadow"), "ShadowRoot API should not be able to access elements removed from ShadowRoot."); | |
| 51 ok(!shadow.getElementById("svgmovedtoshadow"), "ShadowRoot API should not be able to access elements removed from ShadowRoot."); | |
| 52 is(shadow.getElementsByClassName("testclass").length, 0, "ShadowRoot getElementsByClassName should not be able to access elements removed from ShadowRoot."); | |
| 53 is(shadow.getElementsByTagName("svg").length, 0, "ShadowRoot getElementsByTagName should not be able to access elements removed from ShadowRoot."); | |
| 54 is(shadow.getElementsByTagNameNS("http://www.w3.org/2000/svg", "svg").length, 0, "ShadowRoot getElementsByTagNameNS should not be able to access elements removed from ShadowRoot."); | |
| 55 | |
| 56 // Test querySelector on element in a ShadowRoot. | |
| 57 element = document.createElement("div"); | |
| 58 shadow = element.createShadowRoot(); | |
| 59 var parentDiv = document.createElement("div"); | |
| 60 var childSpan = document.createElement("span"); | |
| 61 childSpan.id = "innerdiv"; | |
| 62 parentDiv.appendChild(childSpan); | |
| 63 is(parentDiv.querySelector("#innerdiv"), childSpan, "ID query selector should work on element in ShadowRoot."); | |
| 64 is(parentDiv.querySelector("span"), childSpan, "Tag query selector should work on element in ShadowRoot."); | |
| 65 | |
| 66 // Test that exception is thrown when trying to create a cycle with host node. | |
| 67 element = document.createElement("div"); | |
| 68 shadow = element.createShadowRoot(); | |
| 69 try { | |
| 70 shadow.appendChild(element); | |
| 71 ok(false, "Excpetion should be thrown when creating a cycle with host content."); | |
| 72 } catch (ex) { | |
| 73 ok(true, "Excpetion should be thrown when creating a cycle with host content."); | |
| 74 } | |
| 75 | |
| 76 // Basic innerHTML tests. | |
| 77 shadow.innerHTML = '<span id="first"></span><div id="second"></div>'; | |
| 78 is(shadow.childNodes.length, 2, "There should be two children in the ShadowRoot."); | |
| 79 is(shadow.getElementById("second").tagName, "DIV", "Elements created by innerHTML should be accessible by ShadowRoot API."); | |
| 80 | |
| 81 </script> | |
| 82 </body> | |
| 83 </html> |
