separated-border-model-006

Row and column backgrounds in the separated borders model

WeasyPrint

This browser

Assertion
Table row, column, row group and column group backgrounds are invisible in the space between borders.

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: Row and column backgrounds in the separated borders model</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#separated-borders">
 7         <meta name="flags" content="">
 8         <meta name="assert" content="Table row, column, row group and column group backgrounds are invisible in the space between borders.">
 9         <style type="text/css">
10             table
11             {
12                 border-collapse: separate;
13                 border-spacing: 25px;
14                 background: blue;
15             }
16             colgroup
17             {
18                 background-color: orange;
19             }
20             col
21             {
22                 background-color: orange;
23             }
24             tbody
25             {
26                 background-color: black;
27             }
28             tr
29             {
30                 background-color: black;
31             }
32         </style>
33     </head>
34     <body>
35         <p>Test passes if all four black boxes below are surrounded on all sides by blue.</p>
36         <table>
37             <colgroup>
38                 <col>
39                 <col>
40             </colgroup>
41             <colgroup>
42                 <col>
43                 <col>
44             </colgroup>
45             <tbody>
46                 <tr>
47                     <td>X</td>
48                     <td>X</td>
49                 </tr>
50             </tbody>
51             <tbody>
52                 <tr>
53                     <td>X</td>
54                     <td>X</td>
55                 </tr>
56             </tbody>
57         </table>
58     </body>
59 </html>