src/third_party/WebKit/LayoutTests/css2.1/t0905-c5525-fltclr-00-c-ag.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
   2 <html>
   3  <head>
   4   <title>CSS 2.1 Test Suite: clear</title>
   5   <style type="text/css">
   6    body { overflow: hidden; }
   7    div { font: 15px/1 Ahem; color: green; background: red url(support/css1test5526.png) no-repeat; width: 20em; border: solid black; }
   8    p { margin: 1em 0; }
   9    .left {float: left;}
  10    .right {float: right;}
  11    .one {clear: left;}
  12    .two {clear: right;}
  13    .three {clear: both;}
  14    .four {clear: none;}
  15   </style>
  16   <link title="9.5 Floats" href="http://www.w3.org/TR/CSS21/visuren.html#floats" rel="help">
  17   <link title="9.5.2 Controlling flow next to floats: the 'clear' property" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" rel="help">
  18  </head>
  19  <body>
  20   <p>There should be a big green box below.</p>
  21   <div>
  22    <img alt="[Image]" height="50" src="support/swatch-green.png" class="left">
  23    <p>
  24     xxxxx xxxx xxx xx x xx xxx xxxx
  25     xxxxx xxxx xxx xx x xx xxx xxxx
  26     xxxxx xxxx xxx xx x xx xxx xxxx
  27    </p>
  28    <img alt="[Image]" height="50" src="support/swatch-green.png" class="left">
  29    <p class="one">
  30     xxxxx xxxx xxx xx x xx xxx xxxx
  31     xxxxx xxxx xxx xx x xx xxx xxxx
  32    </p>
  33    <img alt="[Image]" height="50" src="support/swatch-green.png" class="right">
  34    <p class="two">
  35     xxxxx xxxx xxx xx x xx xxx xxxx
  36     xxxxx xxxx xxx xx x xx xxx xxxx
  37    </p>
  38    <img alt="[Image]" height="50" src="support/swatch-green.png" class="left">
  39    <img alt="[Image]" height="50" src="support/swatch-green.png" class="right">
  40    <p class="three">
  41     xxxxx xxxx xxx xx x xx xxx xxxx
  42     xxxxx xxxx xxx xx x xx xxx xxxx
  43    </p>
  44    <img alt="[Image]" height="50" src="support/swatch-green.png" class="left">
  45    <img alt="[Image]" height="50" src="support/swatch-green.png" class="right">
  46    <p class="four">
  47     xxxxx xxxx xxx xx x xx xxx xxxx
  48     xxxxx xxxx xxx xx x xx xxx xxxx
  49     xxxxx xxxx xxx xx x xx xxx xxxx
  50     xxxxx xxxx xxx xx x xx xxx xxxx
  51    </p>
  52   </div>
  53  </body>
  54 </html>