third_party/WebKit/LayoutTests/css2.1/20110323/inline-replaced-width-014.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html lang="en">
   3  <head>
   4   <title>CSS Test: Replaced inline elements with % widths</title>
   5   <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
   6   <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/replaced/004.html" type="text/html">
   7   <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
   8   <style type="text/css">
   9    div.a { width: 300px; height: 100px; background: red; }
  10    div.a p { width: 200%; }
  11    div.a img { width: 50%; height: 100px; vertical-align: bottom; }
  12    div.b { width: 300px; position: relative; }
  13    div.b p { width: 200%; }
  14    div.b img { width: 50%; height: 100px; vertical-align: bottom; }
  15    div.b span { position: absolute; top: 0; left: 0; background: green; width: 300px; height: 100px; }
  16   </style>
  17  </head>
  18  <body>
  19   <p>There should be no red below, just two 300&times;100 pixel green
  20   rectangles seperated by 1em of margin.</p>
  21   <div class="a">
  22    <p>
  23     <img src="resources/1x1-green.png" alt="Image support required for this test">
  24    </p>
  25   </div>
  26   <div class="b">
  27    <p>
  28     <img src="resources/1x1-red.png" alt="Image support required for this test">
  29     <span></span>
  30    </p>
  31   </div>
  32  </body>
  33 </html>