third_party/WebKit/LayoutTests/fast/block/float/shrink-to-fit-width.html

   1 <html>
   2 <head>
   3     <title></title>
   4     <style>
   5         .container { width: 100px; }
   6         .left { float: left; border: solid; }
   7         .right { float: right; border: solid; }
   8         .clear { clear: both; height: 10px; }
   9         .inlineBlock { display: inline-block; width: 60px; height: 20px; background: silver; }
  10     </style>
  11 </head>
  12 <body>
  13     <p>
  14         Test shrink-to-fit width for floating elements (see <a href="http://www.w3.org/TR/2006/WD-CSS21-20061106/visudet.html#q8">CSS 2.1 10.3.5</a>).
  15     </p>
  16     <p>
  17         Shrink-to-fit width is min(max(<i>preferred minimum width</i>, <i>available width</i>), <i>preferred width</i>).
  18         In the following cases (except the &ldquo;x&rdquo;), <i>preferred minimum width</i> &lt; <i>available width</i> &lt; <i>preferred width</i>
  19     </p>
  20     <div class="container">
  21         <div class="left">
  22             longword longword
  23         </div>
  24         <div class="clear"></div>
  25         <div class="right">
  26             longword longword
  27         </div>
  28         <div class="clear"></div>
  29         <div class="left">
  30             longword longword
  31         </div>
  32         <div class="right">
  33             x
  34         </div>
  35         <div class="clear"></div>
  36         <div class="left">
  37             <div class="inlineBlock"></div>
  38             <div class="inlineBlock"></div>
  39         </div>
  40         <div class="clear"></div>
  41         <div class="right">
  42             <div class="inlineBlock"></div>
  43             <div class="inlineBlock"></div>
  44         </div>
  45     </div>
  46 </body>
  47 </html>