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