123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234 |
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
- <html lang="en">
- <head>
- <script>
- function getSelectInfo(myselect, mydiv) {
- var s = document.getElementById(myselect);
- var selectLength = s.length;
- var optionCollectionLength = s.options.length;
- var selectedInd = s.selectedIndex;
- var opt = s.options[selectedInd];
- var optText = "";
-
- if (opt) {
- optText = opt.innerHTML;
- }
-
- document.getElementById(mydiv).innerHTML = "Select length: " + selectLength + "<br>Option collection length: " + optionCollectionLength + "<br>Selected index: " + selectedInd + "<br>Selected option: " + optText;
- }
-
- function getAllInfo(x) {
- for (var i = 1; i < x; i++) {
- var s = "s" + i;
- var d = "d" + i;
-
- getSelectInfo(s, d);
- }
- }
- </script>
- </head>
- <body onload="getAllInfo(12)">
- <p><b>BUG ID:</b> <a href="rdar://problem/4229189">4229189</a> add a way to get a separator into a select element</p>
- <p id="test" style="background-color:skyblue; padding:3px;"><b>STEPS TO TEST:</b>
- Please describe the steps required to test this bug here.
- </p>
- These tests make sure that adding an hr element in a select works properly.
- <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.
- </p>
- <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b> </p>
- <select id = "s1">
- <hr>
- </select>
- <div id="d1"></div>
- <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>
- You should see a popup menu with the following items: separator, option, separator
- </p>
- <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>
- </p>
- <select id = "s2">
- <hr>
- <option>opt 1</option>
- <hr>
- </select>
- <div id="d2"></div>
- <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>
- You should see a popup menu with the following items: option, separator, option
- </p>
- <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>
- </p>
- <select id = "s3">
- <option>opt 1</option>
- <hr>
- <option>opt 2</option>
- </select>
- <div id="d3"></div>
- <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>
- You should see a popup menu with the following items: option, four separators, two options, separator, option.
- </p>
- <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>
- </p>
- <select id = "s4">
- <option>opt 1</option>
- <hr>
- <hr>
- <hr>
- <hr>
- <option>opt 2</option>
- <option>opt 3</option>
- <hr>
- <option>opt 4</option>
- </select>
- <div id="d4"></div>
- <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>
- You should see a popup menu with the following items: group label, option, separator (incl. in group).
- </p>
- <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>
- </p>
- <select id = "s5">
- <optgroup label="Group 1">
- <option>opt 1</option>
- <hr>
- </optgroup>
- </select>
- <div id="d5"></div>
- <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>
- You should see a popup menu with the following items: separator, group label, option.
- </p>
- <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>
- </p>
- <select id = "s6">
- <hr>
- <optgroup label="Group 1">
- <option>opt 1</option>
- </optgroup>
- </select>
- <div id="d6"></div>
- <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>
- You should see a popup menu with the following items: group label, option, separator, option, separator, option, two separators, (end of group), one option.
- </p>
- <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>
- </p>
- <select id = "s7">
- <optgroup label="Group 1">
- <option>opt 1</option>
- <hr>
- <option>opt 2</option>
- <hr>
- <option>opt 3</option>
- <hr>
- <hr>
- </optgroup>
- <option>opt 4</option>
- </select>
- <div id="d7"></div>
- <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>
- 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.
- </p>
- <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>
- </p>
- <select id = "s8">
- <optgroup label="Group 1">
- <option>opt 1</option>
- <hr>
- <hr>
- </optgroup>
- <hr>
- <optgroup label="Group 2">
- <hr>
- <option>opt 2</option>
- <option>opt 3</option>
- <hr>
- </optgroup>
- <option>opt 4</option>
- </select>
- <div id="d8"></div>
- <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>
- A disabled popup menu - since the optgroup and the hr are not selectable.
- </p>
- <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>
- </p>
- <select id = "s9">
- <optgroup label="Group 1">
- <hr>
- </optgroup>
- </select>
- <div id="d9"></div>
- <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>
- You should see a list box with the following items: 4 options.
- </p>
- <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>
- You should not see any separators in the list box.</p>
- <br><select id = "s10" multiple>
- <option value="test">opt 1</option>
- <hr>
- <hr>
- <hr>
- <hr>
- <option>opt 2</option>
- <option>opt 3</option>
- <hr>
- <option>opt 4</option>
- </select>
- <div id="d10"></div>
- <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>
- You should see a list box with the following items: one option, group label, 3 options.
- </p>
- <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>
- You should not see any separators in the list box.</p>
- <select id = "s11" multiple>
- <option value="test">opt 1</option>
- <hr>
- <hr>
- <optgroup label="Group 1">
- <hr>
- <hr>
- <option>opt 2</option>
- <option>opt 3</option>
- <hr>
- <option>opt 4</option>
- </optgroup>
- </select>
- <div id="d11"></div>
- <p id="success" style="background-color:palegreen; padding:3px;"><b>TEST PASS:</b>
- For each of these list boxes, when you change the selection in JavaScript to index 1, the second option should get highlighted</p>
- <p id="failure" style="background-color:#FF3300; padding:3px;"><b>TEST FAIL:</b>
- "opt 2" does not get highlighted after clicking the button.</p>
- <select id="s12" multiple>
- <option id="o3">opt 1</option>
- <hr>
- <option id="o4">opt 2</option>
- </select>
- <input type="button" value="Change selection to 'opt 2'" onclick="document.getElementById('s12').selectedIndex = 1;"></input>
- <br><select id="s13" multiple>
- <option id="o5">opt 1</option>
- <hr>
- <optgroup label="group">
- <option id="o6">opt 2</option>
- </optgroup>
- </select>
- <input type="button" value="Change selection to 'opt 2'" onclick="document.getElementById('s13').selectedIndex = 1;"></input>
- <body>
- </html>
|