<html>
<script src="../../resources/js-test-pre.js"></script>
<body>
<div id="container" style="overflow: auto; width: 500px; height: 500px">
  <div style="height: 5000px; width: 5000px;"></div>
</div>
<script>
description('Checks that the scroll event fires on elements asychronously and only once.');

var eventCount = 0;
var doneTimeout;

function scrollHandler(event)
{
    eventCount++;
    if (eventCount == 1) {
        debug('Scroll event bubbles: ' + event.bubbles);
        var container = document.getElementById('container');
        var scrollX = container.scrollLeft;
        var scrollY = container.scrollTop;
        testPassed('Scroll position: (' + scrollX + ', ' + scrollY + ')');
        // Don't call notifyDone straight away, in case there's another scroll event coming.
        doneTimeout = setTimeout(finishJSTest, 100);
    } else {
        clearTimeout(doneTimeout);
        testFailed('Scroll handler was invoked ' + eventCount + ' times');
        finishJSTest();
    }
}

onload = function()
{
    var container = document.getElementById('container');
    container.addEventListener('scroll', scrollHandler, false);
    container.scrollTop = 100;
    if (eventCount > 0) {
      testFailed('Scroll event fired synchronously');
      finishJSTest();
    }
    container.scrollTop = 200;
}
var jsTestIsAsync = true;
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>