From 7f6a991313380b74d5fb18782fb6b99fd6c4a22d Mon Sep 17 00:00:00 2001 From: Mike Sherov Date: Tue, 6 Dec 2011 20:32:26 -0500 Subject: [PATCH] Fix #10639. Make percent-specified margins return px values in WebKit. --- src/css.js | 15 +++++++++++++-- src/support.js | 8 +++++++- test/unit/css.js | 7 +++++++ 3 files changed, 27 insertions(+), 3 deletions(-) diff --git a/src/css.js b/src/css.js index 810d181785..7d5abe9758 100644 --- 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 index da5fec8ff2..f2fa161e0c 100644 --- 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 index 67f4504081..2021d897dc 100644 --- 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( "
" ).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" ); }); \ No newline at end of file