innerHTML-setter.xhtml (3122B)
1 <?xml version="1.0" encoding="utf-8"?> 2 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:bar="bar"> 3 <head> 4 <title>Test for Shadow DOM innerHTML setter in XML</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script> 8 <![CDATA[ 9 // We define our custom elements lazily so we don't mess 10 // with the DOM during parsing. 11 customElements.define("custom-el-1", 12 class extends HTMLElement { 13 constructor() { 14 super(); 15 this.attachShadow({ mode: "open" }); 16 try { this.shadowRoot.innerHTML = "<span/>"; } catch (e) {} 17 } 18 }); 19 function defineElements() { 20 // We define our custom elements whose behavior involves 21 // ancestors of our parent lazily, because otherwise the 22 // constructor runs before the element is in the DOM and has 23 // the ancestors set up. 24 customElements.define("custom-el-2", 25 class extends HTMLElement { 26 constructor() { 27 super(); 28 this.attachShadow({ mode: "open" }); 29 try { this.shadowRoot.innerHTML = "<span/>"; } catch (e) {} 30 } 31 }); 32 customElements.define("custom-el-with-prefix", 33 class extends HTMLElement { 34 constructor() { 35 super(); 36 this.attachShadow({ mode: "open" }); 37 try { 38 this.shadowRoot.innerHTML = "<bar:span/>"; 39 } catch (e) { 40 // Test will fail due to us not having the kid 41 } 42 } 43 }); 44 } 45 ]]> 46 </script> 47 </head> 48 <body> 49 <custom-el-1 id="htmlDefault"/> 50 <span xmlns="foo" xmlns:html="http://www.w3.org/1999/xhtml"> 51 <html:custom-el-2 id="fooDefault"/> 52 </span> 53 <custom-el-with-prefix id="prefixTest"/> 54 <script> 55 <![CDATA[ 56 const htmlNS = "http://www.w3.org/1999/xhtml"; 57 test(() => { 58 var el = document.getElementById("htmlDefault"); 59 var kid = el.shadowRoot.firstChild; 60 assert_equals(kid.namespaceURI, htmlNS, 61 "Kid's namespace should be our default"); 62 }, "InnerHTML behavior on custom element in default XHTML namespace"); 63 64 test(defineElements, "Setting up the custom elements"); 65 test(() => { 66 var el = document.getElementById("fooDefault"); 67 var kid = el.shadowRoot.firstChild; 68 assert_equals(kid.namespaceURI, "foo", 69 "Kid's namespace should be our default"); 70 }, "InnerHTML behavior on custom element in default 'foo' namespace"); 71 72 test(() => { 73 var el = document.getElementById("prefixTest"); 74 var kid = el.shadowRoot.firstChild; 75 assert_equals(kid.namespaceURI, "bar", 76 "Kid's namespace should be based on ancestor prefix"); 77 }, "InnerHTML behavior with prefixes on custom element"); 78 ]]> 79 </script> 80 </body> 81 </html>