multi-line-column-flex-fragmentation-056.html (1320B)
1 <!DOCTYPE html> 2 <title> 3 Suppress column flexbox gaps: item gap should be suppressed if it's split across 4 fragmentainer breaks or is the last content before a break. Tests empty fragment because of monolithic item. 5 </title> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11520"> 7 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 8 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> 9 <style> 10 .multicol { 11 position: relative; 12 columns: 4; 13 column-fill: auto; 14 column-gap: 0px; 15 width: 100px; 16 height: 100px; 17 background: green; 18 } 19 20 .flex { 21 display: flex; 22 flex-direction: column; 23 flex-wrap: wrap; 24 background: red; 25 26 } 27 28 .flex>div { 29 height: 40px; 30 background: green; 31 } 32 33 .abspos { 34 position: absolute; 35 background: green; 36 } 37 </style> 38 39 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 40 <div class="multicol"> 41 <div class="flex" style="row-gap:10px;"> 42 <div></div> 43 <div style="break-before: column; contain: size; height: 95px;"></div> 44 <div></div> 45 </div> 46 <div class="abspos" style="width: 25px; height: 60px; top: 40px; left: 0px;"></div> 47 <div class="abspos" style="width: 25px; height: 5px; top: 95px; left: 25px;"></div> 48 </div>