diff --git a/tests/visual/index.html b/tests/visual/index.html
index 46615a3a4..0d5aceffa 100644
--- a/tests/visual/index.html
+++ b/tests/visual/index.html
@@ -51,12 +51,6 @@
 		<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>
diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html
index 64c5d2300..678412475 100644
--- a/tests/visual/position/position.html
+++ b/tests/visual/position/position.html
@@ -1,91 +1,201 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8" />
-	<title>Position Visual Test: Default</title>
-	<link rel="stylesheet" href="../visual.css" type="text/css" />
-	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
-	<script type="text/javascript" src="../../../jquery-1.7.2.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
-	<script type="text/javascript">
-	$(function() {
-		var inputs = $("input");
-		$("ul").insertAfter(inputs);
-		$(window).resize(function() {
-			inputs.each(function() {
-				var input = $(this).position({
-					my: this.id.replace(/-/, " "),
-					at: this.id.replace(/-/, " "),
-					of: "#container",
-					collision: "none"
-				});
-				var menu = $(this).next().menu()
-				menu.position({
-					my: "left+30 top+20",
-					at: "left bottom",
-					of: this,
-					using: function( position, feedback ) {
-						input.val(feedback.horizontal + " " + feedback.vertical)
-						$(this).offset( position );
-						$(this)
-							.removeClass("left right top bottom center middle")
-							.addClass(feedback.horizontal)
-							.addClass(feedback.vertical);
-					}
-				});
-			});
-		}).resize();
-	});
-	</script>
+    <meta charset="utf-8">
+	<title>Position Visual Test: Containing Element</title>
+
+    <link rel="stylesheet" href="../visual.css" type="text/css" />
+    <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
+
+	<script src="../../../jquery-1.7.2.js"></script>
+	<script src="../../../ui/jquery.ui.core.js"></script>
+	<script src="../../../ui/jquery.ui.widget.js"></script>
+	<script src="../../../ui/jquery.ui.mouse.js"></script>
+	<script src="../../../ui/jquery.ui.draggable.js"></script>
+	<script src="../../../ui/jquery.ui.position.js"></script>
+
 	<style>
-		input, .ui-menu { position: absolute; }
-		.ui-menu { width: 200px; }
-		html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; }
-		#container { width: 95%; height: 95%; border: 1px solid black; margin: auto; }
-		.ui-menu:before {
-			font-size: 12pt;
-			content: "↑";
-			position: absolute;
-			top: -22px;
-			left: 5px;
+        html, body {
+            height:100%;
+            width:100%;
+            margin:0;
+            /* force scroll bar*/
+            min-height:800px;
+            min-width:800px;
+
+            /* IE6 needs this */
+            text-align:center;
+        }
+        .demo-description {
+            text-align:center;
+            padding:1.5em;
+        }
+        .demo-container {
+            background:#aaa;
+            width:80%;
+            height:80%;
+
+            text-align:left;
+            margin:0 auto;
+            position:relative;
+            padding:10px;
+        }
+        .demo {
+            background:#eee;
+            overflow:hidden;
+            position:relative;
+            height:100%;
+            /* IE6 needs this */
+            width:100%;
+        }
+    	#parent {
+    		width: 60%;
+    		margin: 10px auto;
+    		padding: 5px;
+    		border: 1px solid #777;
+    		background-color: #fbca93;
+    		text-align: center;
+            cursor:move;
+    	}
+    	.positionable {
+    		width: 75px;
+    		height: 75px;
+    		position: absolute;
+    		display: block;
+    		right: 0;
+    		bottom: 0;
+    		background-color: #bcd5e6;
+    		text-align: center;
+            cursor:move;
+    	}
+    	.ui-flipped-top {
+		border-top: 3px solid #000000;
 		}
