blob: c117563523ba8da8f342c10c34ba0e8cf9dd1345 [file] [log] [blame]
<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>