107 lines
3.3 KiB
HTML
107 lines
3.3 KiB
HTML
<!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>
|