Merge branch 'master' into selectmenu

author: Felix Nagel <info@felixnagel.com> 2012-05-14 11:52:47 +0200
committer: Felix Nagel <info@felixnagel.com> 2012-05-14 11:52:47 +0200
commit: c6a8d7ee3c9803d9944db6f55778810592a36452 (patch)
tree: abb3df79a0eb6d9bb4713ab73da8ddc60d8a7674 /tests/unit/position
parent: 41dfb09aeb5df7d53089b58959d21207de63edbe (diff)
parent: d393c8b4cb26ec34878c22202da6ba9393e0094d (diff)
download: jquery-ui-c6a8d7ee3c9803d9944db6f55778810592a36452.tar.gz
jquery-ui-c6a8d7ee3c9803d9944db6f55778810592a36452.zip
5 files changed, 380 insertions, 814 deletions
diff --git a/tests/unit/position/all.html b/tests/unit/position/all.html
index fa3ecf23d..d76f9bbd8 100644
--- a/tests/unit/position/all.html
+++ b/tests/unit/position/all.html
@@ -7,9 +7,9 @@
 	<script src="../../../jquery-1.7.2.js"></script>
 
 	<link rel="stylesheet" href="../../../external/qunit.css">
-	<link rel="stylesheet" href="../subsuiteRunner.css">
+	<link rel="stylesheet" href="../qunit-composite.css">
 	<script src="../../../external/qunit.js"></script>
-	<script src="../subsuiteRunner.js"></script>
+	<script src="../qunit-composite.js"></script>
 	<script src="../subsuite.js"></script>
 
 	<script>
diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html
index 115adc3e9..8738ae667 100644
--- a/tests/unit/position/position.html
+++ b/tests/unit/position/position.html
@@ -8,62 +8,43 @@
 	<script>
 	$.uiBackCompat = false;
 	</script>
-	<script src="../../resource_loader.js"></script>
-	<script>
-	loadResources({
-		js: [ "ui/jquery.ui.position.js" ]
-	});
-	</script>
-
 	<link rel="stylesheet" href="../../../external/qunit.css">
 	<script src="../../../external/qunit.js"></script>
 	<script src="../../jquery.simulate.js"></script>
 	<script src="../testsuite.js"></script>
+	<script>
+	TestHelpers.loadResources({
+		js: [ "ui/jquery.ui.position.js" ]
+	});
+	</script>
 
 	<script src="position_core.js"></script>
-	<script src="position_core_within.js"></script>
 
 	<script src="../swarminject.js"></script>
 </head>
 <body>
-<div style="position:relative; z-index:2;">
-	<h1 id="qunit-header">jQuery UI Position Test Suite</h1>
-	<h2 id="qunit-banner"></h2>
-	<div id="qunit-testrunner-toolbar"></div>
-	<h2 id="qunit-userAgent"></h2>
-	<ol id="qunit-tests">
-	</ol>
-</div>
+<div id="qunit" style="position:relative; z-index:2;"></div>
 
 <!--
-elements smaller than 10px have a line-height set on them to avoid a bug in IE6
+elements smaller than 20px have a line-height set on them to avoid a bug in IE6
 .height() returns the greater of the height and line-height
 -->
 
 <div id="qunit-fixture" style="top: 0; left: 0; z-index:1">
-	<div id="within-container">
-		<div id="el1" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
-		<div id="el2" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
-		<div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div>
-
-		<div style="position: absolute; top: 0px; left: 0px">
-			<div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
-			<div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div>
-		</div>
-
-		<div style="position: absolute; top: 200px; left: 100px;">
-			<div id="el-offset-100-200" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
-			<div style="position: absolute; top: 100px; left: 50px;">
-				<div id="el-two-offset-150-300" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
-				<div id="el-fixed" style="position: fixed; top: 200px; left: 200px;"></div>
-			</div>
-		</div>
+	<div id="el1" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
+	<div id="el2" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
+	<div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div>
+	<div id="within" style="position: absolute; width: 12px; height: 12px; top: 2px; left: 0px; line-height: 12px;"></div>
+
+	<div id="scrollx" style="position: absolute; top: 0px; left: 0px">
+		<div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
+		<div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div>
+	</div>
 
-		<div style="position: absolute; height: 5000px; width: 5000px;"></div>
+	<div style="position: absolute; height: 5000px; width: 5000px;"></div>
 
-		<div id="fractions-parent" style="position: absolute; left: 10.7432222px; top: 10.532325px; height: 30px; width: 201px;">
-			<div id="fractions-element"></div>
-		</div>
+	<div id="fractions-parent" style="position: absolute; left: 10.7432222px; top: 10.532325px; height: 30px; width: 201px;">
+		<div id="fractions-element"></div>
 	</div>
 
 	<div id="bug-5280" style="height: 30px; width: 201px;">
diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js
index fbcac4b7f..4a2240311 100644
--- a/tests/unit/position/position_core.js
+++ b/tests/unit/position/position_core.js
@@ -1,13 +1,26 @@
 (function( $ ) {
 
-function scrollTopSupport() {
-	$( window ).scrollTop( 1 );
-	return $( window ).scrollTop() === 1;
-}
+var win = $( window ),
+	scrollTopSupport = function() {
+		var support = win.scrollTop( 1 ).scrollTop() === 1;
+		win.scrollTop( 0 );
+		scrollTopSupport = function() {
+			return support;
+		};
+		return support;
+	};
+
+module( "position", {
+	setup: function() {
+		win.scrollTop( 0 ).scrollLeft( 0 );
+	}
+});
 
-module( "position" );
+TestHelpers.testJshint( "ui.position" );
 
 test( "my, at, of", function() {
+	expect( 4 );
+
 	$( "#elx" ).position({
 		my: "left top",
 		at: "left top",
@@ -42,59 +55,61 @@ test( "my, at, of", function() {
 });
 
 test( "multiple elements", function() {
-	var elements = $( "#el1, #el2" );
-	var result = elements.position({
-		my: "left top",
-		at: "left bottom",
-		of: "#parent",
-		collision: "none"
-	});
+	expect( 3 );
+
+	var elements = $( "#el1, #el2" ),
+		result = elements.position({
+			my: "left top",
+			at: "left bottom",
+			of: "#parent",
+			collision: "none"
+		}),
+		expected = { top: 10, left: 4 };
 
 	deepEqual( result, elements );
-	var expected = { top: 10, left: 4 };
 	elements.each(function() {
 		deepEqual( $( this ).offset(), expected );
 	});
 });
 
 test( "positions", function() {
-	var definitions = [];
+	expect( 18 );
+
 	var offsets = {
-		left: 0,
-		center: 3,
-		right: 6,
-		top: 0,
-		bottom: 6
-	};
-	var start = { left: 4, top: 4 };
+			left: 0,
+			center: 3,
+			right: 6,
+			top: 0,
+			bottom: 6
+		},
+		start = { left: 4, top: 4 },
+		el = $( "#el1" );
+
 	$.each( [ 0, 1 ], function( my ) {
 		$.each( [ "top", "center", "bottom" ], function( vindex, vertical ) {
 			$.each( [ "left", "center", "right" ], function( hindex, horizontal ) {
-				definitions.push({
-					my: my ? horizontal + " " + vertical : "left top",
-					at: !my ? horizontal + " " + vertical : "left top",
-					result: {
-						top: my ? start.top - offsets[ vertical ] : start.top + offsets[ vertical ],
-						left: my ? start.left - offsets[ horizontal ] : start.left + offsets[ horizontal ]
-					}
+				var _my = my ? horizontal + " " + vertical : "left top",
+					_at = !my ? horizontal + " " + vertical : "left top";
+				el.position({
+					my: _my,
+					at: _at,
+					of: "#parent",
+					collision: "none"
 				});
+				deepEqual( el.offset(), {
+					top: start.top + offsets[ vertical ] * (my ? -1 : 1),
+					left: start.left + offsets[ horizontal ] * (my ? -1 : 1)
+				}, "Position via " + QUnit.jsDump.parse({ my: _my, at: _at }) );
 			});
 		});
 	});
-	var el = $( "#el1" );
-	$.each( definitions, function( index, definition ) {
-		el.position({
-			my: definition.my,
-			at: definition.at,
-			of: "#parent",
-			collision: "none"
-		});
-		deepEqual( el.offset(), definition.result,
-			"Position via " + QUnit.jsDump.parse({ my:definition.my, at:definition.at }) );
-	});
 });
 
 test( "of", function() {
+	expect( 9 + (scrollTopSupport() ? 1 : 0) );
+
+	var event;
+
 	$( "#elx" ).position({
 		my: "left top",
 		at: "left top",
@@ -141,7 +156,7 @@ test( "of", function() {
 		left: $( document ).width() - 10
 	}, "document as jQuery object" );
 
-	$( window ).scrollTop( 0 );
+	win.scrollTop( 0 );
 
 	$( "#elx" ).position({
 		my: "right bottom",
@@ -150,23 +165,23 @@ test( "of", function() {
 		collision: "none"
 	});
 	deepEqual( $( "#elx" ).offset(), {
-		top: $( window ).height() - 10,
-		left: $( window ).width() - 10
+		top: win.height() - 10,
+		left: win.width() - 10
 	}, "window" );
 
 	$( "#elx" ).position({
 		my: "right bottom",
 		at: "right bottom",
-		of: $( window ),
+		of: win,
 		collision: "none"
 	});
 	deepEqual( $( "#elx" ).offset(), {
-		top: $( window ).height() - 10,
-		left: $( window ).width() - 10
+		top: win.height() - 10,
+		left: win.width() - 10
 	}, "window as jQuery object" );
 
 	if ( scrollTopSupport() ) {
-		$( window ).scrollTop( 500 ).scrollLeft( 200 );
+		win.scrollTop( 500 ).scrollLeft( 200 );
 		$( "#elx" ).position({
 			my: "right bottom",
 			at: "right bottom",
@@ -174,13 +189,13 @@ test( "of", function() {
 			collision: "none"
 		});
 		deepEqual( $( "#elx" ).offset(), {
-			top: $( window ).height() + 500 - 10,
-			left: $( window ).width() + 200 - 10
+			top: win.height() + 500 - 10,
+			left: win.width() + 200 - 10
 		}, "window, scrolled" );
-		$( window ).scrollTop( 0 ).scrollLeft( 0 );
+		win.scrollTop( 0 ).scrollLeft( 0 );
 	}
 
-	var event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } );
+	event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } );
 	$( "#elx" ).position({
 		my: "left top",
 		at: "left top",
@@ -206,6 +221,8 @@ test( "of", function() {
 });
 
 test( "offsets", function() {
+	expect( 4 );
+
 	$( "#elx" ).position({
 		my: "left top",
 		at: "left+10 bottom+10",
@@ -240,11 +257,30 @@ test( "offsets", function() {
 });
 
 test( "using", function() {
-	expect( 6 );
+	expect( 10 );
 
 	var count = 0,
 		elems = $( "#el1, #el2" ),
-		expectedPosition = { top: 40, left: 40 },
+		of = $( "#parentx" ),
+		expectedPosition = { top: 60, left: 60 },
+		expectedFeedback = {
+			target: {
+				element: of,
+				width: 20,
+				height: 20,
+				left: 40,
+				top: 40
+			},
+			element: {
+				width: 6,
+				height: 6,
+				left: 60,
+				top: 60
+			},
+			horizontal: "left",
+			vertical: "top",
+			important: "vertical"
+		},
 		originalPosition = elems.position({
 			my: "right bottom",
 			at: "rigt bottom",
@@ -254,11 +290,14 @@ test( "using", function() {
 
 	elems.position({
 		my: "left top",
-		at: "left top",
+		at: "center+10 bottom",
 		of: "#parentx",
-		using: function( position ) {
+		using: function( position, feedback ) {
 			deepEqual( this, elems[ count ], "correct context for call #" + count );
 			deepEqual( position, expectedPosition, "correct position for call #" + count );
+			deepEqual( feedback.element.element[ 0 ], elems[ count ] );
+			delete feedback.element.element;
+			deepEqual( feedback, expectedFeedback );
 			count++;
 		}
 	});
@@ -272,7 +311,7 @@ function collisionTest( config, result, msg ) {
 	var elem = $( "#elx" ).position( $.extend({
 		my: "left top",
 		at: "right bottom",
-		of: window
+		of: "#parent"
 	}, config ) );
 	deepEqual( elem.offset(), result, msg );
 }
@@ -284,239 +323,340 @@ function collisionTest2( config, result, msg ) {
 	}, config ), result, msg );
 }
 
-test( "collision: fit, no offset", function() {
+test( "collision: fit, no collision", function() {
+	expect( 2 );
+
 	collisionTest({
 		collision: "fit"
-	}, { top: $( window ).height() - 10, left: $( window ).width() - 10 }, "right bottom" );
+	}, {
+		top: 10,
+		left: 10
+	}, "no offset" );
 
-	collisionTest2({
-		collision: "fit"
-	}, { top: 0, left: 0 }, "left top" );
-});
-
-test( "collision: fit, with offset", function() {
 	collisionTest({
 		collision: "fit",
 		at: "right+2 bottom+3"
-	}, { top: $(window).height() - 10, left: $(window).width() - 10 }, "right bottom");
+	}, {
+		top: 13,
+		left: 12
+	}, "with offset" );
+});
+
+test( "collision: fit, collision", function() {
+	expect( 2 + (scrollTopSupport() ? 1 : 0) );
 
 	collisionTest2({
-		collision: "fit",
-		at: "left+2 top+3"
-	}, { top: 0, left: 0 }, "left top, positive offset" );
+		collision: "fit"
+	}, {
+		top: 0,
+		left: 0
+	}, "no offset" );
 
 	collisionTest2({
 		collision: "fit",
-		at: "left-2 top-3"
-	}, { top: 0, left: 0 }, "left top, negative offset" );
-});
+		at: "left+2 top+3"
+	}, {
+		top: 0,
+		left: 0
+	}, "with offset" );
 
-test( "collision: fit, window scrolled", function() {
 	if ( scrollTopSupport() ) {
-		var win = $( window );
 		win.scrollTop( 300 ).scrollLeft( 200 );
-
 		collisionTest({
-			collision: "fit",
-			at: "left-100 top-100"
-		}, { top: 300, left: 200 }, "top left" );
-		collisionTest2({
-			collision: "fit",
-			at: "right+100 bottom+100"
-		}, { top: 300 + win.height() - 10, left: 200 + win.width() - 10 }, "right bottom" );
+			collision: "fit"
+		}, {
+			top: 300,
+			left: 200
+		}, "window scrolled" );
 
 		win.scrollTop( 0 ).scrollLeft( 0 );
 	}
 });
 
-test( "collision: flip, no offset", function() {
-	collisionTest({
-		collision: "flip"
-	}, { top: $( window ).height(), left: $( window ).width() }, "left top" );
+test( "collision: flip, no collision", function() {
+	expect( 2 );
 
-	collisionTest2({
+	collisionTest({
 		collision: "flip"
-	}, { top: -10, left: -10 }, "right bottom" );
-});
+	}, {
+		top: 10,
+		left: 10
+	}, "no offset" );
 
-test( "collision: flip, with offset", function() {
 	collisionTest({
 		collision: "flip",
 		at: "right+2 bottom+3"
-	}, { top: $( window ).height() + 3, left: $( window ).width() + 2 }, "left top, with offset added" );
+	}, {
+		top: 13,
+		left: 12
+	}, "with offset" );
+});
+
+test( "collision: flip, collision", function() {
+	expect( 2 );
 
 	collisionTest2({
-		collision: "flip",
-		at: "left+2 top+3"
-	}, { top: -7, left: -8 }, "bottom, positive offset" );
+		collision: "flip"
+	}, {
+		top: 10,
+		left: 10
+	}, "no offset" );
 
 	collisionTest2({
 		collision: "flip",
-		at: "left-2 top-3"
-	}, { top: -13, left: -12 }, "right bottom, negative offset" );
+		at: "left+2 top+3"
+	}, {
+		top: 7,
+		left: 8
+	}, "with offset" );
 });
 
-test( "collision: none, no offset", function() {
+test( "collision: flipfit, no collision", function() {
+	expect( 2 );
+
 	collisionTest({
-		collision: "none"
-	}, { top: $( window ).height(), left: $( window ).width() }, "left top" );
+		collision: "flipfit"
+	}, {
+		top: 10,
+		left: 10
+	}, "no offset" );
+
+	collisionTest({
+		collision: "flipfit",
+		at: "right+2 bottom+3"
+	}, {
+		top: 13,
+		left: 12
+	}, "with offset" );
+});
+
+test( "collision: flipfit, collision", function() {
+	expect( 2 );
 
 	collisionTest2({
-		collision: "none"
-	}, { top: -10, left: -10 }, "moved to the right bottom" );
+		collision: "flipfit"
+	}, {
+		top: 10,
+		left: 10
+	}, "no offset" );
+
+	collisionTest2({
+		collision: "flipfit",
+		at: "left+2 top+3"
+	}, {
+		top: 7,
+		left: 8
+	}, "with offset" );
 });
 
-test( "collision: none, with offset", function() {
+test( "collision: none, no collision", function() {
+	expect( 2 );
+
+	collisionTest({
+		collision: "none"
+	}, {
+		top: 10,
+		left: 10
+	}, "no offset" );
+
 	collisionTest({
 		collision: "none",
 		at: "right+2 bottom+3"
-	}, { top: $( window ).height() + 3, left: $( window ).width() + 2 }, "right bottom, with offset added" );
+	}, {
+		top: 13,
+		left: 12
+	}, "with offset" );
+});
+
+test( "collision: none, collision", function() {
+	expect( 2 );
 
 	collisionTest2({
-		collision: "none",
-		at: "left+2 top+3"
-	}, { top: -7, left: -8 }, "left top, positive offset" );
+		collision: "none"
+	}, {
+		top: -6,
+		left: -6
+	}, "no offset" );
 
 	collisionTest2({
 		collision: "none",
-		at: "left-2 top-3"
-	}, { top: -13, left: -12 }, "left top, negative offset" );
+		at: "left+2 top+3"
+	}, {
+		top: -3,
+		left: -4
+	}, "with offset" );
 });
 
 test( "collision: fit, with margin", function() {
-	$( "#elx" ).css( "margin", 10 );
-
-	collisionTest({
-		collision: "fit"
-	}, { top: $( window ).height() - 20, left: $( window ).width() - 20 }, "right bottom" );
-
-	collisionTest2({
-		collision: "fit"
-	}, { top: 10, left: 10 }, "left top" );
+	expect( 2 );
 
 	$( "#elx" ).css({
-		"margin-left": 5,
-		"margin-top": 5
+		marginTop: 6,
+		marginLeft: 4
 	});
 
 	collisionTest({
 		collision: "fit"
-	}, { top: $( window ).height() - 20, left: $( window ).width() - 20 }, "right bottom" );
+	}, {
+		top: 10,
+		left: 10
+	}, "right bottom" );
 
 	collisionTest2({
 		collision: "fit"
-	}, { top: 5, left: 5 }, "left top" );
+	}, {
+		top: 6,
+		left: 4
+	}, "left top" );
+});
+
+test( "collision: flip, with margin", function() {
+	expect( 3 );
 
 	$( "#elx" ).css({
-		"margin-right": 15,
-		"margin-bottom": 15
+		marginTop: 6,
+		marginLeft: 4
 	});
 
 	collisionTest({
-		collision: "fit"
-	}, { top: $( window ).height() - 25, left: $( window ).width() - 25 }, "right bottom" );
+		collision: "flip"
+	}, {
+		top: 10,
+		left: 10
+	}, "left top" );
 
 	collisionTest2({
-		collision: "fit"
-	}, { top: 5, left: 5 }, "left top" );
-});
-
-test( "collision: flip, with margin", function() {
-	$( "#elx" ).css( "margin", 10 );
-
-	collisionTest({
-		collision: "flip",
-		at: "left top"
-	}, { top: 0, left: 0 }, "left top" );
+		collision: "flip"
+	}, {
+		top: 10,
+		left: 10
+	}, "right bottom" );
 
 	collisionTest2({
 		collision: "flip",
-		at: "right bottom"
-	}, { top: $( window ).height() - 10, left: $( window ).width() - 10 }, "right bottom" );
+		my: "left top"
+	}, {
+		top: 0,
+		left: 4
+	}, "right bottom" );
 });
 
