test_shadowroot.html (3877B)
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="head.js"></script> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 11 </head> 12 <body> 13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=806506">Bug 806506</a> 14 <script> 15 16 SimpleTest.waitForExplicitFinish(); 17 18 var content = '<div id="movedtoshadow" class="testclass"></div>' + 19 '<svg id="svgmovedtoshadow"></svg>'; 20 createIframe(content) 21 .then((aDocument) => { 22 // Create ShadowRoot. 23 var element = aDocument.createElement("div"); 24 ok(!element.shadowRoot, "div element should not have a shadow root."); 25 var shadow = element.attachShadow({mode: "open"}); 26 is(element.shadowRoot, shadow, "shadowRoot property should return the same shadow root that was just created."); 27 28 // Move an element from the document to the ShadowRoot. 29 var inShadowEl = aDocument.getElementById("movedtoshadow"); 30 var inShadowSVGEl = aDocument.getElementById("svgmovedtoshadow"); 31 32 // Test getElementById 33 ok(!shadow.getElementById("movedtoshadow"), "Element not in ShadowRoot should not be accessible from ShadowRoot API."); 34 ok(!shadow.getElementById("svgmovedtoshadow"), "SVG element not in ShadowRoot should not be accessible from ShadowRoot API."); 35 shadow.appendChild(inShadowEl); 36 shadow.appendChild(inShadowSVGEl); 37 is(shadow.getElementById("movedtoshadow"), inShadowEl, "Element appended to a ShadowRoot should be accessible from ShadowRoot API."); 38 ok(!aDocument.getElementById("movedtoshadow"), "Element appended to a ShadowRoot should not be accessible from document."); 39 is(shadow.getElementById("svgmovedtoshadow"), inShadowSVGEl, "SVG element appended to a ShadowRoot should be accessible from ShadowRoot API."); 40 ok(!aDocument.getElementById("svgmovedtoshadow"), "SVG element appended to a ShadowRoot should not be accessible from document."); 41 42 // Remove elements from ShadowRoot and make sure that they are no longer accessible via the ShadowRoot API. 43 shadow.removeChild(inShadowEl); 44 shadow.removeChild(inShadowSVGEl); 45 ok(!shadow.getElementById("movedtoshadow"), "ShadowRoot API should not be able to access elements removed from ShadowRoot."); 46 ok(!shadow.getElementById("svgmovedtoshadow"), "ShadowRoot API should not be able to access elements removed from ShadowRoot."); 47 48 // Test querySelector on element in a ShadowRoot. 49 element = aDocument.createElement("div"); 50 shadow = element.attachShadow({mode: "open"}); 51 var parentDiv = aDocument.createElement("div"); 52 var childSpan = aDocument.createElement("span"); 53 childSpan.id = "innerdiv"; 54 parentDiv.appendChild(childSpan); 55 is(parentDiv.querySelector("#innerdiv"), childSpan, "ID query selector should work on element in ShadowRoot."); 56 is(parentDiv.querySelector("span"), childSpan, "Tag query selector should work on element in ShadowRoot."); 57 58 // Test that exception is thrown when trying to create a cycle with host node. 59 element = aDocument.createElement("div"); 60 shadow = element.attachShadow({mode: "open"}); 61 try { 62 shadow.appendChild(element); 63 ok(false, "Excpetion should be thrown when creating a cycle with host content."); 64 } catch (ex) { 65 ok(true, "Excpetion should be thrown when creating a cycle with host content."); 66 } 67 68 // Basic innerHTML tests. 69 shadow.innerHTML = '<span id="first"></span><div id="second"></div>'; 70 is(shadow.childNodes.length, 2, "There should be two children in the ShadowRoot."); 71 is(shadow.getElementById("second").tagName, "DIV", "Elements created by innerHTML should be accessible by ShadowRoot API."); 72 73 SimpleTest.finish(); 74 }); 75 </script> 76 </body> 77 </html>