form-control-form-attribute.html (2107B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Form controls' form attribute</title> 4 <script src=/resources/testharness.js></script> 5 <script src=/resources/testharnessreport.js></script> 6 <div id="testcontent"> 7 <form id="form">form</form> 8 <input id="input" form="form"> 9 </div> 10 11 <script> 12 13 test(() => { 14 assert_equals(document.getElementById('input').form, 15 document.getElementById('form')); 16 }, "Form control's form attribute should point to the form element."); 17 18 test(() => { 19 var testcontent = document.getElementById("testcontent"); 20 var host = document.createElement("div"); 21 var sr = host.attachShadow({mode: "open"}); 22 sr.innerHTML = testcontent.innerHTML; 23 var input = sr.getElementById("input"); 24 var form = sr.getElementById("form"); 25 26 // Should have null form when shadow DOM isn't connected. 27 assert_equals(input.form, null); 28 29 testcontent.appendChild(host); 30 assert_equals(input.form, form); 31 32 host.remove(); 33 assert_equals(input.form, null); 34 35 testcontent.appendChild(host); 36 assert_equals(input.form, form); 37 38 input.remove(); 39 assert_equals(input.form, null); 40 41 sr.appendChild(input); 42 assert_equals(input.form, form); 43 44 form.id = "foobar"; 45 assert_equals(input.form, null); 46 47 form.id = "form"; 48 assert_equals(input.form, form); 49 50 form.remove(); 51 assert_equals(input.form, null); 52 53 sr.appendChild(form); 54 assert_equals(input.form, form); 55 56 host.remove(); 57 }, "Shadow form control's form attribute should work also in shadow DOM."); 58 59 test(() => { 60 var testcontent = document.getElementById("testcontent"); 61 var host = document.createElement("div"); 62 var sr = host.attachShadow({mode: "open"}); 63 sr.innerHTML = "<form id='form'><input id='input'></form>"; 64 var input = sr.getElementById("input"); 65 var form = sr.getElementById("form"); 66 67 assert_equals(input.form, form); 68 69 input.remove(); 70 assert_equals(input.form, null); 71 72 form.appendChild(input); 73 assert_equals(input.form, form); 74 75 form.remove(); 76 assert_equals(input.form, form); 77 78 host.remove(); 79 }, "Form element as form control's ancestor should work also in shadow DOM."); 80 </script>