Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html class=reftest-wait>
<title>Grid Expands Scrollable Area</title>
<style>
.grid {
float: left;
margin: 1em;
border: solid;
border-width: 1px 2px 4px 6px;
width: 120px;
height: 120px;
overflow: scroll;
position: relative;
}
.container {
position: absolute;
inline-size: 140px;
block-size: 120px;
padding: 10px;
z-index: -1;
}
.container > div {
border: solid orange;
inline-size: 120px;
block-size: 110px;
box-sizing: border-box;
}
.abspos {
border: solid aqua;
width: 100%;
height: 100%;
box-sizing: border-box;
}
</style>
<div class="grid" dir=ltr>
<div class="container"><div></div></div>
<div class="abspos"></div>
</div>
<div class="grid" dir=rtl reverse-x>
<div class="container"><div></div></div>
<div class="abspos"></div>
</div>
<div class="grid" dir=ltr style="writing-mode: vertical-rl" reverse-x>
<div class="container"><div></div></div>
<div class="abspos"></div>
</div>
<div class="grid" dir=rtl style="writing-mode: vertical-rl" reverse-x reverse-y>
<div class="container"><div></div></div>
<div class="abspos"></div>
</div>
<div class="grid" dir=ltr style="writing-mode: vertical-lr">
<div class="container"><div></div></div>
<div class="abspos"></div>
</div>
<div class="grid" dir=rtl style="writing-mode: vertical-lr" reverse-y>
<div class="container"><div></div></div>
<div class="abspos"></div>
</div>
<div class="grid" dir=ltr style="writing-mode: sideways-rl" reverse-x>
<div class="container"><div></div></div>
<div class="abspos"></div>
</div>
<div class="grid" dir=rtl style="writing-mode: sideways-rl" reverse-x reverse-y>
<div class="container"><div></div></div>
<div class="abspos"></div>
</div>
<div class="grid" dir=ltr style="writing-mode: sideways-lr" reverse-y>
<div class="container"><div></div></div>
<div class="abspos"></div>
</div>
<div class="grid" dir=rtl style="writing-mode: sideways-lr">
<div class="container"><div></div></div>
<div class="abspos"></div>
</div>
<script>
var testElements = document.querySelectorAll('.grid');
for (const test of testElements) {
var invertX = (test.getAttribute('reverse-x') === null) ? 1 : -1;
var invertY = (test.getAttribute('reverse-y') === null) ? 1 : -1;
test.scrollBy(100 * invertX, 100 * invertY);
}
document.documentElement.removeAttribute('class');
</script>