position-sticky-scrollIntoView.html (1000B)
1 <!DOCTYPE html> 2 <title>Scrolling to sticky position elements uses their unshifted position</title> 3 <link rel="help" href="https://www.w3.org/TR/css-position-3/#stickypos-scroll" /> 4 <meta name="assert" content="This test checks that scrolling to sticky position elements uses their initial position" /> 5 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <style> 10 11 h1 { 12 position: sticky; 13 background: #ddd; 14 border: 1px solid black; 15 top: 0px; 16 bottom: 0px; 17 } 18 19 section { 20 height: 100vh; 21 } 22 </style> 23 24 <body> 25 <h1>Title 1</h1> 26 <section></section> 27 <h1>Title 2</h1> 28 <section></section> 29 <h1>Title 3</h1> 30 <section></section> 31 32 <script> 33 test(() => { 34 window.scrollTo(0, 0); 35 const element = document.querySelectorAll('h1')[2]; 36 element.scrollIntoView(); 37 assert_approx_equals(document.scrollingElement.scrollTop, element.offsetTop, 1); 38 }, 'scrolling a sticky element into view should use its unshifted position'); 39 </script> 40 </body>