diff options
| -rw-r--r-- | src/css.js | 48 | ||||
| -rw-r--r-- | test/unit/dimensions.js | 79 |
2 files changed, 110 insertions, 17 deletions
diff --git a/src/css.js b/src/css.js index c5c01ecac..02bedf0b5 100644 --- a/src/css.js +++ b/src/css.js @@ -338,25 +338,39 @@ curCSS = getComputedStyle || currentStyle; function getWH( elem, name, extra ) { var which = name === "width" ? cssWidth : cssHeight, - val = name === "width" ? elem.offsetWidth : elem.offsetHeight; - - if ( extra === "border" ) { - return val; + cur = curCSS(elem, name), + // We're addressing the way Firefox handles certain inputs and buttons, offsetWidth/height actually returns a normal width/height + ff = /input|button/i.test( elem.tagName.toLowerCase() ) && curCSS( elem, '-moz-box-sizing' ) === 'border-box'; + + // IE will return auto if we try to grab a width/height that is not set + if( ff || cur === 'auto') { + cur = name === "width" ? elem.offsetWidth : elem.offsetHeight; } - - jQuery.each( which, function() { - if ( !extra ) { - val -= parseFloat(jQuery.css( elem, "padding" + this )) || 0; - } - - if ( extra === "margin" ) { - val += parseFloat(jQuery.css( elem, "margin" + this )) || 0; - - } else { - val -= parseFloat(jQuery.css( elem, "border" + this + "Width" )) || 0; + + // Fixes an IE7 effects test. "Chain show hide" was returning "scroll" instead of "visible" + if( name == "height" ){ + elem.offsetHeight; + } + + var val = parseFloat(cur) || 0; + + if ( extra ) { + for( var i = 0, len = which.length; i < len ; i++ ) { + var dir = which[i]; + // outerWidth/height + if ( extra === "border" || extra === 'margin' ) { + val += parseFloat(jQuery.css( elem, "border" + dir + "Width" )) || 0; + val += parseFloat(jQuery.css( elem, "padding" + dir )) || 0; + if( extra == 'margin' ) { + val += parseFloat(jQuery.css( elem, "margin" + dir )) || 0; + } + } + // innerWidth/height + else { + val += parseFloat(jQuery.css( elem, "padding" + dir )) || 0; + } } - }); - + } return val; } diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js index 641165f4f..7019a2889 100644 --- a/test/unit/dimensions.js +++ b/test/unit/dimensions.js @@ -222,3 +222,82 @@ test("outerHeight()", function() { div.remove(); jQuery.removeData($div[0], "olddisplay", true); }); + +test('width(), outerWidth(), innerWidth(), height(), outerHeight() and innerHeight() with inputs', function(){ + expect(47); + + var id = 'input-width-test-group'; + var input_els = 'submit reset button'.split(' '); + var html = '<div id="' + id + '" style="width:100px;">'; + var style = 'width:35px;height:50px;padding:5px;border:1px solid #000;margin:2px;'; + + html += '<div id="nothing-set-div">test</div>'; + html += '<div id="width-div-1" style="' + style + '">something</div>'; + html += '<button id="width-button-1" style="' + style + '">button</button>'; + jQuery.each(input_els, function() { + html += '<input class="width-input" type="' + this + '" style="' + style + '" />'; + }); + html += '</div>'; + + jQuery('#main').append(html); + + equals(jQuery('#nothing-set-div').width(), 100, 'Width of unset div takes on parent'); + + jQuery('#width-div-1, #width-button-1, .width-input').each(function(){ + + // Test widths + var w = jQuery(this).width(); + var outer_w = jQuery(this).outerWidth(); + var outer_w_margin = jQuery(this).outerWidth(true); + var inner_w = jQuery(this).innerWidth(); + var t = this.tagName.toLowerCase() + ((this.type) ? '[' + this.type + ']' : ''); + + equals(w, 35, 'Make sure width() works for ' + t); + equals(outer_w, 47, 'Make sure outerWidth() works for ' + t); + equals(outer_w_margin, 51, 'Make sure outerWidth(true) works for ' + t); + equals(inner_w, 45, 'Make sure innerWidth() works for ' + t); + + // Test heights + var h = jQuery(this).height(); + var outer_h = jQuery(this).outerHeight(); + var outer_h_margin = jQuery(this).outerHeight(true); + var inner_h = jQuery(this).innerHeight(); + + equals(h, 50, 'Make sure height() works for ' + t); + equals(outer_h, 62, 'Make sure outerHeight() works for ' + t); + equals(outer_h_margin, 66, 'Make sure outerHeight(true) works for ' + t); + equals(inner_h, 60, 'Make sure innerHeight() works for ' + t); + + }); + + var inputsub = jQuery('.width-input').filter('input[type=submit]'); + + inputsub.css({ + width: 10, + padding: 0, + margin: '3px', + border: '1px solid red', + height: 15 + }); + + var w = inputsub.width(); + equals(w, 10, 'width() works after setting css using .css()'); + + var outer_w = inputsub.outerWidth(); + equals(outer_w, 12, 'outerWidth() works after setting css using .css()'); + + var outer_w_margin = inputsub.outerWidth(true); + equals(outer_w_margin, 18, 'outerWidth(true) works after setting css using .css()'); + + var h = inputsub.height(); + equals(h, 15, 'height() works after setting css using .css()'); + + var outer_h = inputsub.outerHeight(); + equals(outer_h, 17, 'outerHeight() works after setting css using .css()'); + + var outer_h_margin = inputsub.outerHeight(true); + equals(outer_h_margin, 23, 'outerHeight(true) works after setting css using .css()'); + + jQuery('#' + id).remove(); + +}); |