text-box-trim-end-001-ref.html (900B)
1 <!DOCTYPE html> 2 <script src="support/variant-class.js"></script> 3 <style> 4 @import "support/MetricsTestFont.css"; 5 6 .spacer { 7 background: lightgray; 8 block-size: 100px; 9 } 10 .target { 11 font: 100px/2 MetricsTestFont; 12 } 13 .offset { 14 position: relative; 15 } 16 .vrl { writing-mode: vertical-rl; } 17 .vlr { writing-mode: vertical-lr; } 18 .auto .target, .text .target { line-height: 150px; } 19 .auto .offset, .text .offset { inset-block-start: 25px; } 20 .alphabetic .target { line-height: 130px; } 21 .alphabetic .offset { inset-block-start: 35px;} 22 .cap .target { line-height: 130px; } 23 .cap .offset { inset-block-start: -35px; } 24 .ex .target { line-height: 90px; } 25 .ex .offset { inset-block-start: -55px; } 26 .vlr.cap .offset { inset-block-start: 35px; } 27 .vlr.ex .offset { inset-block-start: 55px; } 28 </style> 29 <div class="spacer"></div> 30 <div class="target"> 31 <span class="offset">ApÉx</span> 32 </div> 33 <div class="spacer"></div>