From 31a2633c52c1b9026bea8a6d2b220bb4d81e8bb1 Mon Sep 17 00:00:00 2001
From: Jyoti Deka <dekajp@gmail.com>
Date: Mon, 4 Aug 2014 07:29:11 -0400
Subject: [PATCH] Resizable : Width calculation is wrong

when containment element
is  position: relative and immediate parent Fixes - #10140
---
 tests/unit/resizable/resizable_options.js | 59 +++++++++++++++++++++--
 ui/resizable.js                           | 19 ++++----
 2 files changed, 66 insertions(+), 12 deletions(-)

diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/resizable_options.js
index 34fef47f02e..ba93e011376 100644
--- 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( 6 );
+	expect( 12 );
 	var element = $( "#resizable1" ).resizable({
 		containment: "#container"
 	});
@@ -176,10 +176,63 @@ test( "containment", function() {
 	});
 
 	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 Position ,Containment not parent - containment 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 Position ,Containment not parent - containment within container height" );
+
+	$("#container2").remove();
+	element = $( "<div id='container2'><div id='parent'><div id='child'>I m a resizable.</div></div></div>" ).appendTo( "body" );
+
+	$( "#child" ).css( { left : 50, top : 50 } );
+	$( "#parent" ).css( { left : 50, top : 50 } );
+	$( "#container2" ).css( { left : 50, top : 50 } );
+
+	element = $( "#child" ).resizable({
+		containment: "#container2",
+		handles: "all"
+	});
+
+	TestHelpers.resizable.drag( ".ui-resizable-e", 400, 0 );
+	equal( element.width(), 300, "Relative Position with Left location , Containment not parent  - containment within container width" );
+
+	TestHelpers.resizable.drag( ".ui-resizable-s", 0, 400 );
+	equal( element.height(), 300, "Relative Position with Top location , Containment not parent - containment within container height" );
+
+	$("#container2").remove();
+	element = $( "<div id='container2'><div id='parent'><div id='child'>I m a resizable.</div></div></div>" ).appendTo( "body" );
+
+
+	// http://bugs.jqueryui.com/ticket/10140 - Resizable: Width calculation is wrong when containment element is "position: relative"
+	// when containment element is  immediate parent
+	element = $( "#child" ).resizable({
+		containment: "parent",
+		handles: "all"
+	});
+
+	TestHelpers.resizable.drag( ".ui-resizable-e", 400, 0 );
+	equal( element.width(), 300, "Relative Position Containment is parent  - containment within container width" );
+
+	TestHelpers.resizable.drag( ".ui-resizable-s", 0, 400 );
+	equal( element.height(), 300, "Relative Position ,Containment is parent - containment within container height" );
+
+	$("#container2").remove();
+	element = $( "<div id='container2'><div id='parent'><div id='child'>I m a resizable.</div></div></div>" ).appendTo( "body" );
+
+	$( "#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 Position with Left location, Containment is parent  - containment within container width" );
+
+	TestHelpers.resizable.drag( ".ui-resizable-s", 0, 400 );
+	equal( element.height(), 250, "Relative Position with Top location, Containment is parent - containment within container height" );
 });
 
 test("grid", function() {
diff --git a/ui/resizable.js b/ui/resizable.js
index b59f3201309..09e51605b59 100644
--- a/ui/resizable.js
+++ b/ui/resizable.js
@@ -797,19 +797,20 @@ $.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;
-
-		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" ) );
-
-		if ( isParent && isOffsetRelative ) {
-			woset -= Math.abs( that.parentData.left );
+				
+		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;
 			if ( pRatio ) {