LayoutTests/css2.1/t0905-c5525-fltwidth-00-c-g.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
   2 <html>
   3  <head>
   4   <title>CSS 2.1 Test Suite: float</title>
   5   <style type="text/css">
   6    p { color: navy; font-size: 2em; margin: 1em; }
   7    div { text-align: justify; }
   8    p.end { text-align: right; }
   9    .float { float: left; width: 50%; background: blue; color: white; font-variant: small-caps; }
  10    .flow { color: silver; background: url(support/ruler-h-50%25.png) bottom center no-repeat; }
  11   </style>
  12   <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" title="9.5 Floats">
  13   <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property" title="10.2 Content width: the 'width' property">
  14  </head>
  15  <body>
  16   <!-- This test sucks. -->
  17   <p>⇩ The following blue box should be exactly half the width
  18   of the viewport, on the left of the 50% ruler mark.</p>
  19   <div class="float">
  20    ignore this float text ignore this float text ignore this float
  21    text ignore this float text ignore this float text ignore this
  22    float text ignore this float text ignore this float text ignore
  23    this float text ignore this float text ignore this float text
  24    ignore this float text ignore this float text ignore this float
  25    text ignore this float text ignore this float text ignore this
  26    float text ignore this float text ignore this float text ignore
  27    this float text ignore this float text ignore this float text
  28    ignore this float text ignore this float text ignore this float
  29    text ignore this float text ignore this float text ignore this
  30    float text ignore this float text ignore this float text ignore
  31    this float text ignore this float text ignore this float text
  32    ignore this float text ignore this float text ignore this float
  33    text ignore this float text ignore this float text ignore this
  34    float text ignore this float text ignore this float text ignore
  35    this float text ignore this float text ignore this float text
  36    ignore this float text ignore this float text ignore this float
  37   </div>
  38   <div class="flow">
  39    this is some dummy text this is some dummy text this is some dummy
  40    text this is some dummy text this is some dummy text this is some
  41    dummy text this is some dummy text this is some dummy text this is
  42    some dummy text this is some dummy text this is some dummy text
  43    this is some dummy text this is some dummy text this is some dummy
  44    text this is some dummy text this is some dummy text this is some
  45    dummy text this is some dummy text this is some dummy text this is
  46    some dummy text this is some dummy text this is some dummy text
  47    this is some dummy text this is some dummy text this is some dummy
  48    text this is some dummy text this is some dummy text this is some
  49    dummy text this is some dummy text this is some dummy text this is
  50    some dummy text this is some dummy text this is some dummy text
  51    this is some dummy text this is some dummy text this is some dummy
  52    text this is some dummy text this is some dummy text this is some
  53    dummy text this is some dummy text this is some dummy text this is
  54    some dummy text this is some dummy text this is some dummy text
  55    this is some dummy text this is some dummy text this is some dummy
  56    text this is some dummy text this is some dummy text this is some
  57    dummy text this is some dummy text this is some dummy text this is
  58    some dummy text this is some dummy text this is some dummy text
  59    this is some dummy text this is some dummy text this is some dummy
  60    text this is some dummy text this is some dummy text this is some
  61    dummy text this is some dummy text this is some dummy text this is
  62    some dummy text this is some dummy text this is some dummy text
  63    this is some dummy text this is some dummy text this is some dummy
  64    text this is some dummy text this is some dummy text this is some
  65    dummy text this is some dummy text this is some dummy text this is
  66    some dummy text this is some dummy text
  67   </div>
  68   <p class="end">The above gray text should flow around the blue box.
  69   ⇧</p>
  70  </body>
  71 </html>