Dimensions: outerWidth/Height include scrollbar

Fixes gh-1729
Closes gh-2694

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

diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js
index cdf02483717ef1bab58e63ea61adf13cf2b879dd..dfc7697f2943e1b4b535477f033cd8171ca15363 100644 (file)
--- a/test/unit/dimensions.js
+++ b/test/unit/dimensions.js
@@ -202,10 +202,11 @@ QUnit.test( "outerWidth()", function( assert ) {
 
        var $div, div,
                $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( true ), $win.width(), "Test on window with margin option" );
+       assert.equal( jQuery( window ).outerWidth(), winwidth, "Test on window without 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( true ), $doc.width(), "Test on document with margin option" );
 
@@ -235,6 +236,45 @@ QUnit.test( "outerWidth()", function( assert ) {
        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 ) {
        assert.expect( 16 );
 
@@ -353,43 +393,6 @@ QUnit.test( "box-sizing:border-box child of a hidden elem (or unconnected node)
        $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 ) {
        assert.expect( 4 );
        assert.equal( jQuery( "#nothiddendiv" ).height( 30 ).height( undefined ).height(), 30, ".height(undefined) is chainable (#5571)" );