focused-element-in-excluded-subtree.html (1381B)
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 #posSticky { 19 top: 300px; 20 position: relative; 21 height: 50px; 22 width: 50px; 23 background-color: blue; 24 } 25 26 #content { 27 background-color: #D3D3D3; 28 height: 50px; 29 width: 50px; 30 position: relative; 31 top: 500px; 32 } 33 34 </style> 35 <div id="scroller" class="scroller"> 36 <div id="content"></div> 37 38 <div id="posSticky"> 39 <div id="block1" tabindex="-1">abc</div> 40 </div> 41 </div> 42 43 <script> 44 45 // Tests that a focused element doesn't become the 46 // priority candidate of the main frame if it is 47 // in an excluded subtree 48 49 promise_test(async function() { 50 var scroller = document.querySelector("#scroller"); 51 var focusElement = document.querySelector("#block1"); 52 focusElement.focus(); 53 scroller.scrollBy(0,150); 54 document.scrollingElement.scrollBy(0,100); 55 56 await new Promise(resolve => { 57 document.addEventListener("scroll", () => step_timeout(resolve, 0)); 58 }); 59 60 assert_equals(document.scrollingElement.scrollTop, 100); 61 }, "Ensure there is no scroll anchoring adjustment in the main frame."); 62 63 </script>