LayoutTests/fast/replaced/004.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
   2 <html lang="en">
   3  <head>
   4   <title>Replaced inline elements with % widths</title>
   5   <style type="text/css">
   6    div.a { width: 300px; height: 100px; background: red; }
   7    div.a p { width: 200%; }
   8    div.a img { width: 50%; height: 100px; vertical-align: bottom; }
   9    div.b { width: 300px; position: relative; }
  10    div.b p { width: 200%; }
  11    div.b img { width: 50%; height: 100px; vertical-align: bottom; }
  12    div.b span { position: absolute; top: 0; left: 0; background: green; width: 300px; height: 100px; }
  13   </style>
  14  </head>
  15  <body>
  16   <p>There should be no red below, just two 300&times;100 pixel green
  17   rectangles of different shades, seperated by 1em of margin.</p>
  18   <div class="a">
  19    <p>
  20     <img src="resources/1x1-green.png" alt="Image support required for this test">
  21    </p>
  22   </div>
  23   <div class="b">
  24    <p>
  25     <img src="resources/1x1-red.png" alt="Image support required for this test">
  26     <span></span>
  27    </p>
  28   </div>
  29  </body>
  30 </html>