зеркало из https://github.com/mozilla/pjs.git
Added a lot of tests for the select.
This commit is contained in:
rods%netscape.com
Родитель
36557ca943
Коммит
a07769e758
|
|
@ -127,5 +127,532 @@ Additional tests -
|
|||
<A href=test8siz.html>sizing</A>,
|
||||
<A href=test8sca.html>scalability</A>,
|
||||
<A href=test8tab.html>tables</A>
|
||||
<BR>
|
||||
<HR>
|
||||
<h1>Select Tests</h1><br>
|
||||
<h2>Sizing Tests</h2>
|
||||
<form>
|
||||
<table border=1 style="background-color: rgb(192,192,192)">
|
||||
<tr>
|
||||
<td><center><b>Three option select no properties</b></center></td>
|
||||
<td><center><b>Three option select size=1</b></center></td>
|
||||
<td><center><b>Three option select size=2</b></center></td>
|
||||
<td><center><b>Three option select size=3</b></center></td>
|
||||
<td><center><b>Three option select size=4</b></center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><center><select><option>One</option><option>Two</option><option>Three</option></select></center></td>
|
||||
<td><center><select size=1><option>One</option><option>Two</option><option>Three</option></select></center></td>
|
||||
<td><center><select size=2><option>One</option><option>Two</option><option>Three</option></select></center></td>
|
||||
<td><center><select size=3><option>One</option><option>Two</option><option>Three</option></select></center></td>
|
||||
<td><center><select size=4><option>One</option><option>Two</option><option>Three</option></select></center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>combobox box with three items in drop down</td>
|
||||
<td>combobox box with three items in drop down</td>
|
||||
<td>list box with three items, two items showing</td>
|
||||
<td>list box with three items, all three items showing</td>
|
||||
<td>list box with three items, all three items showing with one blank line</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<pre>
|
||||
<select>
|
||||
<option>One</option>
|
||||
<option>Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=1>
|
||||
<option>One</option>
|
||||
<option>Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=2>
|
||||
<option>One</option>
|
||||
<option>Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=3>
|
||||
<option>One</option>
|
||||
<option>Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=4>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br>
|
||||
<br>
|
||||
<h2>Edge Case Tests</h2>
|
||||
<table border=1 style="background-color: rgb(192,192,192)">
|
||||
<tr>
|
||||
<td><center><b>Empty Select size=1</b></center></td>
|
||||
<td><center><b>Empty Select size=4</b></center></td>
|
||||
<td><center><b>Select size=1 - empty option</b></center></td>
|
||||
<td><center><b>Select size=1 - option has a single space</b></center></td>
|
||||
<td><center><b>Select size=1 - option has a return in the middle of it</b></center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><center><select size=1></select></center></td>
|
||||
<td><center><select size=4></select></center></td>
|
||||
<td><center><select size=1><option></option></select></center></td>
|
||||
<td><center><select size=1><option> </option></select></center></td>
|
||||
<td><center><select size=1><option>One
|
||||
Fish</option></select></center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>You should see a combobox with an empty item drop down</td>
|
||||
<td>You should see a list box four items high and empty</td>
|
||||
<td>You should see one empty item in the dropdown</td>
|
||||
<td>You should see one empty item in the dropdown (the item should have single space)</td>
|
||||
<td>You should see one item in the dropdown, on one line</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=1>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=4>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=1>
|
||||
<option></option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=1>
|
||||
<option> </option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=1>
|
||||
<option>One
|
||||
Fish</option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br>
|
||||
<br>
|
||||
<h2>Style Tests #1</h2>
|
||||
<table border=1 style="background-color: rgb(192,192,192)">
|
||||
<tr>
|
||||
<td><center><b>Select 5px Border (Combobox)</b></center></td>
|
||||
<td><center><b>Select 5px Border 5px Padding (Combobox)</b></center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><center><select size=1 style="border: outset 5px rgb(192,192,192)"><option>One</option><option>Two</option><option>Three</option></select></center></td>
|
||||
<td><center><select size=1 style="padding: 5px 5px 5px 5px;border: outset 5px rgb(192,192,192)"><option>One</option><option>Two</option><option>Three</option></select></center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>You should see a combobox with large border</td>
|
||||
<td>You should see a combobox with large border and padding</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=1 style="border: outset 5px rgb(192,192,192)">
|
||||
<option>One</option>
|
||||
<option>Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=1 style="padding: 5px 5px 5px 5px;
|
||||
border: outset 5px rgb(192,192,192)">
|
||||
<option>One</option>
|
||||
<option>Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br>
|
||||
<br>
|
||||
<h2>Style Tests #2</h2>
|
||||
<table border=1 style="background-color: rgb(192,192,192)">
|
||||
<tr>
|
||||
<td><center><b>Select 5px Border (ListBox)</b></center></td>
|
||||
<td><center><b>Select 5px Border 5px Padding (ListBox)</b></center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><center><select size=4 style="border: outset 5px rgb(192,192,192)"><option>One</option><option>Two</option><option>Three</option></select></center></td>
|
||||
<td><center><select size=4 style="padding: 5px 5px 5px 5px;border: outset 5px rgb(192,192,192)"><option>One</option><option>Two</option><option>Three</option></select></center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>You should see a listbox with large border</td>
|
||||
<td>You should see a listbox with large border and padding</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=4 style="border: outset 5px rgb(192,192,192)">
|
||||
<option>One</option>
|
||||
<option>Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=4 style="padding: 5px 5px 5px 5px;
|
||||
border: outset 5px rgb(192,192,192)">
|
||||
<option>One</option>
|
||||
<option>Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br>
|
||||
<br>
|
||||
<h2>Style Tests #3</h2>
|
||||
<table border=1 style="background-color: rgb(192,192,192)">
|
||||
<tr>
|
||||
<td><center><b>Select 5px Border, 5px Padding, 5px Margin (Combobox)</b></center></td>
|
||||
<td><center><b>Select with an a green option (Combobox)</b></center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><center><select size=1><option>One</option><option>Two</option><option>Three</option></select></center></td>
|
||||
<td><center><select size=1><option style="background-color: green;color:yellow;">One</option><option>Two</option><option>Three</option></select></center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>You should see a combobox with large border and padding</td>
|
||||
<td>You should see a combobox with the first item is green with yellow text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=1 style="margin: 5px;
|
||||
padding 5px;
|
||||
border: outset 5px rgb(192,192,192);">
|
||||
<option>One</option>
|
||||
<option>Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=1>
|
||||
<option style="background-color: green;color:yellow;">One</option>
|
||||
<option>Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br>
|
||||
<br>
|
||||
<h2>Style Tests #4</h2>
|
||||
<table border=1 style="background-color: rgb(192,192,192)">
|
||||
<tr>
|
||||
<td><center><b>Select 5px Border, 5px Padding, 5px Margin (Listbox)</b></center></td>
|
||||
<td><center><b>Select with an a green option (Listbox)</b></center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><center><select size=1><option>One</option><option>Two</option><option>Three</option></select></center></td>
|
||||
<td><center><select size=1><option style="background-color: green;color:yellow;">One</option><option>Two</option><option>Three</option></select></center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>You should see a listbox with large border and padding</td>
|
||||
<td>You should see a listbox with the first item is green with yellow text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=1 style="margin: 5px;
|
||||
padding 5px;
|
||||
border: outset 5px rgb(192,192,192);">
|
||||
<option>One</option>
|
||||
<option>Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=1>
|
||||
<option style="background-color: green;color:yellow;">One</option>
|
||||
<option>Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br>
|
||||
<br>
|
||||
<h2>Style Tests #5</h2>
|
||||
<table border=1 style="background-color: rgb(192,192,192)">
|
||||
<tr>
|
||||
<td><center><b> Option has 1px Border, 1px Padding (Combobox)</b></center></td>
|
||||
<td><center><b> Option has 1px Border, 1px Padding (Listbox)</b></center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><center>
|
||||
<select size=1>
|
||||
<option>One</option>
|
||||
<option style="border: 1px outset rgb(192,192,192);padding 1px;">Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</center></td>
|
||||
<td><center>
|
||||
<select size=4>
|
||||
<option>One</option>
|
||||
<option style="border: 1px outset rgb(192,192,192);padding 1px;">Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>You should see a combobox with the second item having border and padding</td>
|
||||
<td>You should see a combobox with the second item having border and padding</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=1>
|
||||
<option>One</option>
|
||||
<option style="border: 1px outset rgb(192,192,192);
|
||||
padding 1px;">Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=4>
|
||||
<option>One</option>
|
||||
<option style="border: 1px outset rgb(192,192,192);
|
||||
padding 1px;">Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br>
|
||||
<br>
|
||||
<h2>Optgroup Test</h2>
|
||||
<table border=1 style="background-color: rgb(192,192,192)">
|
||||
<tr>
|
||||
<td><center><b>Select size=1 with Optgroup (Combobox)</b></center></td>
|
||||
<td><center><b>Select size=4 with Optgroup (Listbox)</b></center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><center>
|
||||
<select size=1>
|
||||
<optgroup label="China">
|
||||
<option>Keemun
|
||||
<option>Yunnan
|
||||
</optgroup>
|
||||
<optgroup label="India">
|
||||
<option>Assam
|
||||
<option>Darjeeling
|
||||
</optgroup>
|
||||
<optgroup label="Japan">
|
||||
<option>Gyokuro
|
||||
<option>Hoji-cha
|
||||
</optgroup>
|
||||
</select>
|
||||
</center></td>
|
||||
<td><center>
|
||||
<select size=4>
|
||||
<optgroup label="China">
|
||||
<option>Keemun
|
||||
<option>Yunnan
|
||||
</optgroup>
|
||||
<optgroup label="India">
|
||||
<option>Assam
|
||||
<option>Darjeeling
|
||||
</optgroup>
|
||||
<optgroup label="Japan">
|
||||
<option>Gyokuro
|
||||
<option>Hoji-cha
|
||||
</optgroup>
|
||||
</select>
|
||||
</center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>You should see a Combobox with optgroups, where the optgroups are not selectable</td>
|
||||
<td>You should see a Listbox with optgroups, where the optgroups are not selectable</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=1>
|
||||
<optgroup label="China">
|
||||
<option>Keemun
|
||||
<option>Yunnan
|
||||
</optgroup>
|
||||
<optgroup label="India">
|
||||
<option>Assam
|
||||
<option>Darjeeling
|
||||
</optgroup>
|
||||
<optgroup label="Japan">
|
||||
<option>Gyokuro
|
||||
<option>Hoji-cha
|
||||
</optgroup>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=4>
|
||||
<optgroup label="China">
|
||||
<option>Keemun
|
||||
<option>Yunnan
|
||||
</optgroup>
|
||||
<optgroup label="India">
|
||||
<option>Assam
|
||||
<option>Darjeeling
|
||||
</optgroup>
|
||||
<optgroup label="Japan">
|
||||
<option>Gyokuro
|
||||
<option>Hoji-cha
|
||||
</optgroup>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br>
|
||||
<br>
|
||||
<h2>Disabled Option Test</h2>
|
||||
<table border=1 style="background-color: rgb(192,192,192)">
|
||||
<tr>
|
||||
<td><center><b>Select size=1 with Disabled option (Combobox)</b></center></td>
|
||||
<td><center><b>Select size=4 with Disabled option (Listbox)</b></center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><center>
|
||||
<select size=1>
|
||||
<option>One</option>
|
||||
<option disabled>Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</center></td>
|
||||
<td><center>
|
||||
<select size=4>
|
||||
<option>One</option>
|
||||
<option disabled>Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>You should see a Combobox with optgroups, the second item is non-selectable</td>
|
||||
<td>You should see a Listbox with optgroups, the second item is non-selectable</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=1>
|
||||
<option>One</option>
|
||||
<option disabled>Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=4>
|
||||
<option>One</option>
|
||||
<option disabled>Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<h2>Option Label Test</h2>
|
||||
<table border=1 style="background-color: rgb(192,192,192)">
|
||||
<tr>
|
||||
<td><center><b>Select size=1 with Option label (Combobox)</b></center></td>
|
||||
<td><center><b>Select size=4 with Option label (Listbox)</b></center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><center>
|
||||
<select size=1>
|
||||
<option>One</option>
|
||||
<option label="Label">Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</center></td>
|
||||
<td><center>
|
||||
<select size=4>
|
||||
<option>One</option>
|
||||
<option label="Label">Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</center></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>You should see a Combobox with optgroups, the second item's label should be "Label" (known bug because the label and contet shouldn't be appended)</td>
|
||||
<td>You should see a Listbox with optgroups, the second item's label should be "Label" (known bug because the label and contet shouldn't be appended)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=1>
|
||||
<option>One</option>
|
||||
<option label="Label">Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre>
|
||||
<select size=4>
|
||||
<option>One</option>
|
||||
<option label="Label">Two</option>
|
||||
<option>Three</option>
|
||||
</select>
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче