blob: 5bab4b23204158817b458bb118f5d9ec2b9cd70c [file] [log] [blame]
<!DOCTYPE html>
<body>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.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 submit its value');
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>