Skip to content
Permalink
Browse files
width and height methods are now working properly
  • Loading branch information
brandonaaron committed Dec 18, 2007
1 parent 76c1889 commit fc51e14b810474fe9ed0b03bed5eddc82e9f7fde
Showing with 64 additions and 13 deletions.
  1. +13 −7 src/core.js
  2. +3 −1 test/index.html
  3. +48 −5 test/unit/core.js
@@ -764,34 +764,40 @@ jQuery.extend({

// A method for quickly swapping in/out CSS properties to get correct calculations
swap: function( elem, options, callback ) {
var old = {};
// Remember the old values, and insert the new ones
for ( var name in options ) {
elem.style[ "old" + name ] = elem.style[ name ];
old[ name ] = elem.style[ name ];
elem.style[ name ] = options[ name ];
}

callback.call( elem );

// Revert the old values
for ( var name in options )
elem.style[ name ] = elem.style[ "old" + name ];
elem.style[ name ] = old[ name ];
},

css: function( elem, name, force ) {
if ( name == "width" || name == "height" ) {
var width, height, props = { position: "absolute", visibility: "hidden", display:"block" };
var val, props = { position: "absolute", visibility: "hidden", display:"block" }, which = name == "width" ? [ "Left", "Right" ] : [ "Top", "Bottom" ];

function getWH() {
width = elem.clientWidth;
height = elem.clientHeight;
val = name == "width" ? elem.offsetWidth : elem.offsetHeight;
var padding = 0, border = 0;
jQuery.each( which, function() {
padding += parseFloat(jQuery.curCSS( elem, "padding" + this, true)) || 0;
border += parseFloat(jQuery.curCSS( elem, "border" + this + "Width", true)) || 0;
});
val -= Math.round(padding + border);
}

if ( jQuery(elem).is(":visible") )
getWH();
else
jQuery.swap( elem, props, getWH );

return name == "width" ? width : height;
return val;
}

return jQuery.curCSS( elem, name, force );
@@ -20,7 +20,9 @@ <h2 id="banner"></h2>
<h2 id="userAgent"></h2>

<!-- Test HTML -->
<div id="nothiddendiv" style="height:1px;background:white;"></div>
<div id="nothiddendiv" style="height:1px;background:white;">
<div id="nothiddendivchild"></div>
</div>
<!-- this iframe is outside the #main so it won't reload constantly wasting time, but it means the tests must be "safe" and clean up after themselves -->
<iframe id="loadediframe" name="loadediframe" style="display:none;" src="data/iframe.html"></iframe>
<dl id="dl" style="display:none;">
@@ -473,12 +473,55 @@ test("jQuery.css(elem, 'height') doesn't clear radio buttons (bug #1095)", funct
});

test("width()", function() {
expect(2);
expect(9);

var $div = $("#nothiddendiv");
$div.width(30);
equals($div.width(), 30, "Test set to 30 correctly");
$div.width(-1); // handle negative numbers by ignoring #1599
equals($div.width(), 30, "Test negative width ignored");
$div.css("padding", "20px");
equals($div.width(), 30, "Test padding specified with pixels");
$div.css("border", "2px solid #fff");
equals($div.width(), 30, "Test border specified with pixels");
$div.css("padding", "2em");
equals($div.width(), 30, "Test padding specified with ems");
$div.css("border", "1em solid #fff");
equals($div.width(), 30, "Test border specified with ems");
$div.css("padding", "2%");
equals($div.width(), 30, "Test padding specified with percent");
$div.hide();
equals($div.width(), 30, "Test hidden div");

$div.css({ display: "", border: "", padding: "" });

$("#nothiddendivchild").css({ padding: "3px", border: "2px solid #fff" });
equals($("#nothiddendivchild").width(), 20, "Test child width with border and padding");
$("#nothiddendiv, #nothiddendivchild").css({ border: "", padding: "", width: "" });
});

test("height()", function() {
expect(8);

$("#nothiddendiv").width(30);
equals($("#nothiddendiv").width(), 30, "Test set to 30 correctly");
$("#nothiddendiv").width(-1); // handle negative numbers by ignoring #1599
equals($("#nothiddendiv").width(), 30, "Test negative width ignored");
var $div = $("#nothiddendiv");
$div.height(30);
equals($div.height(), 30, "Test set to 30 correctly");
$div.height(-1); // handle negative numbers by ignoring #1599
equals($div.height(), 30, "Test negative height ignored");
$div.css("padding", "20px");
equals($div.height(), 30, "Test padding specified with pixels");
$div.css("border", "2px solid #fff");
equals($div.height(), 30, "Test border specified with pixels");
$div.css("padding", "2em");
equals($div.height(), 30, "Test padding specified with ems");
$div.css("border", "1em solid #fff");
equals($div.height(), 30, "Test border specified with ems");
$div.css("padding", "2%");
equals($div.height(), 30, "Test padding specified with percent");
$div.hide();
equals($div.height(), 30, "Test hidden div");

$div.css({ display: "", border: "", padding: "", height: "1px" });
});

test("text()", function() {

0 comments on commit fc51e14

Please sign in to comment.