From 37bcb36c74331d9bc03ecbaba23167d7ff36e8ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Garc=C3=ADa?=
 <93217193+Daniel-Garmig@users.noreply.github.com>
Date: Tue, 20 Aug 2024 21:44:06 +0200
Subject: [PATCH 1/9] Resizable: Fix content shrink on resize

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

Fixes: gh-2277
---
 tests/unit/resizable/core.js    | 53 ++++++++++++++++++++++++++++++
 tests/unit/resizable/options.js | 58 +++++++++++++++++++++++++++++++++
 ui/widgets/resizable.js         | 30 ++++++++++++-----
 3 files changed, 132 insertions(+), 9 deletions(-)

diff --git a/tests/unit/resizable/core.js b/tests/unit/resizable/core.js
index b3c61514a98..355d30601bf 100644
--- a/tests/unit/resizable/core.js
+++ b/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();
+} );
+
 } );
diff --git a/tests/unit/resizable/options.js b/tests/unit/resizable/options.js
index add8d803448..8295957f631 100644
--- a/tests/unit/resizable/options.js
+++ b/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" );
+} );
+
+
 } );
diff --git a/ui/widgets/resizable.js b/ui/widgets/resizable.js
index 1698d55e8bb..5a3765fc78a 100644
--- a/ui/widgets/resizable.js
+++ b/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" ) )
 			} );
 		} );

From 673b06970078a64a70fe9df291ecde84964e62ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Garc=C3=ADa?=
 <93217193+Daniel-Garmig@users.noreply.github.com>
Date: Sat, 24 Aug 2024 13:36:12 +0200
Subject: [PATCH 2/9] Fixed and improved tests

---
 tests/unit/resizable/core.js    | 62 +++++++++++++++++++++------------
 tests/unit/resizable/options.js | 35 ++++++++++++-------
 2 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/tests/unit/resizable/core.js b/tests/unit/resizable/core.js
index 355d30601bf..25d262b28cf 100644
--- a/tests/unit/resizable/core.js
+++ b/tests/unit/resizable/core.js
@@ -245,56 +245,72 @@ QUnit.test( "nested resizable", function( assert ) {
 } );
 
 QUnit.test( "Resizable with scrollbars and box-sizing: border-box", function( assert ) {
-	assert.expect( 2 );
+	assert.expect( 4 );
+
+	var style = $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "head" );
 
+	//Both scrollbars
 	var elementContent = $( "<div>" )
 			.css( {
-				width: 50,
-				height: 200,
-				padding: 10,
-				border: 5,
-				borderStyle: "solid"
+				width: "200px",
+				height: "200px",
+				padding: "10px",
+				border: "5px",
+				borderStyle: "solid",
+				margin: "20px"
 			} )
 			.appendTo( "#resizable1" ),
-	element = $( "#resizable1" ).css( { overflow: "auto" } ).resizable(),
+	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 (both scrollbars)" );
+	assert.equal( element.height(), 110, "element height (both scrollbars)" );
 
+	//Single (vertical) scrollbar.
+	elementContent.css( "width", "50px" );
 	testHelper.drag( handle, 10, 10 );
-	assert.equal( element.width(), 110, "element width" );
-	assert.equal( element.height(), 110, "element height" );
+	assert.equal( element.width(), 120, "element width (only vertical scrollbar)" );
+	assert.equal( element.height(), 120, "element height (only vertical scrollbar)" );
 
-	elementContent.remove();
+	style.remove();
 } );
 
 QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( assert ) {
-	assert.expect( 2 );
+	assert.expect( 4 );
+
+	var style = $( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "head" );
 
+	//Both scrollbars
 	var elementContent = $( "<div>" )
 			.css( {
-				width: 50,
-				height: 200,
-				padding: 10,
-				border: 5,
-				borderStyle: "solid"
+				width: "200px",
+				height: "200px",
+				padding: "10px",
+				border: "5px",
+				borderStyle: "solid",
+				margin: "20px"
 			} )
 			.appendTo( "#resizable1" ),
-	element = $( "#resizable1" ).css( { overflow: "auto" } ).resizable(),
+	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 (both scrollbars)" );
+	assert.equal( parseFloat( element.innerHeight() ), heightBefore + 10, "element height (both scrollbars)" );
 
-	assert.equal( parseFloat( element.innerWidth() ), widthBefore + 10, "element width" );
-	assert.equal( parseFloat( element.innerHeight() ), heightBefore + 10, "element height" );
+	//Single (vertical) scrollbar.
+	elementContent.css( "width", "50px" );
+
+	testHelper.drag( handle, 10, 10 );
+	assert.equal( parseFloat( element.innerWidth() ), widthBefore + 20, "element width (only vertical scrollbar)" );
+	assert.equal( parseFloat( element.innerHeight() ), heightBefore + 20, "element height (only vertical scrollbar)" );
 
-	elementContent.remove();
+	style.remove();
 } );
 
 } );
