text-box-trim-multicol-006.html (1149B)
1 <!DOCTYPE html> 2 <title>Test when a box with `text-box-trim` is block fragmented</title> 3 <meta name="assert" content="text-box-trim specified inside a fragmentation context does not trim at column boundaries unless box-decoration-break is 'clone'"> 4 <link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge"> 5 <link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5335#issuecomment-1908655635"> 7 <link rel="match" href="text-box-trim-multicol-006-ref.html"> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <style> 10 .spacer { 11 background: lightgray; 12 block-size: 5px; 13 } 14 .multicol { 15 column-count: 3; 16 column-fill: auto; 17 border: 1px solid; 18 height: 290px; 19 width: 20ch; 20 text-box-trim: trim-both; 21 font-family: Ahem; 22 font-size: 40px; 23 line-height: 2; 24 orphans: 1; 25 widows: 1; 26 } 27 .trim { 28 text-box-trim: trim-start; 29 text-box-edge: text; 30 } 31 </style> 32 <div class="multicol"> 33 <div class="spacer"></div> 34 <div class="trim"> 35 abc abc abc abc 36 abc abc abc 37 abc abc 38 </div> 39 <div class="spacer"></div> 40 </div>