5 files changed, 146 insertions, 44 deletions
diff --git a/tests/index.css b/tests/index.css
new file mode 100644
index 000000000..2034cfba5
--- /dev/null
+++ b/tests/index.css
@@ -0,0 +1,21 @@
+body {
+	font-size: 62.5%;
+}
+.ui-widget-header {
+	padding: 0.2em 0.5em;
+	margin: 0;
+}
+.ui-widget-content {
+	padding: 1em;
+	margin-bottom: 1em;
+}
+p {
+	margin: 0;
+}
+ul {
+	margin: 0;
+	list-style: none;
+}
+li {
+	line-height: 2em;
+}
diff --git a/tests/index.html b/tests/index.html
index 3c66bf38f..d4b3f4a8d 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -1,22 +1,33 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
+	<meta charset="utf-8">
 	<title>jQuery UI Tests</title>
-	<link rel="stylesheet" href="../themes/base/jquery.ui.all.css" type="text/css" />
-	<script type="text/javascript" src="../jquery-1.7.2.js"></script>
-	<link rel="stylesheet" href="tests.css" type="text/css" />
-	<script type="text/javascript" src="tests.js"></script>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.core.css">
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.theme.css">
+	<link rel="stylesheet" href="index.css">
+	<script src="jquery.js"></script>
+	<script src="index.js"></script>
 </head>
 <body>
 
-<h1>jQuery UI Tests</h1>
+<div id="main">
+	<h1>jQuery UI Tests</h1>
+	<div>
+		<h2>Unit Tests</h2>
+		<p><a href="unit/index.html">Unit tests</a> exist for all functionality in jQuery UI.
+		The unit tests can be run locally (some tests require a web server with PHP)
+		to ensure proper functionality before committing changes.
+		The unit tests are also run on <a href="http://swarm.jquery.com/user/jqueryui">TestSwarm</a>
+		for every commit.</p>
 
-<h2><a href="static/index.html">Static Tests</a></h2>
-
-<h2><a href="unit/index.html">Unit Tests</a></h2>
-
-<h2><a href="visual/index.html">Visual Tests</a></h2>
+		<h2>Visual Tests</h2>
+		<p><a href="visual/index.html">Visual tests</a> only exist in cases where we can't verify proper functionality
+		with unit tests. These may be either purely visual or just hard to automate.
+		Most visual tests will provide a description of what is happening on the page
+		and what to look for.</p>
+	</div>
+</div>
 
 </body>
 </html>
diff --git a/tests/index.js b/tests/index.js
new file mode 100644
index 000000000..26c07498f
--- /dev/null
+++ b/tests/index.js
@@ -0,0 +1,10 @@
+$(function() {
+
+$( "#main" )
+	.addClass( "ui-widget" )
+	.find( "h1, h2" )
+		.addClass( "ui-widget-header ui-corner-top" )
+		.next()
+			.addClass( "ui-widget-content ui-corner-bottom" );
+
+});
diff --git a/tests/unit/index.html b/tests/unit/index.html
index b73ede29c..e2dd9069a 100644
--- a/tests/unit/index.html
+++ b/tests/unit/index.html
@@ -6,39 +6,9 @@
 
 	<link rel="stylesheet" href="../../themes/base/jquery.ui.core.css">
 	<link rel="stylesheet" href="../../themes/base/jquery.ui.theme.css">
-	<style>
-	body {
-		font-size: 62.5%;
-	}
-	.ui-widget-header {
-		padding: 0.2em 0.5em;
-		margin: 0;
-	}
-	.ui-widget-content {
-		padding: 1em;
-		margin-bottom: 1em;
-	}
-	ul {
-		margin: 0;
-		list-style: none;
-	}
-	li {
-		line-height: 2em;
-	}
-	</style>
-
+	<link rel="stylesheet" href="../index.css">
 	<script src="../jquery.js"></script>
