<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>
<script src="../../../../resources/gesture-util.js"></script>
<style type="text/css">
#touchtarget {
  width: 100px;
  height: 100px;
  position: relative;
  background: white;
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

#movingbox {
  width: 100%;
  height: 100%;
  position: absolute;
  word-wrap: break-word;
  overflow-y: scroll;
  overflow-x: scroll;
  display: block;
}

#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">
<div id="touchtarget">
  <div id="movingbox">
    <table border="0" cellspacing="0px" id="tablefoo">
      <tr>
        <td><div id="redbox"></div></td>
        <td><div id="greenbox"></div></td>
      </tr>
      <tr>
        <td><div id="greenbox"></div></td>
        <td><div id="greenbox"></div></td>
      </tr>
    </table>
  </div>
</div>
</body>

<script type="text/javascript">
var movingdiv = document.getElementById('movingbox');
var expectedGesturesTotal = 2;
var gesturesOccurred = 0;
var scrollAmountX = [90, 90];
var scrollAmountY = [0, 95];
var scrollEventsOccurred = 0;
var expectedScrollEventsOccurred = 2;
var scrolledElement = movingdiv;

var x = 95;
var y = 12;
function firstGestureScroll() {
  return smoothScroll(90, x, y, GestureSourceType.TOUCH_INPUT, "right",
      SPEED_INSTANT);
}

function secondGestureScroll() {
  x = 12;
  y = 97;
  return smoothScroll(95, x, y, GestureSourceType.TOUCH_INPUT, "down",
      SPEED_INSTANT);
}

promise_test (async () => {
  movingdiv.addEventListener("scroll", recordScroll);

  await firstGestureScroll();
  await waitFor(checkScrollOffset);
  await secondGestureScroll();
  await waitFor(checkScrollOffset);
}, 'This tests gesture event scrolling of an overflow div.');
</script>