third_party/WebKit/LayoutTests/fast/block/float/narrow-after-wide.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <style>
   5         div.container { width: 350px; height: 175px; position: relative; }
   6         div.green { position: absolute; width: 100px; height: 100px; top: 50px; background-color: green; }
   7         div.line { vertical-align: bottom; display: inline-block; height: 50px; width: 200px; }
   8         div.wide { height: 100px; width: 200px; }
   9         div.narrow { height: 100px; width: 100px; background-color: red; }
  10         div.right { float: right; }
  11         div.left { float: left; }
  12     </style>
  13 </head>
  14 <body>
  15     <div class="container">
  16         <div class="green" style="left: 50px;"></div>
  17         <div class="line"></div>
  18         <div class="wide right"></div>
  19         <div class="narrow right"></div>
  20     </div>
  21     <div class="container">
  22         <div class="green" style="right: 0;"></div>
  23         <div class="line"></div>
  24         <div class="wide left"></div>
  25         <div class="narrow right"></div>
  26     </div>
  27     <div class="container">
  28         <div class="green" style="right: 50px;"></div>
  29         <div class="line"></div>
  30         <div class="wide left"></div>
  31         <div class="narrow left"></div>
  32     </div>
  33 </body>
  34 </html>