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


<testsuite id="ts-onchange-select-multiple-events">
	
	<metaInfo>
		<testTitle>Multiple Event Handlers for ONCHANGE Attribute for SELECT Elements</testTitle>
		<shortTitle>Multiple ONCHANGE event handlers 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>Colin Koteles</creator>	
		<creator>Dominique Kilman</creator>	
		
				
		<metaElement></metaElement>
		<testStyle></testStyle>
	</metaInfo>
	
	<requirementInfo>
   	<checkpoints>
      	<checkpoint xref="tech-device-independent-handlers">
         	<provisions>
            	<provision xref="tech-device-independent-handlers-2"/>
            </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 both onChange events.</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(); changeTest2()" name="select1"> 
							<option value="../images/clear.gif" selected="selected">Choose a color</option> 
							<option value="../images/starRed.gif">Red Star</option>
							<option value="../images/starYel.gif">Yellow Star</option>
							<option value="../images/starPink.gif">Pink Star</option>
							</select>
						</form>
						</td>
    					<td>
      					<table border="1"><tbody>
        						<tr><td rowspan="1" colspan="1">
									<img id="redStar" height="35" alt="red star" src="../images/clear.gif" width="35" border="0" name="redStar"/>
								</td>
								<td rowspan="1" colspan="1">
									<img id="redStar2" height="35" alt="second red star" src="../images/clear.gif" width="35" border="0" name="redStar2"/>
								</td>
								</tr>
							</tbody></table>
						</td></tr>
					</tbody></table>
			</testCode>
      	<exResults>
				<list>
					<item>A star colored according to the select option value appears in each table cell when the onchange event is triggered.</item>
				</list>
			</exResults>
			<sourcescript>
				function changeTest ()
				{
   				document.redStar.src = document.menuForm.select1.options[document.menuForm.select1.selectedIndex].value;
				}
				function changeTest2 ()
				{
   				document.redStar2.src = document.menuForm.select1.options[document.menuForm.select1.selectedIndex].value;
				}						
			</sourcescript>
		</test>
						
	</content>

</testsuite>