1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
<!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>
|
