<!DOCTYPE HTML>
<style>
p {
    width:200px; height:120px;
}
.simple-all {
    border: calc(13px + 12px) solid;
}

.simple-left {
    border-left: calc(13px + 12px) solid;
}
.simple-right {
    border-right: calc(13px + 12px) solid;
}
.simple-top {
    border-top: calc(13px + 12px) solid;
}
.simple-bottom {
    border-bottom: calc(13px + 12px) solid;
}
</style>

<p class="simple-all">This element should have an overall border of 25 pixels.</p>
<p class="simple-left">This element should have a left border of 25 pixels.</p>
<p class="simple-right">This element should have a right border of 25 pixels.</p>
<p class="simple-top">This element should have a top border of 25 pixels.</p>
<p class="simple-bottom">This element should have a bottom border of 25 pixels.</p>

<script>
if (window.testRunner)
    testRunner.dumpAsText();

var innerWidth = 200;
var innerHeight = 120;
var border = 25;

var tests = document.getElementsByTagName("p");
for (var i = 0; i < tests.length; ++i) {
    var element = tests[i];
    var width = element.offsetWidth;
    var height = element.offsetHeight;

    var expectedWidth = innerWidth;
    var expectedHeight = innerHeight;

    switch (element.className.split("-")[1]) {
    case "all":
        expectedWidth += 2 * border;
        expectedHeight += 2 * border;
        break;
    case "top":
    case "bottom":
        expectedHeight += border;
        break;
    case "left":
    case "right":
        expectedWidth += border;
        break;
    }

    var error = [];
    if (width != expectedWidth)
        error.push("wrong width");
    if (height != expectedHeight)
        error.push("wrong height");

    results = document.getElementById("results");
    if (error == "") {
        element.style.backgroundColor = "green";
        element.innerHTML += " => PASS";
    } else {
        element.style.backgroundColor = "red";
        element.innerHTML += " => FAIL: " + error.join(", ");
    }
}
</script>