<?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>

	<h3 class="info">Instructions</h3>
<ul class="instructions">
	<li>Tab to the checkbox control</li>
	<li>Press space, verify the image and checked state changes</li>
	<li>Use the mouse, verify the same</li>
</ul>

		</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>

	<h3 class="info">Instructions</h3>
<ul class="instructions">
	<li>When widget clicked or commanded with keyboard, a testing tool should 
		warning that a widget did not have a measurable state change.</li>
</ul>

		</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>

	<h3 class="info">Instructions</h3>
<ul class="instructions">
	<li>Checkboxes should behave as the reference implementation</li>
	<li>Notice that tools may not correctly identify these checkboxes as widgets</li>
	<li>Notice that tools may give warnings that accessible state information is used on a node without correct role markup</li>
</ul>

		</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>

	<h3 class="info">Instructions</h3>
<ul class="instructions">
	<li>Verify both checkboxes behave according to the instructions for the reference implementation</li>
</ul>

		</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>

	<h3 class="info">Instructions</h3>
<ul>
	<li>Initially, both checkboxes have invalid initial values for the checked attribute; visually, they do not appear to be checked.</li>
	<li>First checkbox should have checked="wrong" when unchecked</li>
	<li>Second checkbox should have checked="mixed" when checked</li>
	<li>Visually, second checkbox should never appear checked while first will appear to function normally</li>	
	<li>Both should have the correct values in their respective opposite states</li>
</ul>

		</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>

	<h3 class="info">Instructions</h3>
<ul class="instructions">
	<li>See instructions for the reference implementation</li>
</ul>

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