Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 2 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-overscroll-behavior/overscroll-behavior-keyboard-scroll.html - WPT Dashboard Interop Dashboard
<!doctype html>
<meta charset="utf-8">
<title>overscroll-behavior for keyboard scroll</title>
<meta name="timeout" content="long">
<link rel="author" title="Peng Zhou" href="mailto:zhoupeng.1996@bytedance.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/dom/events/scrolling/scroll_support.js"></script>
<script src="/css/css-scroll-snap/support/common.js"></script>
<style>
body {
margin: 0px;
}
.outer {
height: 400px;
width: 1000px;
background: white
}
.content {
height: 600px;
width: 1200px;
}
#root {
overflow: scroll;
height: 600px;
width: 800px;
background: white;
}
#container {
overflow: scroll;
}
#non_scrollable {
overflow: clip;
}
#green {
background: repeating-linear-gradient(to bottom right, green 15%, white 30%);
}
#blue {
background: repeating-linear-gradient(to bottom right, blue 15%, white 30%);
}
</style>
<div id='root'>
<div id='non_scrollable' class='outer'>
<div id='green' class='content'></div>
</div>
<div id='container' class='outer'>
<div id='blue' class='content'></div>
</div>
</div>
<!--
Tests that overscroll-behavior prevents scroll-propagation in the area and
direction as specified.
Manual Steps:
1. Make two scrolls on blue, in this order: scroll UP (or drag down), then
scroll LEFT (or drag right). Scroll (or drag) until nothing is
scrolling.
2. Call verify_y_prevented_and_set_boundary_prevents_x() from console
3. Repeat the same scrolls as in step 1
4. Call verify_x_prevented_and_set_boundary_allows_inner() from console
5. Repeat the same scrolls as in step 1
6. Call verify_inner_allowed_and_set_nonscrollable_allows_propagation()
from console
7. Make two separate scrolls on green, in this order: scroll UP
(or drag down), then scroll LEFT (or drag right). Scroll (or drag) until
nothing is scrolling.
8. Call verify_non_scrollable_allows_propagation() from console
</ol> -->
<script>
function setScrollPosition(scroller, offset) {
scroller.scrollTop = offset;
scroller.scrollLeft = offset;
}
async function scrollWithKeyboardWait(scrollElement, overflowScroller) {
const scrollerRect = scrollElement.getBoundingClientRect();
// Move pointer to scroll_element.
await new test_driver.Actions()
.pointerMove(scrollerRect.left + 200, scrollerRect.top + 100)
.pointerDown()
.pointerUp()
.send();
// Perform vertical scroll.
let scrollEndPromise = waitForScrollEndOrTimeout(overflowScroller, 1000);
await scrollElementByKeyboard('ArrowUp');
await scrollEndPromise;
// Perform horizontal scroll.
scrollEndPromise = waitForScrollEndOrTimeout(overflowScroller, 1000);
await scrollElementByKeyboard('ArrowLeft');
await scrollEndPromise;
}
promise_test(async t => {
await waitForCompositorReady();
container.style.overscrollBehaviorX = 'auto';
container.style.overscrollBehaviorY = 'none';
setScrollPosition(root, 100);
setScrollPosition(container, 0);
window.scrollTo(0, 0);
await scrollWithKeyboardWait(container, root);
assert_approx_equals(root.scrollTop, 100, 0.5,
"root got unexpected scroll on Y axis");
assert_approx_equals(root.scrollLeft, 0, 0.5,
"root expected to scroll on X axis");
}, "overscroll-behavior-y: none prevents scroll propagation on y axis");
promise_test(async t => {
await waitForCompositorReady();
container.style.overscrollBehaviorX = 'none';
container.style.overscrollBehaviorY = 'auto';
setScrollPosition(root, 100);
setScrollPosition(container, 0);
window.scrollTo(0, 0);
await scrollWithKeyboardWait(container, root);
assert_approx_equals(root.scrollTop, 0, 0.5,
"root expected to scroll on Y axis");
assert_approx_equals(root.scrollLeft, 100, 0.5,
"root got unexpected scroll on X axis");
}, "overscroll-behavior-x: none prevents scroll propagation on x axis");
promise_test(async t => {
await waitForCompositorReady();
container.style.overscrollBehaviorX = 'none';
container.style.overscrollBehaviorY = 'none';
setScrollPosition(root, 100);
setScrollPosition(container, 100);
window.scrollTo(0, 0);
await scrollWithKeyboardWait(container, container);
assert_approx_equals(container.scrollTop, 0, 0.5,
"inner container expected to scroll on Y axis");
assert_approx_equals(container.scrollLeft, 0, 0.5,
"inner container expected to scroll on X axis");
assert_approx_equals(root.scrollTop, 100, 0.5,
"root got unexpected scroll on Y axis");
assert_approx_equals(root.scrollLeft, 100, 0.5,
"root got unexpected scroll on X axis");
}, "overscroll-behavior allows inner scrolling when both axes are none");
promise_test(async t => {
await waitForCompositorReady();
non_scrollable.style.overscrollBehaviorX = 'none';
non_scrollable.style.overscrollBehaviorY = 'none';
setScrollPosition(root, 100);
window.scrollTo(0, 0);
await scrollWithKeyboardWait(non_scrollable, root);
assert_approx_equals(root.scrollLeft, 0, 0.5,
"root expected to scroll on X axis");
assert_approx_equals(root.scrollTop, 0, 0.5,
"root expected to scroll on Y axis");
}, "overscroll-behavior on non-scrollable area allows scroll propagation");
</script>