CSS: Correct misrepresentation of "auto" horizontal margins as 0

Fixes gh-2237
Closes gh-2276

2 files changed, 35 insertions, 9 deletions

diff --git a/src/css.js b/src/css.js
index 17c47453a..2a82b3845 100644
--- a/src/css.js
+++ b/src/css.js
@@ -434,6 +434,19 @@ jQuery.cssHooks.marginRight = addGetHookIf( support.reliableMarginRight,
 	}
 );
 
+jQuery.cssHooks.marginLeft = addGetHookIf( support.reliableMarginLeft,
+	function( elem, computed ) {
+		if ( computed ) {
+			return ( parseFloat( curCSS( elem, "marginLeft" ) ) ||
+				elem.getBoundingClientRect().left -
+					swap( elem, { marginLeft: 0 }, function() {
+						return elem.getBoundingClientRect().left;
+					} )
+				) + "px";
+		}
+	}
+);
+
 // These hooks are used by animate to expand properties
 jQuery.each( {
 	margin: "",
diff --git a/src/css/support.js b/src/css/support.js
index 96276a9e5..549cfa680 100644
--- a/src/css/support.js
+++ b/src/css/support.js
@@ -6,8 +6,8 @@ define( [
 ], function( jQuery, document, documentElement, support ) {
 
 ( function() {
-	var pixelPositionVal, boxSizingReliableVal, gBCRDimensionsVal,
-		pixelMarginRightVal, reliableHiddenOffsetsVal, reliableMarginRightVal,
+	var pixelPositionVal, pixelMarginRightVal, gBCRDimensionsVal, boxSizingReliableVal,
+		reliableHiddenOffsetsVal, reliableMarginRightVal, reliableMarginLeftVal,
 		container = document.createElement( "div" ),
 		div = document.createElement( "div" );
 
@@ -84,6 +84,15 @@ define( [
 				computeStyleTests();
 			}
 			return reliableMarginRightVal;
+		},
+
+		reliableMarginLeft: function() {
+
+			// Support: IE <=8 only, Android 4.0 - 4.3 only, Firefox <=3 - 37
+			if ( pixelPositionVal == null ) {
+				computeStyleTests();
+			}
+			return reliableMarginLeftVal;
 		}
 	} );
 
@@ -99,14 +108,13 @@ define( [
 			// Support: Android 2.3
 			// Vendor-prefix box-sizing
 			"-webkit-box-sizing:border-box;box-sizing:border-box;" +
-			"position:absolute;display:block;" +
-			"margin:0;margin-top:1%;margin-right:50%;" +
-			"border:1px;padding:1px;" +
-			"top:1%;height:4px;width:50%";
+			"position:relative;display:block;" +
+			"margin:auto;border:1px;padding:1px;" +
+			"top:1%;width:50%";
 
 		// Support: IE<9
 		// Assume reasonable values in the absence of getComputedStyle
-		pixelPositionVal = boxSizingReliableVal = false;
+		pixelPositionVal = boxSizingReliableVal = reliableMarginLeftVal = false;
 		pixelMarginRightVal = reliableMarginRightVal = true;
 
 		// Support: IE<9
@@ -117,10 +125,15 @@ define( [
 		if ( window.getComputedStyle ) {
 			divStyle = window.getComputedStyle( div );
 			pixelPositionVal = ( divStyle || {} ).top !== "1%";
-			boxSizingReliableVal = ( divStyle || { height: "4px" } ).height === "4px";
+			reliableMarginLeftVal = ( divStyle || {} ).marginLeft === "2px";
+			boxSizingReliableVal = ( divStyle || { width: "4px" } ).width === "4px";
+
+			// Support: Android 4.0 - 4.3 only
+			// Some styles come back with percentage values, even though they shouldn't
+			div.style.marginRight = "50%";
 			pixelMarginRightVal = ( divStyle || { marginRight: "4px" } ).marginRight === "4px";
 
-			// Support: Android 2.3
+			// Support: Android 2.3 only
 			// Div with explicit width and no margin-right incorrectly
 			// gets computed margin-right based on width of container (#3333)
 			// WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right