Dimensions: fall back to offsetWidth/Height for inline elems

Close gh-3577
Fixes gh-3571
This commit is contained in:
Timmy Willison 2017-03-18 14:19:32 -04:00
parent fcc9a9ec96
commit 473d2ea7d5
No known key found for this signature in database
GPG Key ID: 5F0C8B73EF56CE6F
3 changed files with 22 additions and 2 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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" );
} );
} );
} )();