table-anonymous-block-011

The anonymous block box around a table - table top margin is collapsed with caption top margin

WeasyPrint

This browser

Flags
ahem
Assertion
The top margin of the table caption is not collapsed with top margin of the table.

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: The anonymous block box around a table - table top margin is collapsed with caption top margin</title>
 5         <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
 6         <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#model">
 7         <meta name="flags" content="ahem">
 8         <meta name="assert" content="The top margin of the table caption is not collapsed with top margin of the table.">
 9         <style type="text/css">
10             #div1
11             {
12                 border-top: 1em solid black;
13                 width: 10em;
14             }
15             #div2
16             {
17                 background: blue;
18                 height: 10em;
19                 position: relative;
20                 top: -4em;
21                 width: 10em;
22             }
23             table
24             {
25                  border-spacing: 0;
26                  font: 1em/1 Ahem;
27                  margin-top: 2em;
28             }
29             caption
30             {
31                 background: red;
32                 color: red;
33                 margin-top: 2em;
34             }
35             td
36             {
37                 background: red;
38                 color: red;
39                 padding: 0;
40             }
41         </style>
42     </head>
43     <body>
44         <p>Test passes if there are only two boxes below and there is space between the black box and the blue box.</p>
45         <div id="div1">
46             <table>
47                 <caption>Filler Text</caption>
48                 <tr>
49                     <td>Filler Text</td>
50                 </tr>
51             </table>
52             <div id="div2"></div>
53         </div>
54     </body>
55 </html>