Changeset 4217

Timestamp:

12/18/07 03:53:09 (1 year ago)

Author:

brandon.aaron

Message:

width and height methods are now working properly

Location:

trunk/jquery

Files:

• src/core.js (modified) (3 diffs)
• test/index.html (modified) (1 diff)
• test/unit/core.js (modified) (1 diff)

trunk/jquery/src/core.js

@@ -765 +765 @@
     // 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 ];
         }
@@ -775 +776 @@
         // 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);
             }
         
@@ -791 +797 @@
             else
                 jQuery.swap( elem, props, getWH );
-
-            return name == "width" ? width : height;
+            
+            return val;
         }
         

trunk/jquery/test/index.html

@@ -21 +21 @@
     
     <!-- 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>

trunk/jquery/test/unit/core.js

@@ -474 +474 @@
 
 test("width()", function() {
-    expect(2);
-
-    $("#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");
+    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);
+
+    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" });
 });