width and height methods are now working properly

jquery · Dec 18, 2007 · fc51e14b810474fe9ed0b03bed5eddc82e9f7fde · fc51e14
1 parent 76c1889
commit fc51e14b810474fe9ed0b03bed5eddc82e9f7fde
Showing with 64 additions and 13 deletions.

+13 −7 src/core.js

+3 −1 test/index.html

+48 −5 test/unit/core.js
diff --git a/src/core.js b/src/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 );

diff --git a/test/index.html b/test/index.html
@@ -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;">

diff --git a/test/unit/core.js b/test/unit/core.js
@@ -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() {