<!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 = [140, 40];
var scrolledElement = document.scrollingElement;
var scrollEventsOccurred = 0;
var expectedScrollEventsOccurred = 2;

// 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 * 4;
  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() {
  testRunner.setPageZoomFactor(0.5);
  return smoothScroll(70, x, y, GestureSourceType.TOUCH_INPUT, "down",
      SPEED_INSTANT);
}

function secondGestureScroll() {
  return smoothScroll(200, x, y, GestureSourceType.TOUCH_INPUT, "up",
      SPEED_INSTANT);
}

function thirdGestureScroll() {
  testRunner.setPageZoomFactor(2.0);
  x = 799;
  y = 40;
  return smoothScroll(80, x, y, GestureSourceType.TOUCH_INPUT, "down",
      SPEED_INSTANT);
}

promise_test (async () => {
  await firstGestureScroll();
  await waitFor(checkScrollOffset);
  await secondGestureScroll();
  await thirdGestureScroll();
  await waitFor(checkScrollOffset);
}, 'This tests scroll gesture event scrolling on a whole page with browser' +
   'zoom.');
</script>