LayoutTests/css2.1/t080301-c411-vt-mrgn-00-b.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
   2 <html>
   3  <head>
   4   <title>CSS 2.1 Test Suite: Vertical Formatting</title>
   5   <style type="text/css">
   6
   7    /* test */
   8    p.one      { margin-top: 0;    margin-bottom: 2cm;                                                }
   9    p.two      { margin-top: 2cm;  margin-bottom: 0;                                                  }
  10    p.three    { margin-top: 0;    margin-bottom: 0;                                                  }
  11    p.four     { margin-top: -1cm; margin-bottom: 0;                                                  }
  12    div.five   { margin-top: 1cm;  margin-bottom: 1cm;  padding-top: 1cm;                             }
  13    p.six      { margin-top: 1cm;  margin-bottom: 1cm;                                                }
  14    p.seven    { margin-top: 1cm;  margin-bottom: 0;                                                  }
  15    p.eight    { margin-top: 0;    margin-bottom: -1cm; padding-bottom: 2cm;                          }
  16    p.nine     { margin-top: -1cm; margin-bottom: 1cm;  padding-top: 1cm;                             }
  17    p.ten      { margin-top: 1cm;  margin-bottom: 0;                         float: left; width: 50%; }
  18    p.eleven   { margin-top: 1cm;  margin-bottom: 0;                                                  }
  19    p.twelve   { margin-top: 0;    margin-bottom: 0;    padding-bottom: 1cm; clear: both;             }
  20    p.thirteen { margin-top: 0;    margin-bottom: 0;    padding-top: 1cm;                             }
  21
  22    /* control */
  23    td { width: 5em; padding: 0; border: solid; }
  24    .p { margin: 0; padding: 0; height: auto; }
  25    .h1 { margin: 0; padding: 0; height: 1cm; }
  26    .h2 { margin: 0; padding: 0; height: 2cm; }
  27    .h3 { margin: 0; padding: 0; height: 3cm; }
  28    .w50 { width: 50%; }
  29    .l50 { margin-left: 50%; }
  30    .contain { position: relative; } /* XXX relies on CSS2 stuff */
  31    .bottom { position: absolute; bottom: 0; }
  32    .left { position: absolute; left: 0; }
  33
  34    /* colours */
  35    .teal, .test { background: teal; }
  36    .yellow, .one, .seven, .thirteen { background: yellow; }
  37    .fuchsia, .two, .eight { background: fuchsia; }
  38    .lime, .three, .nine { background: lime; }
  39    .white, .four, .ten { background: white; }
  40    .aqua, .five, .eleven { background: aqua; }
  41    .orange, .six, .twelve { background: orange; }
  42
  43   </style>
  44   <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" title="8.3.1 Collapsing margins">
  45   <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#padding-properties" title="8.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'">
  46  </head>
  47  <body>
  48   <p>The two columns below should be identical.</p>
  49   <table>
  50    <tr>
  51     <td class="test">
  52      <p class="one"> - </p>
  53      <p class="two"> - </p>
  54      <p class="one"> - </p>
  55      <p class="three"> - </p>
  56      <p class="one"> - </p>
  57      <p class="four"> - </p>
  58      <div class="five">
  59       <p class="six"> - </p>
  60      </div>
  61      <p class="seven"> - </p>
  62      <p class="eight"> - </p>
  63      <p class="nine"> - </p>
  64      <p class="ten"> - </p>
  65      <p class="eleven"> - </p>
  66      <p class="twelve"> - </p>
  67      <p class="thirteen"> - </p>
  68     </td>
  69     <td class="control">
  70      <div class="yellow p">-</div>
  71      <div class="teal h2"></div>
  72      <div class="fuchsia p">-</div>
  73      <div class="yellow p">-</div>
  74      <div class="teal h2"></div>
  75      <div class="lime p">-</div>
  76      <div class="yellow p">-</div>
  77      <div class="teal h1"></div>
  78      <div class="white p">-</div>
  79      <div class="teal h1"></div>
  80      <div class="aqua h2"></div>
  81      <div class="orange p">-</div>
  82      <div class="teal h1"></div>
  83      <div class="yellow p">-</div>
  84      <div class="fuchsia p">-</div>
  85      <div class="fuchsia h1"></div>
  86      <div class="lime h1"></div>
  87      <div class="lime p">-</div>
  88      <div class="teal h1"></div>
  89      <div class="aqua"><div class="l50 p">-</div></div>
  90      <div class="teal h1 contain"><div class="white p bottom left w50">-</div></div>
  91      <div class="orange p">-</div>
  92      <div class="orange h1"></div>
  93      <div class="yellow h1"></div>
  94      <div class="yellow p">-</div>
  95     </td>
  96    </tr>
  97   </table>
  98  </body>
  99 </html>