multicol-gap-fraction-002.html (2229B)
1 <!DOCTYPE html> 2 <title>CSS Multi-column Layout Test: 'column-gap' with sub-pixel values</title> 3 <link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> 4 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. 'column-gap'"> 5 <link rel="match" href="../reference/nothing.html" /> 6 <meta name="assert" content="Specified column-gap should never be rounded up to the nearest integer, or the second column in the tests might overflow the multicol container in the inline direction."> 7 <style> 8 .multicol { margin:10px; float:left; columns:2; width:50px; column-gap:10.9px; column-fill:auto; height:50px; background:white; } 9 .filler { height:50px; } 10 .below-everything { position:relative; z-index:-1; float:right; width:20px; height:20px; background:red; } 11 </style> 12 13 <p>There should be nothing below.</p> 14 15 <div class="multicol" style="column-gap:10px;"> 16 <div class="filler"></div> 17 <div class="below-everything"></div> 18 </div> 19 20 <div class="multicol" style="column-gap:10.1px;"> 21 <div class="filler"></div> 22 <div class="below-everything"></div> 23 </div> 24 25 <div class="multicol" style="column-gap:10.2px;"> 26 <div class="filler"></div> 27 <div class="below-everything"></div> 28 </div> 29 30 <div class="multicol" style="column-gap:10.3px;"> 31 <div class="filler"></div> 32 <div class="below-everything"></div> 33 </div> 34 35 <div class="multicol" style="column-gap:10.4px;"> 36 <div class="filler"></div> 37 <div class="below-everything"></div> 38 </div> 39 40 <div class="multicol" style="column-gap:10.5px;"> 41 <div class="filler"></div> 42 <div class="below-everything"></div> 43 </div> 44 45 <div class="multicol" style="column-gap:10.6px;"> 46 <div class="filler"></div> 47 <div class="below-everything"></div> 48 </div> 49 50 <div class="multicol" style="column-gap:10.7px;"> 51 <div class="filler"></div> 52 <div class="below-everything"></div> 53 </div> 54 55 <div class="multicol" style="column-gap:10.8px;"> 56 <div class="filler"></div> 57 <div class="below-everything"></div> 58 </div> 59 60 <div class="multicol" style="column-gap:10.9px;"> 61 <div class="filler"></div> 62 <div class="below-everything"></div> 63 </div> 64 65 <div class="multicol" style="column-gap:11px;"> 66 <div class="filler"></div> 67 <div class="below-everything"></div> 68 </div>