third_party/WebKit/LayoutTests/css2.1/20110323/absolute-replaced-height-036.htm

   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="resources/swatch-white.png" alt="FAIL: image support required">
  54       <img class="abspos two" src="resources/swatch-white.png" alt="FAIL: image support required">
  55       <img class="abspos three" src="resources/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>