| <!DOCTYPE html> |
| <html class="test-wait"> |
| <meta charset="utf-8"> |
| <link rel="help" href="crbug.com/421471058"> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <style> |
| body { |
| margin: 0; |
| } |
| |
| #scroller { |
| width: 600px; |
| height: 300px; |
| overflow: auto; |
| scroll-marker-group: before; |
| white-space: nowrap; |
| } |
| |
| #scroller div { |
| background: blue; |
| display: inline-block; |
| width: 600px; |
| height: 270px; |
| } |
| |
| #scroller::scroll-marker-group { |
| height: 20px; |
| width: 200px; |
| } |
| |
| #scroller div::scroll-marker { |
| content: "Marker"; |
| width: 100px; |
| height: 20px; |
| display: inline-block; |
| } |
| |
| #scroller::scroll-button(left) { |
| content: "<"; |
| } |
| </style> |
| <div id="scroller"> |
| <div></div> |
| <div></div> |
| </div> |
| <script> |
| async function run() { |
| const kTab = '\uE004'; |
| await new test_driver.Actions() |
| .keyDown(kTab) |
| .keyUp(kTab) |
| .send(); |
| // With a focused scroll marker, scroll to next target. |
| document.querySelector('#scroller').scrollLeft = 600; |
| document.documentElement.classList.remove('test-wait'); |
| } |
| run(); |
| </script> |
| |
| </html> |
