gecko/layout/html/tests/formctls/base/select_onchange.html

108 lines
2.1 KiB
HTML
Raw Normal View History

<HTML>
<HEAD>
<TITLE>Select Tests: OnChange</TITLE>
<BODY>
<H2>Select Tests: OnChange</H2>
<TABLE BORDER=1>
<TR>
<TH>JavaScript</TH>
<TD>
<B>Steps:</B> Click each of the buttons in turn.<BR>
<B>Verify:</B> Make sure an alert does not pop up.
</TD>
<TR>
<TH>Click, Keyboard</TH>
<TD>
<B>Steps:</B> Click, hit left/right/up/down/home/end and use SHIFT and CTRL in combination.<BR>
<B>Verify:</B> That an alert pops up each time you
</TD>
</TR>
<TR>
<TH>Drag</TH>
<TD>
<B>Steps:</B> Drag the mouse across multiple options.<BR>
<B>Verify:</B> That an alert pops up only when you finish dragging.
</TD>
</TR>
<TR>
<TH>Cancel Dropdown</TH>
<TD>
<B>Steps:</B> Click the dropdown, and then press ESC or click outside the combobox.<BR>
<B>Verify:</B> onChange should not fire.
</TD>
</TR>
<TR>
<TH>Reset</TH>
<TD>
<B>Steps:</B> Change values in various selects, and hit Reset.<BR>
<B>Verify:</B> onChange should not fire.
</TD>
</TR>
</TABLE>
<BR>
<FORM NAME=mainform>
<INPUT TYPE=button onClick="document.mainform.blah.value = 4" VALUE="Set select.value = 4"><BR>
<INPUT TYPE=button onClick="document.mainform.blah.selectedIndex = 5" VALUE="Set select.selectedIndex = 5"><BR>
<INPUT TYPE=button onClick="document.mainform.blah.options[6].selected = true" VALUE="Set options[6].selected"><BR>
<INPUT TYPE=reset><BR><BR>
<TABLE BORDER=1
<TR>
<TD VALIGN=top>
<H3>Multiple select</H3>
<SELECT NAME=blah MULTIPLE SIZE=10 onChange="alert('Multiselect changed to ' + document.mainform.blah.value)">
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION VALUE=4>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION>8
<OPTION>9
<OPTION>10
</SELECT>
</TD>
<TD VALIGN=top>
<H3>Single select</H3>
<SELECT NAME=blah2 SIZE=10 onChange="alert('Single select changed to ' + document.mainform.blah2.value)">
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION>8
<OPTION>9
<OPTION>10
</SELECT>
</TD>
<TD VALIGN=top>
<H3>Dropdown</H3>
<SELECT NAME=blah3 onChange="alert('Dropdown changed to ' + document.mainform.blah3.value)">
<OPTION>1
<OPTION SELECTED>2
<OPTION>3
<OPTION>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION>8
<OPTION>9
<OPTION>10
</SELECT>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>