block-in-inline-012.html (1150B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://issues.chromium.org/issues/346876226"> 4 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 5 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 6 <style> 7 .multicol { 8 position: relative; 9 overflow: hidden; 10 font: 16px/16px Ahem; 11 columns: 4; 12 gap: 0; 13 column-fill: auto; 14 width: 100px; 15 height: 100px; 16 orphans: 1; 17 widows: 1; 18 background: red; 19 } 20 .filler { 21 position: absolute; 22 top: 0; 23 bottom: 0; 24 width: 16px; 25 background: green; 26 } 27 grinch { 28 color: green; 29 } 30 </style> 31 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 32 <div class="multicol"> 33 <div class="filler" style="left:0; top:16px;"></div> 34 <div class="filler" style="left:25px;"></div> 35 <div class="filler" style="left:50px;"></div> 36 <div class="filler" style="left:75px; bottom:16px;"></div> 37 <grinch> 38 <div> 39 <div style="float:right; width:9px; height:384px; background:green;"></div> 40 </div> 41 x xx 42 </grinch> 43 </div>