|
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
2 "http://www.w3.org/TR/html4/strict.dtd"> |
|
3 <html lang="en"> |
|
4 <head> |
|
5 <script> |
|
6 function getSelectInfo(myselect, mydiv) { |
|
7 var s = document.getElementById(myselect); |
|
8 var selectLength = s.length; |
|
9 var optionCollectionLength = s.options.length; |
|
10 var selectedInd = s.selectedIndex; |
|
11 var opt = s.options[selectedInd]; |
|
12 var optText = ""; |
|
13 |
|
14 if (opt) { |
|
15 optText = opt.innerHTML; |
|
16 } |
|
17 |
|
18 document.getElementById(mydiv).innerHTML = "Select length: " + selectLength + "<br>Option collection length: " + optionCollectionLength + "<br>Selected index: " + selectedInd + "<br>Selected option: " + optText; |
|
19 } |
|
20 |
|
21 function getAllInfo(x) { |
|
22 for (i = 1; i < x; i++) { |
|
23 var s = "s" + i; |
|
24 var d = "d" + i; |
|
25 |
|
26 getSelectInfo(s, d); |
|
27 } |
|
28 } |
|
29 </script> |
|
30 |
|
31 |
|
32 </head> |
|
33 <body onload="getAllInfo(12)"> |
|
34 <p><b>BUG ID:</b> <a href="rdar://problem/4229189">4229189</a> add a way to get a separator into a select element</p> |
|
35 |
|
36 <p id="test" style="background-color:skyblue; padding:3px;"><b>STEPS TO TEST:</b> |
|
37 Please describe the steps required to test this bug here. |
|
38 </p> |
|
39 |
|
40 |
|
41 These tests make sure that adding an hr element in a select works properly. |
|
42 |
|
43 <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>This should be a disabled popup menu, since the hr is not selectable. |
|
44 </p> |
|
45 <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b> </p> |
|
46 <select id = "s1"> |
|
47 <hr> |
|
48 </select> |
|
49 <div id="d1"></div> |
|
50 |
|
51 <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> |
|
52 You should see a popup menu with the following items: separator, option, separator |
|
53 </p> |
|
54 <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b> |
|
55 </p> |
|
56 <select id = "s2"> |
|
57 <hr> |
|
58 <option>opt 1</option> |
|
59 <hr> |
|
60 </select> |
|
61 <div id="d2"></div> |
|
62 |
|
63 <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> |
|
64 You should see a popup menu with the following items: option, separator, option |
|
65 </p> |
|
66 <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b> |
|
67 </p> |
|
68 <select id = "s3"> |
|
69 <option>opt 1</option> |
|
70 <hr> |
|
71 <option>opt 2</option> |
|
72 </select> |
|
73 <div id="d3"></div> |
|
74 |
|
75 <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> |
|
76 You should see a popup menu with the following items: option, four separators, two options, separator, option. |
|
77 </p> |
|
78 <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b> |
|
79 </p> |
|
80 <select id = "s4"> |
|
81 <option>opt 1</option> |
|
82 <hr> |
|
83 <hr> |
|
84 <hr> |
|
85 <hr> |
|
86 <option>opt 2</option> |
|
87 <option>opt 3</option> |
|
88 <hr> |
|
89 <option>opt 4</option> |
|
90 </select> |
|
91 <div id="d4"></div> |
|
92 |
|
93 <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> |
|
94 You should see a popup menu with the following items: group label, option, separator (incl. in group). |
|
95 </p> |
|
96 <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b> |
|
97 </p> |
|
98 <select id = "s5"> |
|
99 <optgroup label="Group 1"> |
|
100 <option>opt 1</option> |
|
101 <hr> |
|
102 </optgroup> |
|
103 </select> |
|
104 <div id="d5"></div> |
|
105 |
|
106 <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> |
|
107 You should see a popup menu with the following items: separator, group label, option. |
|
108 </p> |
|
109 <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b> |
|
110 </p> |
|
111 <select id = "s6"> |
|
112 <hr> |
|
113 <optgroup label="Group 1"> |
|
114 <option>opt 1</option> |
|
115 </optgroup> |
|
116 </select> |
|
117 <div id="d6"></div> |
|
118 |
|
119 <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> |
|
120 You should see a popup menu with the following items: group label, option, separator, option, separator, option, two separators, (end of group), one option. |
|
121 </p> |
|
122 <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b> |
|
123 </p> |
|
124 <select id = "s7"> |
|
125 <optgroup label="Group 1"> |
|
126 <option>opt 1</option> |
|
127 <hr> |
|
128 <option>opt 2</option> |
|
129 <hr> |
|
130 <option>opt 3</option> |
|
131 <hr> |
|
132 <hr> |
|
133 </optgroup> |
|
134 <option>opt 4</option> |
|
135 </select> |
|
136 <div id="d7"></div> |
|
137 |
|
138 <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> |
|
139 You should see a popup menu with the following items: group label, one option two separators, (end of group), separator, group label, separator, two options, separator, (end of group), option. |
|
140 </p> |
|
141 |
|
142 <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b> |
|
143 </p> |
|
144 <select id = "s8"> |
|
145 <optgroup label="Group 1"> |
|
146 <option>opt 1</option> |
|
147 <hr> |
|
148 <hr> |
|
149 </optgroup> |
|
150 <hr> |
|
151 <optgroup label="Group 2"> |
|
152 <hr> |
|
153 <option>opt 2</option> |
|
154 <option>opt 3</option> |
|
155 <hr> |
|
156 </optgroup> |
|
157 <option>opt 4</option> |
|
158 </select> |
|
159 <div id="d8"></div> |
|
160 |
|
161 <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> |
|
162 A disabled popup menu - since the optgroup and the hr are not selectable. |
|
163 </p> |
|
164 <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b> |
|
165 </p> |
|
166 <select id = "s9"> |
|
167 <optgroup label="Group 1"> |
|
168 <hr> |
|
169 </optgroup> |
|
170 </select> |
|
171 <div id="d9"></div> |
|
172 |
|
173 <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> |
|
174 You should see a list box with the following items: 4 options. |
|
175 </p> |
|
176 <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b> |
|
177 You should not see any separators in the list box.</p> |
|
178 <br><select id = "s10" multiple> |
|
179 <option value="test">opt 1</option> |
|
180 <hr> |
|
181 <hr> |
|
182 <hr> |
|
183 <hr> |
|
184 <option>opt 2</option> |
|
185 <option>opt 3</option> |
|
186 <hr> |
|
187 <option>opt 4</option> |
|
188 </select> |
|
189 <div id="d10"></div> |
|
190 |
|
191 <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> |
|
192 You should see a list box with the following items: one option, group label, 3 options. |
|
193 </p> |
|
194 <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b> |
|
195 You should not see any separators in the list box.</p> |
|
196 <select id = "s11" multiple> |
|
197 <option value="test">opt 1</option> |
|
198 <hr> |
|
199 <hr> |
|
200 <optgroup label="Group 1"> |
|
201 <hr> |
|
202 <hr> |
|
203 <option>opt 2</option> |
|
204 <option>opt 3</option> |
|
205 <hr> |
|
206 <option>opt 4</option> |
|
207 </optgroup> |
|
208 </select> |
|
209 <div id="d11"></div> |
|
210 |
|
211 <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b> |
|
212 For each of these list boxes, when you change the selection in JavaScript to index 1, the second option should get highlighted</p> |
|
213 <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b> |
|
214 "opt 2" does not get highlighted after clicking the button.</p> |
|
215 |
|
216 <select id="s12" multiple> |
|
217 <option id="o3">opt 1</option> |
|
218 <hr> |
|
219 <option id="o4">opt 2</option> |
|
220 </select> |
|
221 <input type="button" value="Change selection to 'opt 2'" onclick="document.getElementById('s12').selectedIndex = 1;"></input> |
|
222 |
|
223 <br><select id="s13" multiple> |
|
224 <option id="o5">opt 1</option> |
|
225 <hr> |
|
226 <optgroup label="group"> |
|
227 <option id="o6">opt 2</option> |
|
228 </optgroup> |
|
229 </select> |
|
230 <input type="button" value="Change selection to 'opt 2'" onclick="document.getElementById('s13').selectedIndex = 1;"></input> |
|
231 |
|
232 <body> |
|
233 </html> |
|
234 |