235 lines
6.8 KiB
HTML
235 lines
6.8 KiB
HTML
<!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>
|
|
|