Resizable: Fix content shrink on resize

Make resizable elements not shrink on resize when they have scrollbars
and "box-sizing: content-box".

Fixes: gh-2277
Closes gh-2281

1 files changed, 55 insertions, 7 deletions

diff --git a/tests/unit/resizable/options.js b/tests/unit/resizable/options.js
index add8d8034..b80c051d5 100644
--- a/tests/unit/resizable/options.js
+++ b/tests/unit/resizable/options.js
@@ -542,21 +542,22 @@ QUnit.test( "alsoResize + multiple selection", function( assert ) {
 QUnit.test( "alsoResize with box-sizing: border-box", function( assert ) {
 	assert.expect( 4 );
 
+	$( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" );
+
 	var other = $( "<div>" )
 			.css( {
-				width: 50,
-				height: 50,
-				padding: 10,
-				border: 5
+				width: "50px",
+				height: "50px",
+				padding: "10px",
+				border: "5px",
+				borderStyle: "solid"
 			} )
-			.appendTo( "body" ),
+			.appendTo( "#qunit-fixture" ),
 		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" );
@@ -565,4 +566,51 @@ 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 );
+	testAlsoResizeWithBoxSizing( assert, {
+		isBorderBox: true
+	} );
+} );
+
+QUnit.test( "alsoResize with scrollbars and box-sizing: content-box", function( assert ) {
+	assert.expect( 4 );
+	testAlsoResizeWithBoxSizing( assert, {
+		isBorderBox: false
+	} );
+} );
+
+function testAlsoResizeWithBoxSizing( assert, options ) {
+	var widthBefore, heightBefore,
+		cssBoxSizing = options.isBorderBox ? "border-box" : "content-box",
+		other = $( "<div>" )
+			.css( {
+				width: "150px",
+				height: "150px",
+				padding: "10px",
+				border: "5px",
+				borderStyle: "solid",
+				margin: "20px",
+				overflow: "scroll"
+			} )
+			.appendTo( "#qunit-fixture" ),
+		element = $( "#resizable1" ).resizable( {
+			alsoResize: other
+		} ),
+		handle = ".ui-resizable-se";
+
+	$( "<style> * { box-sizing: " + cssBoxSizing + "; } </style>" ).appendTo( "#qunit-fixture" );
+
+	// In some browsers scrollbar may change element computed size.
+	widthBefore = other.innerWidth();
+	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" );
+}
+
 } );