out-of-flow-in-multicolumn-010.html (1053B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> 3 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 4 <!-- Fragmented OOF element with block-size percentage resolution. --> 5 <style> 6 #multicol { 7 column-count: 3; 8 column-fill: auto; 9 column-gap: 0px; 10 /* last child is a spanner that takes up 33.33% so available height for 11 .rel and .abs is 100px */ 12 height: 150px; 13 width: 150px; 14 margin-left: -50px; 15 } 16 .rel { 17 position: relative; 18 } 19 .abs { 20 position: absolute; 21 /* offset one full 100px column (accounted for by negative margin on #multicol */ 22 top: 100px; 23 width: 50px; 24 height: 66.667%; 25 background: green; 26 } 27 .spanner { 28 column-span: all; 29 height: 33.33%; 30 } 31 </style> 32 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 33 <div id="multicol"> 34 <div class="rel"> 35 <div class="abs"></div> 36 <div style="width: 10px; height: 300px;"></div> 37 </div> 38 <div class="spanner"></div> 39 </div>