Resizable: containment now works with non - immediate children

Fixes #7485 Closes gh-1130
jquery · Dec 15, 2013 · c03cb80 · c03cb80
1 parent 38c6cf1
commit c03cb80
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html
@@ -44,6 +44,22 @@
 		height: 100px;
 		width: 100px;
 	}
+	#container2 {
+		position: relative;
+		width: 400px;
+		height: 400px;
+		margin: 30px 0 0 30px;
+	}
+	#parent {
+		position: relative;
+		width: 300px;
+		height: 300px;
+	}
+	#child {
+		position: relative;
+		width: 100px;
+		height: 100px;
+	}
 	</style>
 </head>
 <body>
@@ -58,6 +74,12 @@ <h2 id="qunit-userAgent"></h2>
 <div id="container">
 	<div id="resizable1">I'm a resizable.</div>
 </div>
+
+<div id="container2">
+	<div id="parent">
+		<div id="child">I'm a resizable.</div>
+	</div>
+</div>
 <img src="images/test.jpg" id="resizable2" alt="solid gray">
 
 </div>

diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/resizable_options.js
@@ -124,7 +124,7 @@ test("aspectRatio: 'preserve' (ne)", function() {
 });
 
 test( "containment", function() {
-	expect( 4 );
+	expect( 6 );
 	var element = $( "#resizable1" ).resizable({
 		containment: "#container"
 	});
@@ -136,6 +136,19 @@ 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" );
+
+	// http://bugs.jqueryui.com/ticket/7485 - Resizable: Containment calculation is wrong
+	// when containment element is not the immediate parent
+	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" );
+
+	TestHelpers.resizable.drag( ".ui-resizable-s", 0, 300 );
+	equal( element.height(), 400, "element able to resize itself to max allowable height within container" );
 });
 
 test("grid", function() {

diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js
@@ -792,8 +792,8 @@ $.ui.plugin.add("resizable", "containment", {
 		that.offset.left = that.parentData.left+that.position.left;
 		that.offset.top = that.parentData.top+that.position.top;
 
-		woset = Math.abs( (that._helper ? that.offset.left - cop.left : (that.offset.left - cop.left)) + that.sizeDiff.width );
-		hoset = Math.abs( (that._helper ? that.offset.top - cop.top : (that.offset.top - co.top)) + that.sizeDiff.height );
+		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 );
 
 		isParent = that.containerElement.get(0) === that.element.parent().get(0);
 		isOffsetRelative = /relative|absolute/.test(that.containerElement.css("position"));