label-attributes.sub.html (17215B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: The label element</title> 4 <link rel="author" title="Intel" href="http://www.intel.com/"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <div id="log"></div> 8 <form id="fm" style="display:none"> 9 <label id="lbl0" for="test0"></label> 10 <b id="test0"></b> 11 12 <input id="test1"></input> 13 14 <label id="lbl1"> 15 <a id="test2"></a> 16 <div><input id="test3"></div> 17 <input id="test4"> 18 </label> 19 20 <label id="lbl2" for="testx"> 21 <input id="test5"> 22 </label> 23 24 <label id="lbl3" for="test6"> 25 <b id="test6"></b> 26 <input id="test6" class="class1"> 27 </label> 28 29 <label id="lbl4" for=""> 30 <input id="" class="class2"> 31 </label> 32 33 <label id="lbl5" for="test7"></label> 34 <input id="test7"> 35 36 <label id="lbl7"> 37 <label id="lbl8"> 38 <div id="div1"> 39 <input id="test8"> 40 </div> 41 </label> 42 </label> 43 <div id="div2"></div> 44 45 <label id="lbl9"> 46 <label id="lbl10" for="test10"> 47 <div id="div3"> 48 <input id="test9"> 49 </div> 50 </label> 51 </label> 52 <div id="div4"><input id="test10"></div> 53 54 <label id="lbl11"> 55 <object id="obj"> 56 <input id="test11"> 57 <input id="test12"> 58 </object> 59 </label> 60 <label id="lbl12" for="test12"><div id="div5"></div></label> 61 62 <label id="lbl13"> 63 <p id="p1"> 64 <input id="test13"> 65 </p> 66 </label> 67 68 <div id="div6"> 69 <div id="div7"> 70 <label id="lbl14"> 71 <label id="lbl15" for="test15"> 72 <input id="test14"> 73 </label> 74 </label> 75 </div> 76 </div> 77 <input id="test15"> 78 </form> 79 80 <label id="lbl6" for="test7"></label> 81 <div id="content" style="display: none"> 82 <script> 83 84 //control attribute 85 test(function () { 86 assert_not_equals(document.getElementById("lbl0").control, document.getElementById("test0"), 87 "An element that's not a labelable element can't be a label element's labeled control."); 88 assert_equals(document.getElementById("lbl0").control, null, 89 "A label element whose 'for' attribute doesn't reference any labelable element shouldn't have any labeled control."); 90 }, "A label element with a 'for' attribute should only be associated with a labelable element."); 91 92 test(function () { 93 var label = document.createElement("label"); 94 label.htmlFor = "test1"; 95 assert_not_equals(label.control, document.getElementById("test1"), 96 "A label element not in a document should not label an element in a document."); 97 document.body.appendChild(label); 98 assert_equals(label.control, document.getElementById("test1")); 99 label.remove(); 100 }, "A label element not in a document can not label any element in the document."); 101 102 test(function () { 103 var labels = document.getElementById("test3").labels; 104 assert_equals(document.getElementById("lbl1").control, document.getElementById("test3"), 105 "The first labelable descendant of a label element should be its labeled control."); 106 107 var input = document.createElement("input"); 108 document.getElementById("lbl1").insertBefore(input, document.getElementById("test2")); 109 assert_equals(document.getElementById("lbl1").control, input, 110 "The first labelable descendant of a label element in tree order should be its labeled control."); 111 assert_equals(input.labels.length, 1, 112 "The form control has an ancestor with no explicit associated label, and is the first labelable descendant."); 113 assert_equals(labels.length, 0, 114 "The number of labels should be 0 if it's not the first labelable descendant of a label element."); 115 input.remove(); 116 }, "The labeled control for a label element that has no 'for' attribute is the first labelable element which is a descendant of that label element."); 117 118 test(function () { 119 assert_equals(document.getElementById("lbl2").control, null, 120 "The label's 'control' property should return null if its 'for' attribute points to an inexistent element."); 121 }, "The 'for' attribute points to an inexistent id."); 122 123 test(function () { 124 assert_equals(document.getElementById("lbl3").control, null, "The label should have no control associated."); 125 assert_equals(document.querySelector(".class1").labels.length, 0); 126 }, "A non-control follows by a control with same ID."); 127 128 test(function () { 129 assert_equals(document.getElementById("lbl4").control, null, 130 "A label element with an empty 'for' attribute should not associate with anything."); 131 }, "The 'for' attribute is an empty string."); 132 133 //labels attribute 134 test(function () { 135 var labels = document.getElementById("test7").labels; 136 assert_true(labels instanceof NodeList, 137 "A form control's 'labels' property should be an instance of a NodeList."); 138 assert_equals(labels.length, 2, 139 "The number of labels associated with a form control should be the number of label elements for which it is a labeled control."); 140 assert_array_equals(labels, [document.getElementById("lbl5"), document.getElementById("lbl6")], 141 "The labels for a form control should be returned in tree order."); 142 143 var newLabel = document.createElement("label"); 144 newLabel.htmlFor = "test7"; 145 document.getElementById("fm").insertBefore(newLabel, document.getElementById("lbl0")); 146 assert_array_equals(document.getElementById("test7").labels, [newLabel, document.getElementById("lbl5"), document.getElementById("lbl6")], 147 "The labels for a form control should be returned in tree order."); 148 newLabel.remove(); 149 }, "A form control has multiple labels."); 150 151 test(function () { 152 var labels = document.getElementById("test8").labels; 153 assert_true(labels instanceof NodeList, 154 "A form control's 'labels' property should be an instance of a NodeList."); 155 assert_equals(labels.length, 2, 156 "The form control has two ancestors with no explicit associated label, and is the first labelable descendant."); 157 assert_array_equals(labels, [document.getElementById("lbl7"), document.getElementById("lbl8")], 158 "The labels for a form control should be returned in tree order."); 159 160 document.getElementById('div2').insertBefore(document.getElementById('div1'), document.getElementById('div2').firstChild); 161 assert_equals(labels.length, 0, 162 "The number of labels should be 0 after the labelable element is moved to outside of nested associated labels."); 163 }, "A labelable element is moved to outside of nested associated labels."); 164 165 test(function () { 166 var labels1 = document.getElementById("test9").labels; 167 var labels2 = document.getElementById("test10").labels; 168 assert_true(labels1 instanceof NodeList, 169 "A form control's 'labels' property should be an instance of a NodeList."); 170 assert_true(labels2 instanceof NodeList, 171 "A form control's 'labels' property should be an instance of a NodeList."); 172 assert_equals(labels1.length, 1, 173 "The form control has an ancestor with no explicit associated label, and is the first labelable descendant."); 174 assert_equals(labels2.length, 1, 175 "The number of labels associated with a form control should be the number of label elements for which it is a labeled control."); 176 assert_array_equals(labels1, [document.getElementById("lbl9")], 177 "The labels for a form control should be returned in tree order."); 178 assert_array_equals(labels2, [document.getElementById("lbl10")], 179 "The labels for a form control should be returned in tree order."); 180 document.getElementById('div3').insertBefore(document.getElementById('div4'), document.getElementById('div3').firstChild); 181 assert_equals(labels1.length, 0, 182 "The number of labels should be 0 if it's not the first labelable descendant of a label element."); 183 assert_equals(labels2.length, 2, 184 "The form control has an ancestor with an explicit associated label, and is the first labelable descendant."); 185 }, "A labelable element is moved to inside of nested associated labels."); 186 187 test(function () { 188 var labels1 = document.getElementById("test11").labels; 189 var labels2 = document.getElementById("test12").labels; 190 assert_true(labels1 instanceof NodeList, 191 "A form control's 'labels' property should be an instance of a NodeList."); 192 assert_true(labels2 instanceof NodeList, 193 "A form control's 'labels' property should be an instance of a NodeList."); 194 assert_equals(labels1.length, 1, 195 "The form control has an ancestor with no explicit associated label, and it is the first labelable descendant."); 196 assert_equals(labels2.length, 1, 197 "The number of labels should be 1 since there is a label with a 'for' attribute associated with this labelable element."); 198 assert_array_equals(labels1, [document.getElementById("lbl11")], 199 "The labels for a form control should be returned in tree order."); 200 assert_array_equals(labels2, [document.getElementById("lbl12")], 201 "The labels for a form control should be returned in tree order."); 202 document.getElementById('div5').appendChild(document.getElementById('obj')); 203 assert_equals(labels1.length, 0, 204 "The number of labels should be 0 after the labelable element is moved to outside of associated label."); 205 assert_equals(labels2.length, 1, 206 "The number of labels should be 1 after the labelable element is moved to outside of associated label."); 207 }, "A labelable element which is a descendant of non-labelable element is moved to outside of associated label."); 208 209 async_test(function () { 210 var labels = document.getElementById("test13").labels; 211 assert_true(labels instanceof NodeList, 212 "A form control's 'labels' property should be an instance of a NodeList."); 213 assert_equals(labels.length, 1, 214 "The form control has an ancestor with no explicit associated label, and is the first labelable descendant."); 215 assert_array_equals(labels, [document.getElementById("lbl13")], 216 "The labels for a form control should be returned in tree order."); 217 let iframe = document.createElement('iframe'); 218 219 iframe.onload = this.step_func_done(() => { 220 iframe.contentWindow.document.getElementById("div1").appendChild(document.getElementById("p1")); 221 assert_equals(labels.length, 2, 222 "The number of labels should be 2 after the labelable element is moved to iframe."); 223 }); 224 225 iframe.setAttribute('src', 'http://{{domains[]}}:{{ports[http][0]}}/html/semantics/forms/the-label-element/iframe-label-attributes.html'); 226 document.body.appendChild(iframe); 227 }, "A labelable element is moved to iframe."); 228 229 test(function () { 230 var test14 = document.getElementById("test14"); 231 var labels1 = test14.labels; 232 var labels2 = document.getElementById("test15").labels; 233 assert_true(labels1 instanceof NodeList, 234 "A form control's 'labels' property should be an instance of a NodeList."); 235 assert_equals(labels1.length, 1, 236 "The form control has an ancestor with no explicit associated label, and is the first labelable descendant."); 237 assert_equals(labels2.length, 1, 238 "The number of labels associated with a form control should be the number of label elements for which it is a labeled control."); 239 assert_array_equals(labels1, [document.getElementById("lbl14")], 240 "The labels for a form control should be returned in tree order."); 241 assert_array_equals(labels2, [document.getElementById("lbl15")], 242 "The labels for a form control should be returned in tree order."); 243 244 document.getElementById('div6').removeChild(document.getElementById('div7')); 245 assert_equals(labels1.length, 1, 246 "The number of labels should be 1 after the labelable element is removed but label element is still in the same tree."); 247 assert_equals(labels2.length, 0, 248 "The number of labels should be 0 since there is no label with a 'for' attribute associated with this labelable element."); 249 test14.remove(); 250 assert_equals(labels1.length, 0, 251 "The number of labels should be 0 after the labelable element is removed."); 252 }, "A div element which contains labelable element is removed."); 253 254 test(function () { 255 // <label><input id="test16"><label for="test16"></label></label> 256 var label1 = document.createElement('label'); 257 label1.innerHTML = "<input id='test16'>"; 258 var label2 = document.createElement('label'); 259 label2.htmlFor = "test16"; 260 label1.appendChild(label2); 261 262 var input = label1.firstChild; 263 var labels = input.labels; 264 265 assert_equals(labels.length, 2, 266 "The number of labels associated with a form control should be the number of label elements for which it is a labeled control."); 267 assert_true(labels instanceof NodeList, 268 "A form control's 'labels' property should be an instance of a NodeList."); 269 assert_equals(label1.control, input, "The first labelable descendant of a label element should be its labeled control."); 270 assert_equals(label2.control, input, "The labeled cotrol should be associated with the control whose ID is equal to the value of the 'for' attribute."); 271 }, "A labelable element not in a document can label element in the same tree."); 272 273 test(function () { 274 var root1 = document.getElementById('content').attachShadow({mode: 'open'}); 275 assert_true(root1 instanceof DocumentFragment, 276 "ShadowRoot should be an instance of DocumentFragment."); 277 // <label><input id="shadow1"/></label><div id="div1"></div> 278 var label1 = document.createElement('label'); 279 var input1 = document.createElement('input'); 280 input1.setAttribute("id", "shadow1"); 281 label1.appendChild(input1); 282 root1.appendChild(label1); 283 284 var div1 = document.createElement('div'); 285 label1.appendChild(div1); 286 // <label for="shadow2"></label><input id="shadow2"/> 287 var root2 = div1.attachShadow({mode: 'open'}); 288 289 assert_true(root2 instanceof DocumentFragment, 290 "ShadowRoot should be an instance of DocumentFragment."); 291 var label2 = document.createElement('label'); 292 label2.setAttribute("for", "shadow2"); 293 294 var input2 = document.createElement('input'); 295 input2.setAttribute("id", "shadow2"); 296 root2.appendChild(label2); 297 root2.appendChild(input2); 298 299 assert_equals(root1.getElementById("shadow1").labels.length, 1, 300 "The form control has an ancestor with no explicit associated label, and it is the first labelable descendant."); 301 assert_equals(root2.getElementById("shadow2").labels.length, 1, 302 "The number of labels should be 1 since there is a label with a 'for' attribute associated with this labelable element."); 303 }, "A labelable element inside the shadow DOM."); 304 305 test(function () { 306 var labels = document.getElementById("test3").labels; 307 assert_true(labels instanceof NodeList, "A form control's 'labels' property should be an instance of a NodeList."); 308 assert_equals(labels.length, 1, "The form control has an ancestor with no explicit associated label, and is the first labelable descendant."); 309 }, "A form control has an implicit label."); 310 311 test(function () { 312 var labels = document.getElementById("test4").labels; 313 assert_true(labels instanceof NodeList, "A form control's 'labels' property should be an instance of a NodeList."); 314 assert_equals(labels.length, 0, "The form control has an ancestor with no explicit associated label, but is *not* the first labelable descendant"); 315 }, "A form control has no label 1."); 316 317 test(function () { 318 assert_equals(document.getElementById("test5").labels.length, 0, 319 "The number of labels should be 0 if the form control has an ancestor label element that the for attribute points to another control."); 320 assert_equals(document.getElementById("lbl2").control, null, 321 "The labeled cotrol should be associated with the control whose ID is equal to the value of the 'for' attribute."); 322 }, "A form control has no label 2."); 323 324 // form attribute 325 test(function () { 326 assert_equals(document.getElementById("lbl0").form, null, 327 "The 'form' property for a label should return null if label.control is null."); 328 }, "A label in a form without a control"); 329 330 test(function () { 331 assert_equals(document.getElementById("lbl6").form, document.getElementById("fm"), 332 "The 'form' property for a label should return label.control.form."); 333 }, "A label outside a form with a control inside the form"); 334 335 // htmlFor attribute 336 test(function () { 337 assert_equals(document.getElementById("lbl2").htmlFor, "testx"); 338 }, "A label's htmlFor attribute must reflect the for content attribute"); 339 </script>