box-sizing issue with jQuery (button/inputs)

https://github.com/jquery/jquery/pull/253

by jboesch26

HTML

<button id="foo-inlined">something</button>
<button id="foo">woo</button>
<input type="checkbox" id="cb" style="padding-top:4px" />

CSS

button {
    width: 20px;
    margin: 10px;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}
#cb {
    width: 33px;
    padding-top: 8px;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    margin: 8px;
}

JavaScript

function getStyle(el,styleProp)
{
    var x = document.getElementById(el);
    if (x.currentStyle){
        var y = x.currentStyle[styleProp]; 
    }
    else if (window.getComputedStyle){
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    }
    return y;
}

function getWidth(el){
    var w = $('#' + el).width();  
    $('#' + el).width(w);
    return $('#' + el).width();
}

console.log(getWidth('foo'), ' should be 20px');
console.log(getStyle('foo', 'margin-top'), ' should be 10px'); 
console.log(getWidth('cb'), ' should be 33px');
console.log(getStyle('cb', 'margin-top'), ' should be 8px');
console.log(getStyle('cb', 'padding-top'), ' should be 8px BUT IT ISNT! It wont compute the computed CSS in FF or webkit.');
console.log(document.getElementById('cb').style.paddingTop, ' should be 4px - works because its inline. better than nothing, right? it wont grab padding from the CSS file (computed).. this is consistent in FF and webkit.');