| <!DOCTYPE html> |
| <title>Test text-box-trim: trim-end on various writing modes</title> |
| <link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> |
| <link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> |
| <link rel="match" href="text-box-trim-end-001-ref.html"> |
| <script src="support/variant-class.js"></script> |
| <meta name="variant" content="?class=auto"> |
| <meta name="variant" content="?class=text"> |
| <meta name="variant" content="?class=alphabetic"> |
| <meta name="variant" content="?class=vrl,auto"> |
| <meta name="variant" content="?class=vrl,text"> |
| <meta name="variant" content="?class=vrl,alphabetic"> |
| <meta name="variant" content="?class=vlr,auto"> |
| <meta name="variant" content="?class=vlr,text"> |
| <meta name="variant" content="?class=vlr,cap"> |
| <meta name="variant" content="?class=vlr,ex"> |
| <style> |
| @import "support/MetricsTestFont.css"; |
| |
| .spacer { |
| background: lightgray; |
| block-size: 100px; |
| } |
| .target { |
| font: 100px/2 MetricsTestFont; |
| text-box-trim: trim-end; |
| } |
| .vrl { writing-mode: vertical-rl; } |
| .vlr { writing-mode: vertical-lr; } |
| .auto .target { text-box-edge: auto; } |
| .text .target { text-box-edge: text; } |
| .alphabetic .target { text-box-edge: text alphabetic; } |
| .cap .target { text-box-edge: cap text; } |
| .ex .target { text-box-edge: ex text; } |
| </style> |
| <div class="spacer"></div> |
| <div class="target">ApÉx</div> |
| <div class="spacer"></div> |
