Dimensions: fall back to offsetWidth/Height for inline elems

Close gh-3577
Fixes gh-3571

diff --git a/src/css.js b/src/css.js
index 2ce343300f2364d6755352af2e7e06f2c1a124cb..48a83404b21e0919c941e1e0bf1ba3459850f21d 100644 (file)
--- a/src/css.js
+++ b/src/css.js
@@ -144,6 +144,12 @@ function getWidthOrHeight( elem, name, extra ) {
        valueIsBorderBox = isBorderBox &&
                ( support.boxSizingReliable() || val === elem.style[ name ] );
 
+       // Fall back to offsetWidth/Height when value is "auto"
+       // This happens for inline elements with no explicit setting (gh-3571)
+       if ( val === "auto" ) {
+               val = elem[ "offset" + name[ 0 ].toUpperCase() + name.slice( 1 ) ];
+       }
+
        // Normalize "", auto, and prepare for extra
        val = parseFloat( val ) || 0;
 

diff --git a/src/css/curCSS.js b/src/css/curCSS.js
index de5333030278e87e88f0084d4d600823722b05db..e44551a47154ee51b10e2b38b01d843d9e8ffed4 100644 (file)
--- a/src/css/curCSS.js
+++ b/src/css/curCSS.js
@@ -10,8 +10,7 @@ define( [
 "use strict";
 
 function curCSS( elem, name, computed ) {
-       var width, minWidth, maxWidth, ret,
-               style = elem.style;
+       var width, minWidth, maxWidth, ret, style;
 
        computed = computed || getStyles( elem );
 
@@ -31,6 +30,7 @@ function curCSS( elem, name, computed ) {
                // This is against the CSSOM draft spec:
                // https://drafts.csswg.org/cssom/#resolved-values
                if ( !support.pixelMarginRight() && rnumnonpx.test( ret ) && rmargin.test( name ) ) {
+                       style = elem.style;
 
                        // Remember the original values
                        width = style.width;

diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js
index 1bf4ae2aa04b0f82b292c4cda995a793040bc493..cba82118599c44eb69806cac0d9bdbc97e63ea7b 100644 (file)
--- a/test/unit/dimensions.js
+++ b/test/unit/dimensions.js
@@ -538,4 +538,18 @@ QUnit.test( "width/height on element with transform (gh-3193)", function( assert
        assert.equal( $elem.height(), 200, "Height ignores transforms" );
 } );
 
+QUnit.test( "width/height on an inline element with no explicitly-set dimensions (gh-3571)", function( assert ) {
+       assert.expect( 8 );
+
+       var $elem = jQuery( "<span style='border: 2px solid black;padding: 1px;margin: 3px;'>Hello, I'm some text.</span>" ).appendTo( "#qunit-fixture" );
+
+       jQuery.each( [ "Width", "Height" ], function( i, method ) {
+               var val = $elem[ method.toLowerCase() ]();
+               assert.notEqual( val, 0, method + " should not be zero on inline element." );
+               assert.equal( $elem[ "inner" + method ](), val + 2, "inner" + method + " should include padding" );
+               assert.equal( $elem[ "outer" + method ](), val + 6, "outer" + method + " should include padding and border" );
+               assert.equal( $elem[ "outer" + method ]( true ), val + 12, "outer" + method + "(true) should include padding, border, and margin" );
+       } );
+} );
+
 } )();