function getWH( elem, name, extra ) {
var which = name === "width" ? cssWidth : cssHeight,
- cur = curCSS( elem, name ),
-
- // We're addressing the way Firefox handles certain inputs and buttons,
- // offsetWidth/height actually returns a normal width/height
- boxSizing = rinputbutton.test( elem.nodeName ) &&
- ( curCSS( elem, "-moz-box-sizing" ) === "border-box" ||
- curCSS( elem, "box-sizing" ) === "border-box" );
-
- // IE will return auto if we try to grab a width/height that is not set
- if ( boxSizing || cur === "auto" ) {
- cur = name === "width" ? elem.offsetWidth : elem.offsetHeight;
- }
+ val = name === "width" ? elem.offsetWidth : elem.offsetHeight;
- // Make sure that IE7 returns the correct computed value for display
- if ( name === "height" ) {
- elem.offsetHeight;
+ if ( extra === "border" ) {
+ return val;
}
-
- var val = parseFloat( cur ) || 0;
- if ( extra ) {
- for ( var i = 0, len = which.length; i < len ; i++ ) {
- var dir = which[i];
+ jQuery.each( which, function() {
+ if ( !extra ) {
+ val -= parseFloat(jQuery.css( elem, "padding" + this )) || 0;
+ }
- // 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" + this )) || 0;
- if ( extra == "margin" ) {
- val += parseFloat(jQuery.css( elem, "margin" + dir )) || 0;
- }
-
- // innerWidth/height
- } else {
- val += parseFloat(jQuery.css( elem, "padding" + dir )) || 0;
- }
+ } else {
+ val -= parseFloat(jQuery.css( elem, "border" + this + "Width" )) || 0;
}
- }
+ });
return val;
}
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();
-
-});