From adce22cabe108575959871f4be9743fc61051e35 Mon Sep 17 00:00:00 2001
From: "TAMURA, Kent" <tkent@chromium.org>
Date: Thu, 13 Jun 2019 10:35:02 +0000
Subject: [PATCH] Bug 1534801 [wpt PR 15740] - Add tests for 'form-associated
 custom elements', a=testonly

Automatic update from web-platform-tests
Add tests for form-associated custom elements

This is for https://github.com/w3c/webcomponents/issues/187.

Specification PR: https://github.com/whatwg/html/pull/4383.
--

wp5At-commits: 3ccd79e32ced5ddab58f52e79f982d2ebfc7f98c
wpt-pr: 15740
---
 .../CustomElementRegistry.html                |  99 ++++++-
 .../ElementInternals-NotSupportedError.html   |  24 ++
 .../ElementInternals-labels.html              |  50 ++++
 .../ElementInternals-setFormValue.html        | 125 +++++++++
 .../ElementInternals-validation.html          | 255 ++++++++++++++++++
 .../form-associated-callback.html             | 195 ++++++++++++++
 .../form-disabled-callback.html               | 114 ++++++++
 .../form-associated/form-reset-callback.html  |  58 ++++
 .../resources/targetted-form.js               |   8 +
 9 files changed, 927 insertions(+), 1 deletion(-)
 create mode 100644 testing/web-platform/tests/custom-elements/form-associated/ElementInternals-NotSupportedError.html
 create mode 100644 testing/web-platform/tests/custom-elements/form-associated/ElementInternals-labels.html
 create mode 100644 testing/web-platform/tests/custom-elements/form-associated/ElementInternals-setFormValue.html
 create mode 100644 testing/web-platform/tests/custom-elements/form-associated/ElementInternals-validation.html
 create mode 100644 testing/web-platform/tests/custom-elements/form-associated/form-associated-callback.html
 create mode 100644 testing/web-platform/tests/custom-elements/form-associated/form-disabled-callback.html
 create mode 100644 testing/web-platform/tests/custom-elements/form-associated/form-reset-callback.html

diff --git a/testing/web-platform/tests/custom-elements/CustomElementRegistry.html b/testing/web-platform/tests/custom-elements/CustomElementRegistry.html
index d6fda892c38bd..2f7cf572b682d 100644
--- a/testing/web-platform/tests/custom-elements/CustomElementRegistry.html
+++ b/testing/web-platform/tests/custom-elements/CustomElementRegistry.html
@@ -330,7 +330,8 @@
     assert_array_equals(prototypeCalls, [1, 'connectedCallback', 2, 'disconnectedCallback', 3, 'adoptedCallback', 4, 'attributeChangedCallback']);
     assert_array_equals(constructorCalls, [0, 'prototype',
                                            5, 'observedAttributes',
-                                           6, 'disabledFeatures']);
+                                           6, 'disabledFeatures',
+                                           7, 'formAssociated']);
 }, 'customElements.define must get "observedAttributes" property on the constructor prototype when "attributeChangedCallback" is present');
 
 test(function () {
@@ -437,6 +438,102 @@
     assert_throws({'name': 'TypeError'}, () => customElements.define('element-with-disabled-features-with-uncallable-iterator', constructor));
 }, 'customElements.define must rethrow an exception thrown while retrieving Symbol.iterator on disabledFeatures');
 
