From aa3fabce461313f7c31e9a250df57165f15be873 Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Sun, 22 Jul 2012 21:58:23 -0400 Subject: [PATCH] Fix #12088, Safari 5 and more percentages in getComputedStyle In particular, min-width and max-width are taunting the awesome hack. Closes gh-865. --- src/css.js | 17 ++++++++++++----- src/support.js | 2 -- test/unit/css.js | 9 +++++++++ test/unit/dimensions.js | 7 ------- 4 files changed, 21 insertions(+), 14 deletions(-) diff --git a/src/css.js b/src/css.js index 6c43be3999..41b978542e 100644 --- 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 d9f5790538..e4a8b7c83c 100644 --- 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 9880a8bdbd..45aee9f065 100644 --- 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("
").width( 400 ).appendTo("#qunit-fixture"), + el = jQuery("
").css({ "width": "50%", "marginRight": "50%" }).appendTo( container ), + el2 = jQuery("
").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( "
" ).appendTo(document.body).css({ "position": "absolute", diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js index 4c8cf57885..8b03b9ffc9 100644 --- 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( "
" ).width(400).appendTo( "#qunit-fixture" ), - el = jQuery( "
" ).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 );