From: Mike Sherov Date: Sat, 16 Jun 2012 01:20:41 +0000 (-0400) Subject: Fix #9505, percentage position values in Webkit, closes gh-825. X-Git-Tag: 1.8b1~32 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=0b352f6cb58a1ece3f5d1fb978cdb40bd5b0e854;p=jquery.git Fix #9505, percentage position values in Webkit, closes gh-825. --- diff --git a/src/css.js b/src/css.js index e3390793a..d23284a1c 100644 --- a/src/css.js +++ b/src/css.js @@ -135,8 +135,6 @@ jQuery.extend({ var ret = curCSS( elem, "opacity" ); return ret === "" ? "1" : ret; - } else { - return elem.style.opacity; } } } @@ -288,16 +286,16 @@ if ( document.defaultView && document.defaultView.getComputedStyle ) { if ( ret === "" && !jQuery.contains( elem.ownerDocument.documentElement, elem ) ) { ret = jQuery.style( elem, name ); } - } - // 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 ) && rnumnonpx.test( ret ) ) { - width = style.width; - style.width = ret; - ret = computedStyle.width; - style.width = width; + // 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 ) ) { + width = style.width; + style.width = ret; + ret = computedStyle.width; + style.width = width; + } } return ret; @@ -544,9 +542,9 @@ if ( !jQuery.support.opacity ) { }; } +// These hooks cannot be added until DOM ready because the support test +// for it is not run until after DOM ready jQuery(function() { - // This hook cannot be added until DOM ready because the support test - // for it is not run until after DOM ready if ( !jQuery.support.reliableMarginRight ) { jQuery.cssHooks.marginRight = { get: function( elem, computed ) { @@ -562,6 +560,24 @@ jQuery(function() { } }; } + + // Webkit bug: https://bugs.webkit.org/show_bug.cgi?id=29084 + // getComputedStyle returns percent when specified for top/left/bottom/right + // rather than make the css module depend on the offset module, we just check for it here + if ( !jQuery.support.pixelPosition && jQuery.fn.position ) { + jQuery.each( [ "top", "left" ], function( i, prop ) { + jQuery.cssHooks[ prop ] = { + get: function( elem, computed ) { + if ( computed ) { + var ret = curCSS( elem, prop ); + // if curCSS returns percentage, fallback to offset + return rnumnonpx.test( ret ) ? jQuery( elem ).position()[ prop ] + "px" : ret; + } + } + }; + }); + } + }); if ( jQuery.expr && jQuery.expr.filters ) { diff --git a/src/effects.js b/src/effects.js index 3f0c04847..dcd7e2cbb 100644 --- a/src/effects.js +++ b/src/effects.js @@ -21,7 +21,7 @@ var fxNow, timerId, // Iteratively approximate from a nonzero starting point // Prefer the current property, because this process will be trivial if it uses the same units // Fallback to end or a simple constant - start = parseFloat( jQuery.style( tween.elem, prop ) ) || end || 1; + start = parseFloat( jQuery.css( tween.elem, prop ) ) || end || 1; do { // If previous iteration zeroed out, double until we get *something* diff --git a/src/support.js b/src/support.js index 65081e40c..06170a39b 100644 --- a/src/support.js +++ b/src/support.js @@ -90,7 +90,8 @@ jQuery.support = (function() { shrinkWrapBlocks: false, reliableMarginRight: true, pixelMargin: true, - boxSizingReliable: true + boxSizingReliable: true, + pixelPosition: false }; // Make sure checked status is properly cloned @@ -206,11 +207,12 @@ jQuery.support = (function() { // Check box-sizing and margin behavior div.innerHTML = ""; - div.style.cssText = "box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;"; + div.style.cssText = "box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%;"; support.boxSizing = ( div.offsetWidth === 4 ); support.doesNotIncludeMarginInBodyOffset = ( body.offsetTop !== 1 ); 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"; // Check if div with explicit width and no margin-right incorrectly diff --git a/test/unit/css.js b/test/unit/css.js index ea57c9abe..ac8795749 100644 --- a/test/unit/css.js +++ b/test/unit/css.js @@ -713,12 +713,23 @@ test("can't get background-position in IE<9, see #10796", function() { } }); -test("percentage position properties in IE<9 should not be incorrectly transformed to pixels, see #11311", function() { +test("percentage properties for bottom and right in IE<9 should not be incorrectly transformed to pixels, see #11311", function() { expect( 1 ); var div = jQuery("
").appendTo( "#qunit-fixture" ); ok( window.getComputedStyle || div.css( "bottom" ) === "50%", "position properties get incorrectly transformed in IE<8, see #11311" ); }); +if ( jQuery.fn.offset ) { + test("percentage properties for left and top should be transformed to pixels, see #9505", function() { + expect( 2 ); + var parent = jQuery("
").appendTo( "#qunit-fixture" ), + div = jQuery("
").appendTo( parent ); + + equal( div.css("top"), "100px", "position properties not transformed to pixels, see #9505" ); + equal( div.css("left"), "100px", "position properties not transformed to pixels, see #9505" ); + }); +} + test("Do not append px to 'fill-opacity' #9548", 1, function() { var $div = jQuery("
").appendTo("#qunit-fixture").css("fill-opacity", 1); equal( $div.css("fill-opacity"), 1, "Do not append px to 'fill-opacity'");