ElementInternals-form.html | Explore in Territory

<!DOCTYPE html>
<title>form attribute of ElementInternals</title>
<body>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<script>
customElements.define('custom-input-parser', class extends HTMLElement {
  static get formAssociated() { return true; }

  constructor() {
    super();
    this.internals_ = this.attachInternals();
  }
  get i() { return this.internals_; }
});
</script>

<form id="custom-form">
  <custom-input-parser id="custom-1"></custom-input-parser>
  <custom-input-upgrade id="custom-2"></custom-input-upgrade>
</form>
<custom-input-parser id="custom-3" form="custom-form"></custom-input-parser>
<custom-input-upgrade id="custom-4" form="custom-form"></custom-input-upgrade>
<custom-input-upgrade id="custom-5"></custom-input-upgrade>

<script>
test(() => {
  const form = document.forms[0];
  assert_equals(document.getElementById("custom-1").i.form, form);
  assert_equals(document.getElementById("custom-3").i.form, form);

  // Test upgrading.
  customElements.define('custom-input-upgrade', class extends HTMLElement {
    static get formAssociated() { return true; }
    constructor() {
      super();
      this.internals_ = this.attachInternals();
    }
    get i() { return this.internals_; }
  });
  assert_equals(document.getElementById("custom-2").i.form, form);
  assert_equals(document.getElementById("custom-4").i.form, form);

  // Test changing name attribuate.
  let custom5 = document.getElementById("custom-5");
  assert_equals(custom5.i.form, null);
  custom5.setAttribute("form", "custom-form");
  assert_equals(custom5.i.form, form);
}, "ElementInternals.form should return the target element's form owner");

test(() => {
  class NotFormAssociatedElement extends HTMLElement {}
  customElements.define('not-form-associated-element', NotFormAssociatedElement);
  const element = new NotFormAssociatedElement();
  const i = element.attachInternals();
  assert_throws_dom('NotSupportedError', () => i.form);
}, "ElementInternals.form should throws NotSupportedError if the target element is not a form-associated custom element");

</script>
</body>
chromium/third_party/blink/web_tests/external/wpt/custom-elements/form-associated/ElementInternals-form.html
