<!DOCTYPE html>
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>
<script src="../../../../resources/compositor-controls.js"></script>
<script src="../../../../resources/gesture-util.js"></script>
<script src="../../../../resources/testdriver.js"></script>
<script src="../../../../resources/testdriver-actions.js"></script>
<script src="../../../../resources/testdriver-vendor.js"></script>
<style>
body {
margin: 0;
}
#container {
width: 500px;
height: 200px;
overflow: scroll;
}
#box {
height: 100px;
font-size: xx-large;
margin-top: 50px;
}
#spacer {
background-color: green;
height: 1000px;
width: 1000px;
}
</style>
<body>
<div id="container">
<form>
<input id="box" size="10" type="text"
value="asasd;flkajsd;flkasjdf;alksdjf;alskdfja;lksdja;sdlfjkas;ldkf">
</input>
</form>
<div id="spacer"></div>
</div>
</body>
<script>
const box = document.getElementById("box");
const container = document.getElementById("container");
// Determine the scroll range for the input field. This range is not necessarily
// the difference between the scroll and client width due to quirks on Mac.
const fullyScrolled = (() => {
box.scrollLeft = 100000;
let limit = box.scrollLeft;
box.scrollLeft = 0;
return limit;
})();
async function resetScroll() {
await waitForScrollReset(container);
assert_equals(container.scrollLeft, 0);
assert_equals(container.scrollTop, 0);
// An input field is not a scroll-container, and changing its position does
// not trigger a scrollend event. Thus, we cannot use waitForScrollReset here.
box.scrollLeft = 0;
box.scrollTop = 0;
return waitForCompositorCommit();
}
function dragGesture(deltaX, deltaY, scroller, options = {}) {
// Scrolling is less than drag amount by the touch slop unless we apply
// compensation.
options.adjust_for_touch_slop = true;
// Suppress pause to enable fling momentum.
const position = elementCenter(box);
return touchScroll(position.x, position.y, deltaX, deltaY, scroller,
options);
}
function swipeGesture(deltaX, deltaY, scroller) {
// Suppress pause to enable fling momentum.
return dragGesture(deltaX, deltaY, scroller,
{ prevent_fling_pause_ms: 0 });
}
promise_test (async () => {
await resetScroll();
await swipeGesture(-40, 0, box);
assert_greater_than(box.scrollLeft, 40);
assert_equals(container.scrollLeft, 0);
await resetScroll();
// Flinging input text past the scrollable width shouldn't scroll containing
// div.
box.scrollLeft = fullyScrolled - 40;
await swipeGesture(-40, 0, box);
assert_equals(box.scrollLeft, fullyScrolled);
assert_equals(container.scrollLeft, 0);
// // Flinging fully scrolled input text should fling containing div.
await swipeGesture(-40, 0, container);
assert_greater_than(container.scrollLeft, 40);
assert_equals(box.scrollLeft, fullyScrolled);
}, "gesture fling on an input field with x overflow only propagates if at " +
"the scroll limit");
promise_test (async () => {
await resetScroll();
// Gesture scrolling input text should scroll text the specified amount.
await dragGesture(-40, 0, box);
assert_approx_equals(box.scrollLeft, 40, 2);
assert_equals(container.scrollLeft, 0);
await resetScroll();
// Gesture scrolling input text past scroll width shouldn't scroll container
// div.
box.scrollLeft = fullyScrolled - 20;
await dragGesture(-40, 0, box);
assert_equals(box.scrollLeft, fullyScrolled);
assert_equals(container.scrollLeft, 0);
}, "gesture scroll on an input field with x overflow only propagates if at " +
"the scroll limit");
promise_test (async () => {
await resetScroll();
// Vertically gesture scrolling input text should scroll containing div the
// specified amount.
await dragGesture(0, -40, container);
assert_equals(box.scrollTop, 0);
assert_approx_equals(container.scrollTop, 40, 2);
await resetScroll();
// Vertically flinging input text should scroll the containing div the
// specified amount.
await swipeGesture(0, -50, container);
assert_equals(box.scrollTop, 0);
assert_greater_than(container.scrollTop, 60);
}, "vertical scroll on an input field without y overflow propagates.");
promise_test (async () => {
await resetScroll();
box.value = "short";
assert_greater_than_equal(box.clientWidth, box.scrollWidth);
// Input box dimensions accommodate text and a scroll gesture on the input
// propagates to the container.
await dragGesture(-60, 0, container);
assert_equals(box.scrollLeft, 0);
assert_approx_equals(container.scrollLeft, 60, 2);
}, "horizontal scroll on an input field without x overflow propagates.");
</script>
Codebase Browser
chromium