Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/fast/css/margin-top-bottom-dynamic.html 

<html><head>
<script type="text/javascript">
<!--
function setNegativeMargin(element)
{
    document.getElementById(element).style["margin"] = "-10px 0px -10px 0px";
}

function setPositiveMargin(element)
{
    document.getElementById(element).style["margin"] = "10px 0px 10px 0px";
}

function test()
{
    setNegativeMargin("bar");

    // The following line forces a layout in Safari.
    window.scrollX;

    setNegativeMargin("foo");
    setPositiveMargin("bar");
}
//-->
</script></head>
    <body onLoad="test();">
        <p>What it should look like (positive case): </p>
        <div style="border: 1px solid green; ">
            <div style="margin-top: 10px; border:1px solid blue;">Lorem ipsum</div>
            <div style="margin-top: 10px; margin-bottom: 10px; border:1px dotted blue;">Lorem ipsum</div>
        </div>

        <p>What it should look like (negative case):</p>
        <div style="border: 1px solid green; ">
            <div style="margin-top: 10px; border:1px solid blue;">Lorem ipsum</div>
            <div style="margin-top: -10px; margin-bottom: -10px; border:1px dotted blue;">Lorem ipsum</div>
        </div>
        <p>Dynamic case (automatically testing positive --&gt; negative):</p>
        <div style="border: 1px solid green; ">
            <div style="margin-top: 10px; border:1px solid blue;">Lorem ipsum</div>
            <div style="margin-top: 10px; margin-bottom: 10px; border:1px dotted blue;" id="foo">Lorem ipsum</div>
        </div>
        <br />
        <input type="submit" value="Negative margin" onClick="setNegativeMargin('foo');"/>
        <input type="submit" value="Positive margin" onClick="setPositiveMargin('foo');"/>
        <p>Dynamic case (automatically testing positive --&gt; negative --&gt; positive):</p>
        <div style="border: 1px solid green; ">
            <div style="margin-top: 10px; border:1px solid blue;">Lorem ipsum</div>
            <div style="margin-top: 10px; margin-bottom: 10px; border:1px dotted blue;" id="bar">Lorem ipsum</div>
        </div>
        <br />
        <input type="submit" value="Negative margin" onClick="setNegativeMargin('bar');"/>
        <input type="submit" value="Positive margin" onClick="setPositiveMargin('bar');"/>

    </body>
</html>