| <!DOCTYPE html> |
| <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| |
| body { height: 4000px; } |
| div { height: 100px; } |
| |
| .scroller { |
| overflow: scroll; |
| position: fixed; |
| width: 300px; |
| height: 300px; |
| background-color: green; |
| } |
| |
| #content { |
| background-color: #D3D3D3; |
| height: 50px; |
| width: 50px; |
| position: relative; |
| top: 500px; |
| } |
| |
| </style> |
| <div id="scroller" class="scroller"> |
| <div id="content"></div> |
| </div> |
| <div id="block1" tabindex="-1">abc</div> |
| |
| <script> |
| |
| // Tests that a focused element doesn't become the |
| // priority candidate of the subscroller |
| |
| promise_test(async function() { |
| var scroller = document.querySelector("#scroller"); |
| var focusElement = document.querySelector("#block1"); |
| focusElement.focus(); |
| scroller.scrollBy(0,150); |
| document.scrollingElement.scrollBy(0,100); |
| await new Promise(resolve => { |
| document.addEventListener("scroll", () => step_timeout(resolve, 0)); |
| }); |
| |
| assert_equals(scroller.scrollTop, 150); |
| }, "Ensure there is no scroll anchoring adjustment in subscroller."); |
| |
| </script> |
