text-box-trim-end-001.html (1412B)
1 <!DOCTYPE html> 2 <title>Test text-box-trim: trim-end on various writing modes</title> 3 <link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> 4 <link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> 5 <link rel="match" href="text-box-trim-end-001-ref.html"> 6 <script src="support/variant-class.js"></script> 7 <meta name="variant" content="?class=auto"> 8 <meta name="variant" content="?class=text"> 9 <meta name="variant" content="?class=alphabetic"> 10 <meta name="variant" content="?class=vrl,auto"> 11 <meta name="variant" content="?class=vrl,text"> 12 <meta name="variant" content="?class=vrl,alphabetic"> 13 <meta name="variant" content="?class=vlr,auto"> 14 <meta name="variant" content="?class=vlr,text"> 15 <meta name="variant" content="?class=vlr,cap"> 16 <meta name="variant" content="?class=vlr,ex"> 17 <style> 18 @import "support/MetricsTestFont.css"; 19 20 .spacer { 21 background: lightgray; 22 block-size: 100px; 23 } 24 .target { 25 font: 100px/2 MetricsTestFont; 26 text-box-trim: trim-end; 27 } 28 .vrl { writing-mode: vertical-rl; } 29 .vlr { writing-mode: vertical-lr; } 30 .auto .target { text-box-edge: auto; } 31 .text .target { text-box-edge: text; } 32 .alphabetic .target { text-box-edge: text alphabetic; } 33 .cap .target { text-box-edge: cap text; } 34 .ex .target { text-box-edge: ex text; } 35 </style> 36 <div class="spacer"></div> 37 <div class="target">ApÉx</div> 38 <div class="spacer"></div>