Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 4 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-multicol/subpixel-column-progression.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Element placed right after all columns (as specified by column-count)</title>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<style>
body { margin:0; }
</style>
<div style="columns:479; column-fill:auto; gap:0; width:100px; height:1px;">
<div style="height:479px;"></div>
<div id="elm1" style="height:1px;"></div>
</div>
<div style="columns:479; column-fill:auto; gap:0; width:100px; height:1px;">
<div style="height:958px;"></div>
<div id="elm2" style="height:1px;"></div>
</div>
<div style="columns:100; column-fill:auto; gap:1.01px; width:500px; height:1px;">
<div style="height:99px;"></div>
<div id="elm3" style="margin-left:auto; width:0; height:1px;"></div>
</div>
<div style="columns:100; column-fill:auto; gap:1.01px; width:0; height:1px;">
<div style="height:100px;"></div>
<div id="elm4" style="height:1px;"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(()=> {
assert_equals(elm1.getBoundingClientRect().left, 100);
}, "Should be exactly to the right of the multicol container");
test(()=> {
assert_equals(elm2.getBoundingClientRect().left, 200);
}, "Should equal to two multicol container widths");
test(()=> {
assert_equals(elm3.getBoundingClientRect().left, 500);
}, "Fractional column gaps and widths");
test(()=> {
assert_equals(elm4.getBoundingClientRect().left, 101);
}, "No space for columns, only gaps");
</script>