ElementInternals-form.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /custom-elements/form-associated/ElementInternals-form.html - WPT Dashboard Interop Dashboard

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