Position visual tests: Cleanup.

author: Scott González <scott.gonzalez@gmail.com> 2012-05-20 20:34:21 -0400
committer: Scott González <scott.gonzalez@gmail.com> 2012-05-20 20:34:21 -0400
commit: 75f6b5f1886ae84884d2bffd6ea03c6e6ed9ff28 (patch)
tree: 6da52af527bcb2ec5a680dcc7ff9eae8f5eb2122 /tests
parent: cac6831e3408b05446ba2682d2d6232224151a2b (diff)
download: jquery-ui-75f6b5f1886ae84884d2bffd6ea03c6e6ed9ff28.tar.gz
jquery-ui-75f6b5f1886ae84884d2bffd6ea03c6e6ed9ff28.zip
2 files changed, 120 insertions, 178 deletions
diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html
index 678412475..2fbe8e95d 100644
--- a/tests/visual/position/position.html
+++ b/tests/visual/position/position.html
@@ -1,200 +1,142 @@
 <!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" />
-
+	<meta charset="utf-8">
+	<title>Position Visual Test</title>
 	<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;
+		.demo {
+			position: relative;
+			height: 500px;
+			width: 80%;
+			margin: 20px auto;
+			background: #eee;
 		}
-		.ui-flipped-bottom {
-			border-bottom: 3px solid #000000;
+		#target {
+			width: 60%;
+			margin: 0 auto;
+			border: 1px solid #777;
+			background-color: #fbca93;
+			text-align: center;
+			cursor: move;
 		}
-		.ui-flipped-left {
-			border-left: 3px solid #000000;
+		.positionable {
+			position: absolute;
+			background-color: #bcd5e6;
+			text-align: center;
 		}
-		.ui-flipped-right {
-			border-right: 3px solid #000000;
+		.extra-margin {
+			margin: 0 15px 15px 0;
 		}
-    	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();
-    	});
+		$(function() {
+			var within = $( ".demo" ),
+				positionable = $( ".positionable" );
+			function position() {
+				positionable.position({
+					of: $( "#target" ),
+					my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
+					at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
+					within: within,
+					collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
+				});
+			}
+
+			positionable.css( "opacity", 0.5 );
+
+			$( "#target" ).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 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>
-
-    <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 id="target">
+		<p>This is the position target element.</p>
+	</div>
+
+	<div class="positionable" style="width: 75px; height: 75px;">
+		<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:</h2>
+		<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="flipfit">flipfit</option>
+				<option value="none">none</option>
+			</select>
+			<select id="collision_vertical">
+				<option value="flip">flip</option>
+				<option value="fit">fit</option>
+				<option value="flipfit">flipfit</option>
+				<option value="none">none</option>
+			</select>
+		</div>
+		<div>
+			<label for="within">within:</label>
+			<input id="within" type="checkbox" checked="checked">
+		</div>
+		<div>
+			<label for="margin">extra margin:</label>
+			<input id="margin" type="checkbox">
+		</div>
+	</form>
 </div>
 
 </body>
diff --git a/tests/visual/position/position_feedback.html b/tests/visual/position/position_feedback.html
index 006a1be02..bea1dd2c2 100644
--- a/tests/visual/position/position_feedback.html
+++ b/tests/visual/position/position_feedback.html
@@ -2,8 +2,7 @@
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<title>Position Visual Test: Default</title>
-	<link rel="stylesheet" href="../visual.css">
+	<title>Position Visual Test: Feedback</title>
 	<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>
@@ -86,6 +85,7 @@
 		width: 75px;
 		height: 25px;
 		padding: 5px;
+		font-size: 62.5%;
 	}
 	#target {
 		height: 75px;
author	Scott González <scott.gonzalez@gmail.com>	2012-05-20 20:34:21 -0400
committer	Scott González <scott.gonzalez@gmail.com>	2012-05-20 20:34:21 -0400
commit	75f6b5f1886ae84884d2bffd6ea03c6e6ed9ff28 (patch)
tree	6da52af527bcb2ec5a680dcc7ff9eae8f5eb2122 /tests
parent	cac6831e3408b05446ba2682d2d6232224151a2b (diff)
download	jquery-ui-75f6b5f1886ae84884d2bffd6ea03c6e6ed9ff28.tar.gz jquery-ui-75f6b5f1886ae84884d2bffd6ea03c6e6ed9ff28.zip