ch-unit-011.html (1108B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Values and Units Test: ch unit in height with 'text-orientation: upright'</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths"> 9 <link rel="match" href="reference/ch-unit-011-ref.html"> 10 11 <meta name="assert" content="In this test, the ch unit is the advance height measure of the 0 (ZERO, U+0030) glyph."> 12 13 <style> 14 div 15 { 16 float: left; 17 font-size: 80px; /* arbitrary font size */ 18 text-orientation: upright; 19 writing-mode: vertical-rl; 20 } 21 22 div#test-blue 23 { 24 background-color: blue; 25 height: 5ch; 26 width: 1.8em; 27 } 28 29 div#reference-orange 30 { 31 background-color: orange; 32 color: orange; 33 line-height: 1.8; /* arbitrary line-height */ 34 } 35 </style> 36 37 <p>Test passes if there is a blue rectangle with the <strong>same height</strong> as an orange rectangle. 38 39 <div id="test-blue"></div> 40 41 <div id="reference-orange">00000</div>