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