VulpesOS/assets/webapps/uitest.gaiamobile.org/tests_html/UI/scrollbar.html
OverSu b38dea0597 Publish Vulpes Preview 15 sources for desktop, Android and Tundra
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
2026-09-30 23:13:03 +02:00

587 lines
18 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<title>Scroll Bars!</title>
<script defer src="../../js/UI/scrollbar.js"></script>
<link rel="stylesheet" type="text/css" href="../../style/UI.css">
</head>
<body>
<p>Each box is 200px width/height, small boxes are 20px.</p>
<p id="report"></p>
<div class="box" id="probe">
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
</div>
<div class="box" dir="rtl">
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
<div class="sbox"></div>
</div>
<div class="box">
<p>iamaverrrrrrryloooooongwordthatwillcausehozscroooollllllbar.</p>
</div>
</body>
</html>