Position: Extend feedback test page to include two mouse-positioned elements, highlights the 0px center/middle limitation

Also rename the demo file to match the variables names, 'feedback', instead of 'notification'

1 files changed, 30 insertions, 10 deletions

diff --git a/tests/visual/position/position_notification.html b/tests/visual/position/position_feedback.html
index 810663c5e..0bb483e4b 100644
--- a/tests/visual/position/position_notification.html
+++ b/tests/visual/position/position_feedback.html
@@ -13,6 +13,15 @@
 	<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
 	<script type="text/javascript">
 	$(function() {
+		function using( position, feedback ) {
+			$(this).offset( position );
+			$(this).text(feedback.horizontal + " " + feedback.vertical + " " + feedback.important)
+			$(this)
+				.removeClass("left right top bottom center middle vertical horizontal")
+				.addClass(feedback.horizontal)
+				.addClass(feedback.vertical)
+				.addClass(feedback.important);
+		}
 		var target = $("#target").position({
 			my: "center",
 			at: "center",
@@ -37,18 +46,29 @@
 				my: "center",
 				at: direction,
 				of: target,
-				using: function( position, feedback ) {
-					$(this).offset( position );
-					$(this).text(feedback.horizontal + " " + feedback.vertical + " " + feedback.important)
-					$(this)
-						.removeClass("left right top bottom")
-						.addClass(feedback.horizontal)
-						.addClass(feedback.vertical)
-						.addClass(feedback.important);
-				}
+				using: using
 			})
 		});
-		element.remove();
+
+		var targetOffset = target.offset();
+		var oppositeElement = element.clone().width(50).appendTo('body');
+		element.width(150);
+		$(document).on( "mousemove", function(event) {
+			element.position({
+				my: "left top",
+				at: "left top",
+				of: target,
+				offset: (event.pageX - targetOffset.left) + " " + (event.pageY - targetOffset.top),
+				using: using
+			});
+			oppositeElement.position({
+				my: "left top",
+				at: "left top",
+				of: target,
+				offset: (-1 * (event.pageX - targetOffset.left)) + " " + (-1 * (event.pageY - targetOffset.top)),
+				using: using
+			});
+		} )
 	});
 	</script>
 	<style>