Rename ENABLE_SUBTLE_CRYPTO to ENABLE_WEB_CRYPTO
[WebKit-https.git] / ManualTests / select_hr.html
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