LayoutTests/css2.1/t090501-c414-flt-ln-01-d-g.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
   2 <html>
   3  <head>
   4   <title>CSS 2.1 Test Suite: Floating Elements</title>
   5   <style type="text/css">
   6    p { color: navy; }
   7    div { border: 5px solid purple; padding: 1em; margin: 1em; color: silver; font: 1em/1.3 serif; }
   8    div img { width: 7em; color: red; }
   9    div span.a { border: solid aqua; background-color: teal; color: white; }
  10    div img.a { float: left; }
  11    div span.b { border: solid fuchsia; background-color: purple; color: white; }
  12    div img.b { float: right; }
  13   </style>
  14   <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property">
  15  </head>
  16  <body>
  17   <p>The big coloured boxes should be level with the top of the small
  18   coloured boxes of the same color (unless there is not enough room
  19   for the big box to fit on the small box's line, in which case the
  20   big box should be level with the bottom of the respective small
  21   box).</p>
  22   <div>
  23    dummy text dummy text dummy text dummy text dummy text dummy text
  24    <span class="a">⇦</span>
  25    <img alt="FAIL: Images required for this test." src="support/square-teal.png" class="a">
  26    dummy text dummy text dummy text dummy text dummy text dummy text
  27    <span class="b">⇨</span>
  28    <img alt="FAIL: Images required for this test." src="support/square-purple.png" class="b">
  29    dummy text dummy text dummy text dummy text dummy text dummy text
  30    dummy text dummy text dummy text dummy text dummy text dummy text
  31    dummy text dummy text dummy text dummy text dummy text dummy text
  32    dummy text dummy text dummy text dummy text dummy text dummy text
  33    dummy text dummy text dummy text dummy text dummy text dummy text
  34    dummy text dummy text dummy text dummy text dummy text dummy text
  35    dummy text dummy text dummy text dummy text dummy text dummy text
  36    dummy text dummy text dummy text dummy text dummy text dummy text
  37    dummy text dummy text dummy text dummy text dummy text dummy text
  38    dummy text dummy text dummy text dummy text dummy text dummy text
  39    dummy text dummy text dummy text dummy text dummy text dummy text
  40    dummy text dummy text dummy text dummy text dummy text dummy text
  41    dummy text dummy text dummy text dummy text dummy text dummy text
  42    dummy text dummy text dummy text dummy text dummy text dummy text
  43    dummy text dummy text dummy text dummy text dummy text dummy text
  44    dummy text dummy text dummy text dummy text dummy text dummy text
  45    dummy text dummy text dummy text dummy text dummy text dummy text
  46    dummy text dummy text dummy text dummy text dummy text dummy text
  47    dummy text dummy text dummy text dummy text dummy text dummy text
  48   </div>
  49  </body>
  50 </html>