Merge branch 'position-notification'

10 files changed, 358 insertions, 16 deletions

diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html
index 518e1f960..2a6e43d36 100644
--- a/tests/unit/position/position.html
+++ b/tests/unit/position/position.html
@@ -43,7 +43,7 @@ elements smaller than 10px have a line-height set on them to avoid a bug in IE6
 	<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;"></div>
 
-	<div style="position: absolute; top: 0px; left: 0px">
+	<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>
diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js
index 837327b5d..e68e310f1 100644
--- a/tests/unit/position/position_core.js
+++ b/tests/unit/position/position_core.js
@@ -255,11 +255,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",
@@ -269,11 +288,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++;
 		}
 	});
@@ -569,6 +591,67 @@ test( "within", function() {
 	}, "flipfit - left top" );
 });
 
+test( "with scrollbars", function() {
+	expect( 4 );
+
+	$( "#scrollx" ).css({
+		width: 100,
+		height: 100,
+		left: 0,
+		top: 0
+	});
+
+	collisionTest({
+		of: "#scrollx",
+		collision: "fit",
+		within: "#scrollx"
+	}, {
+		top: 90,
+		left: 90
+	}, "visible" );
+
+	$( "#scrollx" ).css({
+		overflow: "scroll"
+	});
+
+	var scrollbarInfo = $.position.getScrollInfo( $.position.getWithinInfo( $( "#scrollx" ) ) );
+
+	collisionTest({
+		of: "#scrollx",
+		collision: "fit",
+		within: "#scrollx"
+	}, {
+		top: 90 - scrollbarInfo.height,
+		left: 90 - scrollbarInfo.width
+	}, "scroll" );
+
+	$( "#scrollx" ).css({
+		overflow: "auto"
+	});
+
+	collisionTest({
+		of: "#scrollx",
+		collision: "fit",
+		within: "#scrollx"
+	}, {
+		top: 90,
+		left: 90
+	}, "auto, no scroll" );
+
+	$( "#scrollx" ).css({
+		overflow: "auto"
+	}).append( $("<div>").height(300).width(300) );
+
+	collisionTest({
+		of: "#scrollx",
+		collision: "fit",
+		within: "#scrollx"
+	}, {
+		top: 90 - scrollbarInfo.height,
+		left: 90 - scrollbarInfo.width
+	}, "auto, with scroll" );
+});
+
 test( "fractions", function() {
 	expect( 1 );
 
diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html
index b9b769d9b..64c5d2300 100644
--- a/tests/visual/position/position.html
+++ b/tests/visual/position/position.html
@@ -10,23 +10,31 @@
 	<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" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
 	<script type="text/javascript">
 	$(function() {
 		var inputs = $("input");
 		$("ul").insertAfter(inputs);
 		$(window).resize(function() {
 			inputs.each(function() {
-				$(this).position({
+				var input = $(this).position({
 					my: this.id.replace(/-/, " "),
 					at: this.id.replace(/-/, " "),
 					of: "#container",
 					collision: "none"
 				});
-				$(this).next().menu().position({
-					my: "left top+20",
+				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();
@@ -44,11 +52,11 @@
 			top: -22px;
 			left: 5px;
 		}
-		.ui-flipped-left:before {
+		.right:before {
 			left: auto;
 			right: 5px;
 		}
-		.ui-flipped-top:before {
+		.bottom:before {
 			content: "↓";
 			top: auto;
 			bottom: -19px;
diff --git a/tests/visual/position/position_feedback.html b/tests/visual/position/position_feedback.html
new file mode 100644
index 000000000..006a1be02
--- /dev/null
+++ b/tests/visual/position/position_feedback.html
@@ -0,0 +1,146 @@
+<!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 ) {
+			$( this )
+				.css( position )
+				.text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important )
+				.removeClass( "left right top bottom center middle vertical horizontal" )
+				.addClass( feedback.horizontal )
+				.addClass( feedback.vertical )
+				.addClass( feedback.important );
+		}
+
+		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;
+	}
+	.element:before {
+		font-size: 12pt;
+		content: "↑";
+		position: absolute;
+		top: -19px;
+		left: 5px;
+	}
+	.right:before {
+		left: auto;
+		right: 5px;
+	}
+	.bottom:before {
+		content: "↓";
+		top: auto;
+		bottom: -19px;
+	}
+	.center:before {
+		left: 50%;
+		right: auto;
+	}
+	.middle:before {
+		top: 50%;
+		bottom: auto;
+	}
+	.horizontal:before {
+		height: 10px;
+		top: 50%;
+		margin-top: -8px;
+		bottom: auto;
+		left: -18px;
+		right: auto;
+		content: "←";
+	}
+	.right.horizontal:before {
+		left: auto;
+		right: -18px;
+		content: "→";
+	}
+	.bottom.horizontal:before {
+		top: auto;
+		bottom: 5px;
+	}
+	.top.horizontal:before {
+		top: 5px;
+	}
+	</style>
+</head>
+<body>
+
+<div id="target">all around me</div>
+<div class="element"></div>
+
+</body>
+</html>
diff --git a/tests/visual/position/position_feedback_rotate.html b/tests/visual/position/position_feedback_rotate.html
new file mode 100644
index 000000000..11138b112
--- /dev/null
+++ b/tests/visual/position/position_feedback_rotate.html
@@ -0,0 +1,109 @@
+<!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
index 9c60b78f6..dbd52550f 100644
--- a/tests/visual/position/position_fit.html
+++ b/tests/visual/position/position_fit.html
@@ -10,7 +10,6 @@
 	<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" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
 	<script type="text/javascript">
 	$(function() {
 		var inputs = $("input");
diff --git a/tests/visual/position/position_flip.html b/tests/visual/position/position_flip.html
index bae3c649b..29ad32f96 100644
--- a/tests/visual/position/position_flip.html
+++ b/tests/visual/position/position_flip.html
@@ -10,7 +10,6 @@
 	<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" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
 	<script type="text/javascript">
 	$(function() {
 		var inputs = $("input");
diff --git a/tests/visual/position/position_flipfit.html b/tests/visual/position/position_flipfit.html
index fcfb75b6b..fb99e4007 100644
--- a/tests/visual/position/position_flipfit.html
+++ b/tests/visual/position/position_flipfit.html
@@ -10,7 +10,6 @@
 	<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" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
 	<script type="text/javascript">
 	$(function() {
 		var inputs = $("input");
diff --git a/tests/visual/position/position_margin.html b/tests/visual/position/position_margin.html
index 71d8f0a3c..2e3b63266 100644
--- a/tests/visual/position/position_margin.html
+++ b/tests/visual/position/position_margin.html
@@ -9,7 +9,6 @@
 	<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="http://jqueryui.com/themeroller/themeswitchertool/"></script>
 	<script type="text/javascript">
 	$(function() {
 		$( "#elem" ).position({
diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html
index 7d8813582..692cb1067 100644
--- a/tests/visual/position/position_within.html
+++ b/tests/visual/position/position_within.html
@@ -97,7 +97,7 @@
                     collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
                 });
             }
-            $( ".demo" ).append("<div style='width:5000px;height:5000px;' />").css("overflow","auto");
+            $( ".demo" ).css("overflow","scroll");
 
             $( ".positionable" ).css( "opacity", 0.5 );