1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: Font shorthand set using the values font-style, font-variant, font-size, line-height and font-family</title>
5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
6 <link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#font-shorthand">
8 <meta name="flags" content="">
9 <meta name="assert" content="The 'font' shorthand property accepts and sets font-style, font-variant, font-size, line-height and font-family.">
10 <style type="text/css">
11 #wrapper
12 {
13 position: relative;
14 }
15 #test
16 {
17 font: italic small-caps 1in/1em serif;
18 position: absolute;
19 }
20 #reference
21 {
22 color: orange;
23 font-family: serif;
24 font-size: 1in;
25 height: 1in;
26 left: 0;
27 line-height: 1em;
28 position: absolute;
29 top: 0;
30 width: 1in;
31 }
32 </style>
33 </head>
34 <body>
35 <p>Test passes if the first black "x" is taller and wider than the first orange "x" and shorter than the second orange "X". The second black "X" needs to be the same height as the second orange "X". The black "1" needs to slant to one side.</p>
36 <div id="wrapper">
37 <div id="reference">xX1</div>
38 <div id="test">xX1</div>
39 </div>
40 </body>
41 </html>