1 <!DOCTYPE html>
2 <html><head><meta charset="utf-8">
3 <title>CSS Values and Units Test: the ch unit in vertical orientation</title>
4 <link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
5 <link href="https://drafts.csswg.org/css-values-3/#font-relative-lengths" rel="help">
6 <link href="https://www.w3.org/TR/css-writing-modes-3/#block-flow" rel="help">
7 <link href="https://www.w3.org/TR/css-writing-modes-3/#text-orientation" rel="help">
8 <link href="reference/ch-unit-002-ref.htm" rel="match">
9 <meta content="In vertical upright, the ch unit is equal to the used vertical advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it." name="assert">
10 <style>
11 span {
12 background: green;
13 color: green;
14 left: 0; right: 0;
15 position: absolute;
16 }
17 div {
18 background: red;
19 color: red;
20 position: relative;
21 height: 5ch;
22 width: 10ch;
23 writing-mode: vertical-rl;
24 text-orientation: upright;
25 }
26
27 div + div {
28 height: auto;
29 }
30
31 div + div span {
32 height: 5ch;
33 }
34 </style>
35 </head><body>
36 <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
37 <div><span>00000</span></div>
38 <div><span></span>00000</div>
39
40 </body></html>