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

	<h3 class="info">Behavior</h3>
<p class="long">
This demonstrates the (contrived) use of the alert widget through a simple game: guess the number.
Left clicking or typing keyboard enter/return when the button labeled "guess" is focused will cause an alert giving feedback on the textfield contents to be displayed.  
If you are using Firefox 1.5, the alert will be focused. 
</p>
<p class="long">
The suggested coding practice is to indicate the alert metaphor by focusing an element with an "alert" role and an "important" state set.
When an element with the "alert" role attribute is focused without an "important" state set, it is should be 
considered an old alert and no longer worth special action/interruption/notification.
</p>

	<h3 class="info">Instructions</h3>
<ul class="instructions">
	<li>Tab to the button</li>
	<li>Press enter, verify the alert pops up explaining the textfield restrictions</li>
	<li>In Firefox 1.5, tab once and the alert dismissal button ("OK") should be focused</li>
	<li>In Firefox 1.5, press enter and the focus should change to the textfield</li>
	<li>Click on the "guess" button, then on the "OK" button, and verify the same behavior occurs as with the keyboard</li>
	<li>Enter a number in the textfield, tab to the button, press enter</li>
	<li>Reflect on the alert message, tab to the dismissal button, press enter</li>
	<li>Change the guessed number and repeat until the alert verifies you have guessed the correct number</li>
	<li>Worst case when using the optimal strategy is 8 iterations of guessing</li>
</ul>

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