Fix #10639. Make percent-specified margins return px values in WebKit.

mikesherov · dmethvin · commit 7f6a99131338 · 2011-12-06T20:32:26.000-05:00
diff --git a/src/css.js b/src/css.js
@@ -7,6 +7,7 @@ var ralpha = /alpha\([^)]*\)/i,
 	rnumpx = /^-?\d+(?:px)?$/i,
 	rnumnopx = /^-?\d+(?!px)[^\d\s]+$/i,
 	rrelNum = /^([\-+])=([\-+.\de]+)/,
+	rmargin = /^margin/,
 
 	cssShow = { position: "absolute", visibility: "hidden", display: "block" },
 	cssWidth = [ "Left", "Right" ],
@@ -256,7 +257,7 @@ jQuery(function() {
 
 if ( document.defaultView && document.defaultView.getComputedStyle ) {
 	getComputedStyle = function( elem, name ) {
-		var ret, defaultView, computedStyle;
+		var ret, defaultView, computedStyle, width, style = elem.style;
 
 		name = name.replace( rupper, "-$1" ).toLowerCase();
 
@@ -268,6 +269,16 @@ if ( document.defaultView && document.defaultView.getComputedStyle ) {
 			}
 		}
 
+		// A tribute to the "awesome hack by Dean Edwards"
+		// WebKit uses "computed value (percentage if specified)" instead of "used value" for margins
+		// which is against the CSSOM draft spec: http://dev.w3.org/csswg/cssom/#resolved-values
+		if ( !jQuery.support.pixelMargin && computedStyle && rmargin.test( name ) && rnumnopx.test( ret ) ) {
+			width = style.width;
+			style.width = ret;
+			ret = computedStyle.width;
+			style.width = width;
+		}
+
 		return ret;
 	};
 }
@@ -299,7 +310,7 @@ if ( document.documentElement.currentStyle ) {
 			if ( rsLeft ) {
 				elem.runtimeStyle.left = elem.currentStyle.left;
 			}
-			style.left = name === "fontSize" ? "1em" : ( ret || 0 );
+			style.left = name === "fontSize" ? "1em" : ret;
 			ret = style.pixelLeft + "px";
 
 			// Revert the changed values
diff --git a/src/support.js b/src/support.js
@@ -91,7 +91,8 @@ jQuery.support = (function() {
 		noCloneEvent: true,
 		inlineBlockNeedsLayout: false,
 		shrinkWrapBlocks: false,
-		reliableMarginRight: true
+		reliableMarginRight: true,
+		pixelMargin: true
 	};
 
 	// Make sure checked status is properly cloned
@@ -277,6 +278,11 @@ jQuery.support = (function() {
 		offsetSupport.subtractsBorderForOverflowNotVisible = ( inner.offsetTop === -5 );
 		offsetSupport.doesNotIncludeMarginInBodyOffset = ( body.offsetTop !== conMarginTop );
 
+		if( window.getComputedStyle ) {
+			div.style.marginTop = "1%";
+			support.pixelMargin = ( window.getComputedStyle( div, null ) || { marginTop: 0 } ).marginTop !== "1%";
+		}
+
 		body.removeChild( container );
 		div  = container = null;
 
diff --git a/test/unit/css.js b/test/unit/css.js
@@ -542,4 +542,11 @@ test("Do not append px to 'fill-opacity' #9548", 1, function() {
 		equal( jQuery(this).css("fill-opacity"), 1, "Do not append px to 'fill-opacity'");
 	});
 
+});
+
+test("outerWidth(true) and css('margin') returning % instead of px in Webkit, see #10639", function() {
+	var container = jQuery( "<div/>" ).width(400).appendTo( "#qunit-fixture" ),
+		el = jQuery( "<div/>" ).css({ width: "50%", marginRight: "50%" }).appendTo( container );
+
+	equal( el.outerWidth(true), 400, "outerWidth(true) and css('margin') returning % instead of px in Webkit, see #10639" );
 });