diff --git a/tests/unit/resizable/options.js b/tests/unit/resizable/options.js
index 8295957f631..ac20041d557 100644
--- a/tests/unit/resizable/options.js
+++ b/tests/unit/resizable/options.js
@@ -568,49 +568,56 @@ QUnit.test( "alsoResize with box-sizing: border-box", function( assert ) {
 QUnit.test( "alsoResize with scrollbars and box-sizing: border-box", function( assert ) {
 	assert.expect( 4 );
 
+	var style = $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "head" );
+
 	var other = $( "<div>" )
 			.css( {
-				width: 150,
-				height: 150,
-				padding: 10,
-				border: 5,
+				width: "150px",
+				height: "150px",
+				padding: "10px",
+				border: "5px",
 				borderStyle: "solid",
+				margin: "25px",
 				overflow: "scroll"
 			} )
-			.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" );
 	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" );
+
+	style.remove();
 } );
 
 QUnit.test( "alsoResize with scrollbars and box-sizing: content-box", function( assert ) {
 	assert.expect( 4 );
 
+	var style = $( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "head" );
+
 	var other = $( "<div>" )
 			.css( {
-				width: 150,
-				height: 150,
+				width: "150px",
+				height: "150px",
+				padding: "10px",
+				border: "5px",
+				borderStyle: "solid",
+				margin: "20px",
 				overflow: "scroll"
 			} )
-			.appendTo( "body" ),
+			.appendTo( "#qunit-fixture" ),
 		element = $( "#resizable1" ).resizable( {
 			alsoResize: other
 		} ),
 		handle = ".ui-resizable-se";
 
-	$( "*" ).css( "box-sizing", "content-box" );
-
-	// In some browsers scrollbar may change element size.
+	// In some browsers scrollbar may change element computed size.
 	var widthBefore = other.innerWidth();
 	var heightBefore = other.innerHeight();
 
@@ -620,6 +627,8 @@ QUnit.test( "alsoResize with scrollbars and box-sizing: content-box", function(
 	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" );
+
+	style.remove();
 } );
 
 

From a90f83a3d214ce099dd18374a07e845e3a964e06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Garc=C3=ADa?=
 <93217193+Daniel-Garmig@users.noreply.github.com>
Date: Sat, 24 Aug 2024 15:54:30 +0200
Subject: [PATCH 3/9] Changed implementation to avoid getBoundingClientRect().

---
 ui/widgets/resizable.js | 61 +++++++++++++++++++++++++++++++++--------
 1 file changed, 50 insertions(+), 11 deletions(-)

diff --git a/ui/widgets/resizable.js b/ui/widgets/resizable.js
index 5a3765fc78a..d06fceaabac 100644
--- a/ui/widgets/resizable.js
+++ b/ui/widgets/resizable.js
@@ -80,9 +80,13 @@ $.widget( "ui.resizable", $.ui.mouse, {
 
 	_hasScroll: function( el, a ) {
 
-		if ( $( el ).css( "overflow" ) === "hidden" ) {
+		var overflow = $( el ).css( "overflow" );
+		if ( overflow === "hidden" ) {
 			return false;
 		}
+		if ( overflow === "scroll" ) {
+			return true;
+		}
 
 		var scroll = ( a && a === "left" ) ? "scrollLeft" : "scrollTop",
 			has = false;
@@ -381,15 +385,26 @@ $.widget( "ui.resizable", $.ui.mouse, {
 		this.offset = this.helper.offset();
 		this.position = { left: curleft, top: curtop };
 
+		var calculatedSize = undefined;
+		if ( !this._helper ) {
+			calculatedSize = this._calculateAdjustedElementDimensions( el );
+		}
+
 		this.size = this._helper ? {
 				width: this.helper.width(),
 				height: this.helper.height()
-			} : this._calculateAdjustedElementDimensions( el );
+			} : {
+				width: calculatedSize.width,
+				height: calculatedSize.height
+			};
 
 		this.originalSize = this._helper ? {
 				width: el.outerWidth(),
 				height: el.outerHeight()
-			} : this._calculateAdjustedElementDimensions( el );
+			} : {
+				width: calculatedSize.width,
+				height: calculatedSize.height
+			};
 
 		this.sizeDiff = {
 			width: el.outerWidth() - el.width(),
@@ -685,20 +700,44 @@ $.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 ce = element.get( 0 );
+
+		if ( element.css( "box-sizing" ) !== "content-box" ||
+			( !this._hasScroll( ce ) && !this._hasScroll( ce, "left" ) ) ) {
+				return {
+					height: parseFloat( element.css( "height" ) ),
+					width: parseFloat( element.css( "width" ) )
+				};
+		}
+
+		// Check if CSS inline styles are set and use those (usually from previous resizes)
+		var elWidth = ce.style.width === "" ? "" : parseFloat( ce.style.width );
+		var elHeight = ce.style.height === "" ? "" : parseFloat( ce.style.height );
+
+		if ( elWidth === "" ) {
+			elWidth = this._getElementSizeWithoutOverflow( element, "width" );
+		}
+		if ( elHeight === "" ) {
+			elHeight = this._getElementSizeWithoutOverflow( element, "height" );
 		}
 
-		var outerDimensions = this._getPaddingPlusBorderDimensions( element );
 		return {
-			height: element[ 0 ].getBoundingClientRect().height - outerDimensions.height,
-			width: element[ 0 ].getBoundingClientRect().width - outerDimensions.width
+			height: elHeight,
+			width: elWidth
 		};
 	},
 
+	_getElementSizeWithoutOverflow: function( element, sizeProperty ) {
+		var overflowProperty = sizeProperty === "width" ? "overflow-y" : "overflow-x";
+
+		var origOverflow = element.css( overflowProperty );
+		element.css( overflowProperty, "hidden" );
+		var elSize = parseFloat( element.css( sizeProperty ) );
+		element.css( overflowProperty, origOverflow );
+
+		return elSize;
+	},
+
 	_proportionallyResize: function() {
 
 		if ( !this._proportionallyResizeElements.length ) {

From fe9c9f8820ce0742ba2aab55547445dc425292c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Garc=C3=ADa?=
 <93217193+Daniel-Garmig@users.noreply.github.com>
Date: Sat, 24 Aug 2024 15:56:49 +0200
Subject: [PATCH 4/9] Added tests for resizable when a css transform is set.

---
 tests/unit/resizable/core.js | 69 ++++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/tests/unit/resizable/core.js b/tests/unit/resizable/core.js
index 25d262b28cf..ef85763f642 100644
--- a/tests/unit/resizable/core.js
+++ b/tests/unit/resizable/core.js
@@ -313,4 +313,73 @@ QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( a
 	style.remove();
 } );
 
+QUnit.test( "Resizable with scrollbars, a transform and box-sizing: border-box", function( assert ) {
+	assert.expect( 4 );
+
+	var style = $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "head" );
+
+	//Both scrollbars
+	var elementContent = $( "<div>" )
+		.css( {
+			width: "200px",
+			height: "200px",
+			padding: "10px",
+			border: "5px",
+			borderStyle: "solid",
+			margin: "20px"
+		} )
+		.appendTo( "#resizable1" ),
+	element = $( "#resizable1" ).css( { overflow: "auto", transform: "scale(1.5)" } ).resizable(),
+	handle = ".ui-resizable-se";
+
+	testHelper.drag( handle, 10, 10 );
+	assert.equal( element.width(), 110, "element width (both scrollbars)" );
+	assert.equal( element.height(), 110, "element height (both scrollbars)" );
+
+	//Single (vertical) scrollbar.
+	elementContent.css( "width", "50px" );
+	testHelper.drag( handle, 10, 10 );
+	assert.equal( element.width(), 120, "element width (only vertical scrollbar)" );
+	assert.equal( element.height(), 120, "element height (only vertical scrollbar)" );
+
+	style.remove();
+} );
+
+QUnit.test( "Resizable with scrollbars, a transform and box-sizing: content-box", function( assert ) {
+	assert.expect( 4 );
+
+	var style = $( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "head" );
+
+	//Both scrollbars
+	var elementContent = $( "<div>" )
+		.css( {
+			width: "200px",
+			height: "200px",
+			padding: "10px",
+			border: "5px",
+			borderStyle: "solid",
+			margin: "20px"
+		} )
+		.appendTo( "#resizable1" ),
+	element = $( "#resizable1" ).css( { overflow: "auto", transform: "scale(1.5)" } ).resizable(),
+	handle = ".ui-resizable-se";
+
+	// 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 (both scrollbars)" );
+	assert.equal( parseFloat( element.innerHeight() ), heightBefore + 10, "element height (both scrollbars)" );
+
+	//Single (vertical) scrollbar.
+	elementContent.css( "width", "50px" );
+
+	testHelper.drag( handle, 10, 10 );
+	assert.equal( parseFloat( element.innerWidth() ), widthBefore + 20, "element width (only vertical scrollbar)" );
+	assert.equal( parseFloat( element.innerHeight() ), heightBefore + 20, "element height (only vertical scrollbar)" );
+
+	style.remove();
+} );
+
 } );

From 4ad61c974c4657355bd9ce37d0ca0fab12c9883c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Garc=C3=ADa?=
 <93217193+Daniel-Garmig@users.noreply.github.com>
Date: Sun, 25 Aug 2024 15:04:38 +0200
Subject: [PATCH 5/9] Changed element size calculations.

---
 ui/widgets/resizable.js | 35 ++++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/ui/widgets/resizable.js b/ui/widgets/resizable.js
index d06fceaabac..354a7516890 100644
--- a/ui/widgets/resizable.js
+++ b/ui/widgets/resizable.js
@@ -711,15 +711,16 @@ $.widget( "ui.resizable", $.ui.mouse, {
 		}
 
 		// Check if CSS inline styles are set and use those (usually from previous resizes)
-		var elWidth = ce.style.width === "" ? "" : parseFloat( ce.style.width );
-		var elHeight = ce.style.height === "" ? "" : parseFloat( ce.style.height );
+		var elWidth = parseFloat( ce.style.width );
+		var elHeight = parseFloat( ce.style.height );
 
-		if ( elWidth === "" ) {
-			elWidth = this._getElementSizeWithoutOverflow( element, "width" );
-		}
-		if ( elHeight === "" ) {
-			elHeight = this._getElementSizeWithoutOverflow( element, "height" );
-		}
+		var paddingBorder = this._getPaddingPlusBorderDimensions( element );
+		elWidth = isNaN( elWidth ) ?
+			this._getElementTheoreticalSize( element, paddingBorder, "width" ) :
+			elWidth;
+		elHeight = isNaN( elHeight ) ?
+			this._getElementTheoreticalSize( element, paddingBorder, "height" ) :
+			elHeight;
 
 		return {
 			height: elHeight,
@@ -727,15 +728,19 @@ $.widget( "ui.resizable", $.ui.mouse, {
 		};
 	},
 
-	_getElementSizeWithoutOverflow: function( element, sizeProperty ) {
-		var overflowProperty = sizeProperty === "width" ? "overflow-y" : "overflow-x";
+	_getElementTheoreticalSize: function( element, extraSize, dimension ) {
+
+		// offsetWidth/offsetHeight is a rounded sum of content, padding, scroll gutter, and border
+		var size = Math.max( 0, Math.ceil(
+			element.get( 0 )[ "offset" + dimension[ 0 ].toUpperCase() + dimension.slice( 1 ) ] -
+			extraSize[ dimension ] -
+			0.5
 
-		var origOverflow = element.css( overflowProperty );
-		element.css( overflowProperty, "hidden" );
-		var elSize = parseFloat( element.css( sizeProperty ) );
-		element.css( overflowProperty, origOverflow );
+		// If offsetWidth/offsetHeight is unknown, then we can't determine theoretical size.
+		// Use an explicit zero to avoid NaN (gh-3964)
+		) ) || 0;
 
-		return elSize;
+		return size;
 	},
 
 	_proportionallyResize: function() {

From 80b2c3a8bcf39e5484c1be605030f292a88c6f41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Garc=C3=ADa?=
 <93217193+Daniel-Garmig@users.noreply.github.com>
Date: Sun, 25 Aug 2024 15:06:51 +0200
Subject: [PATCH 6/9] Updated tests.

---
 tests/unit/resizable/core.js    | 16 ++++------------
 tests/unit/resizable/options.js | 24 ++++++++++--------------
 2 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/tests/unit/resizable/core.js b/tests/unit/resizable/core.js
index ef85763f642..0710b456db7 100644
--- a/tests/unit/resizable/core.js
+++ b/tests/unit/resizable/core.js
@@ -247,7 +247,7 @@ QUnit.test( "nested resizable", function( assert ) {
 QUnit.test( "Resizable with scrollbars and box-sizing: border-box", function( assert ) {
 	assert.expect( 4 );
 
-	var style = $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "head" );
+	$( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" );
 
 	//Both scrollbars
 	var elementContent = $( "<div>" )
@@ -272,14 +272,12 @@ QUnit.test( "Resizable with scrollbars and box-sizing: border-box", function( as
 	testHelper.drag( handle, 10, 10 );
 	assert.equal( element.width(), 120, "element width (only vertical scrollbar)" );
 	assert.equal( element.height(), 120, "element height (only vertical scrollbar)" );
-
-	style.remove();
 } );
 
 QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( assert ) {
 	assert.expect( 4 );
 
-	var style = $( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "head" );
+	$( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" );
 
 	//Both scrollbars
 	var elementContent = $( "<div>" )
@@ -309,14 +307,12 @@ QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( a
 	testHelper.drag( handle, 10, 10 );
 	assert.equal( parseFloat( element.innerWidth() ), widthBefore + 20, "element width (only vertical scrollbar)" );
 	assert.equal( parseFloat( element.innerHeight() ), heightBefore + 20, "element height (only vertical scrollbar)" );
-
-	style.remove();
 } );
 
 QUnit.test( "Resizable with scrollbars, a transform and box-sizing: border-box", function( assert ) {
 	assert.expect( 4 );
 
-	var style = $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "head" );
+	$( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" );
 
 	//Both scrollbars
 	var elementContent = $( "<div>" )
@@ -341,14 +337,12 @@ QUnit.test( "Resizable with scrollbars, a transform and box-sizing: border-box",
 	testHelper.drag( handle, 10, 10 );
 	assert.equal( element.width(), 120, "element width (only vertical scrollbar)" );
 	assert.equal( element.height(), 120, "element height (only vertical scrollbar)" );
-
-	style.remove();
 } );
 
 QUnit.test( "Resizable with scrollbars, a transform and box-sizing: content-box", function( assert ) {
 	assert.expect( 4 );
 
-	var style = $( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "head" );
+	$( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" );
 
 	//Both scrollbars
 	var elementContent = $( "<div>" )
@@ -378,8 +372,6 @@ QUnit.test( "Resizable with scrollbars, a transform and box-sizing: content-box"
 	testHelper.drag( handle, 10, 10 );
 	assert.equal( parseFloat( element.innerWidth() ), widthBefore + 20, "element width (only vertical scrollbar)" );
 	assert.equal( parseFloat( element.innerHeight() ), heightBefore + 20, "element height (only vertical scrollbar)" );
-
-	style.remove();
 } );
 
 } );
diff --git a/tests/unit/resizable/options.js b/tests/unit/resizable/options.js
index ac20041d557..09fd6b21455 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" );
@@ -568,7 +569,7 @@ QUnit.test( "alsoResize with box-sizing: border-box", function( assert ) {
 QUnit.test( "alsoResize with scrollbars and box-sizing: border-box", function( assert ) {
 	assert.expect( 4 );
 
-	var style = $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "head" );
+	$( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" );
 
 	var other = $( "<div>" )
 			.css( {
@@ -592,14 +593,12 @@ QUnit.test( "alsoResize with scrollbars and box-sizing: border-box", function( a
 	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" );
-
-	style.remove();
 } );
 
 QUnit.test( "alsoResize with scrollbars and box-sizing: content-box", function( assert ) {
 	assert.expect( 4 );
 
-	var style = $( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "head" );
+	$( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" );
 
 	var other = $( "<div>" )
 			.css( {
@@ -627,9 +626,6 @@ QUnit.test( "alsoResize with scrollbars and box-sizing: content-box", function(
 	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" );
-
-	style.remove();
 } );
 
-
 } );

From daee00b06046d6920a0dc564642234611a8818a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Garc=C3=ADa?=
 <93217193+Daniel-Garmig@users.noreply.github.com>
Date: Sat, 7 Sep 2024 19:45:08 +0200
Subject: [PATCH 7/9] Fix comment and variable styles.

---
 tests/unit/resizable/core.js | 64 +++++++++++++++++++-----------------
 ui/widgets/resizable.js      | 28 ++++++++--------
 2 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/tests/unit/resizable/core.js b/tests/unit/resizable/core.js
index 0710b456db7..0b7bfa2a8a4 100644
--- a/tests/unit/resizable/core.js
+++ b/tests/unit/resizable/core.js
@@ -249,7 +249,7 @@ QUnit.test( "Resizable with scrollbars and box-sizing: border-box", function( as
 
 	$( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" );
 
-	//Both scrollbars
+	// Both scrollbars
 	var elementContent = $( "<div>" )
 			.css( {
 				width: "200px",
@@ -260,14 +260,14 @@ QUnit.test( "Resizable with scrollbars and box-sizing: border-box", function( as
 				margin: "20px"
 			} )
 			.appendTo( "#resizable1" ),
-	element = $( "#resizable1" ).css( "overflow", "auto" ).resizable(),
-	handle = ".ui-resizable-se";
+		element = $( "#resizable1" ).css( "overflow", "auto" ).resizable(),
+		handle = ".ui-resizable-se";
 
 	testHelper.drag( handle, 10, 10 );
 	assert.equal( element.width(), 110, "element width (both scrollbars)" );
 	assert.equal( element.height(), 110, "element height (both scrollbars)" );
 
-	//Single (vertical) scrollbar.
+	// Single (vertical) scrollbar.
 	elementContent.css( "width", "50px" );
 	testHelper.drag( handle, 10, 10 );
 	assert.equal( element.width(), 120, "element width (only vertical scrollbar)" );
@@ -279,8 +279,9 @@ QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( a
 
 	$( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" );
 
-	//Both scrollbars
-	var elementContent = $( "<div>" )
+	// Both scrollbars
+	var widthBefore, heightBefore,
+		elementContent = $( "<div>" )
 			.css( {
 				width: "200px",
 				height: "200px",
@@ -290,18 +291,18 @@ QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( a
 				margin: "20px"
 			} )
 			.appendTo( "#resizable1" ),
-	element = $( "#resizable1" ).css( "overflow", "auto" ).resizable(),
-	handle = ".ui-resizable-se";
+		element = $( "#resizable1" ).css( "overflow", "auto" ).resizable(),
+		handle = ".ui-resizable-se";
 
 	// In some browsers scrollbar may change element size (when "box-sizing: content-box")
-	var widthBefore = element.innerWidth();
-	var heightBefore = element.innerHeight();
+	widthBefore = element.innerWidth();
+	heightBefore = element.innerHeight();
 
 	testHelper.drag( handle, 10, 10 );
 	assert.equal( parseFloat( element.innerWidth() ), widthBefore + 10, "element width (both scrollbars)" );
 	assert.equal( parseFloat( element.innerHeight() ), heightBefore + 10, "element height (both scrollbars)" );
 
-	//Single (vertical) scrollbar.
+	// Single (vertical) scrollbar.
 	elementContent.css( "width", "50px" );
 
 	testHelper.drag( handle, 10, 10 );
@@ -314,7 +315,7 @@ QUnit.test( "Resizable with scrollbars, a transform and box-sizing: border-box",
 
 	$( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" );
 
-	//Both scrollbars
+	// Both scrollbars
 	var elementContent = $( "<div>" )
 		.css( {
 			width: "200px",
@@ -325,14 +326,14 @@ QUnit.test( "Resizable with scrollbars, a transform and box-sizing: border-box",
 			margin: "20px"
 		} )
 		.appendTo( "#resizable1" ),
-	element = $( "#resizable1" ).css( { overflow: "auto", transform: "scale(1.5)" } ).resizable(),
-	handle = ".ui-resizable-se";
+		element = $( "#resizable1" ).css( { overflow: "auto", transform: "scale(1.5)" } ).resizable(),
+		handle = ".ui-resizable-se";
 
 	testHelper.drag( handle, 10, 10 );
 	assert.equal( element.width(), 110, "element width (both scrollbars)" );
 	assert.equal( element.height(), 110, "element height (both scrollbars)" );
 
-	//Single (vertical) scrollbar.
+	// Single (vertical) scrollbar.
 	elementContent.css( "width", "50px" );
 	testHelper.drag( handle, 10, 10 );
 	assert.equal( element.width(), 120, "element width (only vertical scrollbar)" );
@@ -344,29 +345,30 @@ QUnit.test( "Resizable with scrollbars, a transform and box-sizing: content-box"
 
 	$( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" );
 
-	//Both scrollbars
-	var elementContent = $( "<div>" )
-		.css( {
-			width: "200px",
-			height: "200px",
-			padding: "10px",
-			border: "5px",
-			borderStyle: "solid",
-			margin: "20px"
-		} )
-		.appendTo( "#resizable1" ),
-	element = $( "#resizable1" ).css( { overflow: "auto", transform: "scale(1.5)" } ).resizable(),
-	handle = ".ui-resizable-se";
+	// Both scrollbars
+	var widthBefore, heightBefore,
+		elementContent = $( "<div>" )
+			.css( {
+				width: "200px",
+				height: "200px",
+				padding: "10px",
+				border: "5px",
+				borderStyle: "solid",
+				margin: "20px"
+			} )
+			.appendTo( "#resizable1" ),
+		element = $( "#resizable1" ).css( { overflow: "auto", transform: "scale(1.5)" } ).resizable(),
+		handle = ".ui-resizable-se";
 
 	// In some browsers scrollbar may change element size (when "box-sizing: content-box")
-	var widthBefore = element.innerWidth();
-	var heightBefore = element.innerHeight();
+	widthBefore = element.innerWidth();
+	heightBefore = element.innerHeight();
 
 	testHelper.drag( handle, 10, 10 );
 	assert.equal( parseFloat( element.innerWidth() ), widthBefore + 10, "element width (both scrollbars)" );
 	assert.equal( parseFloat( element.innerHeight() ), heightBefore + 10, "element height (both scrollbars)" );
 
-	//Single (vertical) scrollbar.
+	// Single (vertical) scrollbar.
 	elementContent.css( "width", "50px" );
 
 	testHelper.drag( handle, 10, 10 );
diff --git a/ui/widgets/resizable.js b/ui/widgets/resizable.js
index 354a7516890..6f1e0ebdecb 100644
--- a/ui/widgets/resizable.js
+++ b/ui/widgets/resizable.js
@@ -80,7 +80,10 @@ $.widget( "ui.resizable", $.ui.mouse, {
 
 	_hasScroll: function( el, a ) {
 
-		var overflow = $( el ).css( "overflow" );
+		var scroll,
+			has = false,
+			overflow = $( el ).css( "overflow" );
+
 		if ( overflow === "hidden" ) {
 			return false;
 		}
@@ -88,8 +91,7 @@ $.widget( "ui.resizable", $.ui.mouse, {
 			return true;
 		}
 
-		var scroll = ( a && a === "left" ) ? "scrollLeft" : "scrollTop",
-			has = false;
+		scroll = ( a && a === "left" ) ? "scrollLeft" : "scrollTop";
 
 		if ( el[ scroll ] > 0 ) {
 			return true;
@@ -366,7 +368,7 @@ $.widget( "ui.resizable", $.ui.mouse, {
 
 	_mouseStart: function( event ) {
 
-		var curleft, curtop, cursor,
+		var curleft, curtop, cursor, calculatedSize,
 			o = this.options,
 			el = this.element;
 
@@ -385,7 +387,6 @@ $.widget( "ui.resizable", $.ui.mouse, {
 		this.offset = this.helper.offset();
 		this.position = { left: curleft, top: curtop };
 
-		var calculatedSize = undefined;
 		if ( !this._helper ) {
 			calculatedSize = this._calculateAdjustedElementDimensions( el );
 		}
@@ -700,7 +701,8 @@ $.widget( "ui.resizable", $.ui.mouse, {
 	},
 
 	_calculateAdjustedElementDimensions: function( element ) {
-		var ce = element.get( 0 );
+		var elWidth, elHeight, paddingBorder,
+			ce = element.get( 0 );
 
 		if ( element.css( "box-sizing" ) !== "content-box" ||
 			( !this._hasScroll( ce ) && !this._hasScroll( ce, "left" ) ) ) {
@@ -711,10 +713,10 @@ $.widget( "ui.resizable", $.ui.mouse, {
 		}
 
 		// Check if CSS inline styles are set and use those (usually from previous resizes)
-		var elWidth = parseFloat( ce.style.width );
-		var elHeight = parseFloat( ce.style.height );
+		elWidth = parseFloat( ce.style.width );
+		elHeight = parseFloat( ce.style.height );
 
-		var paddingBorder = this._getPaddingPlusBorderDimensions( element );
+		paddingBorder = this._getPaddingPlusBorderDimensions( element );
 		elWidth = isNaN( elWidth ) ?
 			this._getElementTheoreticalSize( element, paddingBorder, "width" ) :
 			elWidth;
@@ -737,7 +739,8 @@ $.widget( "ui.resizable", $.ui.mouse, {
 			0.5
 
 		// If offsetWidth/offsetHeight is unknown, then we can't determine theoretical size.
-		// Use an explicit zero to avoid NaN (gh-3964)
+		// Use an explicit zero to avoid NaN.
+		// See https://github.com/jquery/jquery/issues/3964
 		) ) || 0;
 
 		return size;
@@ -1097,9 +1100,8 @@ $.ui.plugin.add( "resizable", "alsoResize", {
 			o = that.options;
 
 		$( o.alsoResize ).each( function() {
-			var el = $( this );
-
-			var elSize = that._calculateAdjustedElementDimensions( el );
+			var el = $( this ),
+				elSize = that._calculateAdjustedElementDimensions( el );
 
 			el.data( "ui-resizable-alsoresize", {
 				width: elSize.width, height: elSize.height,

From 6dd4bf730c41d6005dac8b88670c89cbd607056b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Garc=C3=ADa?=
 <93217193+Daniel-Garmig@users.noreply.github.com>
Date: Sat, 7 Sep 2024 20:10:11 +0200
Subject: [PATCH 8/9] Changed test cases to use a generic function.

---
 tests/unit/resizable/core.js    | 102 ++++----------------------------
 tests/unit/resizable/options.js |  43 ++++----------
 2 files changed, 25 insertions(+), 120 deletions(-)

diff --git a/tests/unit/resizable/core.js b/tests/unit/resizable/core.js
index 0b7bfa2a8a4..a9f21ab4bf5 100644
--- a/tests/unit/resizable/core.js
+++ b/tests/unit/resizable/core.js
@@ -246,107 +246,28 @@ QUnit.test( "nested resizable", function( assert ) {
 
 QUnit.test( "Resizable with scrollbars and box-sizing: border-box", function( assert ) {
 	assert.expect( 4 );
-
-	$( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" );
-
-	// Both scrollbars
-	var elementContent = $( "<div>" )
-			.css( {
-				width: "200px",
-				height: "200px",
-				padding: "10px",
-				border: "5px",
-				borderStyle: "solid",
-				margin: "20px"
-			} )
-			.appendTo( "#resizable1" ),
-		element = $( "#resizable1" ).css( "overflow", "auto" ).resizable(),
-		handle = ".ui-resizable-se";
-
-	testHelper.drag( handle, 10, 10 );
-	assert.equal( element.width(), 110, "element width (both scrollbars)" );
-	assert.equal( element.height(), 110, "element height (both scrollbars)" );
-
-	// Single (vertical) scrollbar.
-	elementContent.css( "width", "50px" );
-	testHelper.drag( handle, 10, 10 );
-	assert.equal( element.width(), 120, "element width (only vertical scrollbar)" );
-	assert.equal( element.height(), 120, "element height (only vertical scrollbar)" );
+	testResizableWithBoxSizing( assert, true, false );
 } );
 
 QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( assert ) {
 	assert.expect( 4 );
-
-	$( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" );
-
-	// Both scrollbars
-	var widthBefore, heightBefore,
-		elementContent = $( "<div>" )
-			.css( {
-				width: "200px",
-				height: "200px",
-				padding: "10px",
-				border: "5px",
-				borderStyle: "solid",
-				margin: "20px"
-			} )
-			.appendTo( "#resizable1" ),
-		element = $( "#resizable1" ).css( "overflow", "auto" ).resizable(),
-		handle = ".ui-resizable-se";
-
-	// In some browsers scrollbar may change element size (when "box-sizing: content-box")
-	widthBefore = element.innerWidth();
-	heightBefore = element.innerHeight();
-
-	testHelper.drag( handle, 10, 10 );
-	assert.equal( parseFloat( element.innerWidth() ), widthBefore + 10, "element width (both scrollbars)" );
-	assert.equal( parseFloat( element.innerHeight() ), heightBefore + 10, "element height (both scrollbars)" );
-
-	// Single (vertical) scrollbar.
-	elementContent.css( "width", "50px" );
-
-	testHelper.drag( handle, 10, 10 );
-	assert.equal( parseFloat( element.innerWidth() ), widthBefore + 20, "element width (only vertical scrollbar)" );
-	assert.equal( parseFloat( element.innerHeight() ), heightBefore + 20, "element height (only vertical scrollbar)" );
+	testResizableWithBoxSizing( assert, false, false );
 } );
 
 QUnit.test( "Resizable with scrollbars, a transform and box-sizing: border-box", function( assert ) {
 	assert.expect( 4 );
-
-	$( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" );
-
-	// Both scrollbars
-	var elementContent = $( "<div>" )
-		.css( {
-			width: "200px",
-			height: "200px",
-			padding: "10px",
-			border: "5px",
-			borderStyle: "solid",
-			margin: "20px"
-		} )
-		.appendTo( "#resizable1" ),
-		element = $( "#resizable1" ).css( { overflow: "auto", transform: "scale(1.5)" } ).resizable(),
-		handle = ".ui-resizable-se";
-
-	testHelper.drag( handle, 10, 10 );
-	assert.equal( element.width(), 110, "element width (both scrollbars)" );
-	assert.equal( element.height(), 110, "element height (both scrollbars)" );
-
-	// Single (vertical) scrollbar.
-	elementContent.css( "width", "50px" );
-	testHelper.drag( handle, 10, 10 );
-	assert.equal( element.width(), 120, "element width (only vertical scrollbar)" );
-	assert.equal( element.height(), 120, "element height (only vertical scrollbar)" );
+	testResizableWithBoxSizing( assert, true, true );
 } );
 
 QUnit.test( "Resizable with scrollbars, a transform and box-sizing: content-box", function( assert ) {
 	assert.expect( 4 );
+	testResizableWithBoxSizing( assert, false, true );
+} );
 
-	$( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" );
-
-	// Both scrollbars
+function testResizableWithBoxSizing( assert, isBorderBox, applyScaleTransform ) {
 	var widthBefore, heightBefore,
+		cssBoxSizing = isBorderBox ? "border-box" : "content-box",
+		cssTrasform = applyScaleTransform ? "scale(1.5)" : "",
 		elementContent = $( "<div>" )
 			.css( {
 				width: "200px",
@@ -357,13 +278,16 @@ QUnit.test( "Resizable with scrollbars, a transform and box-sizing: content-box"
 				margin: "20px"
 			} )
 			.appendTo( "#resizable1" ),
-		element = $( "#resizable1" ).css( { overflow: "auto", transform: "scale(1.5)" } ).resizable(),
+		element = $( "#resizable1" ).css( { overflow: "auto", transform: cssTrasform } ).resizable(),
 		handle = ".ui-resizable-se";
 
+	$( "<style> * { box-sizing: " + cssBoxSizing + "; } </style>" ).appendTo( "#qunit-fixture" );
+
 	// In some browsers scrollbar may change element size (when "box-sizing: content-box")
 	widthBefore = element.innerWidth();
 	heightBefore = element.innerHeight();
 
+	// Both scrollbars
 	testHelper.drag( handle, 10, 10 );
 	assert.equal( parseFloat( element.innerWidth() ), widthBefore + 10, "element width (both scrollbars)" );
 	assert.equal( parseFloat( element.innerHeight() ), heightBefore + 10, "element height (both scrollbars)" );
@@ -374,6 +298,6 @@ QUnit.test( "Resizable with scrollbars, a transform and box-sizing: content-box"
 	testHelper.drag( handle, 10, 10 );
 	assert.equal( parseFloat( element.innerWidth() ), widthBefore + 20, "element width (only vertical scrollbar)" );
 	assert.equal( parseFloat( element.innerHeight() ), heightBefore + 20, "element height (only vertical scrollbar)" );
-} );
+}
 
 } );
diff --git a/tests/unit/resizable/options.js b/tests/unit/resizable/options.js
index 09fd6b21455..a889fdca387 100644
--- a/tests/unit/resizable/options.js
+++ b/tests/unit/resizable/options.js
@@ -568,39 +568,18 @@ QUnit.test( "alsoResize with box-sizing: border-box", function( assert ) {
 
 QUnit.test( "alsoResize with scrollbars and box-sizing: border-box", function( assert ) {
 	assert.expect( 4 );
-
-	$( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" );
-
-	var other = $( "<div>" )
-			.css( {
-				width: "150px",
-				height: "150px",
-				padding: "10px",
-				border: "5px",
-				borderStyle: "solid",
-				margin: "25px",
-				overflow: "scroll"
-			} )
-			.appendTo( "#qunit-fixture" ),
-		element = $( "#resizable1" ).resizable( {
-			alsoResize: other
-		} ),
-		handle = ".ui-resizable-se";
-
-	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" );
+	testAlsoResizeWithBoxSizing( assert, true );
 } );
 
 QUnit.test( "alsoResize with scrollbars and box-sizing: content-box", function( assert ) {
 	assert.expect( 4 );
+	testAlsoResizeWithBoxSizing( assert, false );
+} );
 
-	$( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" );
-
-	var other = $( "<div>" )
+function testAlsoResizeWithBoxSizing( assert, isBorderBox ) {
+	var widthBefore, heightBefore,
+		cssBoxSizing = isBorderBox ? "border-box" : "content-box",
+		other = $( "<div>" )
 			.css( {
 				width: "150px",
 				height: "150px",
@@ -616,9 +595,11 @@ QUnit.test( "alsoResize with scrollbars and box-sizing: content-box", function(
 		} ),
 		handle = ".ui-resizable-se";
 
+	$( "<style> * { box-sizing: " + cssBoxSizing + "; } </style>" ).appendTo( "#qunit-fixture" );
+
 	// In some browsers scrollbar may change element computed size.
-	var widthBefore = other.innerWidth();
-	var heightBefore = other.innerHeight();
+	widthBefore = other.innerWidth();
+	heightBefore = other.innerHeight();
 
 	testHelper.drag( handle, 80, 80 );
 
@@ -626,6 +607,6 @@ QUnit.test( "alsoResize with scrollbars and box-sizing: content-box", function(
 	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" );
-} );
+}
 
 } );

From 1de85547bd7fe10a39c68efc562728f93d6415d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Garc=C3=ADa?=
 <93217193+Daniel-Garmig@users.noreply.github.com>
Date: Sun, 8 Sep 2024 14:14:57 +0200
Subject: [PATCH 9/9] Fixed boolean traps.

---
 tests/unit/resizable/core.js    | 28 ++++++++++++++++++++--------
 tests/unit/resizable/options.js | 12 ++++++++----
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/tests/unit/resizable/core.js b/tests/unit/resizable/core.js
index a9f21ab4bf5..b47f0b645f4 100644
--- a/tests/unit/resizable/core.js
+++ b/tests/unit/resizable/core.js
@@ -246,28 +246,40 @@ QUnit.test( "nested resizable", function( assert ) {
 
 QUnit.test( "Resizable with scrollbars and box-sizing: border-box", function( assert ) {
 	assert.expect( 4 );
-	testResizableWithBoxSizing( assert, true, false );
+	testResizableWithBoxSizing( assert, {
+		isBorderBox: true,
+		applyScaleTransform: false
+	} );
 } );
 
 QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( assert ) {
 	assert.expect( 4 );
-	testResizableWithBoxSizing( assert, false, false );
+	testResizableWithBoxSizing( assert, {
+		isBorderBox: false,
+		applyScaleTransform: false
+	} );
 } );
 
 QUnit.test( "Resizable with scrollbars, a transform and box-sizing: border-box", function( assert ) {
 	assert.expect( 4 );
-	testResizableWithBoxSizing( assert, true, true );
+	testResizableWithBoxSizing( assert, {
+		isBorderBox: true,
+		applyScaleTransform: true
+	} );
 } );
 
 QUnit.test( "Resizable with scrollbars, a transform and box-sizing: content-box", function( assert ) {
 	assert.expect( 4 );
-	testResizableWithBoxSizing( assert, false, true );
+	testResizableWithBoxSizing( assert, {
+		isBorderBox: false,
+		applyScaleTransform: true
+	} );
 } );
 
-function testResizableWithBoxSizing( assert, isBorderBox, applyScaleTransform ) {
+function testResizableWithBoxSizing( assert, options ) {
 	var widthBefore, heightBefore,
-		cssBoxSizing = isBorderBox ? "border-box" : "content-box",
-		cssTrasform = applyScaleTransform ? "scale(1.5)" : "",
+		cssBoxSizing = options.isBorderBox ? "border-box" : "content-box",
+		cssTransform = options.applyScaleTransform ? "scale(1.5)" : "",
 		elementContent = $( "<div>" )
 			.css( {
 				width: "200px",
@@ -278,7 +290,7 @@ function testResizableWithBoxSizing( assert, isBorderBox, applyScaleTransform )
 				margin: "20px"
 			} )
 			.appendTo( "#resizable1" ),
-		element = $( "#resizable1" ).css( { overflow: "auto", transform: cssTrasform } ).resizable(),
+		element = $( "#resizable1" ).css( { overflow: "auto", transform: cssTransform } ).resizable(),
 		handle = ".ui-resizable-se";
 
 	$( "<style> * { box-sizing: " + cssBoxSizing + "; } </style>" ).appendTo( "#qunit-fixture" );
diff --git a/tests/unit/resizable/options.js b/tests/unit/resizable/options.js
index a889fdca387..b80c051d588 100644
--- a/tests/unit/resizable/options.js
+++ b/tests/unit/resizable/options.js
@@ -568,17 +568,21 @@ QUnit.test( "alsoResize with box-sizing: border-box", function( assert ) {
 
 QUnit.test( "alsoResize with scrollbars and box-sizing: border-box", function( assert ) {
 	assert.expect( 4 );
-	testAlsoResizeWithBoxSizing( assert, true );
+	testAlsoResizeWithBoxSizing( assert, {
+		isBorderBox: true
+	} );
 } );
 
 QUnit.test( "alsoResize with scrollbars and box-sizing: content-box", function( assert ) {
 	assert.expect( 4 );
-	testAlsoResizeWithBoxSizing( assert, false );
+	testAlsoResizeWithBoxSizing( assert, {
+		isBorderBox: false
+	} );
 } );
 
-function testAlsoResizeWithBoxSizing( assert, isBorderBox ) {
+function testAlsoResizeWithBoxSizing( assert, options ) {
 	var widthBefore, heightBefore,
-		cssBoxSizing = isBorderBox ? "border-box" : "content-box",
+		cssBoxSizing = options.isBorderBox ? "border-box" : "content-box",
 		other = $( "<div>" )
 			.css( {
 				width: "150px",