| <!DOCTYPE html> |
| <html class="test-wait"> |
| <title>Tests that anchor-scroll doesn't crash renderer with `overflow: hidden` scroller</title> |
| <link rel="author" href="mailto:xiaochengh@chromium.org"> |
| <link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> |
| |
| <style> |
| #scroller { |
| margin-top: 200px; |
| height: 200px; |
| overflow-y: hidden; |
| } |
| |
| #anchor { |
| anchor-name: --a; |
| } |
| |
| #spacer { |
| height: 400px; |
| } |
| |
| #target { |
| position: fixed; |
| top: anchor(--a bottom); |
| left: anchor(--a left); |
| anchor-scroll: --a; |
| } |
| </style> |
| |
| <div id="scroller"> |
| <div id="spacer"></div> |
| <div id="anchor">anchor</div> |
| </div> |
| <div id="target">target</div> |
| |
| <script type="module"> |
| const raf = () => new Promise(resolve => requestAnimationFrame(resolve)); |
| |
| scroller.scrollTop = 100; |
| |
| await raf(); |
| await raf(); |
| |
| scroller.scrollTop = 0; |
| |
| // Force paint property update on target in the same frame |
| target.style.transform = 'scale(1)'; |
| |
| document.documentElement.classList.remove('test-wait'); |
| </script> |
| </html> |
