| <!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_ = []; |
| } |
| |
| disabledStateChangedCallback(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> |
