block-non-replaced-height-005

Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible' and 'height' is 'auto' adjust based on the line box height

WeasyPrint

This browser

Flags
ahem
Assertion
The 'height' is the distance from the topmost to the bottommost line box when a block-level non-replaced element is in normal flow and 'overflow' computes to 'visible'.

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: Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible' and 'height' is 'auto' adjust based on the line box height</title>
 5         <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
 6         <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#normal-block">
 7         <meta name="flags" content="ahem">
 8         <meta name="assert" content="The 'height' is the distance from the topmost to the bottommost line box when a block-level non-replaced element is in normal flow and 'overflow' computes to 'visible'.">
 9         <style type="text/css">
10             div
11             {
12                 position: relative;
13             }
14             #div1
15             {
16                 background: red;
17                 width: 2in;
18             }
19             span
20             {
21                 color: blue;
22                 display: inline;
23                 font: 1in/1em Ahem;
24             }
25             #div2
26             {
27                 background: orange;
28                 height: 2in;
29                 left: 2in;
30                 position: absolute;
31                 top: 0;
32                 width: 2in;
33             }
34         </style>
35     </head>
36     <body>
37         <p>Test passes if the blue and orange boxes below are the same height and there is no red visible on the page.</p>
38         <div>
39             <div id="div1">
40                 <span>XX XX</span>
41             </div>
42             <div id="div2"></div>
43         </div>
44     </body>
45 </html>