CSS: Make offsetHeight( true ), etc. include negative margins

mgol · web-flow · commit bce13b72c175 · 2023-04-04T16:00:55.000+02:00
This regressed in gh-3656 as the added logic to include scroll gutters in `.innerWidth()` / `.innerHeight()` didn't take negative margins into account. This broke handling of negative margins in `.offsetHeight( true )` and `.offsetWidth( true )`. To fix it, calculate margin delta separately and only add it after the scroll gutter adjustment logic. Fixes gh-3982 Closes gh-5234 Ref gh-3656
diff --git a/src/css.js b/src/css.js
@@ -46,7 +46,8 @@ function setPositiveNumber( _elem, value, subtract ) {
 function boxModelAdjustment( elem, dimension, box, isBorderBox, styles, computedVal ) {
 	var i = dimension === "width" ? 1 : 0,
 		extra = 0,
-		delta = 0;
+		delta = 0,
+		marginDelta = 0;
 
 	// Adjustment may not be necessary
 	if ( box === ( isBorderBox ? "border" : "content" ) ) {
@@ -56,8 +57,10 @@ function boxModelAdjustment( elem, dimension, box, isBorderBox, styles, computed
 	for ( ; i < 4; i += 2 ) {
 
 		// Both box models exclude margin
+		// Count margin delta separately to only add it after scroll gutter adjustment.
+		// This is needed to make negative margins work with `outerHeight( true )` (gh-3982).
 		if ( box === "margin" ) {
-			delta += jQuery.css( elem, box + cssExpand[ i ], true, styles );
+			marginDelta += jQuery.css( elem, box + cssExpand[ i ], true, styles );
 		}
 
 		// If we get here with a content-box, we're seeking "padding" or "border" or "margin"
@@ -108,7 +111,7 @@ function boxModelAdjustment( elem, dimension, box, isBorderBox, styles, computed
 		) ) || 0;
 	}
 
-	return delta;
+	return delta + marginDelta;
 }
 
 function getWidthOrHeight( elem, dimension, extra ) {
diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js
@@ -240,7 +240,7 @@ QUnit.test( "outerWidth()", function( assert ) {
 } );
 
 QUnit.test( "outerHeight()", function( assert ) {
-	assert.expect( 12 );
+	assert.expect( 14 );
 
 	var $div, div,
 		$win = jQuery( window ),
@@ -268,6 +268,11 @@ QUnit.test( "outerHeight()", function( assert ) {
 	$div.css( "display", "none" );
 	assert.equal( $div.outerHeight( true ), 94, "Test hidden div with padding, border and margin with margin option" );
 
+	$div.css( "display", "" );
+	$div.css( "margin", "-10px" );
+	assert.equal( $div.outerHeight(), 74, "Test with padding, border and negative margin without margin option" );
+	assert.equal( $div.outerHeight( true ), 54, "Test with padding, border and negative margin with margin option" );
+
 	// reset styles
 	$div.css( { "position": "", "display": "", "border": "", "padding": "", "width": "", "height": "" } );
 
