third_party/WebKit/LayoutTests/fast/css/margin-top-bottom-dynamic.html

   1 <html><head>
   2 <script type="text/javascript">
   3 <!--
   4 function setNegativeMargin(element)
   5 {
   6     document.getElementById(element).style["margin"] = "-10px 0px -10px 0px";
   7 }
   8
   9 function setPositiveMargin(element)
  10 {
  11     document.getElementById(element).style["margin"] = "10px 0px 10px 0px";
  12 }
  13
  14 function test()
  15 {
  16     setNegativeMargin("bar");
  17
  18     // The following line forces a layout in Safari.
  19     window.scrollX;
  20
  21     setNegativeMargin("foo");
  22     setPositiveMargin("bar");
  23 }
  24 //-->
  25 </script></head>
  26     <body onLoad="test();">
  27         <p>What it should look like (positive case): </p>
  28         <div style="border: 1px solid green; ">
  29             <div style="margin-top: 10px; border:1px solid blue;">Lorem ipsum</div>
  30             <div style="margin-top: 10px; margin-bottom: 10px; border:1px dotted blue;">Lorem ipsum</div>
  31         </div>
  32
  33         <p>What it should look like (negative case):</p>
  34         <div style="border: 1px solid green; ">
  35             <div style="margin-top: 10px; border:1px solid blue;">Lorem ipsum</div>
  36             <div style="margin-top: -10px; margin-bottom: -10px; border:1px dotted blue;">Lorem ipsum</div>
  37         </div>
  38         <p>Dynamic case (automatically testing positive --&gt; negative):</p>
  39         <div style="border: 1px solid green; ">
  40             <div style="margin-top: 10px; border:1px solid blue;">Lorem ipsum</div>
  41             <div style="margin-top: 10px; margin-bottom: 10px; border:1px dotted blue;" id="foo">Lorem ipsum</div>
  42         </div>
  43         <br />
  44         <input type="submit" value="Negative margin" onClick="setNegativeMargin('foo');"/>
  45         <input type="submit" value="Positive margin" onClick="setPositiveMargin('foo');"/>
  46         <p>Dynamic case (automatically testing positive --&gt; negative --&gt; positive):</p>
  47         <div style="border: 1px solid green; ">
  48             <div style="margin-top: 10px; border:1px solid blue;">Lorem ipsum</div>
  49             <div style="margin-top: 10px; margin-bottom: 10px; border:1px dotted blue;" id="bar">Lorem ipsum</div>
  50         </div>
  51         <br />
  52         <input type="submit" value="Negative margin" onClick="setNegativeMargin('bar');"/>
  53         <input type="submit" value="Positive margin" onClick="setPositiveMargin('bar');"/>
  54
  55     </body>
  56 </html>