Resizable: Fixed sign error on offset calculation. Fixes #9307 - Resizable: Erratic behavior of contained elements within scrollable grandparents

Author: Christian Klammer

tests/unit/resizable/resizable_events.js

@@ -170,4 +170,51 @@ test("stop", function() {
 
 });
 
+test( "resize (containment) works with parent with negative offset", function() {
+
+	expect( 1 );
+
+	var widthBefore, widthAfter,
+		handle = ".ui-resizable-e",
+		target = $( "#resizable1" ),
+		absoluteContainer = target.wrap( "<div />" ).parent(),
+		fixedContainer = absoluteContainer.wrap( "<div />" ).parent(),
+		increaseWidthBy = 50;
+
+	// position fixed container in window top left
+	fixedContainer.css({
+		width: 400,
+		height: 100,
+		position: "fixed",
+		top: 0,
+		left: 0
+	});
+
+	// position absolute container within fixed on slightly outside window
+	absoluteContainer.css({
+		width: 400,
+		height: 100,
+		position: "absolute",
+		top: 0,
+		left: -50
+	});
+
+	// set up resizable to be contained within absolute container
+	target.resizable({
+		handles: "all",
+		containment: "parent"
+	}).css({
+		width: 300
+	});
+
+	widthBefore = target.width();
+
+	TestHelpers.resizable.drag( handle, increaseWidthBy, 0 );
+
+	widthAfter = target.width();
+
+	equal( widthAfter, ( widthBefore + increaseWidthBy ), "resizable width should be increased by the value dragged" );
+
+});
+
 })(jQuery);

ui/jquery.ui.resizable.js

@@ -797,8 +797,8 @@ $.ui.plugin.add("resizable", "containment", {
 		isParent = that.containerElement.get(0) === that.element.parent().get(0);
 		isOffsetRelative = /relative|absolute/.test(that.containerElement.css("position"));
 
-		if(isParent && isOffsetRelative) {
-			woset -= that.parentData.left;
+		if ( isParent && isOffsetRelative ) {
+			woset -= Math.abs( that.parentData.left );
 		}
 
 		if (woset + that.size.width >= that.parentData.width) {