Position: Fix scrollbar calculcation to correctly take overflow:scroll into account, along with unit tests

2 files changed, 62 insertions, 1 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 b567b7299..f15ea48cc 100644
--- a/tests/unit/position/position_core.js
+++ b/tests/unit/position/position_core.js
@@ -591,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 );