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

diff --git a/src/css.js b/src/css.js
index 29dca0e42da3c7e48ccc5b6434e0aa46c2d928ce..a69ad173096b0304059aed809682ee22c43fab8f 100644 (file)
--- 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
index 5475f24fb370f0df949051e6ee7c0e4262fc734a..85a69cdb72cb74ae1400592d864a5f96d19d0f4c 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": "" } );