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