text-box-trim-start-001.html (1437B)
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-start-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=cap"> 10 <meta name="variant" content="?class=ex"> 11 <meta name="variant" content="?class=vrl,auto"> 12 <meta name="variant" content="?class=vrl,text"> 13 <meta name="variant" content="?class=vrl,cap"> 14 <meta name="variant" content="?class=vrl,ex"> 15 <meta name="variant" content="?class=vlr,auto"> 16 <meta name="variant" content="?class=vlr,text"> 17 <meta name="variant" content="?class=vlr,alphabetic"> 18 <style> 19 @import "support/MetricsTestFont.css"; 20 21 .spacer { 22 background: lightgray; 23 block-size: 100px; 24 } 25 .target { 26 font: 100px/2 MetricsTestFont; 27 text-box-trim: trim-start; 28 } 29 .vrl { writing-mode: vertical-rl; } 30 .vlr { writing-mode: vertical-lr; } 31 .auto .target { text-box-edge: auto; } 32 .text .target { text-box-edge: text; } 33 .cap .target { text-box-edge: cap text; } 34 .ex .target { text-box-edge: ex text; } 35 .vlr.alphabetic 36 .target { text-box-edge: text alphabetic; } 37 </style> 38 <div class="spacer"></div> 39 <div class="target">ApÉx</div> 40 <div class="spacer"></div>