third_party/WebKit/LayoutTests/css1/font_properties/font.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.2.7 font</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 BODY {font-size: 12px;}
  11 .one {font: italic small-caps 13pt Helvetica;}
  12 .two {font: 150%/150% serif;}
  13 .three {font: 150%/150% sans-serif;}
  14 .four {font: small/200% cursive;}
  15 .five {font: italic small-caps 900 150%/150% sans-serif;}
  16 .six {font: italic small-caps 100 150%/300% sans-serif;}
  17 .seven {font: italic small-caps 900 150%/2em monospace;}
  18 .eight {font: italic small-caps 500 150%/1in sans-serif;}
  19 .nine {font: oblique normal 700 18px/200% sans-serif;}
  20 .ten {font: normal 400 80%/2.5 sans-serif;}
  21 SPAN.color {background-color: silver;}</STYLE>
  22
  23 </HEAD>
  24
  25 <BODY><P>The style declarations which apply to the text below are:</P>
  26 <PRE>BODY {font-size: 12px;}
  27 .one {font: italic small-caps 13pt Helvetica;}
  28 .two {font: 150%/150% serif;}
  29 .three {font: 150%/150% sans-serif;}
  30 .four {font: small/200% cursive;}
  31 .five {font: italic small-caps 900 150%/150% sans-serif;}
  32 .six {font: italic small-caps 100 150%/300% sans-serif;}
  33 .seven {font: italic small-caps 900 150%/2em monospace;}
  34 .eight {font: italic small-caps 500 150%/1in sans-serif;}
  35 .nine {font: oblique normal 700 18px/200% sans-serif;}
  36 .ten {font: normal 400 80%/2.5 sans-serif;}
  37 SPAN.color {background-color: silver;}
  38 </PRE>
  39 <HR>
  40 <P>
  41 This element is unstyled, and should inherit a font-size of 12px from the BODY element.  This is the "base font size" referred to in the following tests.
  42 </P>
  43 <P class="one">
  44 This element should be 13pt. Helvetica which is in small-cap italics.
  45 </P>
  46 <P class="two">
  47 This element should be in a serif font.  Its font-size should be 150% the base font size, and its line-height should 150% of that value (18px and 27px, respectively).  Extra text is included for the purposes of testing this more effectively.
  48 </P>
  49 <P class="three">
  50 This element should be in a sans-serif font.  Its font-size should be 150% the base font size, and its line-height should 150% of that value (18px and 27px, respectively).  Extra text is included for the purposes of testing this more effectively.
  51 </P>
  52 <P class="four">
  53 This element should be in a cursive font, 'small' in size, with a line-height 200% the height of the text's actual size.  For example, if the font-size value <CODE>small</CODE> is calculated at 10px, then the line-height should be 20px.  The actual value of the font-size is UA-dependent.  Extra text is included for the purposes of testing this more effectively.
  54 </P>
  55 <P class="five">
  56 This element should be in a sans-serif font, italicized and small caps, with a weight of 900.  Its font-size should be 150% the base font size, and its line-height should be 150% of that value (18px and 27px, respectively).  Extra text is included for the purposes of testing this more effectively.
  57 </P>
  58 <P class="six">
  59 This element should be in a sans-serif font, italicized and small caps, with a weight of 100.  Its font-size should be 150% the base font size, and its line-height should be 300% of that value (18px and 54px, respectively).  Extra text is included for the purposes of testing this more effectively.
  60 </P>
  61 <P class="seven">
  62 This element should be in a monospace font, italicized and small caps, with a weight of 900.  Its font-size should be 150% the base font size, and its line-height should be 2em, or twice the element's font size (18px and 36px, respectively).  Extra text is included for the purposes of testing this more effectively.
  63 </P>
  64 <P class="eight">
  65 This element should be in a sans-serif font, italicized and small caps, with a weight of 500.  Its font-size should be 150% the base font size, or 18px, and its line-height should be 1in.  Extra text is included for the purposes of testing this more effectively.
  66 </P>
  67 <P class="nine">
  68 This element should be in a sans-serif font, oblique and not small-caps, with a weight of 700.  Its font-size should be 18 pixels, and its line-height should be 36px (200% this element's font size).  Extra text is included for the purposes of testing this more effectively.
  69 </P>
  70 <P class="ten">
  71 This element should be in a sans-serif font, with a weight of 400.  Its font-size should be 80% of 12px, or 9.6px, and its line-height shoud be 2.5 times that, or 24px.  Extra text is included for the purposes of testing this more effectively.
  72 </P>
  73
  74 <P class="six">
  75 <SPAN class="color">
  76 This element should be in a sans-serif font, italicized and small caps, with a weight of 100.  Its font-size should be 150% the base font size, and its line-height should be 300% of that value (18px and 54px, respectively). The text should have a silver background. The background color has been set on an inline element and should therefore only cover the text, not the interline spacing.</SPAN>
  77 </P>
  78
  79
  80 <TABLE border cellspacing="0" cellpadding="3" class="tabletest">
  81 <TR>
  82 <TD colspan="2" bgcolor="silver"><STRONG>TABLE Testing Section</STRONG></TD>
  83 </TR>
  84 <TR>
  85 <TD bgcolor="silver">&nbsp;</TD>
  86 <TD><P>
  87 This element is unstyled, and should inherit a font-size of 12px from the BODY element.  This is the "base font size" referred to in the following tests.
  88 </P>
  89 <P class="one">
  90 This element should be 13pt. Helvetica which is in small-cap italics.
  91 </P>
  92 <P class="two">
  93 This element should be in a serif font.  Its font-size should be 150% the base font size, and its line-height should 150% of that value (18px and 27px, respectively).  Extra text is included for the purposes of testing this more effectively.
  94 </P>
  95 <P class="three">
  96 This element should be in a sans-serif font.  Its font-size should be 150% the base font size, and its line-height should 150% of that value (18px and 27px, respectively).  Extra text is included for the purposes of testing this more effectively.
  97 </P>
  98 <P class="four">
  99 This element should be in a cursive font, 'small' in size, with a line-height 200% the height of the text's actual size.  For example, if the font-size value <CODE>small</CODE> is calculated at 10px, then the line-height should be 20px.  The actual value of the font-size is UA-dependent.  Extra text is included for the purposes of testing this more effectively.
 100 </P>
 101 <P class="five">
 102 This element should be in a sans-serif font, italicized and small caps, with a weight of 900.  Its font-size should be 150% the base font size, and its line-height should be 150% of that value (18px and 27px, respectively).  Extra text is included for the purposes of testing this more effectively.
 103 </P>
 104 <P class="six">
 105 This element should be in a sans-serif font, italicized and small caps, with a weight of 100.  Its font-size should be 150% the base font size, and its line-height should be 300% of that value (18px and 54px, respectively).  Extra text is included for the purposes of testing this more effectively.
 106 </P>
 107 <P class="seven">
 108 This element should be in a monospace font, italicized and small caps, with a weight of 900.  Its font-size should be 150% the base font size, and its line-height should be 2em, or twice the element's font size (18px and 36px, respectively).  Extra text is included for the purposes of testing this more effectively.
 109 </P>
 110 <P class="eight">
 111 This element should be in a sans-serif font, italicized and small caps, with a weight of 500.  Its font-size should be 150% the base font size, or 18px, and its line-height should be 1in.  Extra text is included for the purposes of testing this more effectively.
 112 </P>
 113 <P class="nine">
 114 This element should be in a sans-serif font, oblique and not small-caps, with a weight of 700.  Its font-size should be 18 pixels, and its line-height should be 36px (200% this element's font size).  Extra text is included for the purposes of testing this more effectively.
 115 </P>
 116 <P class="ten">
 117 This element should be in a sans-serif font, with a weight of 400.  Its font-size should be 80% of 12px, or 9.6px, and its line-height shoud be 2.5 times that, or 24px.  Extra text is included for the purposes of testing this more effectively.
 118 </P>
 119
 120 <P class="six">
 121 <SPAN class="color">
 122 This element should be in a sans-serif font, italicized and small caps, with a weight of 100.  Its font-size should be 150% the base font size, and its line-height should be 300% of that value (18px and 54px, respectively). The text should have a silver background. The background color has been set on an inline element and should therefore only cover the text, not the interline spacing.</SPAN>
 123 </P>
 124 </TD></TR></TABLE></BODY>
 125 </HTML>