Fix #12088, Safari 5 and more percentages in getComputedStyle

In particular, min-width and max-width are taunting the awesome hack. Closes gh-865.

diff --git a/src/css.js b/src/css.js
index 6c43be3999cbf99b215e3038749c6b31847cfc20..41b978542e4fac7e4831dc736a590b56b9b51c9c 100644 (file)
--- 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
index d9f579053888af84e98e72338c531fd9ca5e8491..e4a8b7c83cfaa83732413132083c4c982c249db4 100644 (file)
--- 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
index 9880a8bdbdd893e09563a05b7e82eb2904de57f5..45aee9f06538e49ae5493209b7bb5dd22c9546e2 100644 (file)
--- 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
index 4c8cf57885fb27eec81d331095c80f92ad8378b0..8b03b9ffc9b9679db8408b52bb70751d1422e1c4 100644 (file)
--- 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 );