ignore-adjustments-while-scrolling-to-anchor.tentative.html (1330B)
1 <!DOCTYPE html> 2 <html> 3 <meta name="viewport" content="width=device-width"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-actions.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1918906"> 10 <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/#scroll-adjustment"> 11 <style> 12 html { 13 scroll-behavior: smooth; 14 } 15 #anchor { 16 height: 100px; 17 background-color: blue; 18 } 19 a { 20 transition: font-size 0.2s; 21 font-size: 10px; 22 } 23 a:hover { 24 font-size: 13px; 25 } 26 </style> 27 <a href="#anchor">Go to an anchor</a> 28 <div style="height: 500vh;"></div> 29 <div id="anchor"></div> 30 <div style="height: 100vh;"></div> 31 <script> 32 promise_test(async t => { 33 assert_equals(window.scrollY, 0); 34 35 const anchorRect = anchor.getBoundingClientRect(); 36 37 const scrollEndPromise = 38 new Promise(resolve => window.addEventListener("scrollend", resolve)); 39 40 const anchorNode = document.querySelector("a"); 41 test_driver.click(anchorNode); 42 43 await scrollEndPromise; 44 45 assert_approx_equals(window.scrollY, anchorRect.y, 3); 46 }, "Ignore scroll position adjustments during smooth scrolling to anchor"); 47 </script> 48 </html>