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)

diff --git a/src/css.js b/src/css.js
index 1e113fde04e5c03a22b7af31ddf2c7ddd16f9320..1ec1aa8f434d9969945d546c259c70390cbda4ef 100644 (file)
--- 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 e5ffbb57af9d8b1634ac71c7f69b3d60f3311f1e..dc7e719fbf7dd7031230809cd4b37d9d62a03575 100644 (file)
--- 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": "" } );