LayoutTests/css1/formatting_model/replaced_elements.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: 4.3 Replaced Elements</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 IMG.one {display: inline;}
  11 IMG.two {display: block;}
  12 IMG.three {display: block;
  13            margin-right: auto; margin-left: auto; width: auto;}
  14 IMG.four {display: block;
  15           margin-right: auto; margin-left: auto; width: 50%;}
  16 IMG.five {display: block;
  17           margin-right: 0; margin-left: auto; width: 50%;}</STYLE>
  18
  19 </HEAD>
  20
  21 <BODY><P>The style declarations which apply to the text below are:</P>
  22 <PRE>IMG.one {display: inline;}
  23 IMG.two {display: block;}
  24 IMG.three {display: block;
  25            margin-right: auto; margin-left: auto; width: auto;}
  26 IMG.four {display: block;
  27           margin-right: auto; margin-left: auto; width: 50%;}
  28 IMG.five {display: block;
  29           margin-right: 0; margin-left: auto; width: 50%;}
  30 </PRE>
  31 <HR>
  32 <P><IMG CLASS="one" SRC="../resources/oransqr.gif" ALT="[Image]">The image at the
  33 beginning of this sentence should be a 15px square.</P>
  34
  35 <IMG CLASS="two" SRC="../resources/oransqr.gif" ALT="[Image]">
  36 <P>The above image should be a 15px square with the same left edge as this text.</P>
  37
  38 <IMG CLASS="three" SRC="../resources/oransqr.gif" ALT="[Image]">
  39 <P>The above image should be a 15px square aligned at the center.</P>
  40
  41 <IMG CLASS="four" SRC="../resources/oransqr.gif" ALT="[Image]">
  42 <P>The above image should be a square resized so its width is 50% of
  43 the its parent element, and centered horizontally within the parent element:  the document body in the first half, and the table in the second.</P>
  44
  45 <IMG CLASS="five" SRC="../resources/oransqr.gif" ALT="[Image]">
  46 <P>The above image should be a square resized so its width is 50% of
  47 its parent element, and aligned at the right edge of the parent element:  the document body in the first half, and the table in the second.</P>
  48
  49
  50 <TABLE border cellspacing="0" cellpadding="3" class="tabletest">
  51 <TR>
  52 <TD colspan="2" bgcolor="silver"><STRONG>TABLE Testing Section</STRONG></TD>
  53 </TR>
  54 <TR>
  55 <TD bgcolor="silver">&nbsp;</TD>
  56 <TD><P><IMG CLASS="one" SRC="../resources/oransqr.gif" ALT="[Image]">The image at the
  57 beginning of this sentence should be a 15px square.</P>
  58
  59 <IMG CLASS="two" SRC="../resources/oransqr.gif" ALT="[Image]">
  60 <P>The above image should be a 15px square with the same left edge as this text.</P>
  61
  62 <IMG CLASS="three" SRC="../resources/oransqr.gif" ALT="[Image]">
  63 <P>The above image should be a 15px square aligned at the center.</P>
  64
  65 <IMG CLASS="four" SRC="../resources/oransqr.gif" ALT="[Image]">
  66 <P>The above image should be a square resized so its width is 50% of
  67 the its parent element, and centered horizontally within the parent element:  the document body in the first half, and the table in the second.</P>
  68
  69 <IMG CLASS="five" SRC="../resources/oransqr.gif" ALT="[Image]">
  70 <P>The above image should be a square resized so its width is 50% of
  71 its parent element, and aligned at the right edge of the parent element:  the document body in the first half, and the table in the second.</P>
  72 </TD></TR></TABLE></BODY>
  73 </HTML>