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 = $( "
" ).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 = $( "" ).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 = $( "" ).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 ) {