scrollIntoView-stuck.tentative.html (1579B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <meta name="viewport" content="width=device-width,minimum-scale=1"> 4 <title>CSSOM View - scrollIntoView doesn't consider scroll-padding when target is stuck</title> 5 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 6 <link rel="author" title="Mozilla" href="https://mozilla.org"> 7 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview"> 8 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding"> 9 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1795661"> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <style> 13 body { margin: 0 } 14 :root { overflow: hidden } 15 #container { 16 height: 100vh; 17 overflow: auto; 18 scroll-padding-top: 100px; 19 } 20 #sticky { 21 position: sticky; 22 background: Canvas; 23 top: 0; 24 } 25 #content { 26 height: 500vh; 27 background-image: linear-gradient(green, purple); 28 } 29 </style> 30 <div id="container"> 31 <div id="sticky"> 32 <input type=text> 33 </div> 34 <div id="content"></div> 35 </div> 36 <script> 37 let container = document.getElementById("container"); 38 let sticky = document.getElementById("sticky"); 39 test(() => { 40 // Scroll to the bottom. 41 container.scrollTo(0, 100000); 42 43 let scrollTop = container.scrollTop; 44 45 assert_not_equals(scrollTop, 0, "Should have scrolled"); 46 47 // Focus on the stuck input. We shouldn't scroll up. 48 sticky.querySelector("input").scrollIntoView(); 49 50 assert_equals(scrollTop, container.scrollTop, "Shouldn't have scrolled"); 51 }); 52 </script>