| <!DOCTYPE html> |
| <title>Scrolling to sticky position elements uses their unshifted position</title> |
| <link rel="help" href="https://www.w3.org/TR/css-position-3/#stickypos-scroll" /> |
| <meta name="assert" content="This test checks that scrolling to sticky position elements uses their initial position" /> |
| |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <style> |
| |
| h1 { |
| position: sticky; |
| background: #ddd; |
| border: 1px solid black; |
| top: 0px; |
| bottom: 0px; |
| } |
| |
| section { |
| height: 100vh; |
| } |
| </style> |
| |
| <body> |
| <h1>Title 1</h1> |
| <section></section> |
| <h1>Title 2</h1> |
| <section></section> |
| <h1>Title 3</h1> |
| <section></section> |
| |
| <script> |
| test(() => { |
| window.scrollTo(0, 0); |
| const element = document.querySelectorAll('h1')[2]; |
| element.scrollIntoView(); |
| assert_approx_equals(document.scrollingElement.scrollTop, element.offsetTop, 1); |
| }, 'scrolling a sticky element into view should use its unshifted position'); |
| </script> |
| </body> |
| |
