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