customized-built-in-constructor-exceptions.html (3402B)
1 <!DOCTYPE html> 2 <title>Customized built-in element constructor behavior</title> 3 <meta name='author' href='mailto:masonf@chromium.org'> 4 <link rel='help' href='https://dom.spec.whatwg.org/#concept-create-element'> 5 <script src='/resources/testharness.js'></script> 6 <script src='/resources/testharnessreport.js'></script> 7 8 <script> 9 setup({allow_uncaught_exception : true}); 10 11 class MyCustomParagraph extends HTMLParagraphElement { 12 constructor() { 13 super(); 14 this.textContent = 'PASS'; 15 } 16 } 17 customElements.define('custom-p', MyCustomParagraph, { extends: 'p' }); 18 </script> 19 <p id=targetp is='custom-p'></p> 20 <script> 21 test(t => { 22 let target = document.getElementById('targetp'); 23 assert_true(!!target); 24 assert_equals(target.localName, 'p'); 25 assert_true(target instanceof MyCustomParagraph); 26 assert_true(target instanceof HTMLParagraphElement); 27 assert_equals(target.childNodes.length, 1); 28 assert_equals(target.textContent, 'PASS'); 29 }, 'Appending children in customized built-in constructor should work'); 30 </script> 31 32 33 <script> 34 class MyCustomVideo extends HTMLVideoElement { 35 constructor() { 36 super(); 37 throw new Error(); 38 } 39 } 40 customElements.define('custom-video', MyCustomVideo, { extends: 'video' }); 41 </script> 42 <video id=targetvideo is='custom-video'> <source></source> </video> 43 <script> 44 test(t => { 45 let target = document.getElementById('targetvideo'); 46 assert_true(!!target); 47 assert_equals(target.localName, 'video'); 48 assert_true(target instanceof MyCustomVideo); 49 assert_true(target instanceof HTMLVideoElement); 50 assert_equals(target.children.length, 1); 51 }, 'Throwing exception in customized built-in constructor should not crash and should return correct element type (video)'); 52 </script> 53 54 55 <script> 56 class MyCustomForm extends HTMLFormElement { 57 constructor() { 58 super(); 59 throw new Error(); 60 } 61 } 62 customElements.define('custom-form', MyCustomForm, { extends: 'form' }); 63 </script> 64 <form id=targetform is='custom-form'> <label></label><input> </form> 65 <script> 66 test(t => { 67 let target = document.getElementById('targetform'); 68 assert_true(!!target); 69 assert_equals(target.localName, 'form'); 70 assert_true(target instanceof MyCustomForm); 71 assert_true(target instanceof HTMLFormElement); 72 assert_equals(target.children.length, 2); 73 }, 'Throwing exception in customized built-in constructor should not crash and should return correct element type (form)'); 74 </script> 75 76 <script> 77 class MyInput extends HTMLInputElement { }; 78 customElements.define('my-input', MyInput, { extends: 'input' }); 79 </script> 80 <input id=customized-input is='my-input'> 81 <script> 82 test(t => { 83 const input = document.getElementById('customized-input'); 84 assert_true(input instanceof MyInput); 85 assert_true(input instanceof HTMLInputElement); 86 }, 'Make sure customized <input> element doesnt crash'); 87 </script> 88 89 90 <script> 91 class MyInputAttrs extends HTMLInputElement { 92 constructor() { 93 super(); 94 this.setAttribute('foo', 'bar'); 95 } 96 } 97 customElements.define('my-input-attr', MyInputAttrs, { extends: 'input' }); 98 </script> 99 <input id=customized-input-attr is='my-input-attr'> 100 <script> 101 test(t => { 102 const input = document.getElementById('customized-input-attr'); 103 assert_true(input instanceof MyInputAttrs); 104 assert_true(input instanceof HTMLInputElement); 105 assert_equals(input.getAttribute('foo'),'bar'); 106 }, 'Make sure customized <input> element that sets attributes doesnt crash'); 107 </script>