block-non-replaced-height-006

Block-level non-replaced elements in normal flow when 'overflow' does not compute 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' does not compute 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' does not compute 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' does not compute to 'visible'.">
 9         <style type="text/css">
10             html, body
11             {
12                 overflow: scroll;
13             }
14             div
15             {
16                 position: relative;
17             }
18             #div1
19             {
20                 background: red;
21                 width: 2in;
22             }
23             span
24             {
25                 color: blue;
26                 display: inline;
27                 font: 1in/1em Ahem;
28             }
29             #div2
30             {
31                 background: orange;
32                 height: 2in;
33                 left: 2in;
34                 position: absolute;
35                 top: 0;
36                 width: 2in;
37             }
38         </style>
39     </head>
40     <body>
41         <p>Test passes if the blue and orange boxes below are the same height and there is no red visible on the page.</p>
42         <div>
43             <div id="div1">
44                 <span>XX XX</span>
45             </div>
46             <div id="div2"></div>
47         </div>
48     </body>
49 </html>