table-height-algorithm-003

Specified row height is treated as minimum row height

WeasyPrint

This browser

Flags
ahem
Assertion
A specified row height value is treated as the minimum height of the row.

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: Specified row height is treated as minimum row height</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#height-layout">
 7         <meta name="flags" content="ahem">
 8         <meta name="assert" content="A specified row height value is treated as the minimum height of the row.">
 9         <style type="text/css">
10             #ruler
11             {
12                 background: black;
13                 font: 16px/1em Ahem;
14                 height: 10em;
15                 width: 20em;
16             }
17             table
18             {
19                 border-spacing: 0;
20             }
21             .t1
22             {
23                 background: blue;
24                 color: blue;
25             }
26             .t2
27             {
28                 background: purple;
29                 color: purple;
30             }
31             .r1
32             {
33                 height: 0.5em;
34             }
35             .r2
36             {
37                 height: 5em;
38             }
39             td
40             {
41                 padding: 0;
42             }
43         </style>
44     </head>
45     <body>
46         <p>Test passes if the blue and purple boxes below are half the height of the black box.</p>
47         <div id="ruler">
48             <table class="t1">
49                 <tr class="r1">
50                     <td>XXXXXXXXXX</td>
51                 </tr>
52                 <tr class="r1">
53                     <td>XXXXXXXXXX</td>
54                 </tr>
55                 <tr class="r1">
56                     <td>XXXXXXXXXX</td>
57                 </tr>
58                 <tr class="r1">
59                     <td>XXXXXXXXXX</td>
60                 </tr>
61                 <tr class="r1">
62                     <td>XXXXXXXXXX</td>
63                 </tr>
64             </table>
65             <table class="t2">
66                 <tr class="r2">
67                     <td>XXXXXXXXXX</td>
68                 </tr>
69             </table>
70         </div>
71     </body>
72 </html>