<?xml version="1.0"?>
<!DOCTYPE testsuite SYSTEM "http://www.w3.org/WAI/UA/TS/dtd/uaag-testsuite-2.dtd">


<testsuite id="ts0102-onchange-select">
	
	<metaInfo>
		<testTitle>ONCHANGE attribute for SELECT elements</testTitle>
		<shortTitle>ONCHANGE events for SELECT controls</shortTitle>
		<testElement>
			<elementName>ONCHANGE</elementName>
			<hlink href="http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.3">&hspec; ONCHANGE</hlink>
		</testElement>		
		<testElement>
			<elementName>SELECT</elementName>
			<hlink href="http://www.w3.org/TR/html4/interact/forms.html#h-17.6">&hspec; SELECT</hlink>
		</testElement>				
		<creator>Dominique Kilman</creator>
		<creator>Colin Koteles</creator>		
		
				
		<metaElement></metaElement>
		<testStyle></testStyle>
	</metaInfo>
	
	<requirementInfo>
   	<checkpoints>
      	<checkpoint xref="tech-device-independent-handlers">
         	<provisions>
            	<provision xref="tech-device-independent-handlers-1"/>
            </provisions>
         </checkpoint>
      </checkpoints>
 	</requirementInfo>
	
	<content>
		
		
		
		<test section="1">
			<procedure>
				<list>
					<item>Using the keyboard or an assistive technology that emulates the keyboard, move focus to the select control.</item>
					<item>Using the keyboard or an assistive technology that emulates the keyboard, select a value from the menu to trigger the onChange event.</item>
				</list>
			</procedure>
			<testCode>
				<table summary="layout table"><tbody>
  					<tr><td>
      				<form action="../action/return.html" method="post" id="menuForm" name="menuForm">
							<select id="select1" onchange="changeTest()" name="select1"> 
							<option value="0" selected="selected">Choose a color</option> 
							<option value="1">Red Star</option>
							<option value="2">Yellow Star</option>
							<option value="3">Pink Star</option>
							</select>
						</form>
						</td>
    					<td>
      					<table border="1" summary="layout table"><tbody>
        						<tr><td>
									<img id="testStar" height="35" alt="red star" src="../images/clear.gif" width="35" border="0" name="testStar"/>
								</td></tr>
							</tbody></table>
						</td></tr>
					</tbody></table>
			</testCode>
      	<exResults>
				<list>
					<item>A star colored according to the select option value appears when the onchange event is triggered.</item>
				</list>
			</exResults>
			<sourcescript>
				imageArray = new Array("../images/clear.gif", "../images/starRed.gif", "../images/starYel.gif", "../images/starPink.gif");
   			altArray = new Array("", "Red Star", "Yellow Star", "Pink Star");
					
				function changeTest ()
				{
					var Index = document.menuForm.select1.options[document.menuForm.select1.selectedIndex].value;
					document.testStar.src = imageArray[Index];
					document.testStar.alt = altArray[Index];		
				}	
			</sourcescript>
		</test>
						
	</content>

</testsuite>