ic-unit-012.html (1433B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Values and Units Test: ic unit in height with 'text-orientation: sideways'</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-4/#font-relative-lengths"> 9 <link rel="match" href="reference/ic-unit-012-ref.html"> 10 11 <meta name="assert" content="In this test, the ic unit is the advance width measure of the 水 (CJK water ideograph, U+6C34) glyph."> 12 13 <style> 14 @font-face 15 { 16 font-family: IcTestFullWidth; 17 src: url(resources/IcTestFullWidth.woff2); 18 } 19 20 div 21 { 22 float: left; 23 font-family: IcTestFullWidth; 24 font-size: 80px; /* arbitrary font size */ 25 text-orientation: sideways; 26 writing-mode: vertical-rl; 27 } 28 29 div#test-blue 30 { 31 background-color: blue; 32 height: 5ic; 33 width: 1.8em; 34 } 35 36 div#reference-orange 37 { 38 background-color: orange; 39 color: orange; 40 line-height: 1.8; /* arbitrary line-height */ 41 } 42 </style> 43 44 <p>Test passes if there is a blue rectangle with the <strong>same height</strong> as an orange rectangle. 45 46 <div id="test-blue"></div> 47 48 <div id="reference-orange">水水水水水</div> 49 50 <!-- 51 52 水 (CJK water ideograph, U+6C34) glyph == 水 53 54 水 (CJK water ideograph, U+6C34) glyph == 水 55 56 -->