form-elements-namedItem.html (3545B)
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', class extends HTMLElement { 8 static get formAssociated() {return true;} 9 }); 10 </script> 11 12 <form id="custom-form"> 13 <custom-input id="custom-1" name="alone"></custom-input> 14 <custom-input id="custom-2" name="group"></custom-input> 15 <custom-input id="custom-3" name="group"></custom-input> 16 <custom-button id="custom-4" name="upgrade"></custom-button> 17 </form> 18 <custom-input id="custom-5" name="group" form="custom-form"></custom-input> 19 <custom-button id="custom-6" name="group" form="custom-form"></custom-button> 20 21 <script> 22 test(() => { 23 const formElements = document.forms[0].elements; 24 assert_equals(formElements['invalid'],undefined); 25 assert_equals(formElements['alone'],document.getElementById('custom-1'),'Single input should be returned as-is'); 26 assert_true(formElements['group'] instanceof RadioNodeList,'Repeated names should result in RadioNodeList'); 27 const expected = [document.getElementById('custom-2'), 28 document.getElementById('custom-3'), 29 document.getElementById('custom-5')]; 30 assert_array_equals(formElements['group'],expected,'Repeated names should be contained in RadioNodeList, in tree order'); 31 }, 'Form associated custom elements should work with document.forms.elements.namedItem()'); 32 33 test(() => { 34 const formElements = document.forms[0].elements; 35 assert_equals(formElements['upgrade'],undefined); 36 customElements.define('custom-button', class extends HTMLElement { 37 static get formAssociated() {return true;} 38 }); 39 assert_equals(formElements['upgrade'],document.getElementById('custom-4'),'Single button should be returned after upgrading'); 40 const expected = [document.getElementById('custom-2'), 41 document.getElementById('custom-3'), 42 document.getElementById('custom-5'), 43 document.getElementById('custom-6')]; 44 assert_array_equals(formElements['group'],expected,'Repeated names should be contained in RadioNodeList, in tree order after upgrading'); 45 }, 'Form associated custom elements should work with document.forms.elements.namedItem() after upgrading'); 46 47 test(() => { 48 const formElements = document.forms[0].elements; 49 assert_equals(formElements['alone'],document.getElementById('custom-1'),'Single input should be returned as-is'); 50 const expected = [document.getElementById('custom-2'), 51 document.getElementById('custom-3'), 52 document.getElementById('custom-5'), 53 document.getElementById('custom-6')]; 54 assert_array_equals(formElements['group'],expected,'Repeated names should be contained in RadioNodeList, in tree order after upgrading'); 55 document.getElementById('custom-1').setAttribute("name", "group"); 56 assert_equals(formElements['alone'],undefined); 57 const expectedNew = [document.getElementById('custom-1'), 58 document.getElementById('custom-2'), 59 document.getElementById('custom-3'), 60 document.getElementById('custom-5'), 61 document.getElementById('custom-6')]; 62 assert_array_equals(formElements['group'],expectedNew,'Repeated names should be contained in RadioNodeList, in tree order after updating name attribute'); 63 }, 'Form associated custom elements should work with document.forms.elements.namedItem() after updating the name attribute'); 64 65 </script> 66 </body>