<!DOCTYPE html>
<html>
<head>
<script src="../../../../resources/js-test-pre.js"></script>
<script src="resources/gesture-helpers.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;
}

#bluebox {
  width: 100px;
  height: 100px;
  background: blue;
  padding: 0px;
  margin: 0px;
}

#yellowbox {
  width: 100px;
  height: 100px;
  background: yellow;
  padding: 0px;
  margin: 0px;
}

#innerdiv {
    width: 200px;
    height: 200px;
    overflow-y: scroll;
    overflow-x: scroll;
}

#outerdiv {
    width: 250px;
    height: 250px;
    overflow-y: scroll;
    overflow-x: scroll;
}

#outermostdiv {
    width: 300px;
    height: 300px;
    overflow-y: scroll;
    overflow-x: scroll;
}

td {
  padding: 0px;
}

</style>
</head>
<body style="margin:0" onload="runTest();">

<div id="outermostdiv">
  <table border="0" cellspacing="0px" >
    <tr><td>
      <div id="outerdiv">
        <table border="0" cellspacing="0px" >
          <tr><td>
            <div id="innerdiv">
              <table border="0" cellspacing="0px" >
                <tr><td><div id="greenbox"></div></td></tr>
                <tr><td><div id="redbox"></div></td></tr>
                <tr><td><div id="greenbox"></div></td></tr>
                <tr><td><div id="redbox"></div></td></tr>
              </table>
            </div>
          </td></tr>
          <tr><td>
            <div id="bluebox"></div>
          </td></tr>
        </table>
      </div>
    </td></tr>
    <tr><td>
      <div id="yellowbox"></div>
    </td></tr>
  </table>
</div>

<p id="description"></p>
<div id="console"></div>
<script type="text/javascript">

var movedbox;
var touchtarget;
var expectedGesturesTotal = 2;
var gesturesOccurred = 0;
var scrollAmountX = ['0', '0'];
var scrollAmountY = ['0', '25'];
var wheelEventsOccurred = 0;
var expectedWheelEventsOccurred = ['0', '0'];
var scrollEventsOccurred = 0;
var scrolledElement = 'movedbox'
var scrollEventsOccurred = 0;
var expectedScrollEventsOccurred = '1';

function firstGestureScroll()
{
    debug("first gesture");
    eventSender.gestureScrollBegin(10, 72);
    eventSender.gestureScrollUpdate(0, -200);
    eventSender.gestureScrollUpdate(0, -30);
    eventSender.gestureScrollEnd(0, 0);

    // Wait for layout.
    checkScrollOffset();
}

function secondGestureScroll()
{
    debug("second gesture");
    eventSender.gestureScrollBegin(12, 40);
    eventSender.gestureScrollUpdate(0, -20);
    eventSender.gestureScrollUpdate(0, -25);
    eventSender.gestureScrollEnd(0, 0);

    // Wait for layout.
    checkScrollOffset();
}

if (window.testRunner)
    testRunner.waitUntilDone();

function runTest()
{
    movedbox = document.getElementById("outermostdiv");
    touchtarget = document.getElementById("innerdiv");
    touchtarget.addEventListener("scroll", recordScroll);
    touchtarget.addEventListener("mousewheel", recordWheel);

    if (window.eventSender) {
        description('This tests that a gesture scroll is propagated from an ' +
                'inner div to an outer div twice when the scrolled divs have no ' +
                'remaining scroll offset.');
        if (checkTestDependencies())
            firstGestureScroll();
        else
            exitIfNecessary();
    } else {
        debug("This test requires DumpRenderTree.  Gesture-scroll the page to validate the implementation.");
    }
}
</script>


</body>
</html>