-
Notifications
You must be signed in to change notification settings - Fork 54
/
form-disabled-callback.html
114 lines (95 loc) · 3.93 KB
/
form-disabled-callback.html
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
108
109
110
111
112
113
114
<!DOCTYPE html>
<title>formDisabledCallback, and :disabled :enabled pseudo classes</title>
<body>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/html/semantics/forms/form-submission-0/resources/targetted-form.js"></script>
<script>
class MyControl extends HTMLElement {
static get formAssociated() { return true; }
constructor() {
super();
this.internals_ = this.attachInternals();
this.internals_.setFormValue('my-control-value');
this.disabledHistory_ = [];
}
formDisabledCallback(isDisabled) {
this.disabledHistory_.push(isDisabled);
}
disabledHistory() {
return this.disabledHistory_;
}
}
customElements.define('my-control', MyControl);
test(() => {
const control = new MyControl();
assert_true(control.matches(':enabled'));
assert_false(control.matches(':disabled'));
control.setAttribute('disabled', '');
assert_false(control.matches(':enabled'));
assert_true(control.matches(':disabled'));
control.removeAttribute('disabled', '');
assert_true(control.matches(':enabled'));
assert_false(control.matches(':disabled'));
assert_array_equals(control.disabledHistory(), [true, false]);
}, 'Adding/removing disabled content attribute');
test(() => {
const container = document.createElement('fieldset');
container.innerHTML = '<fieldset><fieldset><my-control></my-control></fieldset></fieldset>';
const middleFieldset = container.firstChild;
const control = container.querySelector('my-control');
assert_true(control.matches(':enabled'));
assert_false(control.matches(':disabled'));
middleFieldset.disabled = true;
assert_false(control.matches(':enabled'));
assert_true(control.matches(':disabled'));
middleFieldset.disabled = false;
assert_true(control.matches(':enabled'));
assert_false(control.matches(':disabled'));
container.disabled = true;
assert_false(control.matches(':enabled'));
assert_true(control.matches(':disabled'));
control.remove();
assert_true(control.matches(':enabled'));
assert_false(control.matches(':disabled'));
middleFieldset.appendChild(control);
assert_false(control.matches(':enabled'));
assert_true(control.matches(':disabled'));
assert_array_equals(control.disabledHistory(), [true, false, true, false, true]);
}, 'Relationship with FIELDSET');
test(() => {
const form = document.createElement('form');
document.body.appendChild(form);
form.innerHTML = '<my-control name="n1" disabled></my-control><input name="n2">'
const formData = new FormData(form);
assert_equals(formData.get('n1'), null);
}, 'A disabled form-associated custom element should not provide an entry for it');
promise_test(async t => {
let form = populateForm('<my-control name=d disabled></my-control>' +
'<my-control name=e></my-control>');
let query = await submitPromise(form, form.previousSibling);
assert_equals(query.indexOf('d=my-control-value'), -1);
assert_not_equals(query.indexOf('e=my-control-value'), -1);
}, 'A disabled form-associated custom element should not submit an entry for it');
test(() => {
const control = new MyControl();
document.body.appendChild(control);
control.setAttribute('tabindex', '0');
control.setAttribute('disabled', '');
control.focus();
assert_not_equals(document.activeElement, control);
control.removeAttribute('disabled');
control.focus();
assert_equals(document.activeElement, control);
}, 'Disabled attribute affects focus-capability');
test(() => {
const container = document.createElement('div');
document.body.appendChild(container);
// inneHTML upgrades my-control at its CEReacions timing.
container.innerHTML = '<my-control disabled>';
assert_array_equals(container.firstChild.disabledHistory(), [true]);
container.innerHTML = '<fieldset disabled><my-control>';
assert_array_equals(container.querySelector('my-control').disabledHistory(), [true]);
}, 'Upgrading an element with disabled content attribute');
</script>
</body>