<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<title>Blank Page</title>
<style>
.scroller {
width: 100px;
height: 100px;
overflow: auto;
border: 1px solid black;
}
.spacer {
width: 1000px;
height: 1000px;
}
div {
margin: 8px;
}
</style>
</head>
<body>
<div style="display:flex; flex-direction:row; width: 100%; height: 120px">
<div id="scroller" class="scroller" aria-label="scroller">
<div class="spacer">overflow:auto scrollable</div>
</div>
<div id="horizontalscroller" class="scroller" aria-label="horizontalscroller">
<div style="width:200px;height:1px">overflow:auto horizontally scrollable</div>
</div>
<div id="nonscroll" class="scroller" style="overflow:hidden" aria-label="nonscroll">
<div class="spacer">overflow:hidden not scrollable</div>
</div>
<div style="position: relative;">
<div id="buttonscroller" class="scroller" aria-label="buttonscroller" style="margin: 0;">
<div class="spacer">overflow:auto scrollable</div>
<button id="button" style="position: absolute; top: 25px; left: 25px; width: 50px; height: 50px;">Button</button>
</div>
</div>
</div>
<div style="display:flex; flex-direction:row; width: 100%; height: 120px">
<div style="zoom:0.5">
<div id="zoomedscroller" class="scroller" aria-label="zoomedscroller">
<div class="spacer">overflow:auto scrollable</div>
</div>
</div>
<div id="smoothscroller" class="scroller" style="scroll-behavior: smooth;" aria-label="smoothscroller">
<div class="spacer">scroll-behavior: smooth</div>
</div>
</div>
<div style="height:2000px;width:2000px">A long div</div>
<div id="offscreenscroller" class="scroller" style="position:absolute; top: 100vh;" aria-label="offscreenscroller">
<div class="spacer">overflow:auto scrollable offscreen</div>
</div>
</body>
</html>
