Skip to content

Commit 7d44d7f

Browse files
dmethvindmethvin
committed
Dimensions: outerWidth/Height include scrollbar
Fixes gh-1729 Closes gh-2694
1 parent 2cb8eba commit 7d44d7f

File tree

2 files changed

+47
-44
lines changed

2 files changed

+47
-44
lines changed

‎src/dimensions.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@ jQuery.each( { Height: "height", Width: "width" }, function( name, type ) {
1919

2020
if ( jQuery.isWindow( elem ) ) {
2121

22-
// As of 5/8/2012 this will yield incorrect results for Mobile Safari, but there
23-
// isn't a whole lot we can do. See pull request at this URL for discussion:
24-
// https://github.com/jquery/jquery/pull/764
25-
return elem.document.documentElement[ "client" + name ];
22+
// $( window ).outerWidth/Height return w/h including scrollbars (gh-1729)
23+
return funcName.indexOf( "outer" ) === 0 ?
24+
elem[ "inner" + name ] :
25+
elem.document.documentElement[ "client" + name ];
2626
}
2727

2828
// Get document width or height

‎test/unit/dimensions.js‎

Lines changed: 43 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -202,10 +202,11 @@ QUnit.test( "outerWidth()", function( assert ) {
202202

203203
var $div, div,
204204
$win = jQuery( window ),
205-
$doc = jQuery( document );
205+
$doc = jQuery( document ),
206+
winwidth = $win.prop( "innerWidth" );
206207

207-
assert.equal( jQuery( window ).outerWidth(), $win.width(), "Test on window without margin option" );
208-
assert.equal( jQuery( window ).outerWidth( true ), $win.width(), "Test on window with margin option" );
208+
assert.equal( jQuery( window ).outerWidth(), winwidth, "Test on window without margin option" );
209+
assert.equal( jQuery( window ).outerWidth( true ), winwidth, "Test on window with margin option" );
209210
assert.equal( jQuery( document ).outerWidth(), $doc.width(), "Test on document without margin option" );
210211
assert.equal( jQuery( document ).outerWidth( true ), $doc.width(), "Test on document with margin option" );
211212

@@ -235,6 +236,45 @@ QUnit.test( "outerWidth()", function( assert ) {
235236
div.remove();
236237
} );
237238

239+
QUnit.test( "outerHeight()", function( assert ) {
240+
assert.expect( 11 );
241+
242+
var $div, div,
243+
$win = jQuery( window ),
244+
$doc = jQuery( document ),
245+
winheight = $win.prop( "innerHeight" );
246+
247+
assert.equal( jQuery( window ).outerHeight(), winheight, "Test on window without margin option" );
248+
assert.equal( jQuery( window ).outerHeight( true ), winheight, "Test on window with margin option" );
249+
assert.equal( jQuery( document ).outerHeight(), $doc.height(), "Test on document without margin option" );
250+
assert.equal( jQuery( document ).outerHeight( true ), $doc.height(), "Test on document with margin option" );
251+
252+
$div = jQuery( "#nothiddendiv" );
253+
$div.css( "height", 30 );
254+
255+
assert.equal( $div.outerHeight(), 30, "Test with only height set" );
256+
$div.css( "padding", "20px" );
257+
assert.equal( $div.outerHeight(), 70, "Test with padding" );
258+
$div.css( "border", "2px solid #fff" );
259+
assert.equal( $div.outerHeight(), 74, "Test with padding and border" );
260+
$div.css( "margin", "10px" );
261+
assert.equal( $div.outerHeight(), 74, "Test with padding, border and margin without margin option" );
262+
$div.css( "position", "absolute" );
263+
assert.equal( $div.outerHeight( true ), 94, "Test with padding, border and margin with margin option" );
264+
$div.css( "display", "none" );
265+
assert.equal( $div.outerHeight( true ), 94, "Test hidden div with padding, border and margin with margin option" );
266+
267+
// reset styles
268+
$div.css( { "position": "", "display": "", "border": "", "padding": "", "width": "", "height": "" } );
269+
270+
div = jQuery( "<div>" );
271+
272+
// Temporarily require 0 for backwards compat - should be auto
273+
assert.equal( div.outerWidth(), 0, "Make sure that disconnected nodes are handled." );
274+
275+
div.remove();
276+
} );
277+
238278
QUnit.test( "child of a hidden elem (or unconnected node) has accurate inner/outer/Width()/Height() see #9441 #9300", function( assert ) {
239279
assert.expect( 16 );
240280

@@ -353,43 +393,6 @@ QUnit.test( "box-sizing:border-box child of a hidden elem (or unconnected node)
353393
$divNormal.remove();
354394
} );
355395

356-
QUnit.test( "outerHeight()", function( assert ) {
357-
assert.expect( 11 );
358-
359-
var $div, div,
360-
$win = jQuery( window ),
361-
$doc = jQuery( document );
362-
363-
assert.equal( jQuery( window ).outerHeight(), $win.height(), "Test on window without margin option" );
364-
assert.equal( jQuery( window ).outerHeight( true ), $win.height(), "Test on window with margin option" );
365-
assert.equal( jQuery( document ).outerHeight(), $doc.height(), "Test on document without margin option" );
366-
assert.equal( jQuery( document ).outerHeight( true ), $doc.height(), "Test on document with margin option" );
367-
368-
$div = jQuery( "#nothiddendiv" );
369-
$div.css( "height", 30 );
370-
371-
assert.equal( $div.outerHeight(), 30, "Test with only width set" );
372-
$div.css( "padding", "20px" );
373-
assert.equal( $div.outerHeight(), 70, "Test with padding" );
374-
$div.css( "border", "2px solid #fff" );
375-
assert.equal( $div.outerHeight(), 74, "Test with padding and border" );
376-
$div.css( "margin", "10px" );
377-
assert.equal( $div.outerHeight(), 74, "Test with padding, border and margin without margin option" );
378-
assert.equal( $div.outerHeight( true ), 94, "Test with padding, border and margin with margin option" );
379-
$div.css( "display", "none" );
380-
assert.equal( $div.outerHeight( true ), 94, "Test hidden div with padding, border and margin with margin option" );
381-
382-
// reset styles
383-
$div.css( { "display": "", "border": "", "padding": "", "width": "", "height": "" } );
384-
385-
div = jQuery( "<div>" );
386-
387-
// Temporarily require 0 for backwards compat - should be auto
388-
assert.equal( div.outerHeight(), 0, "Make sure that disconnected nodes are handled." );
389-
390-
div.remove();
391-
} );
392-
393396
QUnit.test( "passing undefined is a setter #5571", function( assert ) {
394397
assert.expect( 4 );
395398
assert.equal( jQuery( "#nothiddendiv" ).height( 30 ).height( undefined ).height(), 30, ".height(undefined) is chainable (#5571)" );

0 commit comments

Comments
 (0)