third_party/WebKit/LayoutTests/fast/inline-block/multiple-floats-with-whitespace.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>Test Multiple Floats for a Single Line</title>
   5 <style>
   6     div { width: 100px; height:30px; margin:0; padding:0; border:none; background-color: green;}
   7     .container { width:400px; }
   8     .left { float:left; }
   9     .a { float:right; }
  10     .b { float:right; }
  11     .middle { display:inline-block; }
  12 </style>
  13 </head>
  14 <body>
  15 <p> There should be a single green rectangle below. </p>
  16 <!-- No whitespace -->
  17 <div class="container"><div class="left"></div><div class="middle"></div><div class="floater a"></div><div class="floater b"></div></div>
  18
  19 <!-- Some whitespace -->
  20 <div class="container">
  21     <div class="left"></div>
  22     <div class="middle"></div>
  23     <div class="floater a"></div>
  24     <div class="floater b"></div>
  25 </div>
  26
  27 <!-- Order should not matter -->
  28 <div class="container">
  29     <div class="floater a"></div>
  30     <div class="left"></div>
  31     <div class="middle"></div>
  32     <div class="floater b"></div>
  33 </div>
  34
  35 </body>
  36 </html>