<!DOCTYPE html>
<title>Customized built-in element constructor behavior</title>
<meta name='author' href='mailto:[email protected]'>
<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>
Codebase Browser
chromium