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