Reviewed by Darin.
[WebKit-https.git] / LayoutTests / css1 / font_properties / font.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "">
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">
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>
23 </HEAD>
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>
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>
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>
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>