focused-element-nested-anchor.html (1506B)
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 #anchor { 35 background-color: brown; 36 height: 50px; 37 width: 50px; 38 position: relative; 39 top: 200px; 40 } 41 42 </style> 43 <div id="scroller" class="scroller"> 44 <div id="content" tabindex="-1"></div> 45 <div id="anchor" tabindex="-1"></div> 46 </div> 47 48 <script> 49 50 // Tests that a focused element doesn't become the 51 // priority candidate of the main frame if it is 52 // the anchor element of a subscroller 53 54 promise_test(async function() { 55 var scroller = document.querySelector("#scroller"); 56 var focusElement = document.querySelector("#anchor"); 57 focusElement.focus(); 58 scroller.scrollBy(0,150); 59 document.scrollingElement.scrollBy(0,100); 60 61 scroller.scrollBy(0, 50); 62 await new Promise(resolve => { 63 scroller.addEventListener("scroll", () => step_timeout(resolve, 0)); 64 }); 65 66 assert_equals(document.scrollingElement.scrollTop, 100); 67 }, "Ensure there is no scroll anchoring adjustment in the main frame."); 68 69 </script>