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

This commit is contained in:
Mike Sherov 2012-06-15 21:20:41 -04:00 committed by Dave Methvin
parent a101e81bde
commit 0b352f6cb5
4 changed files with 46 additions and 17 deletions

View File

@ -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 ) {

2
src/effects.js vendored
View File

@ -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*

View File

@ -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

View File

@ -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'");