subtree-exclusion.html (1334B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <style> 5 6 body { height: 4000px } 7 #A, #B { width: 100px; background-color: #afa; } 8 #B { height: 100px; } 9 #inner { width: 100px; height: 100px; background-color: pink; } 10 #A { overflow-anchor: none; } 11 12 </style> 13 <div id="changer1"></div> 14 <div id="A"> 15 <div id="inner"></div> 16 <div id="changer2"></div> 17 </div> 18 <div id="B"></div> 19 <script> 20 21 // Tests that an element with overflow-anchor: none is excluded, along with its 22 // DOM descendants, from the anchor selection algorithm. 23 24 test(() => { 25 var changer1 = document.querySelector("#changer1"); 26 var changer2 = document.querySelector("#changer2"); 27 28 document.scrollingElement.scrollTop = 50; 29 changer1.style.height = "100px"; 30 changer2.style.height = "50px"; 31 32 // We should anchor to #B, not #A or #inner, despite them being visible. 33 assert_equals(document.scrollingElement.scrollTop, 200); 34 35 document.querySelector("#A").style.overflowAnchor = "auto"; 36 document.scrollingElement.scrollTop = 150; 37 38 changer1.style.height = "200px"; 39 changer2.style.height = "100px"; 40 41 // We should now anchor to #inner, which is moved only by #changer1. 42 assert_equals(document.scrollingElement.scrollTop, 250); 43 }, "Subtree exclusion with overflow-anchor."); 44 45 </script>