<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
 	xmlns:x2="http://www.w3.org/TR/xhtml2"
	xmlns:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
	xmlns:state="http://www.w3.org/2005/07/aaa">
<head>

<style type="text/css">
@namespace x2    url("http://www.w3.org/TR/xhtml2");
@namespace role  url("http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#");
@namespace state url("http://www.w3.org/2005/07/aaa");
ul.hlist {
	list-style: none;
	margin: 1em;
	padding: 0;
	display: inline;
}

ul.hlist li	{
	display: inline;
	margin: 1em;
	padding: 0;	
}

p.inline {
	display: inline;
	margin: 1em;	
}

div#content {
	position: absolute;
	top: 0;
	left: 0;
}

.hide {
/*
	visibility: hidden;
	height: 0;
	width: 0;
	padding: 0;
	margin: 0;
	display: inline;
	*/
	display: none;
}

li.testItem {
	margin: 0;
}

iframe.short {
	margin-top: 1em;
	height: 3em;
}

iframe.textfieldShort {
	margin-top: 1em;
	height: 8em;
}

iframe.comboboxShort {
	margin-top: 1em;
	height: 11em;
}

iframe.rdfShort {
	margin-top: 1em;
	height: 14em;	
}

iframe.treeShort {
	margin-top: 1em;
	height: 20em;	
}

iframe.sliderShort {
	margin-top: 1em;
	height: 5em;	
}

h3.info {
	display: inline;
	margin: 0;
	padding: 0;
}

</style>

<title>All Combobox Tests</title>
</head>

<body>
<h1>All Combobox Tests</h1>

<h2>Test Information Options</h2>
<ul>
	<li><a href="index.php">Display no extended test information</a></li>
	<li><a href="index.php?short=1">Display the goal of the test</a></li>
	<li><a href="index.php?short=1&amp;long=1">Display above and the expected behavior</a></li>
	<li><a href="index.php?short=1&amp;long=1&amp;instructions=1">Display above and test instructions</a></li>
</ul>

<ul>
	<li class="testItem">
		<h2>Reference Implementation</h2>
		<div class="info">

	<h3 class="info">Object</h3>
<p class="short">
The reference implementation for the combobox and option widgets.
</p>

	<h3 class="info">Behavior</h3>
<p class="long">
This combobox allows a user to choose between different options.
The combobox is opened when the up/down arrow keys are pressed 
(when the combobox is in focus) or when the mouse is clicked on the combobox.
Typing the up or down keys or moving the mouse cursor over a new option changes 
the selected option.
Pressing return or clicking the mouse on an option closes the combobox.  
Blurring the combobox also closes the combobox.
</p>

	<h3 class="info">Instructions</h3>
<ul class="instructions">
	<li>Combobox can be focused and unfocused (via tabbing) and the option choices cannot be focused</li>
	<li>Pressing the up/down keys and/or mouse click opens the combobox and change its state to "expanded"</li>
	<li>Up/down keys and mouse cursor will change option states to "selected"</li>
	<li>Keyboard enter, mouse click, and unfocusing (e.g. tabbing away) closes the combobox and changes state to "expanded=false"</li>
</ul>

		</div>
		<iframe class="short comboboxShort" width="100%" src="combobox_reference/combobox_reference.php?iframe=1"/>
	</li>
</ul>	

</body>
</html>
