Fix #9505, percentage position values in Webkit, closes gh-825.

diff --git a/src/css.js b/src/css.js
index e3390793a48db0d53f77f58399b05431b2a5ec0d..d23284a1c676ffaba0ac0c663325e5cc3f96c2d1 100644 (file)
--- 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 3f0c0484733d99bdd810c0fe8c4a06e62f3d2f35..dcd7e2cbb23a8c80d74373471d36838ac74f8d08 100644 (file)
--- 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 65081e40cb5329b13e04f5c70e4a8d5bc6f06523..06170a39bcbc153594945fe6f291c02357c58186 100644 (file)
--- 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 ea57c9abee588d8d819031dd70eb06560f5f9ef8..ac879574966c0047be3df48f62431de5ecf54dd0 100644 (file)
--- 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("<div style='position: absolute; width: 1px; height: 20px; bottom:50%;'></div>").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("<div style='position:relative;width:200px;height:200px;margin:0;padding:0;border-width:0'></div>").appendTo( "#qunit-fixture" ),
+                       div = jQuery("<div style='position: absolute; width: 20px; height: 20px; top:50%; left:50%'></div>").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("<div>").appendTo("#qunit-fixture").css("fill-opacity", 1);
        equal( $div.css("fill-opacity"), 1, "Do not append px to 'fill-opacity'");