Tests: test element position outside view

Ref a0f5c35
Ref jquerygh-2828
Ref jquerygh-2836
Fixes jquerygh-2909

Author: markelog

test/data/testsuite.css

@@ -1,127 +1,127 @@
 /* for testing opacity set in styles in IE */
 ol#empty {
-	opacity: 0;
-	filter:Alpha(opacity=0) progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffff0000', EndColorStr='#ffffffff');
+    opacity: 0;
+    filter:Alpha(opacity=0) progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffff0000', EndColorStr='#ffffffff');
 }
 
 div#fx-tests h4 {
-	background: red;
+    background: red;
 }
 
 div#fx-tests h4.pass {
-	background: green;
+    background: green;
 }
 
 div#fx-tests div.box {
-	background: red;
-	overflow: hidden;
-	border: 2px solid #000;
+    background: red;
+    overflow: hidden;
+    border: 2px solid #000;
 }
 
 div#fx-tests div.overflow {
-	overflow: visible;
+    overflow: visible;
 }
 
 div.inline {
-	display: inline;
+    display: inline;
 }
 
 div.autoheight {
-	height: auto;
+    height: auto;
 }
 
 div.autowidth {
-	width: auto;
+    width: auto;
 }
 
 div.autoopacity {
-	opacity: auto;
+    opacity: auto;
 }
 
 div.largewidth {
-	width: 100px;
+    width: 100px;
 }
 
 div.largeheight {
-	height: 100px;
+    height: 100px;
 }
 
 div.largeopacity {
-	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
+    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
 }
 
 div.medwidth {
-	width: 50px;
+    width: 50px;
 }
 
 div.medheight {
-	height: 50px;
+    height: 50px;
 }
 
 div.medopacity {
-	opacity: 0.5;
-	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
+    opacity: 0.5;
+    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
 }
 
 div.nowidth {
-	width: 0px;
+    width: 0px;
 }
 
 div.noheight {
-	height: 0px;
+    height: 0px;
 }
 
 div.noopacity {
-	opacity: 0;
-	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
+    opacity: 0;
+    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
 }
 
 div.hidden {
-	display: none;
+    display: none;
 }
 
 div#fx-tests div.widewidth {
-	background-repeat: repeat-x;
+    background-repeat: repeat-x;
 }
 
 div#fx-tests div.wideheight {
-	background-repeat: repeat-y;
+    background-repeat: repeat-y;
 }
 
 div#fx-tests div.widewidth.wideheight {
-	background-repeat: repeat;
+    background-repeat: repeat;
 }
 
 div#fx-tests div.noback {
-	background-image: none;
+    background-image: none;
 }
 
 .chain-test,
 .chain-test div {
-	width: 100px;
-	height: 20px;
-	position: relative;
-	float: left;
+    width: 100px;
+    height: 20px;
+    position: relative;
+    float: left;
 }
 .chain-test div {
-	position: absolute;
-	top: 0;
-	left: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
 .chain-test {
-	background: red;
+    background: red;
 }
 .chain-test div {
-	background: green;
+    background: green;
 }
 
 .chain-test-out {
-	background: green;
+    background: green;
 }
 .chain-test-out div {
-	background: red;
-	display: none;
+    background: red;
+    display: none;
 }
 
 /* tests to ensure jQuery can determine the native display mode of elements
@@ -159,7 +159,19 @@ section { background:#f0f; display:block; }
 
 /* fix get alpha opacity in IE8 */
 .fix-get-alpha-opacity-in-ie8 {
-	opacity: 0.5;
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+    opacity: 0.5;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+}
+
+#div-gh-2836 {
+    position: relative;
+    overflow: auto;
+    height: 100px;
+}
+#div-gh-2836 div {
+    position: relative;
+    height: 100%;
+    padding: 0;
+    margin: 0;
 }
 

test/unit/dimensions.js

@@ -497,4 +497,34 @@ QUnit.test( "allow modification of coordinates argument (gh-1848)", function( as
 		"coordinates are modified (got offset.top: " +  offsetTop + ")" );
 } );
 
+QUnit.test( "outside view position (gh-2836)", function( assert ) {
+
+	// This test ported from gh-2836 example
+	assert.expect( 1 );
+
+	var parent,
+		html = [
+		"<div id=div-gh-2836>",
+			"<div></div>",
+			"<div></div>",
+			"<div></div>",
+			"<div></div>",
+			"<div></div>",
+		"</div>"
+	].join( "" ),
+	stop = assert.async();
+
+	parent = $( html );
+	parent.appendTo( "#qunit-fixture" );
+
+	parent.one( "scroll", function() {
+		var pos = parent.find( "div" ).eq( 3 ).position();
+
+		assert.strictEqual(pos.top, -100);
+		stop();
+	});
+
+	parent.scrollTop( 400 );
+} );
+
 } )();