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 235
