library-mirrors/jquery
1
0
Fork 0
mirror of https://github.com/jquery/jquery.git synced 2024-11-23 02:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Michał Gołębiowski-Owczarek 2023-04-04 16:00:55 +02:00 committed by GitHub
parent bcaeb000b7
commit bce13b72c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/css.js
View File

@ -46,7 +46,8 @@ function setPositiveNumber( _elem, value, subtract ) {
function boxModelAdjustment( elem, dimension, box, isBorderBox, styles, computedVal ) { function boxModelAdjustment( elem, dimension, box, isBorderBox, styles, computedVal ) {
var i = dimension === "width" ? 1 : 0, var i = dimension === "width" ? 1 : 0,
extra = 0, extra = 0,
delta = 0; delta = 0,
marginDelta = 0;
// Adjustment may not be necessary // Adjustment may not be necessary
if ( box === ( isBorderBox ? "border" : "content" ) ) { if ( box === ( isBorderBox ? "border" : "content" ) ) {
@ -56,8 +57,10 @@ function boxModelAdjustment( elem, dimension, box, isBorderBox, styles, computed
for ( ; i < 4; i += 2 ) { for ( ; i < 4; i += 2 ) {
// Both box models exclude margin // 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" ) { 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" // 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; ) ) || 0;
} }
return delta; return delta + marginDelta;
} }
function getWidthOrHeight( elem, dimension, extra ) { function getWidthOrHeight( elem, dimension, extra ) {

7
test/unit/dimensions.js
View File

@ -240,7 +240,7 @@ QUnit.test( "outerWidth()", function( assert ) {
} ); } );
QUnit.test( "outerHeight()", function( assert ) { QUnit.test( "outerHeight()", function( assert ) {
assert.expect( 12 ); assert.expect( 14 );
var $div, div, var $div, div,
$win = jQuery( window ), $win = jQuery( window ),
@ -268,6 +268,11 @@ QUnit.test( "outerHeight()", function( assert ) {
$div.css( "display", "none" ); $div.css( "display", "none" );
assert.equal( $div.outerHeight( true ), 94, "Test hidden div with padding, border and margin with margin option" ); 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 // reset styles
$div.css( { "position": "", "display": "", "border": "", "padding": "", "width": "", "height": "" } ); $div.css( { "position": "", "display": "", "border": "", "padding": "", "width": "", "height": "" } );