diff --git a/tests/unit/resizable/options.js b/tests/unit/resizable/options.js index d85840562..6149fbfef 100644 --- a/tests/unit/resizable/options.js +++ b/tests/unit/resizable/options.js @@ -532,4 +532,30 @@ QUnit.test( "alsoResize + multiple selection", function( assert ) { assert.equal( other2.height(), 150, "alsoResize o2 constrained height at containment edge" ); } ); +QUnit.test( "alsoResize with box-sizing: border-box", function( assert ) { + assert.expect( 4 ); + + var other = $( "
" ) + .css( { + width: 50, + height: 50, + padding: 10, + border: 5 + } ) + .appendTo( "body" ), + element = $( "#resizable1" ).resizable( { + alsoResize: other + } ), + handle = ".ui-resizable-se"; + + $( "*" ).css( "box-sizing", "border-box" ); + + testHelper.drag( handle, 80, 80 ); + + assert.equal( element.width(), 180, "resizable width" ); + assert.equal( parseFloat( other.css( "width" ) ), 130, "alsoResize width" ); + assert.equal( element.height(), 180, "resizable height" ); + assert.equal( parseFloat( other.css( "height" ) ), 130, "alsoResize height" ); +} ); + } ); diff --git a/ui/widgets/resizable.js b/ui/widgets/resizable.js index d1abbd539..3f1f19833 100644 --- a/ui/widgets/resizable.js +++ b/ui/widgets/resizable.js @@ -533,15 +533,18 @@ $.widget( "ui.resizable", $.ui.mouse, { if ( this.position.left !== this.prevPosition.left ) { props.left = this.position.left + "px"; } + + this.helper.css( props ); + if ( this.size.width !== this.prevSize.width ) { props.width = this.size.width + "px"; + this.helper.width( props.width ); } if ( this.size.height !== this.prevSize.height ) { props.height = this.size.height + "px"; + this.helper.height( props.height ); } - this.helper.css( props ); - return props; }, @@ -1048,7 +1051,7 @@ $.ui.plugin.add( "resizable", "alsoResize", { $( o.alsoResize ).each( function() { var el = $( this ); el.data( "ui-resizable-alsoresize", { - width: parseFloat( el.width() ), height: parseFloat( el.height() ), + width: parseFloat( el.css( "width" ) ), height: parseFloat( el.css( "height" ) ), left: parseFloat( el.css( "left" ) ), top: parseFloat( el.css( "top" ) ) } ); } );