| <!DOCTYPE html> |
| <style> |
| .multicol { position:relative; margin-bottom:1px; columns:5; width:20px; column-gap:0; column-fill:auto; height:0; background:red; } |
| .multicol > div { height:1px; background:blue; } |
| </style> |
| <p>There should be a small blue square below.</p> |
| <div style="display:flow-root; position:relative;"> |
| <div class="multicol"><div></div><div></div></div> |
| <div class="multicol"><div></div><div></div></div> |
| <div class="multicol"><div></div><div></div></div> |
| <div class="multicol"><div></div><div></div></div> |
| <div class="multicol"><div></div><div></div></div> |
| <div class="multicol"><div></div><div></div></div> |
| <div class="multicol"><div></div><div></div></div> |
| <div class="multicol"><div></div><div></div></div> |
| </div> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| test(() => { |
| var multicols = document.getElementsByClassName("multicol"); |
| var offset = 0; |
| for (var i = 0; i < multicols.length; i++) { |
| var multicol = multicols[i]; |
| assert_equals(multicol.firstChild.offsetLeft, 0); |
| assert_equals(multicol.firstChild.nextSibling.offsetLeft, 4); |
| assert_equals(multicol.offsetTop, offset); |
| offset++; |
| } |
| }, "Zero-height multicol should force 1px tall columns"); |
| </script> |
