Fix #12088, Safari 5 and more percentages in getComputedStyle

mikesherov · dmethvin · commit aa3fabce4613 · 2012-07-22T22:03:27.000-04:00
In particular, min-width and max-width are taunting the awesome hack. Closes jquerygh-865.
diff --git a/src/css.js b/src/css.js
@@ -276,7 +276,7 @@ jQuery.extend({
 // and getComputedStyle here to produce a better gzip size
 if ( window.getComputedStyle ) {
 	curCSS = function( elem, name ) {
-		var ret, width,
+		var ret, width, minWidth, maxWidth,
 			computed = getComputedStyle( elem, null ),
 			style = elem.style;
 
@@ -288,13 +288,20 @@ if ( window.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 && rmargin.test( name ) && rnumnonpx.test( ret ) ) {
+			// Chrome < 17 and Safari 5.0 uses "computed value" instead of "used value" for margin-right
+			// Safari 5.1.7 (at least) returns percentage for a larger set of values, but width seems to be reliably pixels
+			// this is against the CSSOM draft spec: http://dev.w3.org/csswg/cssom/#resolved-values
+			if ( rnumnonpx.test( ret ) && !rposition.test( name ) ) {
 				width = style.width;
-				style.width = ret;
+				minWidth = style.minWidth;
+				maxWidth = style.maxWidth;
+
+				style.minWidth = style.maxWidth = style.width = ret;
 				ret = computed.width;
+
 				style.width = width;
+				style.minWidth = minWidth;
+				style.maxWidth = maxWidth;
 			}
 		}
 
diff --git a/src/support.js b/src/support.js
@@ -91,7 +91,6 @@ jQuery.support = (function() {
 		inlineBlockNeedsLayout: false,
 		shrinkWrapBlocks: false,
 		reliableMarginRight: true,
-		pixelMargin: true,
 		boxSizingReliable: true,
 		pixelPosition: false
 	};
@@ -220,7 +219,6 @@ jQuery.support = (function() {
 		// The difference between window.getComputedStyle and getComputedStyle is
 		// 7 bytes
 		if ( window.getComputedStyle ) {
-			support.pixelMargin = ( window.getComputedStyle( div, null ) || {} ).marginTop !== "1%";
 			support.pixelPosition = ( window.getComputedStyle( div, null ) || {} ).top !== "1%";
 			support.boxSizingReliable = ( window.getComputedStyle( div, null ) || { width: "4px" } ).width === "4px";
 
diff --git a/test/unit/css.js b/test/unit/css.js
@@ -641,6 +641,15 @@ test("marginRight computed style (bug #3333)", function() {
 	equal($div.css("marginRight"), "0px", "marginRight correctly calculated with a width and display block");
 });
 
+test("box model properties incorrectly returning % instead of px, see #10639 and #12088", function() {
+	var container = jQuery("<div/>").width( 400 ).appendTo("#qunit-fixture"),
+		el = jQuery("<div/>").css({ "width": "50%", "marginRight": "50%" }).appendTo( container ),
+		el2 = jQuery("<div/>").css({ "width": "50%", "minWidth": "300px", "marginLeft": "25%" }).appendTo( container );
+
+	equal( el.css("marginRight"), "200px", "css('marginRight') returning % instead of px, see #10639" );
+	equal( el2.css("marginLeft"), "100px", "css('marginLeft') returning incorrect pixel value, see #12088" );
+});
+
 test("jQuery.cssProps behavior, (bug #8402)", function() {
 	var div = jQuery( "<div>" ).appendTo(document.body).css({
 		"position": "absolute",
diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js
@@ -292,13 +292,6 @@ test("getting dimensions shouldnt modify runtimeStyle see #9233", function() {
 	$div.remove();
 });
 
-test("outerWidth(true) 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" );
-});
-
 test( "getting dimensions of zero width/height table elements shouldn't alter dimensions", function() {
 	expect( 1 );
 
