absolute-replaced-height-016

Absolute replaced elements relying on intrinsic height dimensions and 'top', 'bottom' are not 'auto'

WeasyPrint

This browser

Flags
image
Assertion
The 'height' is the intrinsic height when an absolutely positioned replaced element with and intrinsic height has a 'height', 'width' computed as 'auto' and 'top', 'bottom' are not '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: Absolute replaced elements relying on intrinsic height dimensions and 'top', 'bottom' are not 'auto'</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#abs-replaced-height">
 7         <meta name="flags" content="image">
 8         <meta name="assert" content="The 'height' is the intrinsic height when an absolutely positioned replaced element with and intrinsic height has a 'height', 'width' computed as 'auto' and 'top', 'bottom' are not 'auto'.">
 9         <style type="text/css">
10             #div1
11             {
12                 border-top: solid black;
13                 position: relative;
14             }
15             div div
16             {
17                 background: blue;
18                 height: 15px;
19                 left: 15px;
20                 position: absolute;
21                 top: 1in;
22                 width: 15px;
23             }
24             img
25             {
26                 bottom: 1in;
27                 height: auto;
28                 position: absolute;
29                 top: 1in;
30                 width: auto;
31             }
32         </style>
33     </head>
34     <body>
35         <p>Test passes if there is a single blue box below and it does not touch the black line.</p>
36         <div id="div1">
37             <img alt="blue 15x15" src="support/blue15x15.png">
38             <div></div>
39         </div>
40     </body>
41 </html>