anchoring-with-bounds-clamping-div.html (932B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <style> 5 6 #scroller { 7 height: 500px; 8 width: 200px; 9 overflow: scroll; 10 } 11 #changer { height: 1500px; } 12 #anchor { 13 width: 150px; 14 height: 1000px; 15 overflow: scroll; 16 } 17 18 </style> 19 <div id="scroller"> 20 <div id="changer"></div> 21 <div id="anchor"></div> 22 </div> 23 <script> 24 25 // Test that scroll anchoring interacts correctly with scroll bounds clamping 26 // inside a scrollable <div> element. 27 // 28 // There should be no visible jump even if the content shrinks such that the 29 // new max scroll position is less than the previous scroll position. 30 31 test(() => { 32 var scroller = document.querySelector("#scroller"); 33 scroller.scrollTop = 1600; 34 document.querySelector("#changer").style.height = "0"; 35 assert_equals(scroller.scrollTop, 100); 36 }, "Anchoring combined with scroll bounds clamping in a <div>."); 37 38 </script>