Resizable: Fix content shrink on resize

Resizable element shrinks on resize when it has scrollbars and "box-sizing: content-box".

Fixes: gh-2277

Author: Daniel-Garmig

tests/unit/resizable/core.js

@@ -244,4 +244,57 @@ QUnit.test( "nested resizable", function( assert ) {
 	outer.remove();
 } );
 
+QUnit.test( "Resizable with scrollbars and box-sizing: border-box", function( assert ) {
+	assert.expect( 2 );
+
+	var elementContent = $( "<div>" )
+			.css( {
+				width: 50,
+				height: 200,
+				padding: 10,
+				border: 5,
+				borderStyle: "solid"
+			} )
+			.appendTo( "#resizable1" ),
+	element = $( "#resizable1" ).css( { overflow: "auto" } ).resizable(),
+	handle = ".ui-resizable-se";
+
+	$( "*" ).css( "box-sizing", "border-box" );
+
+	testHelper.drag( handle, 10, 10 );
+	assert.equal( element.width(), 110, "element width" );
+	assert.equal( element.height(), 110, "element height" );
+
+	elementContent.remove();
+} );
+
+QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( assert ) {
+	assert.expect( 2 );
+
+	var elementContent = $( "<div>" )
+			.css( {
+				width: 50,
+				height: 200,
+				padding: 10,
+				border: 5,
+				borderStyle: "solid"
+			} )
+			.appendTo( "#resizable1" ),
+	element = $( "#resizable1" ).css( { overflow: "auto" } ).resizable(),
+	handle = ".ui-resizable-se";
+
+	$( "*" ).css( "box-sizing", "content-box" );
+
+	// In some browsers scrollbar may change element size (when "box-sizing: content-box")
+	var widthBefore = element.innerWidth();
+	var heightBefore = element.innerHeight();
+
+	testHelper.drag( handle, 10, 10 );
+
+	assert.equal( parseFloat( element.innerWidth() ), widthBefore + 10, "element width" );
+	assert.equal( parseFloat( element.innerHeight() ), heightBefore + 10, "element height" );
+
+	elementContent.remove();
+} );
+
 } );

tests/unit/resizable/options.js

@@ -565,4 +565,62 @@ QUnit.test( "alsoResize with box-sizing: border-box", function( assert ) {
 	assert.equal( parseFloat( other.css( "height" ) ), 130, "alsoResize height" );
 } );
 
+QUnit.test( "alsoResize with scrollbars and box-sizing: border-box", function( assert ) {
+	assert.expect( 4 );
+
+	var other = $( "<div>" )
+			.css( {
+				width: 150,
+				height: 150,
+				padding: 10,
+				border: 5,
+				borderStyle: "solid",
+				overflow: "scroll"
+			} )
+			.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" ) ), 230, "alsoResize width" );
+	assert.equal( element.height(), 180, "resizable height" );
+	assert.equal( parseFloat( other.css( "height" ) ), 230, "alsoResize height" );
+} );
+
+QUnit.test( "alsoResize with scrollbars and box-sizing: content-box", function( assert ) {
+	assert.expect( 4 );
+
+	var other = $( "<div>" )
+			.css( {
+				width: 150,
+				height: 150,
+				overflow: "scroll"
+			} )
+			.appendTo( "body" ),
+		element = $( "#resizable1" ).resizable( {
+			alsoResize: other
+		} ),
+		handle = ".ui-resizable-se";
+
+	$( "*" ).css( "box-sizing", "content-box" );
+
+	// In some browsers scrollbar may change element size.
+	var widthBefore = other.innerWidth();
+	var heightBefore = other.innerHeight();
+
+	testHelper.drag( handle, 80, 80 );
+
+	assert.equal( element.width(), 180, "resizable width" );
+	assert.equal( parseFloat( other.innerWidth() ), widthBefore + 80, "alsoResize width" );
+	assert.equal( element.height(), 180, "resizable height" );
+	assert.equal( parseFloat( other.innerHeight() ), heightBefore + 80, "alsoResize height" );
+} );
+
+
 } );

ui/widgets/resizable.js

@@ -384,18 +384,12 @@ $.widget( "ui.resizable", $.ui.mouse, {
 		this.size = this._helper ? {
 				width: this.helper.width(),
 				height: this.helper.height()
-			} : {
-				width: el.width(),
-				height: el.height()
-			};
+			} : this._calculateAdjustedElementDimensions( el );
 
 		this.originalSize = this._helper ? {
 				width: el.outerWidth(),
 				height: el.outerHeight()
-			} : {
-				width: el.width(),
-				height: el.height()
-			};
+			} : this._calculateAdjustedElementDimensions( el );
 
 		this.sizeDiff = {
 			width: el.outerWidth() - el.width(),
@@ -690,6 +684,21 @@ $.widget( "ui.resizable", $.ui.mouse, {
 		};
 	},
 
+	_calculateAdjustedElementDimensions: function( element ) {
+		if ( !( /content-box/ ).test( element.css( "box-sizing" ) ) ) {
+			return {
+				height: parseFloat( element.css( "height" ) ),
+				width: parseFloat( element.css( "width" ) )
+			};
+		}
+
+		var outerDimensions = this._getPaddingPlusBorderDimensions( element );
+		return {
+			height: element[ 0 ].getBoundingClientRect().height - outerDimensions.height,
+			width: element[ 0 ].getBoundingClientRect().width - outerDimensions.width
+		};
+	},
+
 	_proportionallyResize: function() {
 
 		if ( !this._proportionallyResizeElements.length ) {
@@ -1045,8 +1054,11 @@ $.ui.plugin.add( "resizable", "alsoResize", {
 
 		$( o.alsoResize ).each( function() {
 			var el = $( this );
+
+			var elSize = that._calculateAdjustedElementDimensions( el );
+
 			el.data( "ui-resizable-alsoresize", {
-				width: parseFloat( el.css( "width" ) ), height: parseFloat( el.css( "height" ) ),
+				width: elSize.width, height: elSize.height,
 				left: parseFloat( el.css( "left" ) ), top: parseFloat( el.css( "top" ) )
 			} );
 		} );