getComputedStyle inputs/buttons

This was a bug filed at http://bugs.jquery.com/ticket/4146

by jboesch26

HTML

<div style="width:50px;padding:7px;margin:2px;">something</div>
<div id="empty"></div>
<button style="width:80px;padding:10px;border:1px solid #000">button</button>

<input type="submit" style="width:55px;padding:5px;border:1px solid red" value="submit" />

<input type="reset" style="width:45px;padding:5px;border:1px solid red" value="reset" />

<input type="button" style="width:35px;padding:5px;border:1px solid red" value="reset" />

<input type="text" style="width:35px;padding:5px;border:1px solid green" />

<input type="checkbox" style="width:5px;padding:5px;border:1px solid blue" />


<input type="image" style="width:15px;padding:5px;border:1px solid blue" />
<input type="radio" style="width:15px;padding:5px;border:1px solid blue" />

<input type="password" style="width:35px;padding:5px;border:1px solid green" />

<input type="file" style="width:35px;padding:5px;border:1px solid green" />

<div id="results">
    <h2 style="font-weight:bold;text-decoration:underline;">Incorrect offsetWidth's</h2>
    
</div>

JavaScript

// http://bugs.jquery.com/ticket/4146

var getComputedStyle = function() {
  var func = null;
  if (document.defaultView && document.defaultView.getComputedStyle) {
    func = document.defaultView.getComputedStyle;
  } else if (typeof(document.body.currentStyle) !== "undefined") {
    func = function(element, anything) {
      return element["currentStyle"];
    };
  }

  return function(element, style) {
    return func(element, null)[style];
  }
}();

console.log('-----------BEGIN---------------');

var map = {
    'div' : 64,
    'button' : 102,
    'input[type="submit"]' : 67,
    'input[type="reset"]' : 57,
    'input[type="button"]' : 47,
    'input[type="text"]' : 47,
    'input[type="checkbox"]' : 17,
    'input[type="image"]' : 27,
    'input[type="radio"]' : 27,
    'input[type="password"]' : 47,
    'input[type="file"]' : 47
};

var incorrect = [];
$.each(map, function(selector, expected){
    var offset_w = $(selector)[0].offsetWidth;
    var is_correct = (offset_w == expected) ? 'correct' : 'incorrect';
    console.log(selector, offset_w, 'should be ' + expected, is_correct);
    if(is_correct == 'incorrect'){
        incorrect[incorrect.length] = selector;    
    }
})
//console.log('incorrect:', incorrect);
$('#results').append(incorrect.join('<br/>'));

console.log('-----------OTHER WEIRDNESS------------');
console.log(getComputedStyle($('button')[0], "width"));
console.log(getComputedStyle($('button')[0], "padding-left"));
console.log(getComputedStyle($('div')[0], "padding-left"));
// does not work in Firefox.. works in webkit.
console.log(getComputedStyle($('input[type="file"]')[0], "padding-left")); 
// works in both firefox and webkit.
console.log($('input[type="file"]')[0].style.paddingLeft); 
// omg, wtf is this.. look at this in webkit... it returns numbers in the hundreds?!?!?
console.log(getComputedStyle($('div')[0], "marginRight")); 
// ok.. this seems to work.
console.log($('div')[0].style.marginRight); 

console.log('empty width',...