clipped-scrollers-skipped.html (1212B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <style> 5 6 body { height: 2000px; } 7 #scroller { overflow: scroll; width: 500px; height: 300px; } 8 .anchor { 9 position: relative; height: 100px; width: 150px; 10 background-color: #afa; border: 1px solid gray; 11 } 12 #forceScrolling { height: 500px; background-color: #fcc; } 13 14 </style> 15 <div id="scroller"> 16 <div id="innerChanger"></div> 17 <div id="innerAnchor" class="anchor"></div> 18 <div id="forceScrolling"></div> 19 </div> 20 <div id="outerChanger"></div> 21 <div id="outerAnchor" class="anchor"></div> 22 <script> 23 24 // Test that we ignore the clipped content when computing visibility otherwise 25 // we may end up with an anchor that we think is in the viewport but is not. 26 27 test(() => { 28 document.querySelector("#scroller").scrollTop = 100; 29 document.scrollingElement.scrollTop = 350; 30 31 document.querySelector("#innerChanger").style.height = "200px"; 32 document.querySelector("#outerChanger").style.height = "150px"; 33 34 assert_equals(document.querySelector("#scroller").scrollTop, 300); 35 assert_equals(document.scrollingElement.scrollTop, 500); 36 }, "Anchor selection with nested scrollers."); 37 38 </script>