select_hr.html 6.8 KB

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