third_party/WebKit/LayoutTests/css1/box_properties/clear.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
   2 <HTML>
   3 <HEAD>
   4 <TITLE>CSS1 Test Suite: 5.5.26 clear</TITLE>
   5 <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   6 <META http-equiv="Content-Style-Type" content="text/css">
   7
   8 <LINK rel="stylesheet" type="text/css" media="screen" href="../resources/base.css">
   9 <STYLE type="text/css">
  10 .one {clear: left;}
  11 .two {clear: right;}
  12 .three {clear: both;}
  13 .four {clear: none;}</STYLE>
  14
  15 </HEAD>
  16
  17 <BODY><P>The style declarations which apply to the text below are:</P>
  18 <PRE>.one {clear: left;}
  19 .two {clear: right;}
  20 .three {clear: both;}
  21 .four {clear: none;}
  22 </PRE>
  23 <HR>
  24 <IMG SRC="../resources/vblank.gif" height="50" align="left" alt="[Image]">
  25 <P>
  26 This text should be flowing past a tall orange rectangle on the left side of the browser window.
  27 </P>
  28 <BR clear="all">
  29 <IMG SRC="../resources/vblank.gif" height="50" align="left" alt="[Image]">
  30 <P class="one">
  31 This paragraph should appear below the tall orange rectangle above and to the left, and not flow past it.
  32 </P>
  33 <BR clear="all">
  34 <IMG SRC="../resources/vblank.gif" height="50" align="right" alt="[Image]">
  35 <P class="two">
  36 This paragraph should appear below the tall orange rectangle above and to the right, and not flow past it.
  37 </P>
  38 <BR clear="all">
  39 <IMG SRC="../resources/vblank.gif" height="50" align="left" alt="[Image]">
  40 <IMG SRC="../resources/vblank.gif" height="50" align="right" alt="[Image]">
  41 <P class="three">
  42 This paragraph should appear below the two tall orange rectangles, and not flow between them.
  43 </P>
  44 <IMG SRC="../resources/vblank.gif" height="50" align="left" alt="[Image]">
  45 <IMG SRC="../resources/vblank.gif" height="50" align="right" alt="[Image]">
  46 <P class="four">
  47 This paragraph should be between both tall orange rectangles.
  48 </P>
  49 <BR clear="all">
  50
  51
  52 <TABLE border cellspacing="0" cellpadding="3" class="tabletest">
  53 <TR>
  54 <TD colspan="2" bgcolor="silver"><STRONG>TABLE Testing Section</STRONG></TD>
  55 </TR>
  56 <TR>
  57 <TD bgcolor="silver">&nbsp;</TD>
  58 <TD><IMG SRC="../resources/vblank.gif" height="50" align="left" alt="[Image]">
  59 <P>
  60 This text should be flowing past a tall orange rectangle on the left side of the browser window.
  61 </P>
  62 <BR clear="all">
  63 <IMG SRC="../resources/vblank.gif" height="50" align="left" alt="[Image]">
  64 <P class="one">
  65 This paragraph should appear below the tall orange rectangle above and to the left, and not flow past it.
  66 </P>
  67 <BR clear="all">
  68 <IMG SRC="../resources/vblank.gif" height="50" align="right" alt="[Image]">
  69 <P class="two">
  70 This paragraph should appear below the tall orange rectangle above and to the right, and not flow past it.
  71 </P>
  72 <BR clear="all">
  73 <IMG SRC="../resources/vblank.gif" height="50" align="left" alt="[Image]">
  74 <IMG SRC="../resources/vblank.gif" height="50" align="right" alt="[Image]">
  75 <P class="three">
  76 This paragraph should appear below the two tall orange rectangles, and not flow between them.
  77 </P>
  78 <IMG SRC="../resources/vblank.gif" height="50" align="left" alt="[Image]">
  79 <IMG SRC="../resources/vblank.gif" height="50" align="right" alt="[Image]">
  80 <P class="four">
  81 This paragraph should be between both tall orange rectangles.
  82 </P>
  83 <BR clear="all">
  84 </TD></TR></TABLE></BODY>
  85 </HTML>