57 lines
1.4 KiB
HTML
57 lines
1.4 KiB
HTML
<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>
|