third_party/WebKit/LayoutTests/css1/text_properties/line_height.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.4.8 line-height</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 {line-height: 0.5in; font-size: 12px;}
  11 .two {line-height: 2cm; font-size: 12px;}
  12 .three {line-height: 20mm; font-size: 12px;}
  13 .four {line-height: 24pt; font-size: 12px;}
  14 .five {line-height: 2pc; font-size: 12px;}
  15 .six {line-height: 2em; font-size: 12px;}
  16 .seven {line-height: 3ex; font-size: 12px;}
  17 .eight {line-height: 200%; font-size: 12px;}
  18 .nine {line-height: 2; font-size: 12px;}
  19 .ten {line-height: 50px; font-size: 12px;}
  20 .eleven {line-height: -1em; font-size: 12px;}
  21 TABLE .ten {line-height: normal; font-size: 12px;}
  22 DIV {background-color: silver;}
  23 SPAN.color {background-color: silver;}</STYLE>
  24
  25 </HEAD>
  26
  27 <BODY><P>The style declarations which apply to the text below are:</P>
  28 <PRE>.one {line-height: 0.5in; font-size: 12px;}
  29 .two {line-height: 2cm; font-size: 12px;}
  30 .three {line-height: 20mm; font-size: 12px;}
  31 .four {line-height: 24pt; font-size: 12px;}
  32 .five {line-height: 2pc; font-size: 12px;}
  33 .six {line-height: 2em; font-size: 12px;}
  34 .seven {line-height: 3ex; font-size: 12px;}
  35 .eight {line-height: 200%; font-size: 12px;}
  36 .nine {line-height: 2; font-size: 12px;}
  37 .ten {line-height: 50px; font-size: 12px;}
  38 .eleven {line-height: -1em; font-size: 12px;}
  39 TABLE .ten {line-height: normal; font-size: 12px;}
  40 DIV {background-color: silver;}
  41 SPAN.color {background-color: silver;}
  42 </PRE>
  43 <HR>
  44 <P class="one">
  45 This sentence should have a line-height of half an inch, which should cause extra spacing between the lines.
  46 </P>
  47 <P class="two">
  48 This sentence should have a line-height of two centimeters, which should cause extra spacing between the lines.
  49 </P>
  50 <P class="three">
  51 This sentence should have a line-height of twenty millimeters, which should cause extra spacing between the lines.
  52 </P>
  53 <P class="four">
  54 This sentence should have a line-height of twenty-four points, which should cause extra spacing between the lines.
  55 </P>
  56 <P class="five">
  57 This sentence should have a line-height of two picas, which should cause extra spacing between the lines.
  58 </P>
  59 <P class="six">
  60 This sentence should have a line-height of two em, which should cause extra spacing between the lines.
  61 </P>
  62 <P class="seven">
  63 This sentence should have a line-height of three ex, which should cause extra spacing between the lines.
  64 </P>
  65 <P class="eight">
  66 This sentence should have a line-height of twice the font size, which should cause extra spacing between the lines.
  67 </P>
  68 <DIV class="eight">
  69 This first part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines.
  70 <P style="font-size: 200%;">
  71 This sentence should have a line-height of twice the DIV's font size, or 28px; this should not cause extra spacing between the lines, since the line-height and font-size should have the same value.
  72 </P>
  73 This second part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines.
  74 </DIV>
  75 <P class="nine">
  76 This sentence should have a line-height of twice the font size, which should cause extra spacing between the lines.
  77 </P>
  78 <DIV class="nine">
  79 This first part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines.
  80 <P style="font-size: 200%;">
  81 This sentence should have a line-height of twice the font size, which is 200% normal thanks to an inline style; this should cause extra spacing between the lines, as the font-size will be 28px and the line-height will be 56px.
  82 </P>
  83 This second part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines.
  84 </DIV>
  85 <P class="ten">
  86 This paragraph should have a line-height of 50 pixels in the first section, which should cause extra spacing between the lines.  In the second section (within the table) its line-height should be normal.
  87 </P>
  88 <P class="eleven">
  89 This sentence should have a normal line-height, because negative values are not permitted for this property.
  90 </P>
  91 <P class="two">
  92 <SPAN class="color">This sentence should have a line-height of two centimeters, which should cause extra spacing between the lines. The text has a background color of silver, but no padding or border. The background color has been set on an inline element and should therefore only cover the text, not the interline spacing.</SPAN>
  93 </P>
  94
  95
  96 <TABLE border cellspacing="0" cellpadding="3" class="tabletest">
  97 <TR>
  98 <TD colspan="2" bgcolor="silver"><STRONG>TABLE Testing Section</STRONG></TD>
  99 </TR>
 100 <TR>
 101 <TD bgcolor="silver">&nbsp;</TD>
 102 <TD><P class="one">
 103 This sentence should have a line-height of half an inch, which should cause extra spacing between the lines.
 104 </P>
 105 <P class="two">
 106 This sentence should have a line-height of two centimeters, which should cause extra spacing between the lines.
 107 </P>
 108 <P class="three">
 109 This sentence should have a line-height of twenty millimeters, which should cause extra spacing between the lines.
 110 </P>
 111 <P class="four">
 112 This sentence should have a line-height of twenty-four points, which should cause extra spacing between the lines.
 113 </P>
 114 <P class="five">
 115 This sentence should have a line-height of two picas, which should cause extra spacing between the lines.
 116 </P>
 117 <P class="six">
 118 This sentence should have a line-height of two em, which should cause extra spacing between the lines.
 119 </P>
 120 <P class="seven">
 121 This sentence should have a line-height of three ex, which should cause extra spacing between the lines.
 122 </P>
 123 <P class="eight">
 124 This sentence should have a line-height of twice the font size, which should cause extra spacing between the lines.
 125 </P>
 126 <DIV class="eight">
 127 This first part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines.
 128 <P style="font-size: 200%;">
 129 This sentence should have a line-height of twice the DIV's font size, or 28px; this should not cause extra spacing between the lines, since the line-height and font-size should have the same value.
 130 </P>
 131 This second part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines.
 132 </DIV>
 133 <P class="nine">
 134 This sentence should have a line-height of twice the font size, which should cause extra spacing between the lines.
 135 </P>
 136 <DIV class="nine">
 137 This first part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines.
 138 <P style="font-size: 200%;">
 139 This sentence should have a line-height of twice the font size, which is 200% normal thanks to an inline style; this should cause extra spacing between the lines, as the font-size will be 28px and the line-height will be 56px.
 140 </P>
 141 This second part of the DIV should have a line-height of twice the font size, which should cause extra spacing between the lines.
 142 </DIV>
 143 <P class="ten">
 144 This paragraph should have a line-height of 50 pixels in the first section, which should cause extra spacing between the lines.  In the second section (within the table) its line-height should be normal.
 145 </P>
 146 <P class="eleven">
 147 This sentence should have a normal line-height, because negative values are not permitted for this property.
 148 </P>
 149 <P class="two">
 150 <SPAN class="color">This sentence should have a line-height of two centimeters, which should cause extra spacing between the lines. The text has a background color of silver, but no padding or border. The background color has been set on an inline element and should therefore only cover the text, not the interline spacing.</SPAN>
 151 </P>
 152 </TD></TR></TABLE></BODY>
 153 </HTML>