third_party/WebKit/LayoutTests/fast/block/float/floats-offset-image-quirk-line-height.html

   1 <html>
   2 <head>
   3     <style>
   4         body { width: 400px;}
   5         .container { color: red; width: 100px; height: 150px; position: relative;}
   6         .container:first-line { font-size: 30px;}
   7         div { background: white; }
   8         img { background: red; width: 20px; height: 20px; }
   9         .narrowfloat { float: left; width: 10px; height: 25px; }
  10         .widefloat { float: left; clear: left; width: 40px; height: 5px; }
  11         .reference { position: absolute; width: 20px; height: 20px; background: black; }
  12         .first { left: 10px; }
  13         .second { top: 20px; left: 40px; }
  14     </style>
  15 </head>
  16 <body>
  17 <!-- In quirks mode, images have their descent removed so that they squeeze together across line breaks.
  18      Ensure the images find the correct offset for their line when avoiding floats and line-height is set. -->
  19 There should be no red visible below.
  20 <div class="container">
  21     <div class="narrowfloat"></div>
  22     <div class="widefloat"></div>
  23     <!-- This should cover the first image. -->
  24     <div class="reference first"></div>
  25     <!-- This should cover the second image. -->
  26     <div class="reference second"></div>
  27     <img><br><img>
  28 </div>
  29 </body></html>