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 75203de
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 72 deletions.
101 src/css.js
View file
@@ -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 ) {
6 src/dimensions.js
View file
@@ -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" ) ) :
15 test/unit/dimensions.js
View file
@@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Please sign in to comment.