serializing-html-fragments-customized-builtins.html (1451B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://html.spec.whatwg.org/multipage/parsing.html#serialising-html-fragments"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <body> 6 <div id="container"></div> 7 <script> 8 test(() => { 9 class MyParagraph extends HTMLParagraphElement {} 10 customElements.define('my-p', MyParagraph, { extends: 'p' }); 11 12 let p = new MyParagraph(); 13 p.setAttribute('class', 'foo'); 14 assert_equals(p.outerHTML, '<p is="my-p" class="foo"></p>'); 15 16 let container = document.querySelector('#container'); 17 container.appendChild(p); 18 container.innerHTML = container.innerHTML; 19 assert_not_equals(container.firstChild, p); 20 assert_true(container.firstChild instanceof MyParagraph); 21 }, '"is" value should be serialized if the custom element has no "is" content attribute'); 22 23 test(() => { 24 let p = document.createElement('p', { is: 'your-p' }); 25 assert_equals(p.outerHTML, '<p is="your-p"></p>'); 26 }, '"is" value should be serialized even for an undefined element'); 27 28 test(() => { 29 class MyDiv extends HTMLDivElement {} 30 customElements.define('my-div', MyDiv, { extends: 'div' }); 31 32 let div = document.createElement('div', { is: 'my-div' }); 33 div.setAttribute('is', 'foo"bar\n'); 34 assert_equals(div.outerHTML, '<div is="foo"bar\n"></div>'); 35 }, '"is" content attribute should be serialized even if the element is a customized built-in element'); 36 </script> 37 </body>