subpixel-column-progression.html (1608B)
1 <!DOCTYPE html> 2 <title>Element placed right after all columns (as specified by column-count)</title> 3 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 4 <link rel="help" href="https://issues.chromium.org/issues/467869214"> 5 <style> 6 body { margin:0; } 7 </style> 8 <div style="columns:479; column-fill:auto; gap:0; width:100px; height:1px;"> 9 <div style="height:479px;"></div> 10 <div id="elm1" style="height:1px;"></div> 11 </div> 12 13 <div style="columns:479; column-fill:auto; gap:0; width:100px; height:1px;"> 14 <div style="height:958px;"></div> 15 <div id="elm2" style="height:1px;"></div> 16 </div> 17 18 <div style="columns:100; column-fill:auto; gap:1.01px; width:500px; height:1px;"> 19 <div style="height:99px;"></div> 20 <div id="elm3" style="margin-left:auto; width:0; height:1px;"></div> 21 </div> 22 23 <div style="columns:100; column-fill:auto; gap:1.01px; width:0; height:1px;"> 24 <div style="height:100px;"></div> 25 <div id="elm4" style="height:1px;"></div> 26 </div> 27 28 <script src="/resources/testharness.js"></script> 29 <script src="/resources/testharnessreport.js"></script> 30 <script> 31 test(()=> { 32 assert_equals(elm1.getBoundingClientRect().left, 100); 33 }, "Should be exactly to the right of the multicol container"); 34 35 test(()=> { 36 assert_equals(elm2.getBoundingClientRect().left, 200); 37 }, "Should equal to two multicol container widths"); 38 39 test(()=> { 40 assert_equals(elm3.getBoundingClientRect().left, 500); 41 }, "Fractional column gaps and widths"); 42 43 test(()=> { 44 assert_equals(elm4.getBoundingClientRect().left, 101); 45 }, "No space for columns, only gaps"); 46 </script>