inline-replaced-height-005

Inline replaced elements with percentage based intrinsic height

WeasyPrint

This browser

Assertion
An inline 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: Inline 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#inline-replaced-height">
 7         <meta name="flags" content="">
 8         <meta name="assert" content="An inline 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                 display: inline;
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>