third_party/WebKit/LayoutTests/css2.1/20110323/table-caption-margins-001.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3  <head>
   4   <title>CSS Test: Table Caption Margin Collapsing</title>
   5   <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/">
   6   <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">
   7   <meta name="assert" content="The table caption's margins do not collapse     with the margins applied to the outer table box.">
   8   <style type="text/css">
   9     .control {
  10       margin: 15px;
  11       width: 6em;
  12       border: 15px red;
  13       border-style: solid none;
  14       background: repeat-x 0 40px url(support/swatch-red.png);
  15     }
  16     .container {
  17       margin: -15px 0;
  18       border: solid blue 15px;
  19       border-style: solid none;
  20     }
  21     .table {
  22       display: table;
  23       height: 15px;
  24       width: 6em;
  25       margin: 20px 0 40px;
  26       background: blue;
  27     }
  28     .caption {
  29       display: table-caption;
  30       height: 15px;
  31       width: 6em;
  32       background: blue;
  33       margin: 20px 0 40px;
  34     }
  35   </style>
  36
  37  </head>
  38  <body>
  39    <p>There must be four evenly-spaced blue bars below and no red.</p>
  40    <div class="control">
  41      <div class="container">
  42        <div class="table">
  43          <div class="caption"></div>
  44        </div>
  45      </div>
  46    </div>
  47  </body>
  48 </html>