absolute-replaced-height-005

Absolute replaced elements with percentage based intrinsic height

WeasyPrint

This browser

Assertion
An absolutely positioned replaced element with percentage intrinsic height resolves based on the containing block height when percentage is explicitly specified.

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3     <head>
 4         <title>CSS Test: Absolute replaced elements with percentage based intrinsic 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#abs-replaced-height">
 7         <meta name="flags" content="">
 8         <meta name="assert" content="An absolutely positioned replaced element with percentage intrinsic height resolves based on the containing block height when percentage is explicitly specified.">
 9         <style type="text/css">
10             #div1
11             {
12                 position: relative;
13                 height: 2in;
14             }
15             div div
16             {
17                 border: solid green;
18                 height: 1in;
19                 position: absolute;
20                 top: 0;
21                 width: 300px;
22             }
23             iframe
24             {
25                 border: solid red;
26                 position: absolute;
27                 width: auto;
28             }
29         </style>
30     </head>
31     <body>
32         <p>Test passes if there is no red visible on the page.</p>
33         <div id="div1">
34             <iframe height="50%"></iframe>
35             <div></div>
36         </div>
37     </body>
38 </html>