| <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> |
