library-mirrors/jquery
1
0
Fork 0
mirror of https://github.com/jquery/jquery.git synced 2024-10-05 11:34:18 +00:00
Code Issues Actions 1 Packages Projects 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 // A method for quickly swapping in/out CSS properties to get correct calculations
swap: function( elem, options, callback ) { swap: function( elem, options, callback ) {
var old = {};
// Remember the old values, and insert the new ones // Remember the old values, and insert the new ones
for ( var name in options ) { for ( var name in options ) {
elem.style[ "old" + name ] = elem.style[ name ]; old[ name ] = elem.style[ name ];
elem.style[ name ] = options[ name ]; elem.style[ name ] = options[ name ];
} }
@ -774,16 +775,21 @@ jQuery.extend({
// Revert the old values // Revert the old values
for ( var name in options ) for ( var name in options )
elem.style[ name ] = elem.style[ "old" + name ]; elem.style[ name ] = old[ name ];
}, },
css: function( elem, name, force ) { css: function( elem, name, force ) {
if ( name == "width" || name == "height" ) { 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() { function getWH() {
width = elem.clientWidth; val = name == "width" ? elem.offsetWidth : elem.offsetHeight;
height = elem.clientHeight; 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") ) if ( jQuery(elem).is(":visible") )
@ -791,7 +797,7 @@ jQuery.extend({
else else
jQuery.swap( elem, props, getWH ); jQuery.swap( elem, props, getWH );
return name == "width" ? width : height; return val;
} }
return jQuery.curCSS( elem, name, force ); return jQuery.curCSS( elem, name, force );

4
test/index.html
View File

@ -20,7 +20,9 @@
<h2 id="userAgent"></h2> <h2 id="userAgent"></h2>
<!-- Test HTML --> <!-- 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 --> <!-- 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> <iframe id="loadediframe" name="loadediframe" style="display:none;" src="data/iframe.html"></iframe>
<dl id="dl" style="display:none;"> <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() { test("width()", function() {
expect(2); expect(9);
$("#nothiddendiv").width(30); var $div = $("#nothiddendiv");
equals($("#nothiddendiv").width(), 30, "Test set to 30 correctly"); $div.width(30);
$("#nothiddendiv").width(-1); // handle negative numbers by ignoring #1599 equals($div.width(), 30, "Test set to 30 correctly");
equals($("#nothiddendiv").width(), 30, "Test negative width ignored"); $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() { test("text()", function() {