deac/jquery
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

width and height methods are now working properly

Browse source
This commit is contained in:
Brandon Aaron 2007-12-18 03:53:09 +00:00
parent 76c1889e22
commit fc51e14b81
3 changed files with 64 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/core.js
View file

@ -764,9 +764,10 @@ 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 ];
}
@ -774,16 +775,21 @@ jQuery.extend({
// 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") )
@ -791,7 +797,7 @@ jQuery.extend({
else
jQuery.swap( elem, props, getWH );
return name == "width" ? width : height;
return val;
}
return jQuery.curCSS( elem, name, force );

4
test/index.html
View file

@ -20,7 +20,9 @@
<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;">

53
test/unit/core.js
View file

@ -473,12 +473,55 @@ test("jQuery.css(elem, 'height') doesn't clear radio buttons (bug #1095)", funct
});
test("width()", function() {
expect(2);
expect(9);
$("#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.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);
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() {