+test(function () {
+    var constructor = function () {}
+    var calls = [];
+    var proxy = new Proxy(constructor, {
+        get: function (target, name) {
+            calls.push(name);
+            if (name == 'formAssociated')
+                throw {name: 'expectedError'};
+            return target[name];
+        }
+    });
+    assert_throws({'name': 'expectedError'},
+        () => customElements.define('element-with-throwing-form-associated', proxy));
+    assert_array_equals(calls, ['prototype', 'disabledFeatures', 'formAssociated'],
+        'customElements.define must get "prototype", "disabledFeatures", and ' +
+        '"formAssociated" on the constructor');
+}, 'customElements.define must rethrow an exception thrown while getting ' +
+   'formAssociated on the constructor prototype');
+
+test(function () {
+    var constructor = function () {}
+    var prototypeCalls = [];
+    constructor.prototype = new Proxy(constructor.prototype, {
+        get: function(target, name) {
+            prototypeCalls.push(name)
+            return target[name];
+        }
+    });
+    var constructorCalls = [];
+    var proxy = new Proxy(constructor, {
+        get: function (target, name) {
+            constructorCalls.push(name);
+            if (name == 'formAssociated')
+                return 1;
+            return target[name];
+        }
+    });
+    customElements.define('element-with-form-associated-true', proxy);
+    assert_array_equals(constructorCalls,
+        ['prototype', 'disabledFeatures', 'formAssociated'],
+        'customElements.define must get "prototype", "disabledFeatures", and ' +
+        '"formAssociated" on the constructor');
+    assert_array_equals(
+        prototypeCalls,
+        ['connectedCallback', 'disconnectedCallback', 'adoptedCallback',
+         'attributeChangedCallback', 'formAssociatedCallback',
+         'formResetCallback', 'formDisabledCallback',
+         'formStateRestoreCallback'],
+        'customElements.define must get 8 callbacks on the prototype');
+}, 'customElements.define must get four additional callbacks on the prototype' +
+   ' if formAssociated is converted to true');
+
+test(function () {
+    var constructor = function() {};
+    var proxy = new Proxy(constructor, {
+        get: function(target, name) {
+            if (name == 'formAssociated')
+                return {};  // Any object is converted to 'true'.
+            return target[name];
+        }
+    });
+    var calls = [];
+    constructor.prototype = new Proxy(constructor.prototype, {
+        get: function (target, name) {
+            calls.push(name);
+            if (name == 'formDisabledCallback')
+                throw {name: 'expectedError'};
+            return target[name];
+        }
+    });
+    assert_throws({'name': 'expectedError'},
+        () => customElements.define('element-with-throwing-callback-2', proxy));
+    assert_array_equals(calls, ['connectedCallback', 'disconnectedCallback',
+                                'adoptedCallback', 'attributeChangedCallback',
+                                'formAssociatedCallback', 'formResetCallback',
+                                'formDisabledCallback'],
+        'customElements.define must not get callbacks after one of the get throws');
+
+    var calls2 = [];
+    constructor.prototype = new Proxy(constructor.prototype, {
+        get: function (target, name) {
+            calls2.push(name);
+            if (name == 'formResetCallback')
+                return 43;  // Can't convert to a Function.
+            return target[name];
+        }
+    });
+    assert_throws({'name': 'TypeError'},
+        () => customElements.define('element-with-throwing-callback-3', proxy));
+    assert_array_equals(calls2, ['connectedCallback', 'disconnectedCallback',
+                                 'adoptedCallback', 'attributeChangedCallback',
+                                 'formAssociatedCallback', 'formResetCallback'],
+        'customElements.define must not get callbacks after one of the get throws');
+}, 'customElements.define must rethrow an exception thrown while getting ' +
+   'additional formAssociated callbacks on the constructor prototype');
+
 test(function () {
     class MyCustomElement extends HTMLElement {};
     customElements.define('my-custom-element', MyCustomElement);
diff --git a/testing/web-platform/tests/custom-elements/form-associated/ElementInternals-NotSupportedError.html b/testing/web-platform/tests/custom-elements/form-associated/ElementInternals-NotSupportedError.html
new file mode 100644
index 0000000000000..0d8a5ffc8c350
--- /dev/null
+++ b/testing/web-platform/tests/custom-elements/form-associated/ElementInternals-NotSupportedError.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<body>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+test(() => {
+  class NotFormAssociatedElement extends HTMLElement {}
+  customElements.define('my-element1', NotFormAssociatedElement);
+  const element = new NotFormAssociatedElement();
+  const i = element.attachInternals();
+
+  assert_throws('NotSupportedError', () => i.setFormValue(''));
+  assert_throws('NotSupportedError', () => i.form);
+  assert_throws('NotSupportedError', () => i.setValidity({}));
+  assert_throws('NotSupportedError', () => i.willValidate);
+  assert_throws('NotSupportedError', () => i.validity);
+  assert_throws('NotSupportedError', () => i.validationMessage);
+  assert_throws('NotSupportedError', () => i.checkValidity());
+  assert_throws('NotSupportedError', () => i.reportValidity());
+  assert_throws('NotSupportedError', () => i.labels);
+}, 'Form-related operations and attributes should throw NotSupportedErrors' +
+     ' for non-form-associated custom elements.');
+</script>
+</body>
diff --git a/testing/web-platform/tests/custom-elements/form-associated/ElementInternals-labels.html b/testing/web-platform/tests/custom-elements/form-associated/ElementInternals-labels.html
new file mode 100644
index 0000000000000..94e0a0457ef35
--- /dev/null
+++ b/testing/web-platform/tests/custom-elements/form-associated/ElementInternals-labels.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<title>labels attribute of ElementInternals, and label association</title>
+<body>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="container"></div>
+<script>
+class MyControl extends HTMLElement {
+  static get formAssociated() { return true; }
+
+  constructor() {
+    super();
+    this.internals_ = this.attachInternals();
+  }
+  get i() { return this.internals_; }
+}
+customElements.define('my-control', MyControl);
+const container = document.querySelector('#container');
+
+test(() => {
+  container.innerHTML = '<label><span><my-control></my-control></span></label>';
+  let label = container.querySelector('label');
+  let control = container.querySelector('my-control');
+  assert_equals(label.control, control);
+  assert_true(control.i.labels instanceof NodeList);
+  assert_array_equals(control.i.labels, [label]);
+
+  container.innerHTML = '<label for="mc"></label><form><my-control id="mc"></my-control></form>';
+  label = container.querySelector('label');
+  control = container.querySelector('my-control');
+  assert_equals(label.control, control);
+  assert_equals(label.form, control.i.form);
+  assert_array_equals(control.i.labels, [label]);
+
+  container.innerHTML = '<label for="mc"></label><label for="mc"><my-control id="mc">';
+  const labels = container.querySelectorAll('label');
+  control = container.querySelector('my-control');
+  assert_array_equals(control.i.labels, labels);
+}, 'LABEL association');
+
+test(() => {
+  container.innerHTML = '<label for="mc"></label><form><my-control id="mc"></my-control></form>';
+  const control = container.querySelector('my-control');
+  let clickCount = 0;
+  control.addEventListener('click', e => { ++clickCount; });
+  container.querySelector('label').click();
+  assert_equals(clickCount, 1);
+}, 'LABEL click');
+</script>
+</body>
diff --git a/testing/web-platform/tests/custom-elements/form-associated/ElementInternals-setFormValue.html b/testing/web-platform/tests/custom-elements/form-associated/ElementInternals-setFormValue.html
new file mode 100644
index 0000000000000..0460c72acbb61
--- /dev/null
+++ b/testing/web-platform/tests/custom-elements/form-associated/ElementInternals-setFormValue.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="container"></div>
+<script>
+class MyControl extends HTMLElement {
+  static get formAssociated() { return true; }
+
+  constructor() {
+    super();
+    this.internals_ = this.attachInternals();
+    this.value_ = '';
+  }
+
+  get value() {
+    return this.value_;
+  }
+  set value(v) {
+    this.internals_.setFormValue(v);
+    this.value_ = v;
+  }
+  setValues(nameValues) {
+    const formData = new FormData();
+    for (let p of nameValues) {
+      formData.append(p[0], p[1]);
+    }
+    this.internals_.setFormValue(formData);
+  }
+}
+customElements.define('my-control', MyControl);
+const $ = document.querySelector.bind(document);
+
+function submitPromise(t) {
+  return new Promise((resolve, reject) => {
+    const iframe = $('iframe');
+    iframe.onload = () => resolve(iframe.contentWindow.location.search);
+    iframe.onerror = () => reject(new Error('iframe onerror fired'));
+    $('form').submit();
+  });
+}
+
+promise_test(t => {
+  $('#container').innerHTML = '<form action="/common/blank.html" target="if1">' +
+      '<input name=name-pd1 value="value-pd1">' +
+      '<my-control></my-control>' +
+      '</form>' +
+      '<iframe name="if1"></iframe>';
+  return submitPromise(t).then(query => {
+    assert_equals(query, '?name-pd1=value-pd1');
+  });
+}, 'Single value - name is missing');
+
+promise_test(t => {
+  $('#container').innerHTML = '<form action="/common/blank.html" target="if1">' +
+      '<input name=name-pd1 value="value-pd1">' +
+      '<my-control name=""></my-control>' +
+      '<input name=name-pd2 value="value-pd2">' +
+      '</form>' +
+      '<iframe name="if1"></iframe>';
+  $('my-control').value = 'value-ce1';
+  return submitPromise(t).then(query => {
+    assert_equals(query, '?name-pd1=value-pd1&name-pd2=value-pd2');
+  });
+}, 'Single value - empty name exists');
+
+promise_test(t => {
+  $('#container').innerHTML = '<form action="/common/blank.html" target="if1" accept-charset=utf-8>' +
+      '<input name=name-pd1 value="value-pd1">' +
+      '<my-control name="name-ce1"></my-control>' +
+      '<my-control name="name-usv"></my-control>' +
+      '<my-control name="name-file"></my-control>' +
+      '</form>' +
+      '<iframe name="if1"></iframe>';
+  const USV_INPUT = 'abc\uDC00\uD800def';
+  const USV_OUTPUT = 'abc\uFFFD\uFFFDdef';
+  const FILE_NAME = 'test_file.txt';
+  $('[name=name-usv]').value = USV_INPUT;
+  $('[name=name-file]').value = new File(['file content'], FILE_NAME);
+  return submitPromise(t).then(query => {
+    assert_equals(query, `?name-pd1=value-pd1&name-ce1=&name-usv=${encodeURIComponent(USV_OUTPUT)}&name-file=${FILE_NAME}`);
+  });
+}, 'Single value - Non-empty name exists');
+
+promise_test(t => {
+  $('#container').innerHTML = '<form action="/common/blank.html" target="if1">' +
+      '<input name=name-pd1 value="value-pd1">' +
+      '<my-control name="name-ce1"></my-control>' +
+      '<my-control name="name-ce2"></my-control>' +
+      '</form>' +
+      '<iframe name="if1"></iframe>';
+  $('my-control').value = null;
+  return submitPromise(t).then(query => {
+    assert_equals(query, '?name-pd1=value-pd1&name-ce2=');
+  });
+}, 'Null value should submit nothing');
+
+promise_test(t => {
+  $('#container').innerHTML = '<form action="/common/blank.html" target="if1">' +
+      '<input name=name-pd1 value="value-pd1">' +
+      '<my-control name=name-ce1></my-control>' +
+      '</form>' +
+      '<iframe name="if1"></iframe>';
+  $('my-control').value = 'value-ce1';
+  $('my-control').setValues([]);
+  $('my-control').setValues([['sub1', 'subvalue1'],
+                             ['sub2', 'subvalue2'],
+                             ['sub2', 'subvalue3']]);
+  return submitPromise(t).then(query => {
+    assert_equals(query, '?name-pd1=value-pd1&sub1=subvalue1&sub2=subvalue2&sub2=subvalue3');
+  });
+}, 'Multiple values - name content attribute is ignored');
+
+promise_test(t => {
+  $('#container').innerHTML = '<form action="/common/blank.html" target="if1">' +
+      '<input name=name-pd1 value="value-pd1">' +
+      '<my-control name=name-ce1></my-control>' +
+      '</form>' +
+      '<iframe name="if1"></iframe>';
+  $('my-control').value = 'value-ce1';
+  $('my-control').setValues([]);
+  return submitPromise(t).then(query => {
+    assert_equals(query, '?name-pd1=value-pd1');
+  });
+}, 'setFormValue with an empty FormData should submit nothing');
+</script>
diff --git a/testing/web-platform/tests/custom-elements/form-associated/ElementInternals-validation.html b/testing/web-platform/tests/custom-elements/form-associated/ElementInternals-validation.html
new file mode 100644
index 0000000000000..d71161476918a
--- /dev/null
+++ b/testing/web-platform/tests/custom-elements/form-associated/ElementInternals-validation.html
@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<title>Form validation features of ElementInternals, and :valid :invalid pseudo classes</title>
+<body>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="container"></div>
+<script>
+class MyControl extends HTMLElement {
+  static get formAssociated() { return true; }
+
+  constructor() {
+    super();
+    this.internals_ = this.attachInternals();
+  }
+  get i() { return this.internals_; }
+}
+customElements.define('my-control', MyControl);
+
+test(() => {
+  const control = new MyControl();
+  assert_true(control.i.willValidate, 'default value is true');
+
+  const datalist = document.createElement('datalist');
+  datalist.appendChild(control);
+  assert_false(control.i.willValidate, 'false in DATALIST');
+
+  const fieldset = document.createElement('fieldset');
+  fieldset.appendChild(control);
+  assert_true(control.i.willValidate, 'In enabled FIELDSET');
+  fieldset.disabled = true;
+  assert_false(control.i.willValidate, 'In disabled FIELDSET');
+  fieldset.removeChild(control);
+
+  control.setAttribute('disabled', '');
+  assert_false(control.i.willValidate, 'with disabled attribute');
+}, 'willValidate');
+
+test(() => {
+  const control = document.createElement('my-control');
+  const validity = control.i.validity;
+  assert_false(validity.valueMissing, 'default valueMissing');
+  assert_false(validity.typeMismatch, 'default typeMismatch');
+  assert_false(validity.patternMismatch, 'default patternMismatch');
+  assert_false(validity.tooLong, 'default tooLong');
+  assert_false(validity.tooShort, 'default tooShort');
+  assert_false(validity.rangeUnderflow, 'default rangeUnderflow');
+  assert_false(validity.rangeOverflow, 'default rangeOverflow');
+  assert_false(validity.stepMismatch, 'default stepMismatch');
+  assert_false(validity.badInput, 'default badInput');
+  assert_false(validity.customError, 'default customError');
+  assert_true(validity.valid, 'default valid');
+
+  control.i.setValidity({valueMissing: true}, 'valueMissing message');
+  assert_true(validity.valueMissing);
+  assert_false(validity.valid);
+  assert_equals(control.i.validationMessage, 'valueMissing message');
+
+  control.i.setValidity({typeMismatch: true}, 'typeMismatch message');
+  assert_true(validity.typeMismatch);
+  assert_false(validity.valueMissing);
+  assert_false(validity.valid);
+  assert_equals(control.i.validationMessage, 'typeMismatch message');
+
+  control.i.setValidity({patternMismatch: true}, 'patternMismatch message');
+  assert_true(validity.patternMismatch);
+  assert_false(validity.valid);
+  assert_equals(control.i.validationMessage, 'patternMismatch message');
+
+  control.i.setValidity({tooLong: true}, 'tooLong message');
+  assert_true(validity.tooLong);
+  assert_false(validity.valid);
+  assert_equals(control.i.validationMessage, 'tooLong message');
+
+  control.i.setValidity({tooShort: true}, 'tooShort message');
+  assert_true(validity.tooShort);
+  assert_false(validity.valid);
+  assert_equals(control.i.validationMessage, 'tooShort message');
+
+  control.i.setValidity({rangeUnderflow: true}, 'rangeUnderflow message');
+  assert_true(validity.rangeUnderflow);
+  assert_false(validity.valid);
+  assert_equals(control.i.validationMessage, 'rangeUnderflow message');
+
+  control.i.setValidity({rangeOverflow: true}, 'rangeOverflow message');
+  assert_true(validity.rangeOverflow);
+  assert_false(validity.valid);
+  assert_equals(control.i.validationMessage, 'rangeOverflow message');
+
+  control.i.setValidity({stepMismatch: true}, 'stepMismatch message');
+  assert_true(validity.stepMismatch);
+  assert_false(validity.valid);
+  assert_equals(control.i.validationMessage, 'stepMismatch message');
+
+  control.i.setValidity({badInput: true}, 'badInput message');
+  assert_true(validity.badInput);
+  assert_false(validity.valid);
+  assert_equals(control.i.validationMessage, 'badInput message');
+
+  control.i.setValidity({customError: true}, 'customError message');
+  assert_true(validity.customError, 'customError should be true.');
+  assert_false(validity.valid);
+  assert_equals(control.i.validationMessage, 'customError message');
+
+  // Set multiple flags
+  control.i.setValidity({badInput: true, customError: true}, 'multiple errors');
+  assert_true(validity.badInput);
+  assert_true(validity.customError);
+  assert_false(validity.valid);
+  assert_equals(control.i.validationMessage, 'multiple errors');
+
+  // Clear flags
+  control.i.setValidity({}, 'unnecessary message');
+  assert_false(validity.badInput);
+  assert_false(validity.customError);
+  assert_true(validity.valid);
+  assert_equals(control.i.validationMessage, '');
+
+  assert_throws(new TypeError(), () => { control.i.setValidity({valueMissing: true}); },
+      'setValidity() requires the second argument if the first argument contains true');
+}, 'validity and setValidity()');
+
+test(() => {
+  document.body.insertAdjacentHTML('afterbegin', '<my-control><light-child></my-control>');
+  let control = document.body.firstChild;
+  const flags = {valueMissing: true};
+  const m = 'non-empty message';
+
+  assert_throws('NotFoundError', () => {
+    control.i.setValidity(flags, m, document.body);
+  }, 'Not a descendant');
+
+  assert_throws('NotFoundError', () => {
+    control.i.setValidity(flags, m, control);
+  }, 'Self');
+
+  // A descendant
+  control.i.setValidity(flags, m, control.querySelector('light-child'));
+
+  // An element in the direct shadow tree
+  let shadow1 = control.attachShadow({mode: 'open'});
+  let shadowChild = document.createElement('div');
+  shadow1.appendChild(shadowChild);
+  control.i.setValidity(flags, m, shadowChild);
+
+  // An element in an nested shadow trees
+  let shadow2 = shadowChild.attachShadow({mode: 'closed'});
+  let nestedShadowChild = document.createElement('span');
+  shadow2.appendChild(nestedShadowChild);
+  control.i.setValidity(flags, m, nestedShadowChild);
+}, '"anchor" argument of setValidity()');
+
+test(() => {
+  const control = document.createElement('my-control');
+  let invalidCount = 0;
+  control.addEventListener('invalid', e => {
+    assert_equals(e.target, control);
+    assert_true(e.cancelable);
+    ++invalidCount;
+  });
+
+  assert_true(control.i.checkValidity(), 'default state');
+  assert_equals(invalidCount, 0);
+
+  control.i.setValidity({customError:true}, 'foo');
+  assert_false(control.i.checkValidity());
+  assert_equals(invalidCount, 1);
+}, 'checkValidity()');
+
+test(() => {
+  const control = document.createElement('my-control');
+  document.body.appendChild(control);
+  control.tabIndex = 0;
+  let invalidCount = 0;
+  control.addEventListener('invalid', e => {
+    assert_equals(e.target, control);
+    assert_true(e.cancelable);
+    ++invalidCount;
+  });
+
+  assert_true(control.i.reportValidity(), 'default state');
+  assert_equals(invalidCount, 0);
+
+  control.i.setValidity({customError:true}, 'foo');
+  assert_false(control.i.reportValidity());
+  assert_equals(invalidCount, 1);
+
+  control.blur();
+  control.addEventListener('invalid', e => e.preventDefault());
+  assert_false(control.i.reportValidity());
+}, 'reportValidity()');
+
+test(() => {
+  const container = document.getElementById('container');
+  container.innerHTML = '<form><input type=submit><my-control>';
+  const form = container.querySelector('form');
+  const control = container.querySelector('my-control');
+  control.tabIndex = 0;
+  let invalidCount = 0;
+  control.addEventListener('invalid', e => { ++invalidCount; });
+
+  assert_true(control.i.checkValidity());
+  assert_true(form.checkValidity());
+  control.i.setValidity({valueMissing: true}, 'Please fill out this field');
+  assert_false(form.checkValidity());
+  assert_equals(invalidCount, 1);
+
+  assert_false(form.reportValidity());
+  assert_equals(invalidCount, 2);
+
+  container.querySelector('input[type=submit]').click();
+  assert_equals(invalidCount, 3);
+}, 'Custom control affects validation at the owner form');
+
+function isValidAccordingToCSS(element, comment) {
+  assert_true(element.matches(':valid'), comment ? (comment + ' - :valid') : undefined);
+  assert_false(element.matches(':invalid'), comment ? (comment + ' - :invalid') : undefined);
+}
+
+function isInvalidAccordingToCSS(element, comment) {
+  assert_false(element.matches(':valid'), comment ? (comment + ' - :valid') : undefined);
+  assert_true(element.matches(':invalid'), comment ? (comment + ' - :invalid') : undefined);
+}
+
+test(() => {
+  const container = document.getElementById('container');
+  container.innerHTML = '<form><fieldset><my-control>';
+  const form = container.querySelector('form');
+  const fieldset = container.querySelector('fieldset');
+  const control = container.querySelector('my-control');
+
+  isValidAccordingToCSS(control);
+  isValidAccordingToCSS(form);
+  isValidAccordingToCSS(fieldset);
+
+  control.i.setValidity({typeMismatch: true}, 'Invalid format');
+  isInvalidAccordingToCSS(control);
+  isInvalidAccordingToCSS(form);
+  isInvalidAccordingToCSS(fieldset);
+
+  control.remove();
+  isInvalidAccordingToCSS(control);
+  isValidAccordingToCSS(form);
+  isValidAccordingToCSS(fieldset);
+
+  fieldset.appendChild(control);
+  isInvalidAccordingToCSS(form);
+  isInvalidAccordingToCSS(fieldset);
+
+  control.i.setValidity({});
+  isValidAccordingToCSS(control);
+  isValidAccordingToCSS(form);
+  isValidAccordingToCSS(fieldset);
+}, 'Custom control affects :valid :invalid for FORM and FIELDSET');
+</script>
+</body>
diff --git a/testing/web-platform/tests/custom-elements/form-associated/form-associated-callback.html b/testing/web-platform/tests/custom-elements/form-associated/form-associated-callback.html
new file mode 100644
index 0000000000000..3a6a86dd0d00a
--- /dev/null
+++ b/testing/web-platform/tests/custom-elements/form-associated/form-associated-callback.html
@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<title>formAssociatedCallback, and form IDL attribute of ElementInternals</title>
+<body>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+class PreDefined extends HTMLElement {
+  static get formAssociated() { return true; }
+
+  constructor() {
+    super();
+    this.internals_ = this.attachInternals();
+    this.formHistory_ = [];
+  }
+
+  formAssociatedCallback(nullableForm) {
+    this.formHistory_.push(nullableForm);
+  }
+  formHistory() {
+    return this.formHistory_;
+  }
+
+  get form() {
+    return this.internals_.form;
+  }
+}
+customElements.define('pre-defined', PreDefined);
+</script>
+<div id="container">
+
+<fieldset id="fs1">
+<form id="form1">
+<input>
+<pre-defined id="pd1"></pre-defined>
+<select></select>
+</form>
+</fieldset>
+
+<fieldset id="fs2">
+<pre-defined id="pd2" form="form2"></pre-defined>
+<form id="form2">
+<input>
+<select></select>
+</form>
+</fieldset>
+<pre-defined id="pd3" form="form2"></pre-defined>
+
+<table>
+<fieldset id="fs3">
+<form id="form3">
+<tr><td><select></select></tr>
+<tr><td><pre-defined id="pd4"></pre-defined></tr>
+<tr><td><input></tr>
+</form>  <!-- The end tag is bogus. -->
+</fieldset>  <!-- The end tag is bogus. -->
+<table>
+
+</div>
+
+<script>
+const $ = document.querySelector.bind(document);
+
+test(() => {
+  let controls = $('#form1').elements;
+  assert_equals(controls.length, 3);
+  assert_equals(controls[1], $('#pd1'), 'form.elements');
+  assert_equals($('#pd1').form, $('#form1'));
+  assert_array_equals($('#pd1').formHistory(), [$('#form1')]);
+  assert_equals($('#fs1').elements[1], $('#pd1'), 'fieldset.elements');
+
+  controls = $('#form2').elements;
+  assert_equals(controls.length, 4);
+  assert_equals(controls[0], $('#pd2'), 'form.elements');
+  assert_equals(controls[3], $('#pd3'));
+  assert_equals($('#pd2').form, $('#form2'));
+  assert_equals($('#pd3').form, $('#form2'));
+  assert_array_equals($('#pd2').formHistory(), [$('#form2')]);
+  assert_array_equals($('#pd3').formHistory(), [$('#form2')]);
+  controls = $('#fs2').elements;
+  assert_equals(controls.length, 3);
+  assert_equals(controls[0], $('#pd2'), 'fieldset.elements');
+
+  controls = $('#form3').elements;
+  assert_equals(controls.length, 2);
+  assert_not_equals(controls[1], $('#pd4'));
+  assert_equals($('#fs3').elements.length, 0);
+}, 'Associate by parser, customized at element creation');
+
+test(() => {
+  $('#container').innerHTML = '<fieldset id="fs1"><form id="form1"><input><will-be-defined id="wbd1">' +
+      '</will-be-defined><select></select></form></fieldset>' +
+      '<fieldset id="fs2"><will-be-defined id="wbd2" form="form2"></will-be-defined>' +
+      '<form id="form2"></form></fieldset><will-be-defined id="wbd3" form="form2"></will-be-defined>';
+  let controls = $('#form1').elements;
+  assert_equals(controls.length, 2);
+  assert_not_equals(controls[1], $('#wbd1'));
+  controls = $('#fs1').elements;
+  assert_equals(controls.length, 2);
+  assert_not_equals(controls[1], $('#wbd1'));
+
+  assert_equals($('#form2').elements.length, 0);
+  assert_equals($('#fs2').elements.length, 0);
+
+  class WillBeDefined extends HTMLElement {
+    static get formAssociated() { return true; }
+
+    constructor() {
+      super();
+      this.internals_ = this.attachInternals();
+      this.formHistory_ = [];
+    }
+
+    formAssociatedCallback(nullableForm) {
+      this.formHistory_.push(nullableForm);
+    }
+    formHistory() {
+      return this.formHistory_;
+    }
+
+    get form() {
+      return this.internals_.form;
+    }
+  }
+  customElements.define('will-be-defined', WillBeDefined);
+  customElements.upgrade(container);
+
+  controls = $('#form1').elements;
+  assert_equals(controls.length, 3, 'form.elements.length');
+  assert_equals(controls[1], $('#wbd1'));
+  assert_equals($('#wbd1').form, $('#form1'));
+  controls = $('#fs1').elements;
+  assert_equals(controls.length, 3, 'fieldset.elements.length');
+  assert_equals(controls[1], $('#wbd1'));
+
+  controls = $('#form2').elements;
+  assert_equals($('#wbd2').form, $('#form2'));
+  assert_equals($('#wbd3').form, $('#form2'));
+  assert_array_equals($('#wbd2').formHistory(), [$('#form2')]);
+  assert_array_equals($('#wbd3').formHistory(), [$('#form2')]);
+  assert_equals(controls.length, 2, 'form.elements.length');
+  assert_equals(controls[0], $('#wbd2'));
+  assert_equals(controls[1], $('#wbd3'));
+  controls = $('#fs2').elements;
+  assert_equals(controls.length, 1, 'fieldset.elements.length');
+  assert_equals(controls[0], $('#wbd2'));
+}, 'Parsed, connected, then upgraded');
+
+test(() => {
+  $('#container').innerHTML = '<fieldset id="fs1"><form id="form1"><input><pre-defined id="pd1">' +
+      '</pre-defined><select></select></form></fieldset>' +
+      '<fieldset id="fs2"><pre-defined id="pd2" form="form2"></pre-defined>' +
+      '<form id="form2"></form></fieldset><pre-defined id="pd3" form="form2"></pre-defined>';
+
+  const pd1 = $('#pd1');
+  assert_equals($('#form1').elements.length, 3, 'form.elements.length before removal');
+  assert_equals($('#fs1').elements.length, 3, 'fildset.elements.length before removal');
+  pd1.remove();
+  assert_equals(pd1.form, null);
+  assert_array_equals(pd1.formHistory(), [$('#form1'), null]);
+  assert_equals($('#form1').elements.length, 2, 'form.elements.length after removal');
+  assert_equals($('#fs1').elements.length, 2, 'fildset.elements.length after removal');
+
+  const pd2 = $('#pd2');
+  const pd3 = $('#pd3');
+  assert_equals($('#form2').elements.length, 2, 'form.elements.length before removal');
+  assert_equals($('#fs2').elements.length, 1, 'fieldset.elements.length before removal');
+  pd2.remove();
+  pd3.remove();
+  assert_equals(pd2.form, null);
+  assert_equals(pd3.form, null);
+  assert_array_equals(pd2.formHistory(), [$('#form2'), null]);
+  assert_array_equals(pd3.formHistory(), [$('#form2'), null]);
+  assert_equals($('#form2').elements.length, 0, 'form.elements.length after removal');
+  assert_equals($('#fs2').elements.length, 0, 'fieldset.elements.length after removal');
+}, 'Disassociation');
+
+test(() => {
+  $('#container').innerHTML = '<form id="form1"></form>' +
+      '<pre-defined id="pd1"></pre-defined><form id="form2"></form>';
+  const pd1 = $('#pd1');
+  const form1 = $('#form1');
+  const form2 = $('#form2');
+  assert_equals(pd1.form, null);
+
+  pd1.setAttribute('form', 'form1');
+  assert_equals(pd1.form, form1);
+
+  pd1.setAttribute('form', 'form2');
+  assert_equals(pd1.form, form2);
+
+  $('#container').innerHTML = '';
+  assert_equals(pd1.form, null);
+}, 'Updating "form" content attribute');
+</script>
+</body>
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 0000000000000..954c3f3f6eecc
--- /dev/null
+++ b/testing/web-platform/tests/custom-elements/form-associated/form-disabled-callback.html
@@ -0,0 +1,114 @@
+<!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>
diff --git a/testing/web-platform/tests/custom-elements/form-associated/form-reset-callback.html b/testing/web-platform/tests/custom-elements/form-associated/form-reset-callback.html
new file mode 100644
index 0000000000000..8b8497f8b6c42
--- /dev/null
+++ b/testing/web-platform/tests/custom-elements/form-associated/form-reset-callback.html
@@ -0,0 +1,58 @@
+<!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.resetCalled_ = false;
+  }
+
+  formResetCallback() {
+    this.resetCalled_ = true;
+  }
+  get resetCalled() { return this.resetCalled_; }
+}
+customElements.define('my-control', MyControl);
+
+test(() => {
+  document.body.insertAdjacentHTML('beforeend',
+      '<form><my-control></my-control></form>');
+  let form = document.body.lastChild;
+  let custom = form.firstChild;
+  form.reset();
+  assert_true(custom.resetCalled);
+}, 'form.reset() should trigger formResetCallback');
+
+test(() => {
+  document.body.insertAdjacentHTML('beforeend',
+      '<form><my-control></my-control><output>default</output></form>');
+  let form = document.body.lastChild;
+  let custom = form.firstChild;
+  let output = form.lastChild;
+  output.value = 'updated';
+  output.addEventListener('DOMSubtreeModified', () => {
+    assert_false(custom.resetCalled, 'formResetCallback should not be ' +
+                 'called before built-in control\'s reset');
+  });
+  form.reset();
+  assert_true(custom.resetCalled);
+}, 'form.reset(): formResetCallback is called after reset of the last ' +
+   'built-in form control and before the next statement.');
+
+promise_test(() => {
+  document.body.insertAdjacentHTML('beforeend',
+      '<form><my-control></my-control><input type=reset></form>');
+  let form = document.body.lastChild;
+  let custom = form.firstChild;
+  let resetButton = form.lastChild;
+  assert_false(custom.resetCalled);
+  resetButton.click();
+  assert_false(custom.resetCalled);
+  return Promise.resolve().then(() => assert_true(custom.resetCalled));
+}, 'Clicking a reset button invokes formResetCallback in a microtask');
+</script>
+</body>
diff --git a/testing/web-platform/tests/html/semantics/forms/form-submission-0/resources/targetted-form.js b/testing/web-platform/tests/html/semantics/forms/form-submission-0/resources/targetted-form.js
index 74d0f8c81eeeb..6b6685291d2bd 100644
--- a/testing/web-platform/tests/html/semantics/forms/form-submission-0/resources/targetted-form.js
+++ b/testing/web-platform/tests/html/semantics/forms/form-submission-0/resources/targetted-form.js
@@ -11,3 +11,11 @@ function populateForm(optionalContentHtml) {
   ++frameCounter;
   return document.body.firstChild.nextSibling;
 }
+
+function submitPromise(form, iframe) {
+  return new Promise((resolve, reject) => {
+    iframe.onload = () => resolve(iframe.contentWindow.location.search);
+    iframe.onerror = () => reject(new Error('iframe onerror fired'));
+    form.submit();
+  });
+}