1 files changed, 154 insertions, 0 deletions
diff --git a/testing/web-platform/tests/custom-elements/form-associated/form-disabled-callback.html b/testing/web-platform/tests/custom-elements/form-associated/form-disabled-callback.html
new file mode 100644
index 0000000000..a30b678f13
--- /dev/null
+++ b/testing/web-platform/tests/custom-elements/form-associated/form-disabled-callback.html
@@ -0,0 +1,154 @@
+<!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');
+
+test(() => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  container.innerHTML = '<fieldset disabled><my-control></my-control></fieldset>';
+
+  const control = container.querySelector('my-control');
+  control.setAttribute('disabled', '');
+  control.removeAttribute('disabled');
+  assert_array_equals(control.disabledHistory(), [true]);
+}, 'Toggling "disabled" attribute on a custom element inside disabled <fieldset> does not trigger a callback');
+
+test(() => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  container.innerHTML = '<fieldset><my-control disabled></my-control></fieldset>';
+
+  const fieldset = container.firstElementChild;
+  fieldset.disabled = true;
+  fieldset.disabled = false;
+  assert_array_equals(container.querySelector('my-control').disabledHistory(), [true]);
+}, 'Toggling "disabled" attribute on a <fieldset> does not trigger a callback on disabled custom element descendant');
+
+test(() => {
+  const template = document.createElement('template');
+  template.innerHTML = '<my-control></my-control>';
+  const container = document.createElement('fieldset');
+  document.body.appendChild(container);
+  container.disabled = true;
+  container.appendChild(template.content.cloneNode(true));
+  assert_array_equals(container.querySelector('my-control').disabledHistory(), [true]);
+}, 'Callback triggered during a clone/append operation, with disabled state provided by ancestor');
+
+test(() => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  container.innerHTML = '<fieldset disabled><my-control></my-control></fieldset>';
+  const clone = container.cloneNode(true);
+  assert_array_equals(container.querySelector('my-control').disabledHistory(), [true]);
+}, 'Callback triggered during a clone operation, with disabled state provided by ancestor');
+</script>
+</body>