-test( "addClass: flipped left", function() {
-	var elem = $( "#elx" ).position( {
-		my: "left center",
-		of: window,
-		collision: "flip",
-		at: "right center"
-	});
-
-	deepEqual( elem.hasClass( 'ui-flipped-left' ), false, 'Has ui-flipped-left class' );
+test( "within", function() {
+	expect( 6 );
 
-	elem.position( {
-		my: "right center",
-		of: window,
-		collision: "flip",
-		at: "left center"
-	})
+	collisionTest({
+		within: "#within",
+		collision: "fit"
+	}, {
+		top: 4,
+		left: 2
+	}, "fit - right bottom" );
 
-	deepEqual( elem.hasClass( 'ui-flipped-left' ), false, 'Removed ui-flipped-left class' );
-});
+	collisionTest2({
+		within: "#within",
+		collision: "fit"
+	}, {
+		top: 2,
+		left: 0
+	}, "fit - left top" );
 
-test( "addClass: flipped top", function() {
-	var elem = $( "#elx" ).position( {
-		my: "left top",
-		of: window,
-		collision: "flip",
-		at: "right bottom"
-	});
+	collisionTest({
+		within: "#within",
+		collision: "flip"
+	}, {
+		top: 10,
+		left: -6
+	}, "flip - right bottom" );
 
-	deepEqual( elem.hasClass( 'ui-flipped-top' ), false, 'Has ui-flipped-top class' );
+	collisionTest2({
+		within: "#within",
+		collision: "flip"
+	}, {
+		top: 10,
+		left: -6
+	}, "flip - left top" );
 
-	elem.position( {
-		my: "left bottom",
-		of: window,
-		collision: "flip",
-		at: "right top"
-	});
+	collisionTest({
+		within: "#within",
+		collision: "flipfit"
+	}, {
+		top: 4,
+		left: 0
+	}, "flipfit - right bottom" );
 
-	deepEqual( elem.hasClass( 'ui-flipped-top' ), false, 'Removed ui-flipped-top class' );
+	collisionTest2({
+		within: "#within",
+		collision: "flipfit"
+	}, {
+		top: 4,
+		left: 0
+	}, "flipfit - left top" );
 });
 
-test( "addClass: flipped right", function() {
-	var elem = $( "#elx" ).position( {
-		my: "right center",
-		of: window,
-		collision: "flip",
-		at: "left center"
+test( "with scrollbars", function() {
+	expect( 4 );
+
+	$( "#scrollx" ).css({
+		width: 100,
+		height: 100,
+		left: 0,
+		top: 0
 	});
 
-	deepEqual( elem.hasClass( 'ui-flipped-right' ), false, 'Has ui-flipped-right class' );
+	collisionTest({
+		of: "#scrollx",
+		collision: "fit",
+		within: "#scrollx"
+	}, {
+		top: 90,
+		left: 90
+	}, "visible" );
 
-	elem.position( {
-		my: "left center",
-		of: window,
-		collision: "flip",
-		at: "right center"
+	$( "#scrollx" ).css({
+		overflow: "scroll"
 	});
 
-	deepEqual( elem.hasClass( 'ui-flipped-right' ), false, 'Removed ui-flipped-right class' );
+	var scrollbarInfo = $.position.getScrollInfo( $.position.getWithinInfo( $( "#scrollx" ) ) );
 
-});
+	collisionTest({
+		of: "#scrollx",
+		collision: "fit",
+		within: "#scrollx"
+	}, {
+		top: 90 - scrollbarInfo.height,
+		left: 90 - scrollbarInfo.width
+	}, "scroll" );
 
-test( "addClass: flipped bottom", function() {
-	var elem = $( "#elx" ).position( {
-		my: "left bottom",
-		of: window,
-		collision: "flip",
-		at: "right top"
+	$( "#scrollx" ).css({
+		overflow: "auto"
 	});
 
-	deepEqual( elem.hasClass( 'ui-flipped-bottom' ), false, 'Has ui-flipped-bottom class' );
+	collisionTest({
+		of: "#scrollx",
+		collision: "fit",
+		within: "#scrollx"
+	}, {
+		top: 90,
+		left: 90
+	}, "auto, no scroll" );
 
-	elem.position( {
-		my: "left top",
-		of: window,
-		collision: "flip",
-		at: "right bottom"
-	});
+	$( "#scrollx" ).css({
+		overflow: "auto"
+	}).append( $("<div>").height(300).width(300) );
 
-	deepEqual( elem.hasClass( 'ui-flipped-bottom' ), false, 'Removed ui-flipped-bottom class' );
+	collisionTest({
+		of: "#scrollx",
+		collision: "fit",
+		within: "#scrollx"
+	}, {
+		top: 90 - scrollbarInfo.height,
+		left: 90 - scrollbarInfo.width
+	}, "auto, with scroll" );
 });
 
 test( "fractions", function() {
+	expect( 1 );
+
 	$( "#fractions-element" ).position({
 		my: "left top",
 		at: "left top",
@@ -527,6 +667,8 @@ test( "fractions", function() {
 });
 
 test( "bug #5280: consistent results (avoid fractional values)", function() {
+	expect( 1 );
+
 	var wrapper = $( "#bug-5280" ),
 		elem = wrapper.children(),
 		offset1 = elem.position({
diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js
deleted file mode 100644
index 9dc91238f..000000000
--- a/tests/unit/position/position_core_within.js
+++ /dev/null
@@ -1,545 +0,0 @@
-(function( $ ) {
-
-function scrollTopSupport() {
-	$( window ).scrollTop( 1 );
-	return $( window ).scrollTop() === 1;
-}
-
-module( "position - within", {
-	setup: function(){
-		$("#within-container").css({"width": "70px", "height": "70px", "top": "20px", "left": "20px", "position": "relative"}).show();
-	}
-});
-
-var addTop = -20,
-	addLeft = -20;
-
-$.fn.addOffsets = function() {
-	var elOffset = this.offset(),
-		offset = $("#within-container").offset();
-
-	elOffset.top -= offset.top;
-	elOffset.left -= offset.left;
-
-	return {top: elOffset.top - offset.top, left: elOffset.left - offset.left };
-};
-
-test( "my, at, of", function() {
-	var within = $("#within-container");
-
-	$( "#elx" ).position({
-		my: "left top",
-		at: "left top",
-		of: "#parentx",
-		collision: "none",
-		within: within
-	});
-	deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "left top, left top" );
-
-	$( "#elx" ).position({
-		my: "left top",
-		at: "left bottom",
-		of: "#parentx",
-		collision: "none",
-		within: within
-	});
-	deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "left top, left bottom" );
-
-	$( "#elx" ).position({
-		my: "left",
-		at: "bottom",
-		of: "#parentx",
-		collision: "none",
-		within: within
-	});
-	deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 55, left: addLeft + 50 }, "left, bottom" );
-
-	$( "#elx" ).position({
-		my: "left foo",
-		at: "bar baz",
-		of: "#parentx",
-		collision: "none",
-		within: within
-	});
-	deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 45, left: addLeft +50 }, "left foo, bar baz" );
-});
-
-test( "multiple elements", function() {
-	var elements = $( "#el1, #el2" );
-	var result = elements.position({
-		my: "left top",
-		at: "left bottom",
-		of: "#parent",
-		collision: "none",
-		within: $("#within-container")
-	});
-
-	deepEqual( result, elements );
-	var expected = { top: addTop + 10, left: addLeft + 4 };
-	elements.each(function() {
-		deepEqual( $( this ).addOffsets(), expected );
-	});
-});
-
-test( "positions", function() {
-	var definitions = [];
-	var offsets = {
-		left: 0,
-		center: 3,
-		right: 6,
-		top: 0,
-		bottom: 6
-	};
-	var start = { left: 4, top: 4 };
-	$.each( [ 0, 1 ], function( my ) {
-		$.each( [ "top", "center", "bottom" ], function( vindex, vertical ) {
-			$.each( [ "left", "center", "right" ], function( hindex, horizontal ) {
-				definitions.push({
-					my: my ? horizontal + " " + vertical : "left top",
-					at: !my ? horizontal + " " + vertical : "left top",
-					result: {
-						top: addTop + (my ? start.top - offsets[ vertical ] : start.top + offsets[ vertical ]),
-						left: addLeft + (my ? start.left - offsets[ horizontal ] : start.left + offsets[ horizontal ])
-					}
-				});
-			});
-		});
-	});
-	var el = $( "#el1" );
-	$.each( definitions, function( index, definition ) {
-		el.position({
-			my: definition.my,
-			at: definition.at,
-			of: "#parent",
-			collision: "none",
-			within: $("#within-container")
-		});
-		deepEqual( el.addOffsets(), definition.result,
-			"Position via " + QUnit.jsDump.parse({ my:definition.my, at:definition.at }) );
-	});
-});
-
-test( "of", function() {
-	var within = $("#within-container");
-
-	$( "#elx" ).position({
-		my: "left top",
-		at: "left top",
-		of: "#parentx",
-		collision: "none",
-		within: within
-	});
-	deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "selector" );
-
-	$( "#elx" ).position({
-		my: "left top",
-		at: "left bottom",
-		of: $( "#parentx"),
-		collision: "none",
-		within: within
-	});
-	deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "jQuery object" );
-
-	$( "#elx" ).position({
-		my: "left top",
-		at: "left top",
-		of: $( "#parentx" )[ 0 ],
-		collision: "none",
-		within: within
-	});
-	deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "DOM element" );
-
-	var event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } );
-	$( "#elx" ).position({
-		my: "left top",
-		at: "left top",
-		of: event,
-		collision: "none",
-		within: within
-	});
-	deepEqual( $( "#elx" ).offset(), {
-		top: 300,
-		left: 200
-	}, "event - left top, left top" );
-
-	event = $.extend( $.Event( "someEvent" ), { pageX: 400, pageY: 600 } );
-	$( "#elx" ).position({
-		my: "left top",
-		at: "right bottom",
-		of: event,
-		collision: "none",
-		within: within
-	});
-	deepEqual( $( "#elx" ).offset(), {
-		top: 600,
-		left: 400
-	}, "event - left top, right bottom" );
-});
-
-test( "within:offsets", function() {
-	var within = $("#within-container");
-
-	$( "#elx" ).position({
-		my: "left top",
-		at: "left+10 bottom+10",
-		of: "#parentx",
-		collision: "none",
-		within: within
-	});
-	deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 70, left: addLeft + 50 }, "offsets in at" );
-
-	$( "#elx" ).position({
-		my: "left+10 top-10",
-		at: "left bottom",
-		of: "#parentx",
-		collision: "none",
-		within: within
-	});
-	deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 50, left: addLeft + 50 }, "offsets in my" );
-
-	$( "#elx" ).position({
-		my: "left top",
-		at: "left+50% bottom-10%",
-		of: "#parentx",
-		collision: "none",
-		within: within
-	});
-	deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 58, left: addLeft + 50 }, "percentage offsets in at" );
-
-	$( "#elx" ).position({
-		my: "left-30% top+50%",
-		at: "left bottom",
-		of: "#parentx",
-		collision: "none",
-		within: within
-	});
-	deepEqual( $( "#elx" ).addOffsets(), { top: addTop + 65, left: addLeft + 37 }, "percentage offsets in my" );
-});
-
-test( "using", function() {
-	expect( 6 );
-
-	var within = $("#within-container");
-
-	var count = 0,
-		elems = $( "#el1, #el2" ),
-		expectedPosition = { top: addTop + 40, left: addLeft + 40 },
-		originalPosition = elems.position({
-			my: "right bottom",
-			at: "right bottom",
-			of: "#parentx",
-			collision: "none",
-			within: within
-		}).addOffsets();
-
-	elems.position({
-		my: "left top",
-		at: "left top",
-		of: "#parentx",
-		using: function( position ) {
-			position.top -= within.offset().top;
-			position.left -= within.offset().left;
-			deepEqual( this, elems[ count ], "correct context for call #" + count );
-			deepEqual( position, expectedPosition, "correct position for call #" + count );
-			count++;
-		},
-		within: within
-	});
-
-	elems.each(function() {
-		deepEqual( $( this ).addOffsets(), originalPosition, "elements not moved" );
-	});
-});
-
-function collisionTest( config, result, msg ) {
-	var within = $("#within-container");
-
-	var elem = $( "#elx" ).position( $.extend({
-		my: "left top",
-		at: "right bottom",
-		of: "#parentx",
-		within: within
-	}, config ) );
-
-	deepEqual( elem.addOffsets(), result, msg );
-}
-
-function collisionTest2( config, result, msg ) {
-	collisionTest( $.extend({
-		my: "right bottom",
-		at: "left top"
-	}, config ), result, msg );
-}
-
-test( "collision: fit, no offset", function() {
-	var within = $("#within-container"),
-		of = $("#parentx");
-
-	collisionTest({
-		collision: "fit"
-	}, { top: addTop + of.position().top + of.height() - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - $.position.getScrollInfo( within ).width }, "right bottom" );
-
-	collisionTest2({
-		collision: "fit"
-	}, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "left top" );
-});
-
-
-test( "collision: fit, with offset", function() {
-	var within = $("#within-container"),
-		of = $("#parentx");
-
-	collisionTest({
-		collision: "fit",
-		at: "right+2 bottom+3"
-	}, { top: addTop + of.position().top + of.height() - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - $.position.getScrollInfo( within ).width }, "right bottom");
-
-	collisionTest2({
-		collision: "fit",
-		at: "left+2 top+3"
-	}, { top: addTop + of.position().top - 7, left: addLeft + of.position().left - 8 }, "left top, positive offset" );
-
-	collisionTest2({
-		collision: "fit",
-		at: "left-2 top-3"
-	}, { top: addTop + of.position().top - 13, left: addLeft + of.position().left - 12 }, "left top, negative offset" );
-});
-
-test( "collision: none, within scrolled", function() {
-	if ( scrollTopSupport() ) {
-		var within = $("#within-container").css({"width": "1000px", "height": "800px", "overflow": "auto"}),
-			of = $("#parentx");
-		within.scrollTop( 300 ).scrollLeft( 150 );
-
-		collisionTest({
-			collision: "none",
-			at: "left-100 top-100"
-		}, { top: of.offset().top + addTop - 100 - of.height(), left: of.offset().left + addLeft - 100 - of.width() }, "top left" );
-		collisionTest2({
-			collision: "none",
-			at: "right+100 bottom+100"
-		}, { top: of.offset().top + addTop + 100 - 10, left: of.offset().left + addLeft + 100 - 10 }, "right bottom" );
-		within.scrollTop( 0 ).scrollLeft( 0 );
-	}
-});
-
-test( "collision: flip, no offset", function() {
-	var within = $("#within-container"),
-		of = $("#parentx");
-
-	collisionTest({
-		collision: "flip"
-	}, { top: addTop + of.position().top + of.height(), left: addLeft + of.position().left + of.width() }, "left top" );
-
-	collisionTest2({
-		collision: "flip"
-	}, { top: addTop + of.position().top - 10, left: addTop + of.position().top - 10 }, "right bottom" );
-});
-
-test( "collision: flip, with offset", function() {
-	var within = $("#within-container"),
-		of = $("#parentx");
-
-	collisionTest({
-		collision: "flip",
-		at: "right+2 bottom+3"
-	}, { top: addTop + of.position().top - 13, left: addLeft + of.position().left - 12 }, "left top, with offset added" );
-
-	collisionTest2({
-		collision: "flip",
-		at: "left+2 top+3"
-	}, { top: addTop + of.position().top - 10 + 3, left: addLeft + of.position().left - 10 + 2 }, "right bottom, positive offset" );
-
-	collisionTest2({
-		collision: "flip",
-		at: "left-2 top-3"
-	}, { top: addTop + of.position().top - 13, left: addLeft + of.position().left - 12 }, "right bottom, negative offset" );
-});
-
-test( "collision: none, no offset", function() {
-	var within = $("#within-container"),
-		of = $("#parentx");
-
-	collisionTest({
-		collision: "none"
-	}, { top: addTop + of.position().top + of.height(), left: addLeft + of.position().left + of.width() }, "left top" );
-
-	collisionTest2({
-		collision: "none"
-	}, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "right bottom" );
-});
-
-test( "collision: none, with offset", function() {
-	var within = $("#within-container"),
-		of = $("#parentx");
-
-	collisionTest({
-		collision: "none",
-		at: "right+2 bottom+3"
-	}, { top: addTop + of.position().top + of.height() + 3, left: addLeft + of.position().left + of.width() + 2 }, "right bottom, with offset added" );
-
-	collisionTest2({
-		collision: "none",
-		at: "left+2 top+3"
-	}, { top: addTop + of.position().top - 7, left: addTop + of.position().top - 8 }, "left top, positive offset" );
-
-	collisionTest2({
-		collision: "none",
-		at: "left-2 top-3"
-	}, { top: addTop + of.position().top - 13, left: addTop + of.position().top - 12 }, "left top, negative offset" );
-});
-
-test( "collision: fit, with margin", function() {
-	var within = $("#within-container"),
-		of = $("#parentx");
-
-	$( "#elx" ).css( "margin", 10 );
-
-	collisionTest({
-		collision: "fit"
-	}, { top: addTop + of.position().top + of.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" );
-
-	collisionTest2({
-		collision: "fit"
-	}, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "left top" );
-
-	$( "#elx" ).css({
-		"margin-left": 5,
-		"margin-top": 5
-	});
-
-	collisionTest({
-		collision: "fit"
-	}, { top: addTop + of.position().top + of.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" );
-
-	collisionTest2({
-		collision: "fit"
-	}, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "left top" );
-
-	$( "#elx" ).css({
-		"margin-right": 15,
-		"margin-bottom": 15
-	});
-
-	collisionTest({
-		collision: "fit"
-	}, { top: addTop + of.position().top + of.height() - 15 - $.position.getScrollInfo( within ).height, left: addLeft + of.position().left + of.width() - 15 - $.position.getScrollInfo( within ).width }, "right bottom" );
-
-	collisionTest2({
-		collision: "fit"
-	}, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "left top" );
-});
-
-test( "collision: flip, with margin", function() {
-	var within = $("#within-container"),
-		of = $("#parentx");
-
-	$( "#elx" ).css( "margin", 10 );
-
-	collisionTest({
-		collision: "flip"
-	}, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "left top" );
-
-	collisionTest2({
-		collision: "flip"
-	}, { top: addTop + of.position().top - 10, left: addLeft + of.position().left - 10 }, "right bottom" );
-
-	$( "#elx" ).css( "margin", 0 );
-});
-
-test( "addClass: flipped left", function() {
-	var within = $("#within-container");
-
-	var elem = $( "#elx" ).position( {
-		my: "left center",
-		of: within[0],
-		within: within,
-		collision: "flip",
-		at: "right center"
-	});
-
-	deepEqual( elem.hasClass( 'ui-flipped-left' ), false, 'Has ui-flipped-left class' );
-
-	elem.position( {
-		my: "right center",
-		of: within[0],
-		within: within,
-		collision: "flip",
-		at: "left center"
-	})
-
-	deepEqual( elem.hasClass( 'ui-flipped-left' ), false, 'Removed ui-flipped-left class' );
-});
-
-test( "addClass: flipped top", function() {
-	var within = $("#within-container");
-
-	var elem = $( "#elx" ).position( {
-		my: "left top",
-		of: within[0],
-		within: within,
-		collision: "flip",
-		at: "right bottom"
-	});
-
-	deepEqual( elem.hasClass( 'ui-flipped-top' ), false, 'Has ui-flipped-top class' );
-
-	elem.position( {
-		my: "left bottom",
-		of: within[0],
-		within: within,
-		collision: "flip",
-		at: "right top"
-	});
-
-	deepEqual( elem.hasClass( 'ui-flipped-top' ), false, 'Removed ui-flipped-top class' );
-});
-
-test( "addClass: flipped right", function() {
-	var within = $("#within-container");
-
-	var elem = $( "#elx" ).position( {
-		my: "right center",
-		of: within[0],
-		within: within,
-		collision: "flip",
-		at: "left center"
-	});
-
-	deepEqual( elem.hasClass( 'ui-flipped-right' ), false, 'Has ui-flipped-right class' );
-
-	elem.position( {
-		my: "left center",
-		of: within[0],
-		within: within,
-		collision: "flip",
-		at: "right center"
-	});
-
-	deepEqual( elem.hasClass( 'ui-flipped-right' ), false, 'Removed ui-flipped-right class' );
-
-});
-
-test( "addClass: flipped bottom", function() {
-	var within = $("#within-container");
-
-	var elem = $( "#elx" ).position( {
-		my: "left bottom",
-		of: window,
-		collision: "flip",
-		at: "right top"
-	});
-
-	deepEqual( elem.hasClass( 'ui-flipped-bottom' ), false, 'Has ui-flipped-bottom class' );
-
-	elem.position( {
-		my: "left top",
-		of: window,
-		collision: "flip",
-		at: "right bottom"
-	});
-
-	deepEqual( elem.hasClass( 'ui-flipped-bottom' ), false, 'Removed ui-flipped-bottom class' );
-});
-
-}( jQuery ) );
diff --git a/tests/unit/position/position_deprecated.html b/tests/unit/position/position_deprecated.html
index ee9be189d..84aae61f8 100644
--- a/tests/unit/position/position_deprecated.html
+++ b/tests/unit/position/position_deprecated.html
@@ -5,63 +5,51 @@
 	<title>jQuery UI Position Test Suite</title>
 
 	<script src="../../jquery.js"></script>
-	<script src="../../resource_loader.js"></script>
-	<script>
-	loadResources({
-		js: [ "ui/jquery.ui.position.js" ]
-	});
-	</script>
+
+
 
 	<link rel="stylesheet" href="../../../external/qunit.css">
 	<script src="../../../external/qunit.js"></script>
 	<script src="../../jquery.simulate.js"></script>
 	<script src="../testsuite.js"></script>
+	<script>
+	TestHelpers.loadResources({
+		js: [ "ui/jquery.ui.position.js" ]
+	});
+	</script>
 
 	<script src="position_core.js"></script>
 	<script src="position_deprecated.js"></script>
-
 	<script src="../swarminject.js"></script>
 </head>
 <body>
-
-<h1 id="qunit-header">jQuery UI Position Test Suite</h1>
-<h2 id="qunit-banner"></h2>
-<div id="qunit-testrunner-toolbar"></div>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests"></ol>
+<div id="qunit" style="position:relative; z-index:2;"></div>
 
 <!--
-elements smaller than 10px have a line-height set on them to avoid a bug in IE6
+elements smaller than 20px have a line-height set on them to avoid a bug in IE6
 .height() returns the greater of the height and line-height
 -->
 
-<div id="qunit-fixture" style="top: 0; left: 0;">
+<div id="qunit-fixture" style="top: 0; left: 0; z-index:1">
 	<div id="el1" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
 	<div id="el2" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
 	<div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div>
-</div>
-
-<div style="position: absolute; top: 0px; left: 0px">
-	<div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
-	<div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div>
-</div>
+	<div id="within" style="position: absolute; width: 12px; height: 12px; top: 2px; left: 0px; line-height: 12px;"></div>
 
-<div style="position: absolute; top: 200px; left: 100px;">
-	<div id="el-offset-100-200" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
-	<div style="position: absolute; top: 100px; left: 50px;">
-		<div id="el-two-offset-150-300" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
-		<div id="el-fixed" style="position: fixed; top: 200px; left: 200px;"></div>
+	<div id="scrollx" style="position: absolute; top: 0px; left: 0px">
+		<div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
+		<div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div>
 	</div>
-</div>
 
-<div style="position: absolute; height: 5000px; width: 5000px;"></div>
+	<div style="position: absolute; height: 5000px; width: 5000px;"></div>
 
-<div id="bug-5280" style="height: 30px; width: 201px;">
-	<div style="width: 50px; height: 10px;"></div>
-</div>
+	<div id="fractions-parent" style="position: absolute; left: 10.7432222px; top: 10.532325px; height: 30px; width: 201px;">
+		<div id="fractions-element"></div>
+	</div>
 
-<div id="fractions-parent" style="position: absolute; left: 10.7432222px; top: 10.532325px; height: 30px; width: 201px;">
-	<div id="fractions-element"></div>
+	<div id="bug-5280" style="height: 30px; width: 201px;">
+		<div style="width: 50px; height: 10px;"></div>
+	</div>
 </div>
 
 </body>
author	Felix Nagel <info@felixnagel.com>	2012-05-14 11:52:47 +0200
committer	Felix Nagel <info@felixnagel.com>	2012-05-14 11:52:47 +0200
commit	c6a8d7ee3c9803d9944db6f55778810592a36452 (patch)
tree	abb3df79a0eb6d9bb4713ab73da8ddc60d8a7674 /tests/unit/position
parent	41dfb09aeb5df7d53089b58959d21207de63edbe (diff)
parent	d393c8b4cb26ec34878c22202da6ba9393e0094d (diff)
download	jquery-ui-c6a8d7ee3c9803d9944db6f55778810592a36452.tar.gz jquery-ui-c6a8d7ee3c9803d9944db6f55778810592a36452.zip