diff options
| -rw-r--r-- | src/core.js | 20 | ||||
| -rw-r--r-- | test/index.html | 4 | ||||
| -rw-r--r-- | test/unit/core.js | 53 |
3 files changed, 64 insertions, 13 deletions
diff --git a/src/core.js b/src/core.js index 1e4f92490..4decf3e4d 100644 --- 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 e854101c9..bca5f5baf 100644 --- 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 6b2c3fe33..30fff7731 100644 --- 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() { |