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