| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>Keyboard scrolling targets the last clicked element</title> |
| <link rel="help" href=""> |
| <link rel="author" href="flackr@chromium.org"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| <script src="/css/css-scroll-snap/support/common.js"></script> |
| <script src="/dom/events/scrolling/scroll_support.js"></script> |
| <style> |
| .scroller { |
| overflow: auto; |
| height: 200px; |
| border: 1px solid black; |
| } |
| .spacer { |
| height: 200vh; |
| } |
| </style> |
| <body id="body"> |
| <div class="scroller" id="outer"> |
| <div class="scroller" id="inner"> |
| <div id="target"><span>This is the targeted node</span></div> |
| <div class="spacer"></div> |
| </div> |
| <div class="spacer"></div> |
| </div> |
| <div class="spacer"></div> |
| </body> |
| <script> |
| |
| const target = document.getElementById("target"); |
| const outer = document.getElementById("outer"); |
| const inner = document.getElementById("inner"); |
| const scrollTargets = [document, outer, inner]; |
| |
| function raf() { |
| return new Promise((resolve) => { |
| requestAnimationFrame(resolve); |
| }); |
| } |
| |
| async function getKeyboardScrollingElement(test, clickTarget, onclick) { |
| const click_promise = waitForEvent("click", test, clickTarget); |
| await test_driver.click(clickTarget); |
| await click_promise; |
| await onclick(); |
| await raf(); |
| const scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scrollTargets); |
| await keyPress(document.body, "ArrowDown"); |
| return scrollEndPromise; |
| } |
| |
| function friendlyName(node) { |
| if (node == document) return "document"; |
| if (node.id) return `#${node.id}`; |
| return `<${node.tagName}>`; |
| } |
| |
| async function resetScroll() { |
| for (const scrollTarget of scrollTargets) { |
| const scroller = scrollTarget.scrollingElement || scrollTarget; |
| scroller.scrollTo(0, 0); |
| } |
| return raf(); |
| } |
| |
| promise_test(async (test) => { |
| test.add_cleanup(resetScroll); |
| const scrolled = await getKeyboardScrollingElement(test, target, async () => { |
| target.remove(); |
| test.add_cleanup(() => { |
| inner.insertBefore(target, inner.firstChild); |
| }); |
| }); |
| assert_equals(friendlyName(scrolled), "#inner"); |
| }, "Keyboard scrolling scrolls the scroller when clicked target is removed"); |
| |
| // Notably removing all children is a different code path than removing |
| // a single child. This is a regression test for https://crbug.com/40941145. |
| promise_test(async (test) => { |
| test.add_cleanup(resetScroll); |
| const scrolled = await getKeyboardScrollingElement(test, target.firstElementChild, async () => { |
| const previous = target.innerHTML; |
| target.innerHTML = ""; |
| test.add_cleanup(() => { |
| target.innerHTML = previous; |
| }); |
| }); |
| assert_equals(friendlyName(scrolled), "#inner"); |
| }, "Keyboard scrolling scrolls the scroller when clicked children are removed"); |
| |
| promise_test(async (test) => { |
| test.add_cleanup(resetScroll); |
| const scrolled = await getKeyboardScrollingElement(test, target, async () => { |
| inner.remove(); |
| test.add_cleanup(() => { |
| outer.insertBefore(inner, outer.firstChild); |
| }); |
| }); |
| assert_equals(friendlyName(scrolled), "#outer"); |
| }, "Keyboard scrolling scrolls the next nearest scroller if the clicked scroller is removed"); |
| |
| </script> |
