diff --git a/src/css.js b/src/css.js index 2ce343300..48a83404b 100644 --- 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 de5333030..e44551a47 100644 --- 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 1bf4ae2aa..cba821185 100644 --- 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( "Hello, I'm some text." ).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" ); + } ); +} ); + } )();