-	<script>
-	$(function() {
-		$( "#main" )
-			.addClass( "ui-widget" )
-			.find( "h1, h2" )
-				.addClass( "ui-widget-header ui-corner-top" )
-				.next()
-					.addClass( "ui-widget-content ui-corner-bottom" );
-		
-	});
-	</script>
+	<script src="../index.js"></script>
 </head>
 <body>
 
diff --git a/tests/visual/index.html b/tests/visual/index.html
new file mode 100644
index 000000000..4e524cdcc
--- /dev/null
+++ b/tests/visual/index.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Visual Tests</title>
+
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.core.css">
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.theme.css">
+	<link rel="stylesheet" href="../index.css">
+	<script src="../jquery.js"></script>
+	<script src="../index.js"></script>
+</head>
+<body>
+
+<div id="main">
+	<h1>jQuery UI Visual Tests</h1>
+	<div>
+		<h2>Accordion</h2>
+		<ul>
+			<li><a href="accordion/icons.html">Icons</a></li>
+		</ul>
+
+		<h2>addClass</h2>
+		<ul>
+			<li><a href="addClass/queue.html">Queue</a></li>
+		</ul>
+
+		<h2>Button</h2>
+		<ul>
+			<li><a href="button/button.html">General</a></li>
+			<li><a href="butotn/performance.html">Performance</a></li>
+		</ul>
+
+		<h2>Dialog</h2>
+		<ul>
+			<li><a href="dialog/performance.html">Performance</a></li>
+		</ul>
+
+		<h2>Effects</h2>
+		<ul>
+			<li><a href="effects/all.html">All</a></li>
+			<li><a href="effects/scale.html">Scale</a></li>
+		</ul>
+
+		<h2>Menu</h2>
+		<ul>
+			<li><a href="menu/menu.html">General</a></li>
+			<li><a href="menu/drilldown.html">Drilldown</a></li>
+			<li><a href="menu/tablemenu.html">Table-based</a></li>
+		</ul>
+
+		<h2>Position</h2>
+		<ul>
+			<li><a href="position/position.html">General</a></li>
+			<li><a href="position/position_feedback.html">Feedback</a></li>
+			<li><a href="position/position_feedback_rotate.html">Feedback (rotate)</a></li>
+			<li><a href="position/position_fit.html">Collision - fit</a></li>
+			<li><a href="position/position_flip.html">Collision - flip</a></li>
+			<li><a href="position/position_flipfit.html">Collision - flipfit</a></li>
+			<li><a href="position/position_margin.html">Margins</a></li>
+			<li><a href="position/position_within.html">Within</a></li>
+		</ul>
+
+		<h2>Tooltip</h2>
+		<ul>
+			<li><a href="tooltip/tooltip.html">General</a></li>
+			<li><a href="tooltip/animations.html">Animations</a></li>
+		</ul>
+
+		<h2>Compound</h2>
+		<ul>
+			<li><a href="compound/accordion_tabs.html">Accordion in Tabs</a></li>
+			<li><a href="compound/datepicker_dialog.html">Datepicker in Dialog</a></li>
+			<li><a href="compound/dialog_widgets.html">Various Widgets in Dialog</a></li>
+			<li><a href="compound/draggable_accordion.html">Draggable Accordion</a></li>
+			<li><a href="compound/draggable_accordion_accordion_tabs_draggable.html">Nested Widgets</a></li>
+			<li><a href="compound/sortable_accordion_sortable_tabs.html">Sortable Tabs in Sortable Accordion</a></li>
+			<li><a href="compound/tabs_tabs.html">Nested Tabs</a></li>
+			<li><a href="compound/tabs_tooltip.html">Tabs with Tooltips</a></li>
+		</ul>
+
+		<h2>General</h2>
+		<ul>
+			<li><a href="theme.html">Theme</a></li>
+		</ul>
+	</div>
+</div>
+
+</body>
+</html>