| <!DOCTYPE html> |
| <script src="support/variant-class.js"></script> |
| <style> |
| @import "support/MetricsTestFont.css"; |
| |
| .spacer { |
| background: lightgray; |
| block-size: 100px; |
| } |
| .target { |
| font: 100px/2 MetricsTestFont; |
| } |
| .offset { |
| position: relative; |
| } |
| .vrl { writing-mode: vertical-rl; } |
| .vlr { writing-mode: vertical-lr; } |
| .auto .target, .text .target { line-height: 150px; } |
| .auto .offset, .text .offset { inset-block-start: 25px; } |
| .alphabetic .target { line-height: 130px; } |
| .alphabetic .offset { inset-block-start: 35px;} |
| .cap .target { line-height: 130px; } |
| .cap .offset { inset-block-start: -35px; } |
| .ex .target { line-height: 90px; } |
| .ex .offset { inset-block-start: -55px; } |
| .vlr.cap .offset { inset-block-start: 35px; } |
| .vlr.ex .offset { inset-block-start: 55px; } |
| </style> |
| <div class="spacer"></div> |
| <div class="target"> |
| <span class="offset">ApÉx</span> |
| </div> |
| <div class="spacer"></div> |
