Draggable Tests: Ensure Draggable tests are correctly testing offset under scroll conditions.

Author: mikesherov

tests/unit/draggable/draggable.html

@@ -8,8 +8,38 @@
 	<link rel="stylesheet" href="../../../external/qunit.css">
 
 	<style>
+		#main {
+			width: 1000px;
+			height: 1000px;
+			overflow: scroll;
+			overflow-x: scroll;
+			overflow-y: scroll;
+			position: relative;
+			left: 0;
+			top: 0;
+		}
+		#main-forceScrollable {
+			width: 1100px;
+			height: 1100px;
+		}
+		#scrollParent {
+			width: 1200px;
+			height: 1200px;
+			position: relative;
+			left: 0;
+			top: 0;
+			overflow: hidden;
+			overflow-x: hidden;
+			overflow-y: hidden;
+		}
+		#scrollParent-forceScrollable {
+			width: 1300px;
+			height: 1300px;
+		}
 		/* See #9077 */
-		#draggable3, #draggable4 { z-index: 100; }
+		#draggable3, #draggable4 {
+			z-index: 100;
+		}
 	</style>
 
 	<script src="../../../external/qunit.js"></script>
@@ -46,10 +76,14 @@ <h2 id="qunit-banner"></h2>
 <h2 id="qunit-userAgent"></h2>
 <ol id="qunit-tests"></ol>
 <div id="qunit-fixture">
-	<div id="main">
-		<div id="draggable1" style="background: green; width: 200px; height: 100px;">Relative</div>
-		<div id="draggable2" style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span><em>Absolute</em></span></div>
-		<div id="droppable" style="background: green; width: 200px; height: 100px; position: absolute; top: 110px; left: 110px;"><span>Absolute</span></div>
+	<div id="scrollParent">
+		<div id="main">
+			<div id="draggable1" style="background: green; width: 200px; height: 100px;">Relative</div>
+			<div id="draggable2" style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span><em>Absolute</em></span></div>
+			<div id="droppable" style="background: green; width: 200px; height: 100px; position: absolute; top: 110px; left: 110px;"><span>Absolute</span></div>
+			<div id="main-forceScrollable"></div>
+		</div>
+		<div id="scrollParent-forceScrollable"></div>
 	</div>
 	<div style="width: 1px; height: 1000px;"></div>
 	<div style="position: absolute; width: 1px; height: 2000px;"></div>

tests/unit/draggable/draggable_options.js

