Skip to content
Permalink
Browse files

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

  • Loading branch information...
mikesherov authored and dmethvin committed Jun 16, 2012
1 parent a101e81 commit 0b352f6cb58a1ece3f5d1fb978cdb40bd5b0e854
Showing with 46 additions and 17 deletions.
  1. +29 −13 src/css.js
  2. +1 −1 src/effects.js
  3. +4 −2 src/support.js
  4. +12 −1 test/unit/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 ) {
@@ -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*
@@ -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
@@ -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'");

0 comments on commit 0b352f6

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.