anchor-updates-after-explicit-scroll.html (1237B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <style> 5 6 #scroller { 7 height: 200px; 8 width: 200px; 9 overflow: scroll; 10 } 11 #a1, #space1, #a2, #space2 { 12 height: 200px; 13 } 14 #a1, #a2 { 15 background-color: #8f8; 16 } 17 18 </style> 19 <div id="scroller"> 20 <div id="space0"></div> 21 <div id="a1"></div> 22 <div id="space1"></div> 23 <div id="a2"></div> 24 <div id="space2"></div> 25 </div> 26 <script> 27 28 // Tests that the anchor node is recomputed after an explicit change to the 29 // scroll position. 30 31 test(() => { 32 var scroller = document.querySelector("#scroller"); 33 scroller.scrollTop = 500; 34 35 // We should now be anchored to #a2. 36 document.querySelector("#space1").style.height = "300px"; 37 assert_equals(scroller.scrollTop, 600); 38 39 scroller.scrollTop = 100; 40 41 // We should now be anchored to #a1. Make sure there is no adjustment from 42 // moving #a2. 43 document.querySelector("#space1").style.height = "400px"; 44 assert_equals(scroller.scrollTop, 100); 45 46 // Moving #a1 should produce an adjustment. 47 document.querySelector("#space0").style.height = "100px"; 48 assert_equals(scroller.scrollTop, 200); 49 }, "Anchor node recomputed after an explicit scroll occurs."); 50 51 </script>