-		.right:before {
-			left: auto;
-			right: 5px;
+		.ui-flipped-bottom {
+			border-bottom: 3px solid #000000;
 		}
-		.bottom:before {
-			content: "↓";
-			top: auto;
-			bottom: -19px;
+		.ui-flipped-left {
+			border-left: 3px solid #000000;
 		}
+		.ui-flipped-right {
+			border-right: 3px solid #000000;
+		}
+    	select, input {
+    		margin-left: 15px;
+    	}
+        .extra-margin {
+            margin: 0 15px 15px 0;
+        }
 	</style>
+	<script>
+    	$(function() {
+            var within = $( ".demo" ),
+                positionable = $( ".positionable" );
+            function position() {
+                positionable.position({
+                    of: $( "#parent" ),
+                    my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
+                    at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
+                    offset: $( "#offset" ).val(),
+                    within: within,
+                    collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
+                });
+            }
+            $( ".demo" ).css("overflow","scroll");
+
+            positionable.css( "opacity", 0.5 );
+
+
+            $( "#parent" ).draggable({
+                drag: function() { position(); }
+            });
+
+            $("#within").click(function() {
+                within = within.is(".demo") ? $(window) : $(".demo");
+                position();
+            });
+
+            $("#margin").click(function() {
+                positionable.toggleClass( "extra-margin" );
+                position();
+            });
+
+            $( ":input" ).bind( "click keyup change", function() { position(); } );
+
+            position();
+    	});
+	</script>
 </head>
 <body>
 
-<div id="container"></div>
+<div class="demo-container">
+<div class="demo">
 
-<input id="left-top" />
-<input id="left-center" />
-<input id="left-bottom" />
-<input id="center-top" />
-<input id="center-center" />
-<input id="center-bottom" />
-<input id="right-top" />
-<input id="right-center" />
-<input id="right-bottom" />
+    <div id="parent">
+    	<p>This is the position parent element.</p>
+    </div>
 
-<ul>
-	<li><a href="#">Java</a></li>
-	<li><a href="#">JavaScript</a></li>
-	<li><a href="#">Perl</a></li>
-	<li><a href="#">Ruby</a></li>
-	<li><a href="#">C++</a></li>
-	<li><a href="#">Python</a></li>
-	<li><a href="#">C#</a></li>
-</ul>
+    <div class="positionable">
+	    <p>to position</p>
+    </div>
+
+    <div class="positionable" style="width:120px; height: 40px;">
+    	<p>to position 2</p>
+    </div>
+
+    <form style="padding: 20px; margin-top: 75px;">
+    	<h2>Position configuration:
+    	<div style="padding-bottom: 20px;">
+    		<b>my:</b>
+    		<select id="my_horizontal">
+    			<option value="left">left</option>
+    			<option value="center">center</option>
+    			<option value="right" selected="selected">right</option>
+    		</select>
+    		<select id="my_vertical">
+    			<option value="top">top</option>
+    			<option value="middle">center</option>
+    			<option value="bottom">bottom</option>
+    		</select>
+    	</div>
+    	<div style="padding-bottom: 20px;">
+    		<b>at:</b>
+    		<select id="at_horizontal">
+    			<option value="left">left</option>
+    			<option value="center">center</option>
+    			<option value="right" selected="selected">right</option>
+    		</select>
+    		<select id="at_vertical">
+    			<option value="top">top</option>
+    			<option value="middle">center</option>
+    			<option value="bottom">bottom</option>
+    		</select>
+    	</div>
+    	<div style="padding-bottom: 20px;">
+    		<b>collision:</b>
+    		<select id="collision_horizontal">
+    			<option value="flip">flip</option>
+    			<option value="fit">fit</option>
+    			<option value="none">none</option>
+    		</select>
+    		<select id="collision_vertical">
+    			<option value="flip">flip</option>
+    			<option value="fit">fit</option>
+    			<option value="none">none</option>
+    		</select>
+    	</div>
+        <div>
+            <label for="within">within:</label>
+            <input id="within" type="checkbox" checked />
+        </div>
+        <div>
+            <label for="margin">extra margin:</label>
+            <input id="margin" type="checkbox" />
+        </div>
+    </form>
+
+</div><!-- End demo -->
+</div>
 
 </body>
 </html>
diff --git a/tests/visual/position/position_feedback_rotate.html b/tests/visual/position/position_feedback_rotate.html
deleted file mode 100644
index 11138b112..000000000
--- a/tests/visual/position/position_feedback_rotate.html
+++ /dev/null
@@ -1,109 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-	<meta charset="utf-8">
-	<title>Position Visual Test: Default</title>
-	<link rel="stylesheet" href="../visual.css">
-	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
-	<script src="../../../jquery-1.7.2.js"></script>
-	<script src="../../../ui/jquery.ui.core.js"></script>
-	<script src="../../../ui/jquery.ui.widget.js"></script>
-	<script src="../../../ui/jquery.ui.position.js"></script>
-	<script src="../../../ui/jquery.ui.menu.js"></script>
-	<script>
-	$(function() {
-		function using( position, feedback ) {
-			var angleRad = Math.atan2(
-					feedback.target.top + feedback.target.height / 2 - feedback.element.top - feedback.element.height / 2,
-					feedback.target.left + feedback.target.width / 2 - feedback.element.left - feedback.element.width / 2
-				) * 180 / Math.PI,
-				angle = Math.round( angleRad * 100) / 100;
-			$( this )
-				.css( position )
-				.text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important + " " + angle + "°" )
-				.css({
-					"-webkit-transform": "rotate(" + angle + "deg)",
-					"-moz-transform": "rotate(" + angle + "deg)",
-					"-ms-transform": "rotate(" + angle + "deg)",
-					"-o-transform": "rotate(" + angle + "deg)",
-					"transform": "rotate(" + angle + "deg)"
-				});
-		}
-
-		var element = $( ".element" ),
-			target = $( "#target" ).position({
-				my: "center",
-				at: "center",
-				of: window
-			}),
-			targetOffset = target.offset();
-			oppositeElement = element.clone().width( 50 ).appendTo( "body" ),
-			leftElement = element.clone().width( 50 ).height( 150 ).appendTo( "body" ),
-			rightElement = element.clone().height( 150 ).width( 150 ).appendTo( "body" );
-
-		$.each([
-			"center top-100",
-			"right+25 top-50",
-			"right+75 top",
-			"right+75 center",
-			"right+75 bottom",
-			"right+25 bottom+50",
-			"center bottom+100",
-			"left-25 bottom+50",
-			"left-75 bottom",
-			"left-75 center",
-			"left-75 top",
-			"left-25 top-50"
-		], function( index, direction ) {
-			element.clone().insertAfter( target ).position({
-				my: "center",
-				at: direction,
-				of: target,
-				using: using
-			});
-		});
-
-		element.width( 150 );
-		$( document ).on( "mousemove", function( event ) {
-			var base = {
-				my: "left top",
-				at: "left top",
-				of: target,
-				using: using
-			};
-			element.position( $.extend({
-				offset: (event.pageX - targetOffset.left) + " " + (event.pageY - targetOffset.top)
-			}, base ));
-			oppositeElement.position( $.extend({
-				offset: (-1 * (event.pageX - targetOffset.left)) + " " + (-1 * (event.pageY - targetOffset.top))
-			}, base ));
-			leftElement.position( $.extend({
-				offset: (-0.9 * (event.pageX - targetOffset.left)) + " " + (0.9 * (event.pageY - targetOffset.top))
-			}, base ));
-			rightElement.position( $.extend({
-				offset: (0.9 * (event.pageX - targetOffset.left)) + " " + (-0.9 * (event.pageY - targetOffset.top))
-			}, base ));
-		});
-	});
-	</script>
-	<style>
-	#target, .element {
-		position: absolute;
-		border: 1px solid black;
-		border-radius: 5px;
-		width: 75px;
-		height: 25px;
-		padding: 5px;
-	}
-	#target {
-		height: 75px;
-	}
-	</style>
-</head>
-<body>
-
-<div id="target">all around me</div>
-<div class="element"></div>
-
-</body>
-</html>
diff --git a/tests/visual/position/position_fit.html b/tests/visual/position/position_fit.html
deleted file mode 100644
index a70423c79..000000000
--- a/tests/visual/position/position_fit.html
+++ /dev/null
@@ -1,147 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8" />
-	<title>Position Visual Test: Fit</title>
-	<link rel="stylesheet" href="../visual.css" type="text/css" />
-	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
-	<script type="text/javascript" src="../../../jquery-1.7.2.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
-	<script type="text/javascript">
-	$(function() {
-		var inputs = $("input");
-		$("ul").insertAfter(inputs);
-		inputs.each(function(index) {
-			$(this).position({
-				my: $(this).data("position"),
-				at: $(this).data("position"),
-				of: "#container"+index,
-				collision: "none"
-			});
-			if(index < 3) {
-				$(this).next().menu().position({
-					my: "left top",
-					at: "left bottom",
-					of: this,
-					within: "#container"+index,
-					collision: "fit"
-				});
-			}
-			if(index >= 3 && index < 6) {
-				$(this).next().menu().position({
-					my: "right top",
-					at: "right bottom",
-					of: this,
-					within: "#container"+index,
-					collision: "fit"
-				});
-			}
-			if(index >= 6 && index < 9) {
-				$(this).next().menu().position({
-					my: "center top",
-					at: "center bottom",
-					of: this,
-					within: "#container"+index,
-					collision: "fit"
-				});
-			}
-			if(index >= 9 && index < 12) {
-				$(this).next().menu().position({
-					my: "left top",
-					at: "left bottom",
-					of: this,
-					within: "#container"+index,
-					collision: "fit"
-				});
-			}
-			if(index >= 12 && index < 15) {
-				$(this).next().menu().position({
-					my: "center center",
-					at: "center center",
-					of: this,
-					within: "#container"+index,
-					collision: "fit"
-				});
-			}
-			if(index >= 15) {
-				$(this).next().menu().position({
-					my: "left bottom",
-					at: "left top",
-					of: this,
-					within: "#container"+index,
-					collision: "fit"
-				});
-			}
-		});
-	});
-	</script>
-	<style>
-		input, .ui-menu { position: absolute; }
-		.ui-menu { width: 300px; }
-		#ui-menu-9, #ui-menu-10, #ui-menu-11, #ui-menu-12, #ui-menu-13, #ui-menu-14, #ui-menu-15, #ui-menu-16, #ui-menu-17 { width: auto; }
-		html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; }
-		.container { width: 200px; height: 200px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 15px; margin-bottom: 135px; }
-		.container2 { width: 200px; height: 100px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 15px; margin-bottom: 135px; }
-	</style>
-</head>
-<body>
-
-<div id="container0" class="container"></div>
-<div id="container1" class="container"></div>
-<div id="container2" class="container"></div>
-<div style="clear:both;"></div>
-<div id="container3" class="container"></div>
-<div id="container4" class="container"></div>
-<div id="container5" class="container"></div>
-<div style="clear:both;"></div>
-<div id="container6" class="container"></div>
-<div id="container7" class="container"></div>
-<div id="container8" class="container"></div>
-<div style="clear:both;"></div>
-<div id="container9" class="container2"></div>
-<div id="container10" class="container2"></div>
-<div id="container11" class="container2"></div>
-<div style="clear:both;"></div>
-<div id="container12" class="container2"></div>
-<div id="container13" class="container2"></div>
-<div id="container14" class="container2"></div>
-<div style="clear:both;"></div>
-<div id="container15" class="container2"></div>
-<div id="container16" class="container2"></div>
-<div id="container17" class="container2"></div>
-
-<input data-position="left top" />
-<input data-position="center top" />
-<input data-position="right top" />
-<input data-position="left top" />
-<input data-position="center top" />
-<input data-position="right top" />
-<input data-position="left top" />
-<input data-position="center top" />
-<input data-position="right top" />
-
-<input data-position="left top" />
-<input data-position="center center" />
-<input data-position="right bottom" />
-<input data-position="left top" />
-<input data-position="center center" />
-<input data-position="right bottom" />
-<input data-position="left top" />
-<input data-position="center center" />
-<input data-position="right bottom" />
-
-<ul>
-	<li><a href="#">Java</a></li>
-	<li><a href="#">JavaScript</a></li>
-	<li><a href="#">Perl</a></li>
-	<li><a href="#">Ruby</a></li>
-	<li><a href="#">C++</a></li>
-	<li><a href="#">Python</a></li>
-	<li><a href="#">C#</a></li>
-</ul>
-
-</body>
-</html>
diff --git a/tests/visual/position/position_flip.html b/tests/visual/position/position_flip.html
deleted file mode 100644
index b67c76fb3..000000000
--- a/tests/visual/position/position_flip.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8" />
-	<title>Position Visual Test: Flip</title>
-	<link rel="stylesheet" href="../visual.css" type="text/css" />
-	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
-	<script type="text/javascript" src="../../../jquery-1.7.2.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
-	<script type="text/javascript">
-	$(function() {
-		var inputs = $("input");
-		$("ul").insertAfter(inputs);
-		inputs.each(function(index) {
-			$(this).position({
-				my: $(this).data("position"),
-				at: $(this).data("position"),
-				of: "#container"+index,
-				collision: "none"
-			});
-			$(this).next().menu().position({
-				my: "left top",
-				at: "left bottom",
-				of: this,
-				within: "#container"+index
-			});
-		});
-	});
-	</script>
-	<style>
-		input, .ui-menu { position: absolute; }
-		.ui-menu { width: 300px; }
-		#ui-menu-6, #ui-menu-7, #ui-menu-8 { width: auto; }
-		html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; }
-		.container { width: 200px; height: 200px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 150px; }
-	</style>
-</head>
-<body>
-
-<div id="container0" class="container"></div>
-<div id="container1" class="container"></div>
-<div id="container2" class="container"></div><br>
-<div style="clear:both;"></div>
-<div id="container3" class="container" style="width:300px;"></div>
-<div id="container4" class="container" style="width:300px;"></div>
-<div id="container5" class="container" style="width:300px;"></div>
-<div style="clear:both;"></div>
-<div id="container6" class="container" style="height:100px; margin-bottom: 500px;"></div>
-<div id="container7" class="container" style="height:100px; margin-bottom: 500px;"></div>
-<div id="container8" class="container" style="height:100px; margin-bottom: 500px;"></div>
-
-<input data-position="left top" />
-<input data-position="center top" />
-<input data-position="right top" />
-<input data-position="left center" />
-<input data-position="center center" />
-<input data-position="right center" />
-<input data-position="left bottom" />
-<input data-position="center center" />
-<input data-position="right bottom" />
-
-<ul>
-	<li><a href="#">Java</a></li>
-	<li><a href="#">JavaScript</a></li>
-	<li><a href="#">Perl</a></li>
-	<li><a href="#">Ruby</a></li>
-	<li><a href="#">C++</a></li>
-	<li><a href="#">Python</a></li>
-	<li><a href="#">C#</a></li>
-</ul>
-
-</body>
-</html>
diff --git a/tests/visual/position/position_flipfit.html b/tests/visual/position/position_flipfit.html
deleted file mode 100644
index 840dd5868..000000000
--- a/tests/visual/position/position_flipfit.html
+++ /dev/null
@@ -1,85 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8" />
-	<title>Position Visual Test: FlipFit</title>
-	<link rel="stylesheet" href="../visual.css" type="text/css" />
-	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
-	<script type="text/javascript" src="../../../jquery-1.7.2.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
-	<script type="text/javascript">
-	$(function() {
-		var inputs = $("input");
-		$("ul").insertAfter(inputs);
-		inputs.each(function(index) {
-			$(this).position({
-				my: $(this).data("position"),
-				at: $(this).data("position"),
-				of: "#container"+index,
-				collision: "none"
-			});
-			$(this).next().menu().position({
-				my: index > 2 && index < 6 ? "right top" : "left top",
-				at: index > 2 && index < 6 ? "right bottom" : "left bottom",
-				of: this,
-				within: "#container"+index,
-				collision: "flipfit"
-			});
-		});
-	});
-	</script>
-	<style>
-		input, .ui-menu { position: absolute; }
-		.ui-menu { width: 300px; }
-		#ui-menu-3, #ui-menu-4, #ui-menu-5 { width: 185px; }
-		#ui-menu-9, #ui-menu-10, #ui-menu-11 { width: auto; }
-		html, body { width: 99%; height: 99%; min-height:700px; min-width:700px; }
-		.container { width: 200px; height: 200px; border: 1px solid black; display:inline-block; margin-left: 230px; margin-top: 150px; }
-	</style>
-</head>
-<body>
-
-<div id="container0" class="container"></div>
-<div id="container1" class="container"></div>
-<div id="container2" class="container"></div><br>
-<div style="clear:both;"></div>
-<div id="container3" class="container"></div>
-<div id="container4" class="container"></div>
-<div id="container5" class="container"></div><br>
-<div style="clear:both;"></div>
-<div id="container6" class="container" style="width:300px;"></div>
-<div id="container7" class="container" style="width:300px;"></div>
-<div id="container8" class="container" style="width:300px;"></div>
-<div style="clear:both;"></div>
-<div id="container9" class="container" style="height:100px; margin-bottom: 500px;"></div>
-<div id="container10" class="container" style="height:100px; margin-bottom: 500px;"></div>
-<div id="container11" class="container" style="height:100px; margin-bottom: 500px;"></div>
-
-<input data-position="left top" />
-<input data-position="center top" />
-<input data-position="right top" />
-<input data-position="left top" />
-<input data-position="center top" />
-<input data-position="right top" />
-<input data-position="left center" />
-<input data-position="center center" />
-<input data-position="right center" />
-<input data-position="left bottom" />
-<input data-position="center center" />
-<input data-position="right bottom" />
-
-<ul>
-	<li><a href="#">Java</a></li>
-	<li><a href="#">JavaScript</a></li>
-	<li><a href="#">Perl</a></li>
-	<li><a href="#">Ruby</a></li>
-	<li><a href="#">C++</a></li>
-	<li><a href="#">Python</a></li>
-	<li><a href="#">C#</a></li>
-</ul>
-
-</body>
-</html>
diff --git a/tests/visual/position/position_margin.html b/tests/visual/position/position_margin.html
deleted file mode 100644
index 2e3b63266..000000000
--- a/tests/visual/position/position_margin.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8" />
-	<title>Position Visual Test: Default</title>
-	<link rel="stylesheet" href="../visual.css" type="text/css" />
-	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
-	<script type="text/javascript" src="../../../jquery-1.7.2.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
-	<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
-	<script type="text/javascript">
-	$(function() {
-		$( "#elem" ).position({
-			my: "right bottom",
-			at: "right bottom",
-			of: window,
-			collision: "fit"
-		});
-	});
-	</script>
-	<style>
-		#elem {
-			position: absolute;
-			top: 100px;
-			left: 100px;
-			width: 200px;
-			height: 200px;
-			box-shadow: 10px 10px 5px #888;
-			-moz-box-shadow: 10px 10px 5px #888;
-			-webkit-box-shadow: 10px 10px 5px #888;
-			background-color: #aaa;
-			margin: 15px;
-		}
-	</style>
-</head>
-<body>
-
-<div id="elem"></div>
-
-</body>
-</html>
diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html
deleted file mode 100644
index 692cb1067..000000000
--- a/tests/visual/position/position_within.html
+++ /dev/null
@@ -1,200 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-	<title>Position Visual Test: Containing Element</title>
-
-    <link rel="stylesheet" href="../visual.css" type="text/css" />
-    <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
-
-	<script src="../../../jquery-1.7.2.js"></script>
-	<script src="../../../ui/jquery.ui.core.js"></script>
-	<script src="../../../ui/jquery.ui.widget.js"></script>
-	<script src="../../../ui/jquery.ui.mouse.js"></script>
-	<script src="../../../ui/jquery.ui.draggable.js"></script>
-	<script src="../../../ui/jquery.ui.position.js"></script>
-
-	<style>
-        html, body {
-            height:100%;
-            width:100%;
-            margin:0;
-            /* force scroll bar*/
-            min-height:800px;
-            min-width:800px;
-
-            /* IE6 needs this */
-            text-align:center;
-        }
-        .demo-description {
-            text-align:center;
-            padding:1.5em;
-        }
-        .demo-container {
-            background:#aaa;
-            width:80%;
-            height:80%;
-
-            text-align:left;
-            margin:0 auto;
-            position:relative;
-            padding:10px;
-        }
-        .demo {
-            background:#eee;
-            overflow:hidden;
-            position:relative;
-            height:100%;
-            /* IE6 needs this */
-            width:100%;
-        }
-    	#parent {
-    		width: 60%;
-    		margin: 10px auto;
-    		padding: 5px;
-    		border: 1px solid #777;
-    		background-color: #fbca93;
-    		text-align: center;
-            cursor:move;
-    	}
-    	.positionable {
-    		width: 75px;
-    		height: 75px;
-    		position: absolute;
-    		display: block;
-    		right: 0;
-    		bottom: 0;
-    		background-color: #bcd5e6;
-    		text-align: center;
-            cursor:move;
-    	}
-    	.ui-flipped-top {
-		border-top: 3px solid #000000;
-		}
-		.ui-flipped-bottom {
-			border-bottom: 3px solid #000000;
-		}
-		.ui-flipped-left {
-			border-left: 3px solid #000000;
-		}
-		.ui-flipped-right {
-			border-right: 3px solid #000000;
-		}
-    	select, input {
-    		margin-left: 15px;
-    	}
-	</style>
-	<script>
-    	$(function() {
-            function position( using ) {
-                $( ".positionable" ).position({
-                    of: $( "#parent" ),
-                    my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
-                    at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
-                    offset: $( "#offset" ).val(),
-                    using: using,
-                    within: $( ".demo" ),
-                    collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
-                });
-            }
-            $( ".demo" ).css("overflow","scroll");
-
-            $( ".positionable" ).css( "opacity", 0.5 );
-
-            $( ":input" ).bind( "click keyup change", function() { position(); } );
-
-            $( "#parent" ).draggable({
-                drag: function() { position(); }
-            });
-
-            $( ".positionable" ).draggable({
-                drag: function( event, ui ) {
-                    // reset offset before calculating it
-                    $( "#offset" ).val( "0" );
-                    position(function( result ) {
-                    	var demo = $( ".demo" );
-                        $( "#offset" ).val( "" + ( ui.offset.left - result.left - demo.offset().left + demo.scrollLeft() ) +
-                            " " + ( ui.offset.top - result.top - demo.offset().top + demo.scrollTop() ) );
-                        position();
-                    });
-                }
-            });
-
-            position();
-    	});
-	</script>
-</head>
-<body>
-
-<div class="demo-description">
-    Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
-    <br/>Drag around the parent element to see collision detection in action.
-</div><!-- End demo-description -->
-
-<div class="demo-container">
-<div class="demo">
-
-    <div id="parent">
-    	<p>This is the position parent element.</p>
-    </div>
-
-    <div class="positionable">
-	    <p>to position</p>
-    </div>
-
-    <div class="positionable" style="width:120px; height: 40px;">
-    	<p>to position 2</p>
-    </div>
-
-    <div style="padding: 20px; margin-top: 75px;">
-    	position...
-    	<div style="padding-bottom: 20px;">
-    		<b>my:</b>
-    		<select id="my_horizontal">
-    			<option value="left">left</option>
-    			<option value="center">center</option>
-    			<option value="right" selected="selected">right</option>
-    		</select>
-    		<select id="my_vertical">
-    			<option value="top">top</option>
-    			<option value="middle">center</option>
-    			<option value="bottom">bottom</option>
-    		</select>
-    	</div>
-    	<div style="padding-bottom: 20px;">
-    		<b>at:</b>
-    		<select id="at_horizontal">
-    			<option value="left">left</option>
-    			<option value="center">center</option>
-    			<option value="right" selected="selected">right</option>
-    		</select>
-    		<select id="at_vertical">
-    			<option value="top">top</option>
-    			<option value="middle">center</option>
-    			<option value="bottom">bottom</option>
-    		</select>
-    	</div>
-    	<div style="padding-bottom: 20px;">
-    		<b>offset:</b>
-    		<input id="offset" type="text" size="15"/>
-    	</div>
-    	<div style="padding-bottom: 20px;">
-    		<b>collision:</b>
-    		<select id="collision_horizontal">
-    			<option value="flip">flip</option>
-    			<option value="fit">fit</option>
-    			<option value="none">none</option>
-    		</select>
-    		<select id="collision_vertical">
-    			<option value="flip">flip</option>
-    			<option value="fit">fit</option>
-    			<option value="none">none</option>
-    		</select>
-    	</div>
-    </div>
-
-</div><!-- End demo -->
-</div>
-
-</body>
-</html>
