Skip to content
Permalink
Browse files
Optimize width/height retrieval (moved logic to getWH, removed adjust…
…WH). Supplements #9441, #9300.
  • Loading branch information
timmywil committed Jun 7, 2011
1 parent 80ad14b commit 75203de7435b7f32c69da1dde88aa6708bf6bb7d
Showing with 50 additions and 72 deletions.
  1. +39 −62 src/css.js
  2. +3 −3 src/dimensions.js
  3. +8 −7 test/unit/dimensions.js
@@ -172,59 +172,21 @@ jQuery.each(["height", "width"], function( i, name ) {

if ( computed ) {
if ( elem.offsetWidth !== 0 ) {
val = getWH( elem, name, extra );
return getWH( elem, name, extra );
} else {
jQuery.swap( elem, cssShow, function() {
val = getWH( elem, name, extra );
});
}

if ( val <= 0 ) {
val = curCSS( elem, name, name );

if ( val === "0px" && currentStyle ) {
val = currentStyle( elem, name, name );
}

if ( val != null ) {
fellback = true;
}
}

if ( !fellback && ( val < 0 || val == null ) ) {
val = elem.style[ name ];
fellback = true;
}

// Should return "auto" instead of 0, use 0 for
// temporary backwards-compat
if ( fellback && ( val === "" || val === "auto" ) ) {
val = "0px";
} else if ( typeof val !== "string" ) {
val += "px";
}

if ( extra ) {
val = parseFloat( val ) || 0;
if ( fellback ) {
val += adjustWH( elem, name, "padding" );
if ( extra !== "padding" ) {
val += adjustWH( elem, name, "border", "Width" );
}
}
if ( extra === "margin" ) {
val += adjustWH( elem, name, "margin" );
}
}

return val;
}
},

set: function( elem, value ) {
if ( rnumpx.test( value ) ) {
// ignore negative width and height values #1599
value = parseFloat(value);
value = parseFloat( value );

if ( value >= 0 ) {
return value + "px";
@@ -347,36 +309,51 @@ if ( document.documentElement.currentStyle ) {
curCSS = getComputedStyle || currentStyle;

function getWH( elem, name, extra ) {
var val = name === "width" ? elem.offsetWidth : elem.offsetHeight;

if ( extra === "border" ) {
return val;
}
// Start with offset property
var val = name === "width" ? elem.offsetWidth : elem.offsetHeight,
which = name === "width" ? cssWidth : cssHeight;

if ( !extra ) {
val -= adjustWH( elem, name, "padding");
if ( extra !== "margin" && extra !== "border" ) {
jQuery.each( which, function() {
val -= parseFloat( jQuery.css( elem, "border" + this + "Width" ) ) || 0;
if ( !extra ) {
val -= parseFloat( jQuery.css( elem, "padding" + this ) ) || 0;
}
});
}

if ( extra !== "margin" ) {
val -= adjustWH( elem, name, "border", "Width");
if ( val > 0 ) {
if ( extra === "margin" ) {
jQuery.each( which, function() {
val += parseFloat( jQuery.css( elem, extra + this ) ) || 0;
});
}
return val + "px";
}

return val;
}

function adjustWH( elem, name, prepend, append ) {
var which = name === "width" ? cssWidth : cssHeight,
val = 0;

if( !append ){
append = "";
// Fall back to computed then uncomputed css if necessary
val = curCSS( elem, name, name );
if ( val < 0 || val == null ) {
val = elem.style[ name ] || 0;
}
// Normalize "", auto, and prepare for extra
val = parseFloat( val ) || 0;

// Add padding, border, margin
if ( extra ) {
jQuery.each( which, function() {
val += parseFloat( jQuery.css( elem, "padding" + this ) ) || 0;
if ( extra !== "padding" ) {
val += parseFloat( jQuery.css( elem, "border" + this + "Width" ) ) || 0;
}
if ( extra === "margin" ) {
val += parseFloat( jQuery.css( elem, extra + this ) ) || 0;
}
});
}

jQuery.each( which, function() {
val += parseFloat( jQuery.css( elem, prepend + this + append ) ) || 0;
});

return val;
return val + "px";
}

if ( jQuery.expr && jQuery.expr.filters ) {
@@ -1,20 +1,20 @@
(function( jQuery ) {

// Create innerHeight, innerWidth, outerHeight and outerWidth methods
// Create width, height, innerHeight, innerWidth, outerHeight and outerWidth methods
jQuery.each([ "Height", "Width" ], function( i, name ) {

var type = name.toLowerCase();

// innerHeight and innerWidth
jQuery.fn["inner" + name] = function() {
jQuery.fn[ "inner" + name ] = function() {
var elem = this[0];
return elem && elem.style ?
parseFloat( jQuery.css( elem, type, "padding" ) ) :
null;
};

// outerHeight and outerWidth
jQuery.fn["outer" + name] = function( margin ) {
jQuery.fn[ "outer" + name ] = function( margin ) {
var elem = this[0];
return elem && elem.style ?
parseFloat( jQuery.css( elem, type, margin ? "margin" : "border" ) ) :
@@ -214,23 +214,24 @@ test("outerWidth()", function() {
test("child of a hidden elem has accurate inner/outer/Width()/Height() see #9441 #9300", function() {
expect(8);

//setup html
var $divNormal = jQuery( '<div>' ).css({ width: "100px", border: "10px solid white", padding: "2px", margin: "3px" });
var $divChild = $divNormal.clone();
var $divHiddenParent = jQuery( '<div>' ).css( "display", "none" ).append( $divChild );
jQuery( 'body' ).append( $divHiddenParent ).append( $divNormal );
// setup html
var $divNormal = jQuery("<div>").css({ width: "100px", height: "100px", border: "10px solid white", padding: "2px", margin: "3px" }),
$divChild = $divNormal.clone(),
$divHiddenParent = jQuery("<div>").css( "display", "none" ).append( $divChild ).appendTo("body");
$divNormal.appendTo("body");

//tests that child div of a hidden div works the same as a normal div
// tests that child div of a hidden div works the same as a normal div
equals( $divChild.width(), $divNormal.width(), "child of a hidden element width() is wrong see #9441" );
equals( $divChild.innerWidth(), $divNormal.innerWidth(), "child of a hidden element innerWidth() is wrong see #9441" );
equals( $divChild.outerWidth(), $divNormal.outerWidth(), "child of a hidden element outerWidth() is wrong see #9441" );
equals( $divChild.outerWidth(true), $divNormal.outerWidth( true ), "child of a hidden element outerWidth( true ) is wrong see #9300" );

equals( $divChild.height(), $divNormal.height(), "child of a hidden element height() is wrong see #9441" );
equals( $divChild.innerHeight(), $divNormal.innerHeight(), "child of a hidden element innerHeight() is wrong see #9441" );
equals( $divChild.outerHeight(), $divNormal.outerHeight(), "child of a hidden element outerHeight() is wrong see #9441" );
equals( $divChild.outerHeight(true), $divNormal.outerHeight( true ), "child of a hidden element outerHeight( true ) is wrong see #9300" );

//teardown html
// teardown html
$divHiddenParent.remove();
$divNormal.remove();
});

1 comment on commit 75203de

@mikesherov

This comment has been minimized.

Copy link
Member

@mikesherov mikesherov commented on 75203de Jun 7, 2011

You left var fellback in from my commit which is now unnecessary. Otherwise, good stuff!

Please sign in to comment.