use-typo-metrics-1.html (1413B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"/> 3 <title>Open Font Format: USE_TYPO_METRICS</title> 4 <link rel="help" href="https://w3c.github.io/mathml-core/#text-layout"/> 5 <link rel="match" href="use-typo-metrics-1-ref.html"/> 6 <meta name="assert" content="Verify that the USE_TYPO_METRICS flag from the OS/2 table is taken into account to calculate line height."> 7 <style> 8 @font-face { 9 font-family: TestFont; 10 src: url("/fonts/math/lineheight5000-typolineheight2300.woff"); 11 } 12 .green { 13 position: absolute; 14 background: green; 15 width: 115px; 16 } 17 .red { 18 position: absolute; 19 background: red; 20 width: 115px; 21 } 22 .forceHeight { 23 height: 230px; 24 } 25 .leftSide { 26 left: 10px; 27 } 28 .rightSide { 29 left: 125px; 30 } 31 span { 32 /* em=1000, lineHeight=5000, typoLineHeight=2300 and font-size=100px 33 implies typoLineHeightPx = 230px < 500px = lineHeightPx */ 34 font-family: TestFont; 35 font-size: 100px; 36 color: transparent; 37 } 38 </style> 39 <body> 40 <p>Test passes if there is a green square and no red.</p> 41 42 <div> 43 <!-- Left side verifies that typoLineHeightPx <= 230px --> 44 <div class="leftSide red"><span>O</span></div> 45 <div class="leftSide green forceHeight"></div> 46 47 <!-- Right side verifies that typoLineHeightPx => 230px --> 48 <div class="rightSide red forceHeight"></div> 49 <div class="rightSide green"><span>O</span></div> 50 </div> 51 </body>