absolute-non-replaced-max-height-002

Max-height on absolutely positioned, non-replaced elements

WeasyPrint

This browser

Flags
ahem
Assertion
When 'top', 'height', and 'bottom' of an absolutely positioned element are 'auto', then set 'top' to the static position and make 'height' based on the content; such height may be constrained by a given 'max-height' value.

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: Max-height on absolutely positioned, non-replaced elements</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-non-replaced-height">
 7         <meta name="flags" content="ahem">
 8         <meta name="assert" content="When 'top', 'height', and 'bottom' of an absolutely positioned element are 'auto', then set 'top' to the static position and make 'height' based on the content; such height may be constrained by a given 'max-height' value.">
 9         <style type="text/css">
10             #div1
11             {
12                 border: solid black;
13                 height: 2in;
14                 position: relative;
15                 width: 2in;
16             }
17             div div
18             {
19                 background: blue;
20                 bottom: auto;
21                 font: 1in/1em Ahem;
22                 height: auto;
23                 margin-bottom: auto;
24                 margin-top: auto;
25                 max-height: 0.5in;
26                 position: absolute;
27                 right: 0;
28                 top: auto;
29             }
30         </style>
31     </head>
32     <body>
33         <p>Test passes if there is blue rectangle, and not a square, in the upper-right corner of the black box.</p>
34         <div id="div1">
35             <div>&nbsp;</div>
36         </div>
37     </body>
38 </html>