table-caption-margins-001

Table Caption Margin Collapsing

WeasyPrint

This browser

Assertion
The table caption's margins do not collapse with the margins applied to the outer table box.

Source

 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>