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