text-box-trim-accumulation-001.html (1117B)
1 <!DOCTYPE html> 2 <title>Test choosing the correct text-box-edge value for requested trim metric</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 <meta name="assert" 6 content="text-box-edge is an inherited property and trim metric should be used accordingly." 7 > <!-- https://github.com/w3c/csswg-drafts/issues/10904 --> 8 <link rel="match" href="text-box-trim-accumulation-001-ref.html"> 9 <style> 10 @import "support/MetricsTestFont.css"; 11 12 .spacer { 13 block-size: 100px; 14 background: lightgray; 15 } 16 17 .inner { 18 font: 100px/2 MetricsTestFont; 19 } 20 .outer { 21 text-box-trim: trim-start; 22 text-box-edge: auto; 23 } 24 25 .middle { 26 text-box-trim: trim-end; 27 text-box-edge: text alphabetic; 28 } 29 30 .inner:first-child { 31 text-box-edge: ex alphabetic; 32 } 33 34 .inner:last-child { 35 text-box-edge: text; 36 } 37 </style> 38 <div class="spacer"></div> 39 <div class="outer"> 40 <div class="middle"> 41 <div class="inner">ApÉx</div> 42 <div class="spacer"></div> 43 <div class="inner">ApÉx</div> 44 </div> 45 </div> 46 <div class="spacer"></div>