focused-element-outside-scroller.html (1178B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 7 body { height: 4000px; } 8 div { height: 100px; } 9 10 .scroller { 11 overflow: scroll; 12 position: fixed; 13 width: 300px; 14 height: 300px; 15 background-color: green; 16 } 17 18 #content { 19 background-color: #D3D3D3; 20 height: 50px; 21 width: 50px; 22 position: relative; 23 top: 500px; 24 } 25 26 </style> 27 <div id="scroller" class="scroller"> 28 <div id="content"></div> 29 </div> 30 <div id="block1" tabindex="-1">abc</div> 31 32 <script> 33 34 // Tests that a focused element doesn't become the 35 // priority candidate of the subscroller 36 37 promise_test(async function() { 38 var scroller = document.querySelector("#scroller"); 39 var focusElement = document.querySelector("#block1"); 40 focusElement.focus(); 41 scroller.scrollBy(0,150); 42 document.scrollingElement.scrollBy(0,100); 43 await new Promise(resolve => { 44 document.addEventListener("scroll", () => step_timeout(resolve, 0)); 45 }); 46 47 assert_equals(scroller.scrollTop, 150); 48 }, "Ensure there is no scroll anchoring adjustment in subscroller."); 49 50 </script>