blob: fd87973e2da0b5e2e792df162a820a0f9ff1b9d0 [file] [log] [blame]
<style>
div.test {
width: 100px;
height: 100px;
-webkit-column-width: 100px;
-webkit-column-gap: 0;
-webkit-column-fill: auto;
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" style="direction: rtl;">
<div></div><div></div>
</div>
<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: vertical-lr; direction: rtl;">
<div></div><div></div>
</div>
<div class="test" style="-webkit-writing-mode: vertical-lr; direction: rtl;">
<div></div><div></div>
</div>
<div class="test" style="direction: rtl;">
<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;
else
test.scrollTop = test.scrollHeight;
}
</script>