@@ -158,7 +158,7 @@ test( "axis, default, switching after initialization", function() {
 test( "{ cancel: 'input,textarea,button,select,option' }, default", function() {
 	expect( 2 );
 
-	$( "<div id='draggable-option-cancel-default'><input type='text'></div>" ).appendTo( "#main" );
+	$( "<div id='draggable-option-cancel-default'><input type='text'></div>" ).appendTo( "#qunit-fixture" );
 
 	var element = $( "#draggable-option-cancel-default" ).draggable({ cancel: "input,textarea,button,select,option" });
 	TestHelpers.draggable.shouldMove( element, "cancel: default, element dragged" );
@@ -230,7 +230,7 @@ test( "{ cancel: Selectors }, matching parent selector", function() {
 test( "cancelement, default, switching after initialization", function() {
 	expect( 2 );
 
-	$( "<div id='draggable-option-cancel-default'><input type='text'></div>" ).appendTo( "#main" );
+	$( "<div id='draggable-option-cancel-default'><input type='text'></div>" ).appendTo( "#qunit-fixture" );
 
 	var input = $( "#draggable-option-cancel-default input" ),
 		element = $( "#draggable-option-cancel-default" ).draggable();
@@ -346,7 +346,7 @@ test( "{ containment: 'parent' }, absolute", function() {
 test( "containment, account for border", function() {
 	expect( 2 );
 
-	var el = $("#draggable1").appendTo("#main"),
+	var el = $( "#draggable1" ).appendTo( "#scrollParent" ),
 		parent = el.parent().css({
 			height: "100px",
 			width: "100px",
@@ -368,9 +368,9 @@ test( "containment, account for border", function() {
 		dy: 100
 	});
 
-	equal( el.offset().top, parentBottom - parentBorderBottom - el.height(),
+	closeEnough( el.offset().top, parentBottom - parentBorderBottom - el.height(), 1,
 		"The draggable should be on top of its parent's bottom border" );
-	equal( el.offset().left, parentRight - parentBorderRight - el.width(),
+	closeEnough( el.offset().left, parentRight - parentBorderRight - el.width(), 1,
 		"The draggable should be to the right of its parent's right border" );
 });
 
@@ -381,13 +381,7 @@ test( "containment, default, switching after initialization", function() {
 
 	TestHelpers.draggable.testDrag( element, element, -100, -100, -100, -100, "containment: default" );
 
-	element.draggable( "option", "containment", "parent" )
-		.css({
-			top: 0,
-			left: 0
-		})
-		.appendTo( $( "#main" ) );
-
+	element.draggable( "option", "containment", "parent" ).css({ top: 0, left: 0 });
 	TestHelpers.draggable.testDrag( element, element, -100, -100, 0, 0, "containment: parent as option" );
 
 	element.draggable( "option", "containment", false );
@@ -666,7 +660,7 @@ test( "helper, default, switching after initialization", function() {
 	TestHelpers.draggable.shouldMove( element, "helper: default" );
 
 	element.draggable( "option", "helper", "clone" );
-	TestHelpers.draggable.shouldMovePositionButNotOffset( element, "helper: clone" );
+	TestHelpers.draggable.shouldMove( element, "helper: clone" );
 
 	element.draggable( "option", "helper", "original" );
 	TestHelpers.draggable.shouldMove( element, "helper: original" );
@@ -676,14 +670,14 @@ test( "{ helper: 'clone' }, relative", function() {
 	expect( 2 );
 
 	var element = $( "#draggable1" ).draggable({ helper: "clone" });
-	TestHelpers.draggable.shouldMovePositionButNotOffset( element, "helper: clone relative" );
+	TestHelpers.draggable.shouldMove( element, "helper: clone relative" );
 });
 
 test( "{ helper: 'clone' }, absolute", function() {
 	expect( 2 );
 
 	var element = $( "#draggable2" ).draggable({ helper: "clone" });
-	TestHelpers.draggable.shouldMovePositionButNotOffset( element, "helper: clone absolute" );
+	TestHelpers.draggable.shouldMove( element, "helper: clone absolute" );
 });
 
 test( "{ helper: 'original' }, relative, with scroll offset on parent", function() {
@@ -758,6 +752,26 @@ test( "{ helper: 'original' }, absolute, with scroll offset on parent", function
 	TestHelpers.draggable.restoreScroll( "#main" );
 });
 
+test( "{ helper: 'original' }, absolute, with scroll offset on grandparent", function() {
+	expect( 6 );
+
+	var element = $( "#draggable1" ).css({ position: "absolute", top: 0, left: 0 }).draggable({ helper: "original" });
+
+	TestHelpers.draggable.setScrollable( "#main", false );
+	TestHelpers.draggable.setScrollable( "#scrollParent", true );
+
+	TestHelpers.draggable.setScroll( "#scrollParent" );
+	TestHelpers.draggable.testScroll( element, "relative" );
+
+	TestHelpers.draggable.setScroll( "#scrollParent" );
+	TestHelpers.draggable.testScroll( element, "static" );
+
+	TestHelpers.draggable.setScroll( "#scrollParent" );
+	TestHelpers.draggable.testScroll( element, "absolute" );
+
+	TestHelpers.draggable.restoreScroll( "#scrollParent" );
+});
+
 test( "{ helper: 'original' }, absolute, with scroll offset on root", function() {
 	expect( 6 );
 
@@ -871,123 +885,61 @@ test( "{ helper: 'clone' }, absolute", function() {
 });
 
 test( "{ helper: 'clone' }, absolute with scroll offset on parent", function() {
-	expect( 3 );
+	expect( 6 );
 
-	TestHelpers.draggable.setScroll( "#main" );
-	var helperOffset = null,
-		origOffset = null,
-		element = $( "#draggable1" ).draggable({
-			helper: "clone",
-			drag: function( event, ui) {
-				helperOffset = ui.helper.offset();
-			}
+	var element = $( "#draggable1" ).draggable({
+			helper: "clone"
 		});
 
-	$( "#main" ).css( "position", "relative" );
-	origOffset = $( "#draggable1" ).offset();
-	element.simulate( "drag", {
-		dx: 1,
-		dy: 1
-	});
-	deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
+	TestHelpers.draggable.setScroll( "#main" );
+	TestHelpers.draggable.testScroll( element, "relative" );
 
-	$( "#main" ).css( "position", "static" );
-	origOffset = $( "#draggable1" ).offset();
-	element.simulate( "drag", {
-		dx: 1,
-		dy: 1
-	});
-	deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
+	TestHelpers.draggable.setScroll( "#main" );
+	TestHelpers.draggable.testScroll( element, "static" );
 
-	$( "#main" ).css( "position", "absolute" );
-	origOffset = $( "#draggable1" ).offset();
-	element.simulate( "drag", {
-		dx: 1,
-		dy: 1
-	});
-	deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
+	TestHelpers.draggable.setScroll( "#main" );
+	TestHelpers.draggable.testScroll( element, "absolute" );
 
 	TestHelpers.draggable.restoreScroll( "#main" );
 });
 
 test( "{ helper: 'clone' }, absolute with scroll offset on root", function() {
-	expect( 3 );
+	expect( 6 );
 
-	TestHelpers.draggable.setScroll( document );
-	var helperOffset = null,
-		origOffset = null,
-		element = $( "#draggable1" ).draggable({
-			helper: "clone",
-			drag: function( event, ui) {
-				helperOffset = ui.helper.offset();
-			}
+	var element = $( "#draggable1" ).draggable({
+			helper: "clone"
 		});
 
-	$( "#main" ).css( "position", "relative" );
-	origOffset = $( "#draggable1" ).offset();
-	element.simulate( "drag", {
-		dx: 1,
-		dy: 1
-	});
-	deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
+	TestHelpers.draggable.setScroll( document );
+	TestHelpers.draggable.testScroll( element, "relative" );
 
-	$( "#main" ).css( "position", "static" );
-	origOffset = $( "#draggable1" ).offset();
-	element.simulate( "drag", {
-		dx: 1,
-		dy: 1
-	});
-	deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
+	TestHelpers.draggable.setScroll( document );
+	TestHelpers.draggable.testScroll( element, "static" );
 
-	$( "#main" ).css( "position", "absolute" );
-	origOffset = $( "#draggable1" ).offset();
-	element.simulate( "drag", {
-		dx: 1,
-		dy: 1
-	});
-	deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
+	TestHelpers.draggable.setScroll( document );
+	TestHelpers.draggable.testScroll( element, "absolute" );
 
 	TestHelpers.draggable.restoreScroll( document );
 });
 
 test( "{ helper: 'clone' }, absolute with scroll offset on root and parent", function() {
-	expect( 3 );
-
-	TestHelpers.draggable.setScroll( document );
-	TestHelpers.draggable.setScroll( "#main" );
+	expect( 6 );
 
-	var helperOffset = null,
-		origOffset = null,
-		element = $( "#draggable1" ).draggable({
-			helper: "clone",
-			drag: function( event, ui) {
-				helperOffset = ui.helper.offset();
-			}
+	var element = $( "#draggable1" ).draggable({
+			helper: "clone"
 		});
 
-	$( "#main" ).css( "position", "relative" );
-	origOffset = $( "#draggable1" ).offset();
-	element.simulate( "drag", {
-		dx: 1,
-		dy: 1
-	});
-	deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
+	TestHelpers.draggable.setScroll( document );
+	TestHelpers.draggable.setScroll( "#main" );
+	TestHelpers.draggable.testScroll( element, "relative" );
 
-	$( "#main" ).css( "position", "static" );
-	origOffset = $( "#draggable1" ).offset();
-	element.simulate( "drag", {
-		dx: 1,
-		dy: 1
-	});
-	deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
+	TestHelpers.draggable.setScroll( document );
+	TestHelpers.draggable.setScroll( "#main" );
+	TestHelpers.draggable.testScroll( element, "static" );
 
-	$( "#main" ).css( "position", "absolute" );
-	origOffset = $( "#draggable1" ).offset();
-	element.simulate( "drag", {
-		dx: 1,
-		dy: 1
-	});
-	deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
+	TestHelpers.draggable.setScroll( document );
+	TestHelpers.draggable.setScroll( "#main" );
+	TestHelpers.draggable.testScroll( element, "absolute" );
 
 	TestHelpers.draggable.restoreScroll( document );
 	TestHelpers.draggable.restoreScroll( "#main" );
@@ -1098,8 +1050,10 @@ test( "scope", function() {
 test( "scroll, scrollSensitivity, and scrollSpeed", function() {
 	expect( 2 );
 
+	TestHelpers.draggable.setScrollable( "#main", false );
+
 	var viewportHeight = $( window ).height(),
-		element = $( "#draggable1" ).draggable({ scroll: true }),
+		element = $( "#draggable1" ).draggable({ scroll: true }).appendTo( "#qunit-fixture" ),
 		scrollSensitivity = element.draggable( "option", "scrollSensitivity" ),
 		scrollSpeed = element.draggable( "option", "scrollSpeed" );
 

tests/unit/draggable/draggable_test_helpers.js

@@ -20,8 +20,8 @@ TestHelpers.draggable = {
 		var offsetBefore = el.offset(),
 			offsetExpected = { left: offsetBefore.left + expectedDX, top: offsetBefore.top + expectedDY };
 
-		$( el ).one( "dragstop", function() {
-			deepEqual( el.offset(), offsetExpected, "offset dragged[" + dx + ", " + dy + "] " + msg );
+		$( el ).one( "dragstop", function( event, ui ) {
+			deepEqual( ui.helper.offset(), offsetExpected, "offset dragged[" + dx + ", " + dy + "] " + msg );
 		} );
 	},
 	testDrag: function( el, handle, dx, dy, expectedDX, expectedDY, msg ) {
@@ -68,9 +68,13 @@ TestHelpers.draggable = {
 		});
 		$( el ).unbind( "dragstop" );
 	},
+	setScrollable: function ( what, isScrollable ) {
+		var overflow = isScrollable ? "scroll" : "hidden";
+		$( what ).css({ overflow: overflow, overflowX: overflow, overflowY: overflow });
+	},
 	testScroll: function( el, position ) {
 		var oldPosition = $( "#main" ).css( "position" );
-		$( "#main" ).css( "position", position);
+		$( "#main" ).css({ position: position, top: "0px", left: "0px" });
 		TestHelpers.draggable.shouldMove( el, position + " parent" );
 		$( "#main" ).css( "position", oldPosition );
 	},