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