table-anonymous-block-013

The anonymous box around a table as a 'block' box

WeasyPrint

This browser

Assertion
The anonymous box around a table is a 'block' box if the table is block-level.

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 box around a table as a 'block' box</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 anonymous box around a table is a 'block' box if the table is block-level.">
 9         <style type="text/css">
10             #div1
11             {
12                 color: silver;
13             }
14             #table
15             {
16                 background: orange;
17                 color: orange;
18                 display: table;
19             }
20             #caption
21             {
22                 background: blue;
23                 color: blue;
24                 display: table-caption;
25             }
26             #tr
27             {
28                 display: table-row;
29             }
30             #td
31             {
32                 display: table-cell;
33             }
34         </style>
35     </head>
36     <body>
37         <p>Test passes if the blue box is stacked on top of the orange box, the boxes do not take up the whole width of the page, and there is "Filler Text" above and below the boxes.</p>
38         <div id="div1">Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
39             Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
40             Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
41             <div id="table">
42                 <div id="caption">Filler Text Filler Text</div>
43                 <div id="tr">
44                     <div id="td">Filler Text Filler Text</div>
45                 </div>
46             </div>
47             Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
48             Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
49             Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
50             Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
51         </div>
52     </body>
53 </html>