block-non-replaced-height-007

Height determination for block-level non-replaced elements in normal flow when 'overflow' computes to 'visible' and elements' margins collapse

WeasyPrint

This browser

Assertion
The 'height' is the distance between the top border edge of the top most block-level child box that doesn't have margins collapsed through it, and the bottom border edge of the bottommost block-level child that doesn't have margins collapsed through it. When a block-level non-replaced element is in normal flow, 'overflow' computes to 'visible' and the 'height' is 'auto'.

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: Height determination for block-level non-replaced elements in normal flow when 'overflow' computes to 'visible' and elements' margins collapse</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="">
 8         <meta name="assert" content="The 'height' is the distance between the top border edge of the top most block-level child box that doesn't have margins collapsed through it, and the bottom border edge of the bottommost block-level child that doesn't have margins collapsed through it. When a block-level non-replaced element is in normal flow, 'overflow' computes to 'visible' and the 'height' is 'auto'.">
 9         <style type="text/css">
10             #div1
11             {
12                 position: relative;
13             }
14             #div2, #div3, #div4
15             {
16                 width: 1in;
17             }
18             #div2, #div3
19             {
20                 background: blue;
21                 height: 0.5in;
22             }
23             #div2
24             {
25                 border-top: 0.5in solid blue;
26                 margin-top: 0.5in;
27             }
28             #div3
29             {
30                 border-bottom: 0.5in solid blue;
31                 margin-bottom: 0.5in;
32             }
33             #div4
34             {
35                 background: blue;
36                 height: 2in;
37                 left: 1in;
38                 position: absolute;
39                 top: 0;
40             }
41         </style>
42     </head>
43     <body>
44         <p>Test passes if there is a blue square below.</p>
45         <div id="div1">
46             <div id="div2"></div>
47             <div id="div3"></div>
48             <div id="div4"></div>
49         </div>
50     </body>
51 </html>