table-anonymous-block-019

The anonymous block box around a table and the table 'margin' property

WeasyPrint

This browser

Assertion
The 'margin' property of a table is actually applied to its anonymous block 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: The anonymous block box around a table and the table 'margin' property</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="">
 8         <meta name="assert" content="The 'margin' property of a table is actually applied to its anonymous block box.">
 9         <style type="text/css">
10             div
11             {
12                 color: gray;
13             }
14             table
15             {
16                 border-spacing: 0;
17                 display: inline-table;
18                 margin: 20px;
19             }
20             caption
21             {
22                 background: blue;
23                 color: blue;
24             }
25             td
26             {
27                 background: black;
28                 color: black;
29             }
30         </style>
31     </head>
32     <body>
33         <p>Test passes if the blue box is directly on top of the black box and there is "Filler Text" above and below the stacked boxes and to the right and left of the black box.</p>
34         <div>
35             Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
36             Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
37             Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
38             <table>
39                 <caption>XXXXX</caption>
40                 <tr>
41                     <td>XXXXX</td>
42                 </tr>
43             </table>
44             Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
45             Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
46             Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
47         </div>
48     </body>
49 </html>