<!DOCTYPE HTML>
<style>
    p { width:200px; height:120px; }
    .simple-all     { padding: calc(13px + 12px); }
    .simple-left    { padding-left: calc(13px + 12px); }
    .simple-right   { padding-right: calc(13px + 12px); }
    .simple-top     { padding-top: calc(13px + 12px); }
    .simple-bottom  { padding-bottom: calc(13px + 12px); }
    .percent-all    { padding: calc(10% - 5px); }
    .percent-left   { padding-left: calc(10% - 5px); }
    .percent-right  { padding-right: calc(10% - 5px); }
    .percent-top    { padding-top: calc(10% - 5px); }
    .percent-bottom { padding-bottom: calc(10% - 5px); }
</style>

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

<div style="width: 300px; background-color: cornsilk;">
    <p class="percent-all">This element should have an overall padding of 25 pixels (10% of parent width of 300px minus 5px).</p>
    <p class="percent-left">This element should have a left padding of 25 pixels (10% of parent width of 300px minus 5px).</p>
    <p class="percent-right">This element should have a right padding of 25 pixels (10% of parent width of 300px minus 5px).</p>
    <p class="percent-top">This element should have a top padding of 25 pixels (10% of parent width of 300px minus 5px).</p>
    <p class="percent-bottom">This element should have a bottom padding of 25 pixels (10% of parent width of 300px minus 5px).</p>
</div>

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

    var innerWidth = 200;
    var innerHeight = 120;
    var padding = 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 * padding;
            expectedHeight += 2 * padding;
            break;
        case "top":
        case "bottom":
            expectedHeight += padding;
            break;
        case "left":
        case "right":
            expectedWidth += padding;
            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>