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

286 lines
6.8 KiB
HTML

<HTML>
<HEAD>
<TITLE>Select Tests: Disabled</TITLE>
<SCRIPT>
function selectDisabled1(control) {
for(i=0;i<control.options.length;i++) {
if(control.options[i].disabled) {
control.selectedIndex = i;
}
}
}
function selectDisabled2(control) {
for(i=0;i<control.options.length;i++) {
if(control.options[i].disabled) {
control.options[i].selected = true;
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<H2>Select Tests: Disabled</H2>
<TABLE BORDER=1>
<TR>
<TH>Init</TH>
<TD>
<B>Steps:</B> Come to this page with caching off.<BR>
<B>Verify:</B> Verify that the last two selects have "2" and nothing selected, respectively.
</TD>
<TR>
<TH>Reset</TH>
<TD>
<B>Steps:</B> Change values and hit the reset button.<BR>
<B>Verify:</B> That everything is the same as after Init.
</TD>
</TR>
<TR>
<TH>Normal Click</TH>
<TD>
<B>Steps:</B> Click and CTRL+Click on disabled options in all selects.<BR>
<B>Verify:</B> That disabled ones don't get changed and non-disabled ones do.
<I>Note:</I> For all these tests, note that the second optgroup is disabled and
consequently none of its options should be selectable.
</TD>
</TR>
<TR>
<TH>Shift Click</TH>
<TD>
<B>Steps:</B> click 2 and SHIFT+click 9.<BR>
<B>Verify:</B> That 3, 4 and 8 are not selected but that 2, 5-7 and 9 are.
</TD>
</TR>
<TR>
<TH>Drag</TH>
<TD>
<B>Steps:</B> Drag across the options.<BR>
<B>Verify:</B> That it works like a normal drag except disabled options are not selected.
</TD>
</TR>
<TR>
<TH>Keyboard</TH>
<TD>
<B>Steps:</B> Use up, down, left, right, home, end, and SHIFT+these keys.<BR>
<B>Verify:</B> That disabled ones are never selected but the next available non-disabled ones are.
</TD>
</TR>
<TR>
<TH>JavaScript Set Disabled</TH>
<TD>
<B>Steps:</B> Hit the JavaScript buttons.<BR>
<B>Verify:</B> That all disabled buttons (and only disabled buttons) are selected. (You have to hit Reset in between trying 1 and 2 for a particular control.) For single selects only the last disabled one will be selected (11). Ensure that the second optgroup in the multiple optgroup test has only disabled ones selected.
</TD>
</TR>
<TR>
<TH>Option Display</TH>
<TD>
<B>Steps:</B> Come to this page.<BR>
<B>Verify:</B> That the disabled options <B>(currently)</B> look the <I>same</I> as other options.
</TD>
</TR>
</TABLE>
<BR>
<FORM NAME=mainform>
<INPUT TYPE=reset><BR><BR>
<TABLE BORDER=1>
<TR>
<TD VALIGN=top>
<H3>1, 3, 4, 8, 10, 11 disabled</H3>
<INPUT TYPE=button onClick="selectDisabled1(document.mainform.blah1)" VALUE="JS: .selectedIndex"><BR>
<INPUT TYPE=button onClick="selectDisabled2(document.mainform.blah1)" VALUE="JS: option.selected"><BR>
<SELECT NAME=blah1 MULTIPLE SIZE=11>
<OPTION disabled>1
<OPTION>2
<OPTION disabled>3
<OPTION disabled>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION disabled>8
<OPTION>9
<OPTION disabled>10
<OPTION disabled>11
</SELECT>
</TD>
<TD VALIGN=top>
<H3>Select Disabled:</H3>
<INPUT TYPE=button onClick="selectDisabled1(document.mainform.blah2)" VALUE="JS: .selectedIndex"><BR>
<INPUT TYPE=button onClick="selectDisabled2(document.mainform.blah2)" VALUE="JS: option.selected"><BR>
<SELECT NAME=blah2 MULTIPLE SIZE=11 DISABLED>
<OPTION disabled>1
<OPTION>2
<OPTION disabled>3
<OPTION disabled>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION disabled>8
<OPTION>9
<OPTION disabled>10
<OPTION disabled>11
</SELECT>
</TD>
<TD VALIGN=top>
<H3>All options disabled</H3>
<INPUT TYPE=button onClick="selectDisabled1(document.mainform.blah3)" VALUE="JS: .selectedIndex"><BR>
<INPUT TYPE=button onClick="selectDisabled2(document.mainform.blah3)" VALUE="JS: option.selected"><BR>
<SELECT NAME=blah3 MULTIPLE SIZE=11>
<OPTION disabled>1
<OPTION disabled>2
<OPTION disabled>3
<OPTION disabled>4
<OPTION disabled>5
<OPTION disabled>6
<OPTION disabled>7
<OPTION disabled>8
<OPTION disabled>9
<OPTION disabled>10
<OPTION disabled>11
</SELECT>
</TD>
</TR>
<TR>
<TD VALIGN=top>
<H3>Single Select With Size:</H3>
<INPUT TYPE=button onClick="selectDisabled1(document.mainform.blah4)" VALUE="JS: .selectedIndex"><BR>
<INPUT TYPE=button onClick="selectDisabled2(document.mainform.blah4)" VALUE="JS: option.selected"><BR>
<SELECT NAME=blah4 SIZE=11>
<OPTION disabled>1
<OPTION>2
<OPTION disabled>3
<OPTION disabled>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION disabled>8
<OPTION>9
<OPTION disabled>10
<OPTION disabled>11
</SELECT>
</TD>
<TD VALIGN=top>
<H3>Dropdown With Disabled At Beginning:</H3>
<INPUT TYPE=button onClick="selectDisabled1(document.mainform.blah5)" VALUE="JS: .selectedIndex"><BR>
<INPUT TYPE=button onClick="selectDisabled2(document.mainform.blah5)" VALUE="JS: option.selected"><BR>
<SELECT NAME=blah5>
<OPTION disabled>1
<OPTION>2
<OPTION disabled>3
<OPTION disabled>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION disabled>8
<OPTION>9
<OPTION disabled>10
<OPTION disabled>11
</SELECT>
</TD>
<TD VALIGN=top>
<H3>Dropdown With All Disabled:</H3>
<INPUT TYPE=button onClick="selectDisabled1(document.mainform.blah6)" VALUE="JS: .selectedIndex"><BR>
<INPUT TYPE=button onClick="selectDisabled2(document.mainform.blah6)" VALUE="JS: option.selected"><BR>
<SELECT NAME=blah6>
<OPTION disabled>1
<OPTION disabled>2
<OPTION disabled>3
<OPTION disabled>4
<OPTION disabled>5
<OPTION disabled>6
<OPTION disabled>7
<OPTION disabled>8
<OPTION disabled>9
<OPTION disabled>10
<OPTION disabled>11
</SELECT>
</TD>
</TR>
<TR>
<TD VALIGN=top>
<H3>Multiple Select With Optgroup:</H3>
<INPUT TYPE=button onClick="selectDisabled1(document.mainform.blah7)" VALUE="JS: .selectedIndex"><BR>
<INPUT TYPE=button onClick="selectDisabled2(document.mainform.blah7)" VALUE="JS: option.selected"><BR>
<SELECT NAME=blah7 MULTIPLE SIZE=11>
<OPTGROUP LABEL=enabled>
<OPTION disabled>1
<OPTION>2
<OPTION disabled>3
<OPTION disabled>4
<OPTION>5
<OPTION>6
</OPTGROUP>
<OPTGROUP disabled LABEL=disabled>
<OPTION>7
<OPTION disabled>8
<OPTION>9
<OPTION disabled>10
</OPTGROUP>
<OPTION disabled>11
</SELECT>
</TD>
<TD VALIGN=top>
<H3>Single Select With Optgroup:</H3>
<INPUT TYPE=button onClick="selectDisabled1(document.mainform.blah8)" VALUE="JS: .selectedIndex"><BR>
<INPUT TYPE=button onClick="selectDisabled2(document.mainform.blah8)" VALUE="JS: option.selected"><BR>
<SELECT NAME=blah8 SIZE=11>
<OPTGROUP LABEL=enabled>
<OPTION disabled>1
<OPTION>2
<OPTION disabled>3
<OPTION disabled>4
<OPTION>5
<OPTION>6
</OPTGROUP>
<OPTGROUP disabled LABEL=disabled>
<OPTION>7
<OPTION disabled>8
<OPTION>9
<OPTION disabled>10
</OPTGROUP>
<OPTION disabled>11
</SELECT>
</TD>
<TD VALIGN=top>
<H3>Dropdown With Optgroup:</H3>
<INPUT TYPE=button onClick="selectDisabled1(document.mainform.blah9)" VALUE="JS: .selectedIndex"><BR>
<INPUT TYPE=button onClick="selectDisabled2(document.mainform.blah9)" VALUE="JS: option.selected"><BR>
<SELECT NAME=blah9>
<OPTGROUP LABEL=enabled>
<OPTION disabled>1
<OPTION>2
<OPTION disabled>3
<OPTION disabled>4
<OPTION>5
<OPTION>6
</OPTGROUP>
<OPTGROUP disabled LABEL=disabled>
<OPTION>7
<OPTION disabled>8
<OPTION>9
<OPTION disabled>10
</OPTGROUP>
<OPTION disabled>11
</SELECT>
</TD>
</TR>
</TABLE>
</TABLE>
</FORM>
</BODY>
</HTML>