text-box-trim-height-002.html (1246B)
1 <!DOCTYPE html> 2 <title>text-box-trim does not interfere with height and vice versa (end edge)</title> 3 <link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> 4 <link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> 5 <link ref="help" href="https://www.w3.org/TR/css-align-3/#distribution-block"> 6 <link rel="match" href="text-box-trim-height-002-ref.html"> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 8 <style> 9 .spacer { 10 background: lightgray; 11 block-size: 20px; 12 } 13 .max-height > .spacer:first-child { 14 margin-top: 80px; /* avoid overlap */ 15 } 16 17 .target { 18 font: 100px/2 Ahem; 19 text-box-trim: trim-both; 20 text-box-edge: text alphabetic; 21 align-content: unsafe end; 22 } 23 24 .height > .target { 25 height: 120px; 26 } 27 28 .min-height > .target { 29 min-height: 120px; 30 } 31 32 .max-height > .target { 33 max-height: 10px; 34 } 35 </style> 36 37 <div class="height"> 38 <div class="spacer"></div> 39 <div class="target">ApÉx</div> 40 <div class="spacer"></div> 41 </div> 42 43 <div class="min-height"> 44 <div class="spacer"></div> 45 <div class="target">ApÉx</div> 46 <div class="spacer"></div> 47 </div> 48 49 <div class="max-height"> 50 <div class="spacer"></div> 51 <div class="target">ApÉx</div> 52 <div class="spacer"></div> 53 </div>