LayoutTests/css1/formatting_model/height_of_lines.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.4 The Height of Lines</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 P.one {font-size: 14px; line-height: 20px;}
  11 IMG.onea {vertical-align: text-bottom;
  12      width: 200px; height: 200px;}
  13 IMG.oneb {vertical-align: text-top; width: 200px; height: 200px;}
  14
  15 P.two {font-size: 14px; line-height: 20px;}
  16 IMG.twoa {vertical-align: text-bottom; width: 100px; height: 100px;
  17      padding: 5px; border-style: solid;
  18      border-width: 10px; margin: 15px;}
  19 IMG.twob {vertical-align: text-top;
  20           width: 100px; height: 100px;
  21      padding: 5px; border-style: solid;
  22      border-width: 10px; margin: 15px;}
  23
  24 IMG.twoc {vertical-align: middle; width: 50px; height: 50px;
  25      padding: 5px; border-style: solid;
  26      border-width: 10px; margin: -10px;}
  27 </STYLE>
  28
  29 </HEAD>
  30
  31 <BODY><P>The style declarations which apply to the text below are:</P>
  32 <PRE>P.one {font-size: 14px; line-height: 20px;}
  33 IMG.onea {vertical-align: text-bottom;
  34      width: 200px; height: 200px;}
  35 IMG.oneb {vertical-align: text-top; width: 200px; height: 200px;}
  36
  37 P.two {font-size: 14px; line-height: 20px;}
  38 IMG.twoa {vertical-align: text-bottom; width: 100px; height: 100px;
  39      padding: 5px; border-style: solid;
  40      border-width: 10px; margin: 15px;}
  41 IMG.twob {vertical-align: text-top;
  42           width: 100px; height: 100px;
  43      padding: 5px; border-style: solid;
  44      border-width: 10px; margin: 15px;}
  45
  46 IMG.twoc {vertical-align: middle; width: 50px; height: 50px;
  47      padding: 5px; border-style: solid;
  48      border-width: 10px; margin: -10px;}
  49
  50 </PRE>
  51 <HR>
  52 <P CLASS="one">
  53 This paragraph should have a font size of 14px and a
  54 line height of 20px.  This means that the lines of text within it
  55 should be separated by six pixels, three of which are part of the
  56 line-box of each line.  Any images within the paragraph should increase
  57 the height of the line-box so that they fit within the line box, such
  58 as <IMG SRC="../resources/oransqr.gif" ALT="[Image]" CLASS="onea"> and <IMG
  59 SRC="../resources/oransqr.gif" ALT="[Image]" CLASS="oneb">.  This is additional text
  60 to make sure that there is enough room left below the image so that
  61 this line does not hit the image that is text-top aligned.
  62 </P>
  63
  64 <P CLASS="two">
  65 This paragraph should have a font size of 14px and a
  66 line height of 20px.  This means that the lines of text within it
  67 should be separated by six pixels.  Any images within the paragraph
  68 should increase the height of the line-box so that they fit, including
  69 their padding (5px), border (10px) and margins (15px) within the
  70 line box, such as <IMG SRC="../resources/oransqr.gif" ALT="[Image]"
  71 CLASS="twoa"> and <IMG SRC="../resources/oransqr.gif" ALT="[Image]"
  72 CLASS="twob">.  This is additional text to make sure that there is
  73 enough room left below the image so that this line does not hit the
  74 image that is text-top aligned.  It is the outer edge of the margin that should be text-bottom and text-top aligned in this paragraph, so for the first image the bottom border of the image should begin 15px above the bottom of the text, and for the second image the top border should begin 15px below the top of the text <IMG SRC="../resources/oransqr.gif" ALT="[Image]" CLASS="twoc">.  The last image in this paragraph has -10px margins set on it, so that should pull the text in toward the image in the vertical direction, and also in the horizontal direction.
  75 </P>
  76
  77
  78 <TABLE border cellspacing="0" cellpadding="3" class="tabletest">
  79 <TR>
  80 <TD colspan="2" bgcolor="silver"><STRONG>TABLE Testing Section</STRONG></TD>
  81 </TR>
  82 <TR>
  83 <TD bgcolor="silver">&nbsp;</TD>
  84 <TD><P CLASS="one">
  85 This paragraph should have a font size of 14px and a
  86 line height of 20px.  This means that the lines of text within it
  87 should be separated by six pixels, three of which are part of the
  88 line-box of each line.  Any images within the paragraph should increase
  89 the height of the line-box so that they fit within the line box, such
  90 as <IMG SRC="../resources/oransqr.gif" ALT="[Image]" CLASS="onea"> and <IMG
  91 SRC="../resources/oransqr.gif" ALT="[Image]" CLASS="oneb">.  This is additional text
  92 to make sure that there is enough room left below the image so that
  93 this line does not hit the image that is text-top aligned.
  94 </P>
  95
  96 <P CLASS="two">
  97 This paragraph should have a font size of 14px and a
  98 line height of 20px.  This means that the lines of text within it
  99 should be separated by six pixels.  Any images within the paragraph
 100 should increase the height of the line-box so that they fit, including
 101 their padding (5px), border (10px) and margins (15px) within the
 102 line box, such as <IMG SRC="../resources/oransqr.gif" ALT="[Image]"
 103 CLASS="twoa"> and <IMG SRC="../resources/oransqr.gif" ALT="[Image]"
 104 CLASS="twob">.  This is additional text to make sure that there is
 105 enough room left below the image so that this line does not hit the
 106 image that is text-top aligned.  It is the outer edge of the margin that should be text-bottom and text-top aligned in this paragraph, so for the first image the bottom border of the image should begin 15px above the bottom of the text, and for the second image the top border should begin 15px below the top of the text <IMG SRC="../resources/oransqr.gif" ALT="[Image]" CLASS="twoc">.  The last image in this paragraph has -10px margins set on it, so that should pull the text in toward the image in the vertical direction, and also in the horizontal direction.
 107 </P>
 108 </TD></TR></TABLE></BODY>
 109 </HTML>