form-elements-filter.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>form.elements must contain all listed elements with the form owner</title>

<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-form-elements">

<link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<div id="log"></div>

<!--

  Elements with data-in are expected to be in the form.elements collection.

  The choice of other elements besides "listed elements" (i.e. img, label, meter, progress) was

  because those are ones that appear in form-associated or labelable element categories.

-->

<button data-in form="form" id="before-button1"></button>

<fieldset data-in form="form" id="before-fieldset1"></fieldset>

<object data-in form="form" id="before-object1"></object>

<output data-in form="form" id="before-output1"></output>

<select data-in form="form" id="before-select1">

  <option form="form" id="before-option1">x</option>

</select>

<textarea data-in form="form" id="before-textarea1"></textarea>

<input data-in form="form" id="before-input1">

<input data-in type="hidden" form="form" id="before-input2">

<input data-in type="search" form="form" id="before-input3">

<input data-in type="tel" form="form" id="before-input4">

<input data-in type="url" form="form" id="before-input5">

<input data-in type="email" form="form" id="before-input6">

<input data-in type="password" form="form" id="before-input7">

<input data-in type="date" form="form" id="before-input8">

<input data-in type="month" form="form" id="before-input9">

<input data-in type="week" form="form" id="before-input10">

<input data-in type="time" form="form" id="before-input11">

<input data-in type="datetime-local" form="form" id="before-input12">

<input data-in type="number" form="form" id="before-input13">

<input data-in type="range" form="form" id="before-input14">

<input data-in type="color" form="form" id="before-input15">

<input data-in type="checkbox" form="form" id="before-input16">

<input data-in type="radio" form="form" id="before-input17">

<input data-in type="file" form="form" id="before-input18">

<input data-in type="submit" form="form" id="before-input19">

<input data-in type="reset" form="form" id="before-input20">

<input data-in type="button" form="form" id="before-input21">

<img form="form" id="before-img1">

<label form="form" id="before-label1"></label>

<meter form="form" id="before-meter1"></meter>

<progress form="form" id="before-progress1"></progress>

<form id="form">

  <button data-in id="button1"></button>

  <fieldset data-in id="fieldset1"></fieldset>

  <object data-in id="object1"></object>

  <output data-in id="output1"></output>

  <select data-in id="select1">

    <option id="option1">x</option>

  </select>

  <textarea data-in id="textarea1"></textarea>

  <input data-in id="input1">

  <input data-in type="hidden" id="input2">

  <input data-in type="search" id="input3">

  <input data-in type="tel" id="input4">

  <input data-in type="url" id="input5">

  <input data-in type="email" id="input6">

  <input data-in type="password" id="input7">

  <input data-in type="date" id="input8">

  <input data-in type="month" id="input9">

  <input data-in type="week" id="input10">

  <input data-in type="time" id="input11">

  <input data-in type="datetime-local" id="input12">

  <input data-in type="number" id="input13">

  <input data-in type="range" id="input14">

  <input data-in type="color" id="input15">

  <input data-in type="checkbox" id="input16">

  <input data-in type="radio" id="input17">

  <input data-in type="file" id="input18">

  <input data-in type="submit" id="input19">

  <input data-in type="reset" id="input20">

  <input data-in type="button" id="input21">

  <img id="img1">

  <label id="label1"></label>

  <meter id="meter1"></meter>

  <progress id="progress1"></progress>

</form>

<button data-in form="form" id="after-button1"></button>

<fieldset data-in form="form" id="after-fieldset1"></fieldset>

<object data-in form="form" id="after-object1"></object>

<output data-in form="form" id="after-output1"></output>

<select data-in form="form" id="after-select1">

  <option form="form" id="after-option1">x</option>

</select>

<textarea data-in form="form" id="after-textarea1"></textarea>

<input data-in form="form" id="after-input1">

<input data-in type="hidden" form="form" id="after-input2">

<input data-in type="search" form="form" id="after-input3">

<input data-in type="tel" form="form" id="after-input4">

<input data-in type="url" form="form" id="after-input5">

<input data-in type="email" form="form" id="after-input6">

<input data-in type="password" form="form" id="after-input7">

<input data-in type="date" form="form" id="after-input8">

<input data-in type="month" form="form" id="after-input9">

<input data-in type="week" form="form" id="after-input10">

<input data-in type="time" form="form" id="after-input11">

<input data-in type="datetime-local" form="form" id="after-input12">

<input data-in type="number" form="form" id="after-input13">

<input data-in type="range" form="form" id="after-input14">

<input data-in type="color" form="form" id="after-input15">

<input data-in type="checkbox" form="form" id="after-input16">

<input data-in type="radio" form="form" id="after-input17">

<input data-in type="file" form="form" id="after-input18">

<input data-in type="submit" form="form" id="after-input19">

<input data-in type="reset" form="form" id="after-input20">

<input data-in type="button" form="form" id="after-input21">

<img form="form" id="after-img1">

<label form="form" id="after-label1"></label>

<meter form="form" id="after-meter1"></meter>

<progress form="form" id="after-progress1"></progress>

<button id="after-unassociated-button1"></button>

<fieldset id="after-unassociated-fieldset1"></fieldset>

<object id="after-unassociated-object1"></object>

<output id="after-unassociated-output1"></output>

<select id="after-unassociated-select1">

  <option id="after-unassociated-option1">x</option>

</select>

<textarea id="after-unassociated-textarea1"></textarea>

<input id="after-unassociated-input1">

<input type="hidden" id="after-unassociated-input2">

<input type="search" id="after-unassociated-input3">

<input type="tel" id="after-unassociated-input4">

<input type="url" id="after-unassociated-input5">

<input type="email" id="after-unassociated-input6">

<input type="password" id="after-unassociated-input7">

<input type="date" id="after-unassociated-input8">

<input type="month" id="after-unassociated-input9">

<input type="week" id="after-unassociated-input10">

<input type="time" id="after-unassociated-input11">

<input type="datetime-local" id="after-unassociated-input12">

<input type="number" id="after-unassociated-input13">

<input type="range" id="after-unassociated-input14">

<input type="color" id="after-unassociated-input15">

<input type="checkbox" id="after-unassociated-input16">

<input type="radio" id="after-unassociated-input17">

<input type="file" id="after-unassociated-input18">

<input type="submit" id="after-unassociated-input19">

<input type="reset" id="after-unassociated-input20">

<input type="button" id="after-unassociated-input21">

<img id="after-unassociated-img1">

<label id="after-unassociated-label1"></label>

<meter id="after-unassociated-meter1"></meter>

<progress id="after-unassociated-progress1"></progress>

<form id="form2">

  <span id="shadow-1"></span>

</form>

<span id="shadow-2"></span>

<script>

"use strict";

test(() => {

  const elements = document.querySelector("#form").elements;

  const ids = Array.from(elements).map(el => el.id);

  const allCorrectIDs = Array.from(document.querySelectorAll("[data-in]")).map(el => el.id);

  assert_array_equals(ids, allCorrectIDs);

});

test(() => {

  const shadowRoot1 = document.querySelector("#shadow-1").attachShadow({mode: "open"});

  const input1 = document.createElement("input");

  shadowRoot1.appendChild(input1);

  const shadowRoot2 = document.querySelector("#shadow-2").attachShadow({mode: "open"});

  const input2 = document.createElement("input");

  input2.setAttribute("form", "form2");

  shadowRoot2.appendChild(input2);

  assert_equals(document.querySelector("#form2").elements.length, 0);

  assert_equals(input1.form, null);

  assert_equals(input2.form, null);

}, "form.elements only includes elements from the same shadow tree");

</script>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: