text-box-trim-multicol-003.html (1128B)
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-003-ref.html"> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <style> 10 .spacer { 11 background: lightgray; 12 block-size: 100px; 13 } 14 .multicol { 15 column-count: 3; 16 column-fill: auto; 17 border: 1px solid; 18 height: 290px; 19 width: 20ch; 20 font-family: Ahem; 21 font-size: 40px; 22 line-height: 2; 23 orphans: 1; 24 widows: 1; 25 } 26 .trim { 27 text-box-trim: trim-both; 28 text-box-edge: text; 29 box-decoration-break: clone; 30 } 31 </style> 32 <div class="multicol"> 33 <div class="trim"> 34 abc abc abc abc 35 abc abc abc abc 36 abc abc 37 </div> 38 <div class="spacer"></div> 39 </div>