1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
<!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>
|
