absolute-replaced-height-036

Absolute Replaced Elements: specified 'top' and 'bottom' with auto margins

WeasyPrint

This browser

Flags
image
Assertion
If 'top' and 'bottom' are specified on an absolutely-positioned replaced element, then any remaining space is split amongst the 'auto' vertical margins.

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: 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>