| <!DOCTYPE html> |
| <meta charset="utf-8"/> |
| <title>Open Font Format: USE_TYPO_METRICS</title> |
| <link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S2.html#SS2.SSS1"/> |
| <link rel="match" href="use-typo-metrics-1-ref.html"/> |
| <style> |
| @font-face { |
| font-family: TestFont; |
| src: url("lineheight5000-typolineheight2300.woff"); |
| } |
| .green { |
| position: absolute; |
| background: green; |
| width: 115px; |
| } |
| .red { |
| position: absolute; |
| background: red; |
| width: 115px; |
| } |
| .forceHeight { |
| height: 230px; |
| } |
| .leftSide { |
| left: 10px; |
| } |
| .rightSide { |
| left: 125px; |
| } |
| span { |
| /* em=1000, lineHeight=5000, typoLineHeight=2300 and font-size=100px |
| implies typoLineHeightPx = 230px < 500px = lineHeightPx */ |
| font-family: TestFont; |
| font-size: 100px; |
| color: transparent; |
| } |
| </style> |
| <body> |
| <p>Test passes if there is a green square and no red.</p> |
| |
| <div> |
| <!-- Left side verifies that typoLineHeightPx <= 230px --> |
| <div class="leftSide red"><span>O</span></div> |
| <div class="leftSide green forceHeight"></div> |
| |
| <!-- Right side verifies that typoLineHeightPx => 230px --> |
| <div class="rightSide red forceHeight"></div> |
| <div class="rightSide green"><span>O</span></div> |
| </div> |
| </body> |
