table-anonymous-block-003

The anonymous block box around a table is as wide as the border edge of the table

WeasyPrint

This browser

Assertion
The anonymous block around the table and caption is as wide as the border edge of the 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: The anonymous block box around a table is as wide as the border edge of the table</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 block around the table and caption is as wide as the border edge of the table box.">
 9         <style type="text/css">
10             div
11             {
12                 color: blue;
13             }
14             #table
15             {
16                 background: black;
17                 display: table;
18                 float: left;
19                 width: 100px;
20             }
21             #caption
22             {
23                 background: blue;
24                 color: blue;
25                 display: table-caption;
26                 width: 200px;
27             }
28             #tr
29             {
30                 display: table-row;
31             }
32             #td
33             {
34                 color: black;
35                 display: table-cell;
36             }
37         </style>
38     </head>
39     <body>
40         <p>Test passes if the blue box below is wider, and thus overhangs the black box and "Filler Text" appears immediately after the end (right side) of the black box.</p>
41         <div>Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
42             Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
43             Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
44             <span id="table">
45                 <span id="caption">Filler Text Filler Text</span>
46                 <span id="tr">
47                     <span id="td">Filler Text</span>
48                 </span>
49             </span>
50             Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
51             Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
52             Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
53             Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text
54         </div>
55     </body>
56 </html>