table-anonymous-block-012

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

WeasyPrint

This browser

Flags
ahem
Assertion
The bottom margin of the table caption is not collapsed with bottom margin of the table when 'caption-side: bottom'.

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 bottom margin is collapsed with caption bottom 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 bottom margin of the table caption is not collapsed with bottom margin of the table when 'caption-side: bottom'.">
 9         <style type="text/css">
10             #div1
11             {
12                 border-bottom: 1em solid blue;
13                 width: 10em;
14             }
15             table
16             {
17                  margin-bottom: 5em;
18                  border-spacing: 0;
19                  font: 1em Ahem;
20             }
21             caption
22             {
23                 background: black;
24                 caption-side: bottom;
25                 color: black;
26                 margin-bottom: 10em;
27                 width: 10em;
28             }
29             td
30             {
31                 background: black;
32                 color: black;
33                 width: 10em;
34             }
35             #div2
36             {
37                 background: blue;
38                 height: 10em;
39                 position: relative;
40                 top: -11em;
41                 width: 10em;
42             }
43             </style>
44     </head>
45     <body>
46         <p>Test passes if there are only two boxes below and there is space between the black box and the blue box.</p>
47         <div id="div1">
48             <table>
49                 <caption>Filler Text</caption>
50                 <tr>
51                     <td>Filler Text</td>
52                 </tr>
53             </table>
54         </div>
55         <div id="div2"></div>
56     </body>
57 </html>