gecko/layout/html/tests/attributes/ol_li.html

92 lines
2.5 KiB
HTML

<HTML>
<BODY>
<h1>Attribute tests for OL and LI elements</h1>
<ol ID="myol">
<li id="1st">One</li>
<li id="2nd">Two
<ol>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ol>
</li>
<li id="3rd">Three</li>
</ol>
<P>
Use the buttons below to change the attributes of the OL and LI elements.
</P>
<FORM>
<P>
Set OL element's <I>type</I> to
<SELECT SIZE="1" NAME="type">
<OPTION SELECTED VALUE="1">numerical</OPTION>
<OPTION VALUE="a">lower arabic</OPTION>
<OPTION VALUE="A">upper ararbic</OPTION>
<OPTION VALUE="i">lower roman</OPTION>
<OPTION VALUE="I">upper roman</OPTION>
</SELECT>
<INPUT TYPE="button" VALUE="Change Type" onClick="changeType(); return true;">
</P>
<P>
Set OL element's <I>start</I> to
<INPUT TYPE="text" MAXLENGTH="2" SIZE="2" NAME="start">
<INPUT TYPE="button" VALUE="Change Type" onClick="changeStart(); return true;">
</P>
<P>
Set the
<SELECT SIZE="1" NAME="nth">
<OPTION SELECTED VALUE="1st">1st</OPTION>
<OPTION VALUE="2nd">2nd</OPTION>
<OPTION VALUE="3rd">3rd</OPTION>
</SELECT>
LI element's <I>type</I> attribute to
<SELECT SIZE="1" NAME="type2">
<OPTION SELECTED VALUE="1">numerical</OPTION>
<OPTION VALUE="a">lower arabic</OPTION>
<OPTION VALUE="A">upper ararbic</OPTION>
<OPTION VALUE="i">lower roman</OPTION>
<OPTION VALUE="I">upper roman</OPTION>
</SELECT>
<INPUT TYPE="button" VALUE="Change Type" onClick="changeElementType(); return true;">
</P>
<P>
Set the
<SELECT SIZE="1" NAME="nth2">
<OPTION SELECTED VALUE="1st">1st</OPTION>
<OPTION VALUE="2nd">2nd</OPTION>
<OPTION VALUE="3rd">3rd</OPTION>
</SELECT>
LI element's <I>value</I> attribute to
<INPUT TYPE="text" MAXLENGTH="2" SIZE="2" NAME="start2">
<INPUT TYPE="button" VALUE="Change Type" onClick="changeElementStart(); return true;">
</P>
</P>
</FORM>
<SCRIPT>
var ol = document.getElementById("myol");
var types = new Array("1", "a", "A", "i", "I");
function changeType() {
ol.type = types[document.forms[0].type.selectedIndex];
}
function changeStart() {
ol.start = Number(document.forms[0].start.value);
}
// We should be able to do this with the select elements value, but
// since that doesn't work we need to maintain this array.
var nth = new Array("1st", "2nd", "3rd");
function changeElementType() {
var li = document.getElementById(nth[document.forms[0].nth.selectedIndex]);
li.type = types[document.forms[0].type2.selectedIndex];
}
function changeElementStart() {
var li = document.getElementById(nth[document.forms[0].nth2.selectedIndex]);
li.value = Number(document.forms[0].start2.value);
}
</SCRIPT>
</BODY>
</HTML>