| <!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> |
