third_party/WebKit/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