| <!-- |
| @WAIT-FOR:Done |
| --> |
| <!doctype html> |
| |
| <style> |
| .carousel { |
| height: 200px; |
| width: 200px; |
| columns: 1; |
| overflow-x: auto; |
| overscroll-behavior-x: contain; |
| scroll-snap-type: x mandatory; |
| scroll-marker-group: after tabs; |
| |
| &::scroll-marker-group { |
| height: 1rem; |
| width: 100%; |
| text-align: center; |
| } |
| |
| &::column { |
| scroll-snap-align: center; |
| } |
| |
| &::column::scroll-marker { |
| display: inline-block; |
| content: ''; |
| width: 1rem; |
| height: 1rem; |
| border: 1px solid black; |
| } |
| |
| &::column::scroll-marker:target-current { |
| background: blue; |
| } |
| |
| & div { |
| display: inline-flex; |
| width: 30%; |
| height: 100%; |
| } |
| } |
| </style> |
| |
| <div id="scroller" class=carousel> |
| <div>One</div> |
| <div>Two</div> |
| <div>Three</div> |
| <div>Four</div> |
| <div>Five</div> |
| <div>Six</div> |
| </div> |
| |
| <script> |
| document.addEventListener("DOMContentLoaded", () => { |
| const a11ySyncTimeMs = 1000; |
| document.documentElement.offsetTop; |
| scroller.scrollLeft = 400; |
| document.documentElement.offsetTop; |
| setTimeout(() => { |
| requestAnimationFrame(() => { |
| requestAnimationFrame(() => { |
| document.documentElement.offsetTop; |
| // Signal the end of the test. |
| document.title = "Done"; |
| }); |
| }); |
| }, a11ySyncTimeMs); |
| }); |
| </script> |
