Test case for jQuery Ticket 7664

border-box vs content-box

by jitter

HTML

<p>
    <select class="foo">
        <option>Option</option>
    </select>
</p>
<div class="foo"></div>

CSS

.foo {
    width: 50px;
    padding: 2px;
    margin:0px;
    border: 1px solid silver;
}

JavaScript

function log() {
    $(".foo").each(function(i, val) {
        var $val = $(val);
        console.log(val.nodeName, "width: ", $val.width(), "innerWidth: ", $val.innerWidth(), "outerWidth: ", $val.outerWidth());
        $val.width($val.width());
        console.log(val.nodeName, "width: ", $val.width(), "innerWidth: ", $val.innerWidth(), "outerWidth: ", $val.outerWidth());
    });
}

log();
$("div.foo").css({
    boxSizing: "border-box",
    "-moz-box-sizing": "border-box",
    "-webkit-box-sizing": "border-box",
    width: ""
});
$("select.foo").css({
    boxSizing: "content-box",
    "-moz-box-sizing": "content-box",
    "-webkit-box-sizing": "content-box",
    width: ""
});
log();