OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../../resources/check-layout.js"></script> |
| 3 <p>There should be a horizontal scrollbar below.</p> |
| 4 |
| 5 <!-- |
| 6 The specified, computed, and used value of column-count is 2, but the |
| 7 actual column-count will be larger, because the column height is only 40px, |
| 8 and we have 200px of content. So we'll get ceil(200/40) = 5 columns. |
| 9 |
| 10 Used / actual column-width becomes 0, because the gap eats everything. |
| 11 |
| 12 So we get: |
| 13 Column 0: +0px = 0px |
| 14 Gap between column 0 and 1: +200px = 200px |
| 15 Column 1: +0px = 200px |
| 16 Gap between column 1 and 2: +200px = 400px |
| 17 Column 2: +0px = 400px |
| 18 Gap between column 2 and 3: +200px = 600px |
| 19 Column 3: +0px = 600px |
| 20 Gap between column 3 and 4: +200px = 800px |
| 21 Column 4: +0px = 800px |
| 22 --> |
| 23 |
| 24 <div id="container" style="overflow:auto; width:400px;" data-expected-scroll-wid
th="800"> |
| 25 <div style="columns:2; column-gap:200px; column-fill:auto; width:100px; heig
ht:40px;"> |
| 26 <div style="height:200px;"></div> |
| 27 </div> |
| 28 </div> |
| 29 <script> |
| 30 checkLayout("#container"); |
| 31 </script> |
OLD | NEW |