| <style> |
| div.test { |
| width: 100px; |
| height: 100px; |
| -webkit-column-width: 100px; |
| -webkit-column-gap: 0; |
| -webkit-column-fill: auto; |
| -webkit-column-progression: reverse; |
| column-width: 100px; |
| column-gap: 0; |
| column-fill: auto; |
| overflow: hidden; |
| } |
| |
| div.test > div { |
| -webkit-logical-height: 100%; |
| } |
| |
| div.test > div:first-child { |
| background-color: red; |
| } |
| |
| div.test > div:last-child { |
| background-color: green; |
| } |
| </style> |
| <div class="test"> |
| <div></div><div></div> |
| </div> |
| <div class="test" style="direction: rtl;"> |
| <div></div><div></div> |
| </div> |
| <div class="test" style="-webkit-writing-mode: horizontal-bt;"> |
| <div></div><div></div> |
| </div> |
| <div class="test" style="-webkit-writing-mode: vertical-lr;"> |
| <div></div><div></div> |
| </div> |
| <div class="test" style="-webkit-column-axis: vertical;"> |
| <div></div><div></div> |
| </div> |
| <div class="test" style="-webkit-writing-mode: vertical-lr; -webkit-column-axis: horizontal;"> |
| <div></div><div></div> |
| </div> |
| <script> |
| var tests = document.querySelectorAll("div.test"); |
| for (var i = 0; i < tests.length; ++i) { |
| var test = tests[i]; |
| if (test.scrollLeft) |
| test.scrollLeft = 0; |
| else |
| test.scrollLeft = test.scrollWidth; |
| if (test.scrollTop) |
| test.scrollTop = 0; |
| } |
| </script> |