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> 
37Please describe the steps required to test this bug here.
38</p>
39
40
41These 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> 
52You 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> 
64You 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> 
76You 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> 
94You 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> 
107You 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> 
120You 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> 
139You 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> 
162A 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> 
174You 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>  
177You 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> 
192You 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>  
195You 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> 
212For 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
235