setHTMLUnsafe.html (2588B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/whatwg/html/pull/9538"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <body> 8 <script> 9 for (const containerType of ['Element', 'ShadowRoot']) { 10 const createContainer = () => { 11 if (containerType == 'ShadowRoot') { 12 return document.createElement('div').attachShadow({mode: 'open'}); 13 } else if (containerType == 'Element') { 14 return document.createElement('div'); 15 } 16 }; 17 18 test(() => { 19 const container = createContainer(); 20 container.setHTMLUnsafe('<span title=hello>world</span>'); 21 22 assert_equals(container.children.length, 1, 'Only one child node should be created.'); 23 assert_equals(container.firstChild.tagName, 'SPAN', 'The child element should be a span.'); 24 assert_equals(container.firstChild.getAttribute('title'), 'hello', 25 'The title attribute should be set to hello.'); 26 assert_equals(container.firstChild.childNodes.length, 1, 27 'The span should have one child.'); 28 assert_true(container.firstChild.childNodes[0] instanceof Text, 29 'The spans child should be a text node.'); 30 assert_equals(container.firstChild.textContent, 'world', 31 'The spans textContent should be world.'); 32 }, `${containerType}: setHTMLUnsafe with no shadowdom.`); 33 34 test(() => { 35 const container = createContainer(); 36 container.setHTMLUnsafe(`<div><template shadowrootmode=open><div>hello</div></template></div>`); 37 38 assert_equals(container.children.length, 1, 'One child should be created in the container.'); 39 const shadowRoot = container.firstChild.shadowRoot; 40 assert_true(!!shadowRoot, 'The containers child should have a ShadowRoot.'); 41 assert_equals(shadowRoot.children.length, 1, 'One child should be created in the ShadowRoot.'); 42 assert_equals(shadowRoot.firstChild.textContent, 'hello', 43 'The ShadowRoots childs textContent should be hello.'); 44 }, `${containerType}: setHTMLUnsafe with shadowdom.`); 45 } 46 47 test(() => { 48 const template = document.createElement('template'); 49 template.setHTMLUnsafe('<div>hello world</div>'); 50 51 assert_equals(template.children.length, 0, 'template should not have any child nodes.'); 52 assert_equals(template.content.children.length, 1, 'template content should have a child div.'); 53 assert_equals(template.content.children[0].textContent, 'hello world', 'text content should be set.'); 54 }, 'template.setHTMLUnsafe() should modify template content fragment rather than actual children.'); 55 </script>