<!DOCTYPE html>
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>
<script src="../../../../resources/gesture-util.js"></script>
<style type="text/css">
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
#greenbox {
width: 100px;
height: 100px;
background: green;
padding: 0px;
margin: 0px;
}
#redbox {
width: 100px;
height: 100px;
background: red;
padding: 0px;
margin: 0px;
}
td {
padding: 0px;
}
</style>
<body style="margin:0" onload="buildPage();">
<table id="table_to_fill">
<tr><td><div id="greenbox"></div></td></tr>
<tr><td><div id="redbox"></div></td></tr>
</table>
</body>
<script type="text/javascript">
var expectedGesturesTotal = 2;
var gesturesOccurred = 0;
var scrollAmountX = [0, 0];
var scrollAmountY = [70, 130];
var scrolledElement = document.scrollingElement;
var scrollEventsOccurred = 0;
var expectedScrollEventsOccurred = 1;
// Always construct a page larger than the vertical height of the window.
function buildPage() {
var table = document.getElementById('table_to_fill');
var targetHeight = window.innerHeight;
var cellPairHeight = table.offsetHeight;
var numberOfReps = targetHeight / cellPairHeight * 2;
var i;
for (i = 0; i < numberOfReps; i++) {
var p = document.createElement('tr');
p.innerHTML = '<td><div id="greenbox"></div></td>';
table.appendChild(p);
var p = document.createElement('tr');
p.innerHTML = '<td><div id="redbox"></div></td>';
table.appendChild(p);
}
window.addEventListener("scroll", recordScroll);
}
var x = 10;
var y = 72;
function firstGestureScroll() {
return smoothScroll(70, x, y, GestureSourceType.TOUCH_INPUT, "down",
SPEED_INSTANT);
}
function secondGestureScroll() {
x = 799;
y = 40;
return smoothScroll(60, x, y, GestureSourceType.TOUCH_INPUT, "down",
SPEED_INSTANT);
}
promise_test (async () => {
await firstGestureScroll();
await waitFor(checkScrollOffset);
await secondGestureScroll();
await waitFor(checkScrollOffset);
}, 'This tests scroll gesture event scrolling on a whole page.');
</script>