1 <!DOCTYPE html>
2 <html><!-- Submitted from TestTWF Paris --><head>
3
4 <title>CSS Values and Units Test: elements should be the real world size given in mm, cm, inches...</title>
5 <meta content="elements are not displayed with the real world size units they should be, when specified in millimeters, centimeters, inches, ..." name="assert">
6 <link href="mailto:marc@bourlon.com" rel="author" title="Marc Bourlon">
7 <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" title="5.1.2. Viewport-percentage lengths: the 'vw', 'vh', 'vmin', 'vmax' units">
8
9 <style type="text/css">
10
11 * { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
12
13 .s1mm { background: #F00; width: 1mm; height: 1mm; }
14 .s10mm { background: #66F; width: 10mm; height: 10mm; }
15 .s1cm { background: #E90; width: 1cm; height: 1cm; }
16 .s254cm { background: #D0D; width: 2.54cm; height: 2.54cm; }
17 .s1in { background: #00F; width: 1in; height: 1in; }
18
19 .inline { float: left; }
20
21 .newline { clear: left; }
22
23 p { clear: both; margin: 10px 0; }
24
25 </style>
26
27 </head>
28 <body>
29
30 <p>
31 This should be 1mm (width) by 1mm (height) size
32 </p>
33
34 <div class="s1mm"></div>
35
36 <p>
37 This is 10 1mm x 1mm divs, so it should be 10mm (width) by 1mm (height) size
38 </p>
39
40 <div class="s1mm newline inline"></div>
41 <div class="s1mm inline"></div>
42 <div class="s1mm inline"></div>
43 <div class="s1mm inline"></div>
44 <div class="s1mm inline"></div>
45 <div class="s1mm inline"></div>
46 <div class="s1mm inline"></div>
47 <div class="s1mm inline"></div>
48 <div class="s1mm inline"></div>
49 <div class="s1mm inline"></div>
50
51 <p>
52 This should be 10mm (width) by 10mm (height) size.
53 </p>
54
55 <div class="s10mm newline "></div>
56
57 <p>
58 This should be 1cm (width) by 1cm (height) size. So, same width as the line above.
59 </p>
60
61 <div class="s1cm newline "></div>
62
63 <p>
64 This should be 2.54cm (width) by 2.54cm (height) size.
65 </p>
66
67 <div class="s254cm newline "></div>
68
69 <p>
70 This should be 1in (width) by 1in (height) size. So, same size as above.
71 </p>
72
73 <div class="s1in"></div>
74
75
76
77 </body></html>