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 with intrinsic ratios, 'height' set to 'auto' and 'top', 'bottom', 'margin-top' 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 used width divided by the ratio when an absolutely positioned replaced element has an intrinsic ratio, 'height' is set to 'auto', 'width' is specified 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: 1in;
19 left: 1in;
20 position: absolute;
21 top: 1in;
22 }
23 img
24 {
25 bottom: 1in;
26 height: auto;
27 margin-bottom: auto;
28 margin-top: 0.5in;
29 position: absolute;
30 top: 0.5in;
31 }
32 div div, img
33 {
34 width: 1in;
35 }
36 </style>
37 </head>
38 <body>
39 <p>Test passes if there is a single blue box below and it does not touch the black line.</p>
40 <div id="div1">
41 <img alt="blue 15x15" src="support/blue15x15.png">
42 <div></div>
43 </div>
44 </body>
45 </html>