Draggable: Ensure overflow:visible containments are correctly measured

Fixes #7016

Author: mikesherov

tests/unit/draggable/draggable_options.js

@@ -374,6 +374,36 @@ test( "containment, account for border", function() {
 		"The draggable should be to the right of its parent's right border" );
 });
 
+// http://bugs.jqueryui.com/ticket/7016
+// draggable can be pulled out of containment in Chrome and IE8
+test( "containment, element cant be pulled out of container", function() {
+	expect( 1 );
+
+	var offsetBefore,
+		parent = $( "<div>").css({ width: 200, height: 200 }).appendTo( "#qunit-fixture" ),
+		element = $( "#draggable1" ).appendTo( parent );
+
+	element
+		.css({
+			height: "5px",
+			width: "5px"
+		})
+		.draggable({ containment: "parent" })
+		.simulate( "drag", {
+			dx: 200,
+			dy: 200
+		});
+
+	offsetBefore = element.offset();
+
+	element.simulate( "drag", {
+		dx: 200,
+		dy: 200
+	});
+
+	deepEqual( element.offset(), offsetBefore, "The draggable should not move past bottom right edge" );
+});
+
 test( "containment, default, switching after initialization", function() {
 	expect( 8 );
 

ui/draggable.js

@@ -439,7 +439,7 @@ $.widget("ui.draggable", $.ui.mouse, {
 
 	_setContainment: function() {
 
-		var over, c, ce,
+		var isUserScrollable, c, ce,
 			o = this.options,
 			document = this.document[ 0 ];
 
@@ -486,13 +486,23 @@ $.widget("ui.draggable", $.ui.mouse, {
 			return;
 		}
 
-		over = c.css( "overflow" ) !== "hidden";
+		isUserScrollable = /(scroll|auto)/.test( c.css( "overflow" ) );
 
 		this.containment = [
 			( parseInt( c.css( "borderLeftWidth" ), 10 ) || 0 ) + ( parseInt( c.css( "paddingLeft" ), 10 ) || 0 ),
 			( parseInt( c.css( "borderTopWidth" ), 10 ) || 0 ) + ( parseInt( c.css( "paddingTop" ), 10 ) || 0 ),
-			( over ? Math.max( ce.scrollWidth, ce.offsetWidth ) : ce.offsetWidth ) - ( parseInt( c.css( "borderRightWidth" ), 10 ) || 0 ) - ( parseInt( c.css( "paddingRight" ), 10 ) || 0 ) - this.helperProportions.width - this.margins.left - this.margins.right,
-			( over ? Math.max( ce.scrollHeight, ce.offsetHeight ) : ce.offsetHeight ) - ( parseInt( c.css( "borderBottomWidth" ), 10 ) || 0 ) - ( parseInt( c.css( "paddingBottom" ), 10 ) || 0 ) - this.helperProportions.height - this.margins.top  - this.margins.bottom
+			( isUserScrollable ? Math.max( ce.scrollWidth, ce.offsetWidth ) : ce.offsetWidth ) -
+				( parseInt( c.css( "borderRightWidth" ), 10 ) || 0 ) -
+				( parseInt( c.css( "paddingRight" ), 10 ) || 0 ) -
+				this.helperProportions.width -
+				this.margins.left -
+				this.margins.right,
+			( isUserScrollable ? Math.max( ce.scrollHeight, ce.offsetHeight ) : ce.offsetHeight ) -
+				( parseInt( c.css( "borderBottomWidth" ), 10 ) || 0 ) -
+				( parseInt( c.css( "paddingBottom" ), 10 ) || 0 ) -
+				this.helperProportions.height -
+				this.margins.top -
+				this.margins.bottom
 		];
 		this.relativeContainer = c;
 	},