From 7bb48a0290a20594ea2a5a7b5772e0410a67164c Mon Sep 17 00:00:00 2001 From: =?utf8?q?Micha=C5=82=20Go=C5=82=C4=99biowski-Owczarek?= Date: Tue, 4 Apr 2023 16:00:55 +0200 Subject: [PATCH] CSS: Make `offsetHeight( true )`, etc. include negative margins 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 (cherry picked from commit bce13b72c1753e16cc0db53ebf0f0456bdcf6b48) --- src/css.js | 9 ++++++--- test/unit/dimensions.js | 7 ++++++- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/css.js b/src/css.js index 1e113fde0..1ec1aa8f4 100644 --- a/src/css.js +++ b/src/css.js @@ -51,7 +51,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" ) ) { @@ -61,8 +62,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" @@ -113,7 +116,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 index e5ffbb57a..dc7e719fb 100644 --- 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": "" } ); -- 2.39.5