57 lines
2.2 KiB
HTML
57 lines
2.2 KiB
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 --> 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 --> negative --> 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>
|