margin.html | Explore in Territory

<!DOCTYPE HTML>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.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;
        }

        test(() => {
            assert_equals(computedMarginLeft(innerElement.id), expectedLeft, 'margin-left');
            assert_equals(computedMarginTop(innerElement.id), expectedTop, 'margin-top');
            assert_equals(computedMarginRight(innerElement.id), expectedRight, 'margin-right');
            assert_equals(computedMarginBottom(innerElement.id), expectedBottom, 'margin-bottom');
        }, innerElement.id);
    }
    
    if (window.testRunner) {
        var testContainer = document.getElementById("test-container");
        if (testContainer)
            document.body.removeChild(testContainer);   
    }    
</script>
chromium/third_party/blink/web_tests/css3/calc/margin.html
