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: specified 'top' and 'bottom' with auto margins</title>
5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/">
6 <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#clipping">
7 <meta name="flags" content="image">
8 <meta name="assert" content="If 'top' and 'bottom' are specified on an absolutely-positioned replaced element, then any remaining space is split amongst the 'auto' vertical margins.">
9 <style type="text/css">
10 .container {
11 position: relative;
12 width: 45px;
13 height: 45px;
14 /* Uncomment for debugging:
15 border: solid silver;
16 background: aqua; */
17 }
18 .abspos {
19 position: absolute;
20 top: 0; bottom: 0;
21 background: red;
22 }
23 .one {
24 margin: auto;
25 left: 0;
26 }
27 .two {
28 margin-top: auto;
29 left: 15px;
30 }
31 .three {
32 margin-bottom: auto;
33 right: 0;
34 }
35 .control1 {
36 height: 15px;
37 border-right: 15px solid red;
38 }
39 .control2 {
40 height: 15px;
41 border-left: 15px solid red;
42 }
43 .control3 {
44 height: 15px;
45 margin: 0 15px;
46 background: red;
47 }
48 </style>
49 </head>
50 <body>
51 <p>There must be no red.</p>
52 <div class="container">
53 <img class="abspos one" src="support/swatch-white.png" alt="FAIL: image support required">
54 <img class="abspos two" src="support/swatch-white.png" alt="FAIL: image support required">
55 <img class="abspos three" src="support/swatch-white.png" alt="FAIL: image support required">
56 <div class="control1"></div>
57 <div class="control2"></div>
58 <div class="control3"></div>
59 </div>
60 </body>
61 </html>