labelable-elements.html (7256B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: labelable elements</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 style="display:none"> 9 <output id="testoutput"></output> 10 <label id="lbl0" for="testoutput"></label> 11 <progress id="testprogress"></progress> 12 <label id="lbl1" for="testprogress"></label> 13 <select id="testselect"></select> 14 <label id="lbl2" for="testselect"></label> 15 <textarea id="testarea"></textarea> 16 <label id="lbl3" for="testarea"></label> 17 <button id="testButton"></button> 18 <label id="lbl4" for="testButton"></label> 19 <input type="hidden" id="testHidden"> 20 <label id="lbl5" for="testHidden"></label> 21 <input type="radio" id="testRadio"> 22 <label id="lbl6" for="testRadio"></label> 23 <keygen id="testkeygen"> 24 <label id="lbl7" for="testkeygen"></label> 25 <meter id="testmeter"></meter> 26 <label id="lbl8" for="testmeter"></label> 27 28 <fieldset id="testfieldset"></fieldset> 29 <label id="lbl9" for="testfieldset"></label> 30 <label id="testlabel"></label> 31 <label id="lbl10" for="testlabel"></label> 32 <object id="testobject"></object> 33 <label id="lbl11" for="testobject"></label> 34 <img id="testimg"> 35 <label id="lbl12" for="testimg"></label> 36 </form> 37 38 <script> 39 function testLabelsAttr(formElementId, labelElementId) { 40 var elem = document.getElementById(formElementId); 41 if (labelElementId) { 42 assert_equals(elem.labels.length, 1); 43 assert_equals(elem.labels[0].id, labelElementId); 44 } else { 45 assert_equals(elem.labels.length, 0); 46 } 47 } 48 49 test(function() { 50 assert_equals(document.getElementById("lbl0").control.id, "testoutput", "An output element should be labelable."); 51 }, "Check if the output element is a labelable element"); 52 53 test(function() { 54 testLabelsAttr("testoutput", "lbl0"); 55 }, "Check if the output element can access 'labels'"); 56 57 test(function() { 58 assert_equals(document.getElementById("lbl1").control.id, "testprogress", "A progress element should be labelable."); 59 }, "Check if the progress element is a labelable element"); 60 61 test(function() { 62 testLabelsAttr("testprogress", "lbl1"); 63 }, "Check if the progress element can access 'labels'"); 64 65 test(function() { 66 assert_equals(document.getElementById("lbl2").control.id, "testselect", "A select element should be labelable."); 67 }, "Check if the select element is a labelable element"); 68 69 test(function() { 70 testLabelsAttr("testselect", "lbl2"); 71 }, "Check if the select element can access 'labels'"); 72 73 test(function() { 74 assert_equals(document.getElementById("lbl3").control.id, "testarea", "A textarea element should be labelable."); 75 }, "Check if the textarea element is a labelable form-element"); 76 77 test(function() { 78 testLabelsAttr("testarea", "lbl3"); 79 }, "Check if the textarea element can access 'labels'"); 80 81 test(function() { 82 assert_equals(document.getElementById("lbl4").control.id, "testButton", "A button element should be labelable."); 83 }, "Check if the button element is a labelable element"); 84 85 test(function() { 86 testLabelsAttr("testButton", "lbl4"); 87 }, "Check if the button element can access 'labels'"); 88 89 test(function() { 90 assert_equals(document.getElementById("lbl5").control, null, "An input element in hidden state should not be labelable."); 91 }, "Check if the hidden input element is not a labelable element."); 92 93 test(function() { 94 var hiddenInput = document.getElementById("testHidden"); 95 assert_equals(hiddenInput.labels, null, "input[type=hidden] must have null .labels"); 96 97 this.add_cleanup(function () { 98 hiddenInput.type = "hidden"; 99 }); 100 101 hiddenInput.type = "text"; 102 testLabelsAttr("testHidden", "lbl5"); 103 var labels = hiddenInput.labels; 104 105 hiddenInput.type = "hidden"; 106 assert_equals(labels.length, 0, "Retained .labels NodeList should be empty after input type changed to hidden"); 107 assert_equals(hiddenInput.labels, null, ".labels NodeList should be null after input type changed to hidden"); 108 109 hiddenInput.type = "checkbox"; 110 assert_equals(labels, hiddenInput.labels, ".labels property must return the [SameObject] after input type is toggled back from 'hidden'"); 111 assert_equals(hiddenInput.labels.length, 1, ".labels NodeList should contain the input after the input type is changed from 'hidden' to 'checkbox'"); 112 }, "Check if the hidden input element has null 'labels'"); 113 114 test(function() { 115 assert_equals(document.getElementById("lbl6").control.id, "testRadio", "An input element in radio state should be labelable."); 116 }, "Check if the input element in radio state is a labelable element"); 117 118 test(function() { 119 testLabelsAttr("testRadio", "lbl6"); 120 }, "Check if the input element in radio state can access 'labels'"); 121 122 test(function() { 123 assert_not_equals(document.getElementById("lbl7").control, document.getElementById("testkeygen")); 124 assert_equals(document.getElementById("lbl7").control, null, "A keygen element should not be labelable."); 125 }, "Check if the keygen element is not a labelable element"); 126 127 test(function() { 128 assert_equals(document.getElementById("testkeygen").labels, undefined); 129 }, "Check if the keygen element can access 'labels'"); 130 131 test(function() { 132 assert_equals(document.getElementById("lbl8").control.id, "testmeter", "A meter element should be labelable."); 133 }, "Check if the meter element is a labelable element"); 134 135 test(function() { 136 testLabelsAttr("testmeter", "lbl8"); 137 }, "Check if the meter element can access 'labels'"); 138 139 test(function() { 140 assert_not_equals(document.getElementById("lbl9").control, document.getElementById("testfieldset")); 141 assert_equals(document.getElementById("lbl9").control, null, "A fieldset element should not be labelable."); 142 }, "Check if the fieldset element is not a labelable element"); 143 144 test(function() { 145 assert_equals(document.getElementById("testfieldset").labels, undefined); 146 }, "Check if the fieldset element can access 'labels'"); 147 148 test(function() { 149 assert_not_equals(document.getElementById("lbl9").control, document.getElementById("testlabel")); 150 assert_equals(document.getElementById("lbl10").control, null, "A label element should not be labelable."); 151 }, "Check if the label element is not a labelable element"); 152 153 test(function() { 154 assert_equals(document.getElementById("testlabel").labels, undefined); 155 }, "Check if the label element can access 'labels'"); 156 157 test(function() { 158 assert_not_equals(document.getElementById("lbl9").control, document.getElementById("testobject")); 159 assert_equals(document.getElementById("lbl11").control, null, "An object element should not be labelable."); 160 }, "Check if the object element is not a labelable element"); 161 162 test(function() { 163 assert_equals(document.getElementById("testobject").labels, undefined); 164 }, "Check if the object element can access 'labels'"); 165 166 test(function() { 167 assert_not_equals(document.getElementById("lbl9").control, document.getElementById("testimg")); 168 assert_equals(document.getElementById("lbl12").control, null, "An img element should not be labelable."); 169 }, "Check if the img element is not a labelable element"); 170 171 test(function() { 172 assert_equals(document.getElementById("lbl9").labels, undefined); 173 }, "Check if the img element can access 'labels'"); 174 </script>