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

Dimensions: outerWidth/Height include scrollbar

Browse Source 
Fixes gh-1729
Closes gh-2694
This commit is contained in:
Dave Methvin 2015-11-06 12:24:06 -05:00
parent 2cb8ebadcb
commit 7d44d7f9e7
2 changed files with 47 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/dimensions.js
View File

@ -19,10 +19,10 @@ jQuery.each( { Height: "height", Width: "width" }, function( name, type ) {
if ( jQuery.isWindow( elem ) ) { if ( jQuery.isWindow( elem ) ) {
// As of 5/8/2012 this will yield incorrect results for Mobile Safari, but there // $( window ).outerWidth/Height return w/h including scrollbars (gh-1729)
// isn't a whole lot we can do. See pull request at this URL for discussion: return funcName.indexOf( "outer" ) === 0 ?
// https://github.com/jquery/jquery/pull/764 elem[ "inner" + name ] :
return elem.document.documentElement[ "client" + name ]; elem.document.documentElement[ "client" + name ];
} }
// Get document width or height // Get document width or height

83
test/unit/dimensions.js
View File

@ -202,10 +202,11 @@ QUnit.test( "outerWidth()", function( assert ) {
var $div, div, var $div, div,
$win = jQuery( window ), $win = jQuery( window ),
$doc = jQuery( document ); $doc = jQuery( document ),
winwidth = $win.prop( "innerWidth" );
assert.equal( jQuery( window ).outerWidth(), $win.width(), "Test on window without margin option" ); assert.equal( jQuery( window ).outerWidth(), winwidth, "Test on window without margin option" );
assert.equal( jQuery( window ).outerWidth( true ), $win.width(), "Test on window with margin option" ); assert.equal( jQuery( window ).outerWidth( true ), winwidth, "Test on window with margin option" );
assert.equal( jQuery( document ).outerWidth(), $doc.width(), "Test on document without margin option" ); assert.equal( jQuery( document ).outerWidth(), $doc.width(), "Test on document without margin option" );
assert.equal( jQuery( document ).outerWidth( true ), $doc.width(), "Test on document with margin option" ); assert.equal( jQuery( document ).outerWidth( true ), $doc.width(), "Test on document with margin option" );
@ -235,6 +236,45 @@ QUnit.test( "outerWidth()", function( assert ) {
div.remove(); div.remove();
} ); } );
QUnit.test( "outerHeight()", function( assert ) {
assert.expect( 11 );
var $div, div,
$win = jQuery( window ),
$doc = jQuery( document ),
winheight = $win.prop( "innerHeight" );
assert.equal( jQuery( window ).outerHeight(), winheight, "Test on window without margin option" );
assert.equal( jQuery( window ).outerHeight( true ), winheight, "Test on window with margin option" );
assert.equal( jQuery( document ).outerHeight(), $doc.height(), "Test on document without margin option" );
assert.equal( jQuery( document ).outerHeight( true ), $doc.height(), "Test on document with margin option" );
$div = jQuery( "#nothiddendiv" );
$div.css( "height", 30 );
assert.equal( $div.outerHeight(), 30, "Test with only height set" );
$div.css( "padding", "20px" );
assert.equal( $div.outerHeight(), 70, "Test with padding" );
$div.css( "border", "2px solid #fff" );
assert.equal( $div.outerHeight(), 74, "Test with padding and border" );
$div.css( "margin", "10px" );
assert.equal( $div.outerHeight(), 74, "Test with padding, border and margin without margin option" );
$div.css( "position", "absolute" );
assert.equal( $div.outerHeight( true ), 94, "Test with padding, border and margin with margin option" );
$div.css( "display", "none" );
assert.equal( $div.outerHeight( true ), 94, "Test hidden div with padding, border and margin with margin option" );
// reset styles
$div.css( { "position": "", "display": "", "border": "", "padding": "", "width": "", "height": "" } );
div = jQuery( "<div>" );
// Temporarily require 0 for backwards compat - should be auto
assert.equal( div.outerWidth(), 0, "Make sure that disconnected nodes are handled." );
div.remove();
} );
QUnit.test( "child of a hidden elem (or unconnected node) has accurate inner/outer/Width()/Height() see #9441 #9300", function( assert ) { QUnit.test( "child of a hidden elem (or unconnected node) has accurate inner/outer/Width()/Height() see #9441 #9300", function( assert ) {
assert.expect( 16 ); assert.expect( 16 );
@ -353,43 +393,6 @@ QUnit.test( "box-sizing:border-box child of a hidden elem (or unconnected node)
$divNormal.remove(); $divNormal.remove();
} ); } );
QUnit.test( "outerHeight()", function( assert ) {
assert.expect( 11 );
var $div, div,
$win = jQuery( window ),
$doc = jQuery( document );
assert.equal( jQuery( window ).outerHeight(), $win.height(), "Test on window without margin option" );
assert.equal( jQuery( window ).outerHeight( true ), $win.height(), "Test on window with margin option" );
assert.equal( jQuery( document ).outerHeight(), $doc.height(), "Test on document without margin option" );
assert.equal( jQuery( document ).outerHeight( true ), $doc.height(), "Test on document with margin option" );
$div = jQuery( "#nothiddendiv" );
$div.css( "height", 30 );
assert.equal( $div.outerHeight(), 30, "Test with only width set" );
$div.css( "padding", "20px" );
assert.equal( $div.outerHeight(), 70, "Test with padding" );
$div.css( "border", "2px solid #fff" );
assert.equal( $div.outerHeight(), 74, "Test with padding and border" );
$div.css( "margin", "10px" );
assert.equal( $div.outerHeight(), 74, "Test with padding, border and margin without margin option" );
assert.equal( $div.outerHeight( true ), 94, "Test with padding, border and margin with margin option" );
$div.css( "display", "none" );
assert.equal( $div.outerHeight( true ), 94, "Test hidden div with padding, border and margin with margin option" );
// reset styles
$div.css( { "display": "", "border": "", "padding": "", "width": "", "height": "" } );
div = jQuery( "<div>" );
// Temporarily require 0 for backwards compat - should be auto
assert.equal( div.outerHeight(), 0, "Make sure that disconnected nodes are handled." );
div.remove();
} );
QUnit.test( "passing undefined is a setter #5571", function( assert ) { QUnit.test( "passing undefined is a setter #5571", function( assert ) {
assert.expect( 4 ); assert.expect( 4 );
assert.equal( jQuery( "#nothiddendiv" ).height( 30 ).height( undefined ).height(), 30, ".height(undefined) is chainable (#5571)" ); assert.equal( jQuery( "#nothiddendiv" ).height( 30 ).height( undefined ).height(), 30, ".height(undefined) is chainable (#5571)" );