radio-disconnected-group-owner.html (9011B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <meta charset="utf-8"> 8 <title>Test for validity of disconnected radio buttons</title> 9 </head> 10 11 <body> 12 <input type="radio" name="group" id="radio1" required /> 13 <input type="radio" name="group" id="radio2" checked /> 14 <form> 15 <input type="radio" name="group" id="radio3" required /> 16 <input type="radio" name="group" id="radio4" checked /> 17 </form> 18 19 <script> 20 test(() => { 21 const radio1 = document.getElementById("radio1"); 22 const radio2 = document.getElementById("radio2"); 23 assert_false(radio1.validity.valueMissing, "Element should not suffer from value missing"); 24 25 radio2.remove(); 26 assert_true(radio1.validity.valueMissing, "Element should suffer from value missing"); 27 28 radio1.checked = true; 29 radio2.required = true; 30 assert_false(radio2.validity.valueMissing, "Element should not suffer from value missing"); 31 32 const radio3 = document.getElementById("radio3"); 33 const radio4 = document.getElementById("radio4"); 34 assert_false(radio3.validity.valueMissing, "Element should not suffer from value missing"); 35 36 radio4.remove(); 37 assert_true(radio3.validity.valueMissing, "Element should suffer from value missing"); 38 39 radio3.checked = true; 40 assert_true(radio4.checked, "Element should remain checked"); 41 assert_false(radio3.validity.valueMissing, "Element should not suffer from value missing"); 42 43 document.querySelector("form").appendChild(radio2); 44 assert_false(radio3.checked, "Element should be unchecked"); 45 assert_false(radio1.validity.valueMissing, "Element should not suffer from value missing"); 46 }, "Removed elements are moved into separate radio groups."); 47 48 test(() => { 49 const container = document.createElement("div"); 50 const radio = document.createElement("input"); 51 radio.type = "radio"; 52 radio.name = "group"; 53 radio.id = "radio5"; 54 radio.required = true; 55 container.appendChild(radio); 56 assert_true(radio.validity.valueMissing, "Element should suffer from value missing"); 57 58 const outerContainer = document.createElement("div"); 59 const outerRadio = document.createElement("input"); 60 outerRadio.type = "radio"; 61 outerRadio.name = "group"; 62 outerRadio.id = "radio6"; 63 outerRadio.checked = true; 64 outerContainer.appendChild(outerRadio); 65 outerContainer.appendChild(container); 66 assert_false(radio.validity.valueMissing, "Element should not suffer from value missing"); 67 68 container.remove(); 69 assert_true(radio.validity.valueMissing, "Element should suffer from value missing"); 70 }, "Disconnected radio buttons should be contained by their tree root."); 71 72 test(() => { 73 const radioParent = document.createElement("input"); 74 radioParent.type = "radio"; 75 radioParent.name = "group"; 76 radioParent.id = "radio-parent"; 77 radioParent.required = true; 78 assert_true(radioParent.validity.valueMissing, "Element should suffer from value missing"); 79 80 const radioChild = document.createElement("input"); 81 radioChild.type = "radio"; 82 radioChild.name = "group"; 83 radioChild.id = "radio-child"; 84 radioChild.checked = true; 85 assert_false(radioChild.validity.valueMissing, "Element should not suffer from value missing"); 86 87 radioParent.appendChild(radioChild); 88 assert_false(radioChild.validity.valueMissing, "Element should not suffer from value missing"); 89 assert_false(radioParent.validity.valueMissing, "Element should not suffer from value missing"); 90 91 radioParent.checked = true; 92 assert_false(radioChild.checked, "Element should no longer be checked"); 93 }, "Disconnected radio buttons can serve as radio group containers."); 94 95 test(() => { 96 const shadowHost = document.createElement("div"); 97 const root = shadowHost.attachShadow({mode: "open"}); 98 const container = document.createElement("div"); 99 container.appendChild(shadowHost); 100 101 const radio1 = document.createElement("input"); 102 radio1.type = "radio"; 103 radio1.name = "group"; 104 radio1.required = true; 105 const radio2 = document.createElement("input"); 106 radio2.type = "radio"; 107 radio2.name = "group"; 108 radio2.checked = true; 109 const radio3 = document.createElement("input"); 110 radio3.type = "radio"; 111 radio3.name = "group"; 112 radio3.required = true; 113 114 root.appendChild(radio1); 115 container.appendChild(radio3); 116 assert_true(radio1.validity.valueMissing, "Element should suffer from value missing"); 117 assert_true(radio3.validity.valueMissing, "Element should suffer from value missing"); 118 119 root.appendChild(radio2); 120 assert_false(radio1.validity.valueMissing, "Element should not suffer from value missing"); 121 assert_true(radio3.validity.valueMissing, "Element should suffer from value missing"); 122 }, "Shadow roots in disconnected trees can serve as radio group containers."); 123 124 test(() => { 125 const svgRoot = document.createElementNS("http://www.w3.org/2000/svg", "g") 126 const htmlContainer = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject"); 127 svgRoot.appendChild(htmlContainer); 128 129 const radio1 = document.createElement("input"); 130 radio1.type = "radio"; 131 radio1.name = "group"; 132 radio1.required = true; 133 const radio2 = document.createElement("input"); 134 radio2.type = "radio"; 135 radio2.name = "group"; 136 radio2.checked = true; 137 138 htmlContainer.appendChild(radio1); 139 assert_true(radio1.validity.valueMissing, "Element should suffer from value missing"); 140 htmlContainer.appendChild(radio2); 141 assert_false(radio1.validity.valueMissing, "Element should not suffer from value missing"); 142 radio1.checked = true; 143 assert_false(radio2.checked, "Element should no longer be checked"); 144 }, "Non-HTML elements in disconnected trees can serve as radio group containers."); 145 146 test(() => { 147 const fragment = document.createDocumentFragment(); 148 149 const radio1 = document.createElement("input"); 150 radio1.type = "radio"; 151 radio1.name = "group"; 152 radio1.required = true; 153 const radio2 = document.createElement("input"); 154 radio2.type = "radio"; 155 radio2.name = "group"; 156 radio2.checked = true; 157 158 fragment.appendChild(radio1); 159 assert_true(radio1.validity.valueMissing, "Element should suffer from value missing"); 160 fragment.appendChild(radio2); 161 assert_false(radio1.validity.valueMissing, "Element should not suffer from value missing"); 162 radio1.checked = true; 163 assert_false(radio2.checked, "Element should no longer be checked"); 164 }, "Disconnected document fragments can serve as radio group containers."); 165 166 test(() => { 167 const container = document.createElement("div"); 168 const radio1 = document.createElement("input"); 169 radio1.type = "radio"; 170 radio1.name = "group"; 171 radio1.checked = true; 172 const radio2 = document.createElement("input"); 173 radio2.type = "radio"; 174 radio2.name = "group"; 175 radio2.checked = true; 176 177 container.appendChild(radio1); 178 assert_true(radio1.checked, "radio1 should be checked"); 179 container.appendChild(radio2); 180 assert_true(radio1.checked, "radio1 should still be checked"); 181 assert_true(radio2.checked, "radio2 should be checked, too"); 182 183 container.innerHTML = `<input type="radio" name="group" checked><input type="radio" name="group" checked>`; 184 assert_true(container.children[0].checked, "first radio child should be checked"); 185 assert_true(container.children[1].checked, "second radio child should be checked"); 186 }, "Appending input radio input into a disconnect tree don't update the other radio inputs in the same radio group."); 187 188 test(() => { 189 const form = document.createElement("form"); 190 const radio1 = document.createElement("input"); 191 radio1.type = "radio"; 192 radio1.name = "group"; 193 radio1.checked = true; 194 const radio2 = document.createElement("input"); 195 radio2.type = "radio"; 196 radio2.name = "group"; 197 radio2.checked = true; 198 199 form.appendChild(radio1); 200 assert_true(radio1.checked, "radio1 should be checked"); 201 form.appendChild(radio2); 202 assert_false(radio1.checked, "radio1 should no longer be checked"); 203 assert_true(radio2.checked, "radio2 should be checked"); 204 205 form.innerHTML = `<input type="radio" name="group" checked><input type="radio" name="group" checked>`; 206 assert_false(form.children[0].checked, "first radio child should no longer be checked"); 207 assert_true(form.children[1].checked, "second radio child should be checked"); 208 }, "Appending input radio input into a disconnect form should update the other radio inputs in the same radio group."); 209 </script> 210 </body> 211 212 </html>