width and height methods are now working properly

diff --git a/src/core.js b/src/core.js
index 1e4f92490d69c2c5c1ff9cee9d42f43eb0271d24..4decf3e4d9c65fab06c84a0aeb394a75d2a11619 100644 (file)
--- a/src/core.js
+++ b/src/core.js
@@ -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,24 +775,29 @@ 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") )
                                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
index e854101c924a3ecf4af25daa8aa24ff6d9424d1a..bca5f5bafb93366cb38c26f06bd1045f22a35376 100644 (file)
--- a/test/index.html
+++ b/test/index.html
@@ -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;">

diff --git a/test/unit/core.js b/test/unit/core.js
index 6b2c3fe33f43eb1107f75bbd8ca7f46c3c2888ab..30fff7731ff5ecee17c575fff6b0cc5f1f28f0e9 100644 (file)
--- 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() {