custom-elements/form-associated/fieldset-elements.html

<!DOCTYPE html>
<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;}
});
</script>

<form>
  <fieldset id="fs_outer">
    <custom-input-parser name="custom-1"></custom-input>
    <custom-input-upgrade name="custom-2"></custom-input>
    <fieldset id="fs_inner">
      <custom-input-parser name="custom-3"></custom-input>
      <custom-input-upgrade name="custom-4"></custom-input>
      <uncustom-input></custom-input>
    </fieldset>
  </fieldset>
  <custom-input-parser name="custom-5"></custom-input>
  <custom-input-upgrade name="custom-6"></custom-input>
</form>

<script>
test(() => {
  const formElements = document.forms[0].elements;
  const fs_outer = document.getElementById("fs_outer");
  const fs_inner = document.getElementById("fs_inner");

  assert_array_equals(fs_inner.elements, [formElements['custom-3']],
                      "The items in the collection must be children of the inner fieldset element.");
  assert_array_equals(fs_outer.elements, [formElements['custom-1'], fs_inner, formElements['custom-3']],
                      "The items in the collection must be descendants of the outer fieldset element.");

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

  assert_array_equals(fs_inner.elements, [formElements['custom-3'], formElements['custom-4']],
                      "The items in the collection must be children of the inner fieldset element.");
  assert_array_equals(fs_outer.elements,
                      [formElements['custom-1'], formElements['custom-2'], fs_inner, formElements['custom-3'], formElements['custom-4']],
                      "The items in the collection must be descendants of the outer fieldset element.");

}, 'Form associated custom elements should work with fieldset.elements');

</script>
</body>