fieldset-elements.html (2030B)
1 <!DOCTYPE html> 2 <body> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 6 <script> 7 customElements.define('custom-input-parser', class extends HTMLElement { 8 static get formAssociated() {return true;} 9 }); 10 </script> 11 12 <form> 13 <fieldset id="fs_outer"> 14 <custom-input-parser name="custom-1"></custom-input> 15 <custom-input-upgrade name="custom-2"></custom-input> 16 <fieldset id="fs_inner"> 17 <custom-input-parser name="custom-3"></custom-input> 18 <custom-input-upgrade name="custom-4"></custom-input> 19 <uncustom-input></custom-input> 20 </fieldset> 21 </fieldset> 22 <custom-input-parser name="custom-5"></custom-input> 23 <custom-input-upgrade name="custom-6"></custom-input> 24 </form> 25 26 <script> 27 test(() => { 28 const formElements = document.forms[0].elements; 29 const fs_outer = document.getElementById("fs_outer"); 30 const fs_inner = document.getElementById("fs_inner"); 31 32 assert_array_equals(fs_inner.elements, [formElements['custom-3']], 33 "The items in the collection must be children of the inner fieldset element."); 34 assert_array_equals(fs_outer.elements, [formElements['custom-1'], fs_inner, formElements['custom-3']], 35 "The items in the collection must be descendants of the outer fieldset element."); 36 37 customElements.define('custom-input-upgrade', class extends HTMLElement { 38 static get formAssociated() {return true;} 39 }); 40 41 assert_array_equals(fs_inner.elements, [formElements['custom-3'], formElements['custom-4']], 42 "The items in the collection must be children of the inner fieldset element."); 43 assert_array_equals(fs_outer.elements, 44 [formElements['custom-1'], formElements['custom-2'], fs_inner, formElements['custom-3'], formElements['custom-4']], 45 "The items in the collection must be descendants of the outer fieldset element."); 46 47 }, 'Form associated custom elements should work with fieldset.elements'); 48 49 </script> 50 </body>