<!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 (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>