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

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