| <!DOCTYPE html> |
| <script src="../../resources/check-layout.js"></script> |
| <p>There should be a horizontal scrollbar below.</p> |
| |
| <!-- |
| The specified, computed, and used value of column-count is 2, but the |
| actual column-count will be larger, because the column height is only 40px, |
| and we have 200px of content. So we'll get ceil(200/40) = 5 columns. |
| |
| Used / actual column-width becomes 0, because the gap eats everything. |
| |
| So we get: |
| Column 0: +0px = 0px |
| Gap between column 0 and 1: +200px = 200px |
| Column 1: +0px = 200px |
| Gap between column 1 and 2: +200px = 400px |
| Column 2: +0px = 400px |
| Gap between column 2 and 3: +200px = 600px |
| Column 3: +0px = 600px |
| Gap between column 3 and 4: +200px = 800px |
| Column 4: +0px = 800px |
| --> |
| |
| <div id="container" style="overflow:auto; width:400px;" data-expected-scroll-width="800"> |
| <div style="columns:2; column-gap:200px; column-fill:auto; width:100px; height:40px;"> |
| <div style="height:200px;"></div> |
| </div> |
| </div> |
| <script> |
| checkLayout("#container"); |
| </script> |
