<!DOCTYPE HTML>
<script src="../../resources/js-test-pre.js"></script>
<style>
    div { display: inline-block; }
    p { width: 200px; height: 120px; margin: 0px; }
    #simple-all { margin: calc(13px + 12px); }
    #simple-left { margin-left: calc(13px + 12px); }
    #simple-right { margin-right: calc(13px + 12px); }
    #simple-top { margin-top: calc(13px + 12px); }
    #simple-bottom { margin-bottom: calc(13px + 12px); }
    #percent-all { margin: calc(10% - 5px); }
    #percent-left { margin-left: calc(10% - 5px); }
    #percent-right { margin-right: calc(10% - 5px); }
    #percent-top { margin-top: calc(10% - 5px); }
    #percent-bottom { margin-bottom: calc(10% - 5px); }
</style>

<div id="test-container">
    <p id="simple-all">This element should have an overall margin of 25 pixels.</p><br/>
    <p id="simple-left">This element should have a left margin of 25 pixels.</p><br/>
    <p id="simple-right">This element should have a right margin of 25 pixels.</p><br/>
    <p id="simple-top">This element should have a top margin of 25 pixels.</p><br/>
    <p id="simple-bottom">This element should have a bottom margin of 25 pixels.</p><br/>
    <div id="wrapper" style="width: 300px; background-color: cornsilk; display: block;">
        <p id="percent-all">This element should have an overall margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/>
        <p id="percent-left">This element should have a left margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/>
        <p id="percent-right">This element should have a right margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/>
        <p id="percent-top">This element should have a top margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/>
        <p id="percent-bottom">This element should have a bottom margin of 25 pixels (10% of parent width of 300px minus 5px).</p><br/>
    </div>
</div>
<script>

    function computedMarginLeft(id)
    {
        return getComputedStyle(document.getElementById(id), null).marginLeft;
    }
    function computedMarginRight(id)
    {
        return getComputedStyle(document.getElementById(id), null).marginRight;
    }
    function computedMarginTop(id)
    {
        return getComputedStyle(document.getElementById(id), null).marginTop;
    }
    function computedMarginBottom(id)
    {
        return getComputedStyle(document.getElementById(id), null).marginBottom;
    }

    var innerWidth = 200;
    var innerHeight = 120;
    var margin = "25px";
    var noMargin = "0px";

    var tests = document.getElementsByTagName("p");
    for (var i = 0; i < tests.length; ++i) {
        var innerElement = tests[i]
        var expectedLeft = noMargin;
        var expectedTop = noMargin;
        var expectedRight = noMargin;
        var expectedBottom = noMargin;
        switch (innerElement.id.split("-")[1]) {
        case "all":
            expectedLeft = margin;
            expectedTop = margin;
            expectedRight = margin;
            expectedBottom = margin;
            break;
        case "top":
            expectedTop = margin;
            break;
        case "bottom":
            expectedBottom = margin;
            break;
        case "left":
            expectedLeft = margin;
            break;
        case "right":
            expectedRight = margin;
            break;
        }

        shouldBeEqualToString('computedMarginLeft("' + innerElement.id + '")', expectedLeft);
        shouldBeEqualToString('computedMarginTop("' + innerElement.id + '")', expectedTop);
        shouldBeEqualToString('computedMarginRight("' + innerElement.id + '")', expectedRight);
        shouldBeEqualToString('computedMarginBottom("' + innerElement.id + '")', expectedBottom);
    }
    
    if (window.testRunner) {
        var testContainer = document.getElementById("test-container");
        if (testContainer)
            document.body.removeChild(testContainer);   
    }    
</script>
<script src="../../resources/js-test-post.js"></script>