ch-unit-009.html (930B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Values and Units Test: ch unit in height (basic)</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-009-ref.html"> 10 11 12 <style> 13 div 14 { 15 float: left; 16 font-size: 80px; /* arbitrary font size */ 17 } 18 19 div#test-blue 20 { 21 background-color: blue; 22 height: 5ch; 23 width: 1.8em; 24 } 25 26 div#reference-orange 27 { 28 background-color: orange; 29 color: orange; 30 line-height: 1.8; /* arbitrary line-height */ 31 writing-mode: vertical-rl; 32 } 33 </style> 34 35 <p>Test passes if there is a blue rectangle with the <strong>same height</strong> as an orange rectangle. 36 37 <div id="test-blue"></div> 38 39 <div id="reference-orange">00000</div>