Dimensions: Improve offsetWidth/offsetHeight fallback

Fixes gh-3698 Fixes gh-3602 Closes gh-3738
jquery · Jul 31, 2017 · a49578499ec88c9fbca59ff0c80b23b798a55d99 · a495784
1 parent 262acc6
commit a49578499ec88c9fbca59ff0c80b23b798a55d99
Unified Split

Showing with 28 additions and 2 deletions.

+9 −2 src/css.js

+19 −0 test/unit/dimensions.js
diff --git a/src/css.js b/src/css.js
@@ -163,10 +163,17 @@ function getWidthOrHeight( elem, dimension, extra ) {
 	valueIsBorderBox = valueIsBorderBox &&
 		( support.boxSizingReliable() || val === elem.style[ dimension ] );
 
-	// Fall back to offsetWidth/Height when value is "auto"
+	// Fall back to offsetWidth/offsetHeight when value is "auto"
 	// This happens for inline elements with no explicit setting (gh-3571)
-	if ( val === "auto" ) {
+	// Support: Android <=4.1 - 4.3 only
+	// Also use offsetWidth/offsetHeight for misreported inline dimensions (gh-3602)
+	if ( val === "auto" ||
+		!parseFloat( val ) && jQuery.css( elem, "display", false, styles ) === "inline" ) {
+
 		val = elem[ "offset" + dimension[ 0 ].toUpperCase() + dimension.slice( 1 ) ];
+
+		// offsetWidth/offsetHeight provide border-box values
+		valueIsBorderBox = true;
 	}
 
 	// Normalize "" and auto
diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js
@@ -544,6 +544,25 @@ QUnit.test( "width/height on an inline element with no explicitly-set dimensions
 	} );
 } );
 
+QUnit.test( "width/height on a table row with phantom borders (gh-3698)", function( assert ) {
+	assert.expect( 4 );
+
+	jQuery( "<table id='gh3698' style='border-collapse: separate; border-spacing: 0;'><tbody>" +
+		"<tr style='margin: 0; border: 10px solid black; padding: 0'>" +
+			"<td style='margin: 0; border: 0; padding: 0; height: 42px; width: 42px;'></td>" +
+		"</tr>" +
+	"</tbody></table>" ).appendTo( "#qunit-fixture" );
+
+	var $elem = jQuery( "#gh3698 tr" );
+
+	jQuery.each( [ "Width", "Height" ], function( i, method ) {
+		assert.equal( $elem[ "outer" + method ](), 42,
+			"outer" + method + " should match content dimensions" );
+		assert.equal( $elem[ "outer" + method ]( true ), 42,
+			"outer" + method + "(true) should match content dimensions" );
+	} );
+} );
+
 QUnit.test( "interaction with scrollbars (gh-3589)", function( assert ) {
 	assert.expect( 48 );