<?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 Checkbox Tests</title>
</head>

<body>
<h1>All Checkbox 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 checkbox widget.
</p>

	<h3 class="info">Behavior</h3>
<p class="long">
Left clicking, or typing the keyboard spacebar when the checkbox is focused, will toggle the checkbox.  
This is indicated visually with a red check when selected and an abscence of a red check when not selected.
The accessible state "checked" will be updated in the DOM as appropriate.
Note that this test suite considers "checked=true" and "checked=false" the standard correct values for the "checked" state 
(and discourages using the abscence of the "checked" attribue to mean "checked=false").
</p>

		</div>
		<iframe class="short " width="100%" src="checkbox_reference/checkbox_reference.php?iframe=1"/>
	</li>
	<li class="testItem">
		<h2>No State Update</h2>
		<div class="info">

	<h3 class="info">Object</h3>
<p class="short">
Script does not update aaa "checked" state when user interacts with the page. 
</p>

	<h3 class="info">Behavior</h3>
<p class="long">
There is no measurable change when the user interacts with the widgets.
</p>

		</div>
		<iframe class="short " width="100%" src="checkbox_noStateUpdate/checkbox_noStateUpdate.php?iframe=1"/>
	</li>
	<li class="testItem">
		<h2>No Role</h2>
		<div class="info">

	<h3 class="info">Object</h3>
<p class="short">
Checkboxes do not have required widget role information.
</p>

	<h3 class="info">Behavior</h3>
<p class="long">
The checkbox behaves identically to the reference implementation but is not correctly identified in HTML as an accessible widget.
</p>

		</div>
		<iframe class="short " width="100%" src="checkbox_noRole/checkbox_noRole.php?iframe=1"/>
	</li>
	<li class="testItem">
		<h2>Nested Tags</h2>
		<div class="info">

	<h3 class="info">Object</h3>
<p class="short">
Checkbox HTML tags are nested in one another.
</p>

	<h3 class="info">Behavior</h3>
<p class="long">
Both checkboxes should behave identically to the reference implementation.  
This is important for widgets where nesting would make more sense, such as a checkbox nested in a tree widget.
</p>

		</div>
		<iframe class="short " width="100%" src="checkbox_nested/checkbox_nested.php?iframe=1"/>
	</li>
	<li class="testItem">
		<h2>Invalid Checked Attribute Value</h2>
		<div class="info">

	<h3 class="info">Object</h3>
<p class="short">The value for the "checked" attribute is wrong.</p>

	<h3 class="info">Behavior</h3>
<p>The first checkbox should appear to function correctly, though it will have an invalid checked state when unchecked.  
The second checkbox will appear to not check because it has an invalid "checked" state, though it has a valid "unchecked" state.
Both checkboxes are initialized with invalid checked state attributes (in the HTML).
</p>

		</div>
		<iframe class="short " width="100%" src="checkbox_checkedMixed/checkbox_checkedMixed.php?iframe=1"/>
	</li>
	<li class="testItem">
		<h2>List Item</h2>
		<div class="info">

	<h3 class="info">Object</h3>
<p class="short">HTML list item tags are used as the widget tag instead of a span or div.</p>

	<h3 class="info">Behavior</h3>
<p class="long">
The test behavior should be identical to the reference version.
</p>

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