<!DOCTYPE html>
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.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;
}
#contents {
width: 500px;
height: 150px;
border-right: 700px solid black;
background: red;
}
#horizontal {
width: 600px;
height: 600px;
overflow: scroll;
background: green;
}
#vertical {
height:300px;
overflow:scroll;
}
</style>
<body>
<div id="vertical">
<div id="horizontal">
<div id="contents"></div>
</div>
</div>
</body>
<script>
promise_test (async () => {
await waitForCompositorCommit();
const innerScroller = document.getElementById('horizontal');
const outerScroller = document.getElementById('vertical');
const scrollRange =
innerScroller.scrollWidth - innerScroller.clientWidth;
const startDragX = 50;
const startDragY = 50;
// Roughly diagonal scroll with |dy| > |dx|.
let dragDeltaX = -30;
let dragDeltaY = -40;
// Scroll diagonally, since the child div scrolls horizontally the unused
// delta y does not propagate to the parent div.
await touchScroll(startDragX, startDragY, dragDeltaX, dragDeltaY,
innerScroller);
assert_greater_than(innerScroller.scrollLeft, 0);
// wait a few extra frames to ensure no scroll propagation.
await raf();
await raf();
assert_equals(outerScroller.scrollTop, 0);
// Jump to the boundary.
await waitForScrollReset(innerScroller, scrollRange, 0);
await raf();
assert_equals(innerScroller.scrollLeft, scrollRange,
'Scrolled to horizontal boundary');
assert_equals(outerScroller.scrollTop, 0);
// Now that we are at the scroll boundary, an additional scroll should
// propagate to the outer scroller.
await touchScroll(startDragX, startDragY, dragDeltaX, dragDeltaY,
outerScroller);
assert_equals(innerScroller.scrollLeft, scrollRange);
assert_greater_than(outerScroller.scrollTop, 0);
}, 'This tests that a gesture scroll isn\'t propagated from an ' +
'inner div to an outer div when the inner div has ' +
'remaining scroll offset on one axis but not on the other, unless ' +
'the inner div starts at its scroll extent');
</script>
Codebase Browser
chromium