Resizable: Fix containment width with relative parent.

Refs #10140 Closes gh-1303
jquery · Aug 4, 2014 · 750a8fd · 750a8fd
1 parent 2779212
commit 750a8fd
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 15 deletions.
diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/resizable_options.js
@@ -155,7 +155,7 @@ test( "aspectRatio: Resizing can move objects", function() {
 });
 
 test( "containment", function() {
-	expect( 8 );
+	expect( 4 );
 
 	var element = $( "#resizable1" ).resizable({
 		containment: "#container"
@@ -168,32 +168,70 @@ test( "containment", function() {
 	TestHelpers.resizable.drag( ".ui-resizable-se", 400, 400 );
 	equal( element.width(), 300, "constrained width at containment edge" );
 	equal( element.height(), 200, "constrained height at containment edge" );
+});
+
+test( "containment - not immediate parent", function() {
+	expect( 4 );
 
 	// http://bugs.jqueryui.com/ticket/7485 - Resizable: Containment calculation is wrong
 	// when containment element is not the immediate parent
-	element = $( "#child" ).resizable({
+	var element = $( "#child" ).resizable({
 		containment: "#container2",
 		handles: "all"
 	});
 
 	TestHelpers.resizable.drag( ".ui-resizable-e", 300, 0 );
-	equal( element.width(), 400, "element able to resize itself to max allowable width within container" );
+	equal( element.width(), 400, "Relative, contained within container width" );
 
 	TestHelpers.resizable.drag( ".ui-resizable-s", 0, 300 );
-	equal( element.height(), 400, "element able to resize itself to max allowable height within container" );
+	equal( element.height(), 400, "Relative, contained within container height" );
+
+	$( "#child" ).css( { left: 50, top: 50 } );
+	$( "#parent" ).css( { left: 50, top: 50 } );
+	$( "#container2" ).css( { left: 50, top: 50 } );
 
-	// http://bugs.jqueryui.com/ticket/10140 - Resizable: Width calculation is wrong
-	// when containment element is "position: relative"
 	element = $( "#child" ).resizable({
+		containment: "#container2",
+		handles: "all"
+	});
+
+	TestHelpers.resizable.drag( ".ui-resizable-e", 400, 0 );
+	equal( element.width(), 300, "Relative with Left, contained within container width" );
+
+	TestHelpers.resizable.drag( ".ui-resizable-s", 0, 400 );
+	equal( element.height(), 300, "Relative with Top, contained within container height" );
+});
+
+test( "containment - immediate parent", function() {
+	expect( 4 );
+
+	// http://bugs.jqueryui.com/ticket/10140 - Resizable: Width calculation is wrong when containment element is "position: relative"
+	// when containment element is  immediate parent
+	var element = $( "#child" ).resizable({
 		containment: "parent",
 		handles: "all"
 	});
 
-	TestHelpers.resizable.drag( ".ui-resizable-e", 300, 0 );
-	equal( element.width(), 300, "element able to resize itself to max allowable width within container" );
+	TestHelpers.resizable.drag( ".ui-resizable-e", 400, 0 );
+	equal( element.width(), 300, "Relative, contained within container width" );
 
-	TestHelpers.resizable.drag( ".ui-resizable-s", 0, 300 );
-	equal( element.height(), 300, "element able to resize itself to max allowable height within container" );
+	TestHelpers.resizable.drag( ".ui-resizable-s", 0, 400 );
+	equal( element.height(), 300, "Relative, contained within container height" );
+
+	$( "#child" ).css( { left: 50, top: 50 } );
+	$( "#parent" ).css( { left: 50, top: 50 } );
+	$( "#container2" ).css( { left: 50, top: 50 } );
+
+	element = $( "#child" ).resizable({
+		containment: "parent",
+		handles: "all"
+	});
+
+	TestHelpers.resizable.drag( ".ui-resizable-e", 400, 0 );
+	equal( element.width(), 250, "Relative with Left, contained within container width" );
+
+	TestHelpers.resizable.drag( ".ui-resizable-s", 0, 400 );
+	equal( element.height(), 250, "Relative with Top, contained within container height" );
 });
 
 test("grid", function() {

diff --git a/ui/resizable.js b/ui/resizable.js
@@ -774,7 +774,7 @@ $.ui.plugin.add( "resizable", "containment", {
 	},
 
 	resize: function( event ) {
-		var woset, hoset,
+		var woset, hoset, isParent, isOffsetRelative,
 			that = $( this ).resizable( "instance" ),
 			o = that.options,
 			co = that.containerOffset,
@@ -809,11 +809,19 @@ $.ui.plugin.add( "resizable", "containment", {
 			that.position.top = that._helper ? co.top : 0;
 		}
 
-		that.offset.left = that.parentData.left + that.position.left;
-		that.offset.top = that.parentData.top + that.position.top;
+		isParent = that.containerElement.get( 0 ) === that.element.parent().get( 0 );
+		isOffsetRelative = /relative|absolute/.test( that.containerElement.css( "position" ) );
 
-		woset = Math.abs( ( that._helper ? that.offset.left - cop.left : ( that.offset.left - co.left ) ) + that.sizeDiff.width );
-		hoset = Math.abs( ( that._helper ? that.offset.top - cop.top : ( that.offset.top - co.top ) ) + that.sizeDiff.height );
+		if ( isParent && isOffsetRelative ) {
+			that.offset.left = that.parentData.left + that.position.left;
+			that.offset.top = that.parentData.top + that.position.top;
+		} else {
+			that.offset.left = that.element.offset().left;
+			that.offset.top = that.element.offset().top;
+		}
+
+		woset = Math.abs( (that._helper ? that.offset.left - cop.left : (that.offset.left - co.left)) + that.sizeDiff.width );
+		hoset = Math.abs( (that._helper ? that.offset.top - cop.top : (that.offset.top - co.top)) + that.sizeDiff.height );
 
 		if ( woset + that.size.width >= that.parentData.width ) {
 			that.size.width = that.parentData.width - woset;