| <!DOCTYPE html> |
| <title>Customized built-in element constructor behavior</title> |
| <meta name='author' href='mailto:masonf@chromium.org'> |
| <link rel='help' href='https://dom.spec.whatwg.org/#concept-create-element'> |
| <script src='/resources/testharness.js'></script> |
| <script src='/resources/testharnessreport.js'></script> |
| |
| <script> |
| setup({allow_uncaught_exception : true}); |
| |
| class MyCustomParagraph extends HTMLParagraphElement { |
| constructor() { |
| super(); |
| this.textContent = 'PASS'; |
| } |
| } |
| customElements.define('custom-p', MyCustomParagraph, { extends: 'p' }); |
| </script> |
| <p id=targetp is='custom-p'></p> |
| <script> |
| test(t => { |
| let target = document.getElementById('targetp'); |
| assert_true(!!target); |
| assert_equals(target.localName, 'p'); |
| assert_true(target instanceof MyCustomParagraph); |
| assert_true(target instanceof HTMLParagraphElement); |
| assert_equals(target.childNodes.length, 1); |
| assert_equals(target.textContent, 'PASS'); |
| }, 'Appending children in customized built-in constructor should work'); |
| </script> |
| |
| |
| <script> |
| class MyCustomVideo extends HTMLVideoElement { |
| constructor() { |
| super(); |
| throw new Error(); |
| } |
| } |
| customElements.define('custom-video', MyCustomVideo, { extends: 'video' }); |
| </script> |
| <video id=targetvideo is='custom-video'> <source></source> </video> |
| <script> |
| test(t => { |
| let target = document.getElementById('targetvideo'); |
| assert_true(!!target); |
| assert_equals(target.localName, 'video'); |
| assert_true(target instanceof MyCustomVideo); |
| assert_true(target instanceof HTMLVideoElement); |
| assert_equals(target.children.length, 1); |
| }, 'Throwing exception in customized built-in constructor should not crash and should return correct element type (video)'); |
| </script> |
| |
| |
| <script> |
| class MyCustomForm extends HTMLFormElement { |
| constructor() { |
| super(); |
| throw new Error(); |
| } |
| } |
| customElements.define('custom-form', MyCustomForm, { extends: 'form' }); |
| </script> |
| <form id=targetform is='custom-form'> <label></label><input> </form> |
| <script> |
| test(t => { |
| let target = document.getElementById('targetform'); |
| assert_true(!!target); |
| assert_equals(target.localName, 'form'); |
| assert_true(target instanceof MyCustomForm); |
| assert_true(target instanceof HTMLFormElement); |
| assert_equals(target.children.length, 2); |
| }, 'Throwing exception in customized built-in constructor should not crash and should return correct element type (form)'); |
| </script> |
| |
| <script> |
| class MyInput extends HTMLInputElement { }; |
| customElements.define('my-input', MyInput, { extends: 'input' }); |
| </script> |
| <input id=customized-input is='my-input'> |
| <script> |
| test(t => { |
| const input = document.getElementById('customized-input'); |
| assert_true(input instanceof MyInput); |
| assert_true(input instanceof HTMLInputElement); |
| }, 'Make sure customized <input> element doesnt crash'); |
| </script> |
| |
| |
| <script> |
| class MyInputAttrs extends HTMLInputElement { |
| constructor() { |
| super(); |
| this.setAttribute('foo', 'bar'); |
| } |
| } |
| customElements.define('my-input-attr', MyInputAttrs, { extends: 'input' }); |
| </script> |
| <input id=customized-input-attr is='my-input-attr'> |
| <script> |
| test(t => { |
| const input = document.getElementById('customized-input-attr'); |
| assert_true(input instanceof MyInputAttrs); |
| assert_true(input instanceof HTMLInputElement); |
| assert_equals(input.getAttribute('foo'),'bar'); |
| }, 'Make sure customized <input> element that sets attributes doesnt crash'); |
| </script> |