| <!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> |