<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../../../resources/js-test-pre.js"></script>
    <style>
        body {
            width: 100%;
            height: 100%;
            font-family: -apple-system;
            margin: 0;
            box-sizing: border-box;
        }

        #container {
            width: 100%;
            height: 300px;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            margin: 0 auto;
            background-color: red;
            top: 0;
            position: absolute;
        }

        #container > div {
            height: 10000px;
            width: 100%;
            float: left;
        }

        #description {
            top: 300px;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="area"></div>
</div>
<div id="description">
    <p>To manually test, swipe down to scroll in the container. The touch count should update to 1. Tap to stop scrolling while decelerating. The touch count should remain at 1. Then tap again in the container. The touch count should be 2.</p>
    <p>The touch count is: <span id="touches">0</span></p>
</div>
<script src="../../../resources/ui-helper.js"></script>
<script>
touchstartEventCount = 0;
container.scrollTop = 0;
container.addEventListener("touchstart", () => {
    container.style.backgroundColor = (++touchstartEventCount % 2) ? "green" : "red";
    touches.textContent = `${touchstartEventCount}`;
});

function getSwipeUIScript(fromX, fromY, toX, toY, duration)
{
    return `(() => {
        uiController.dragFromPointToPoint(${fromX}, ${fromY}, ${toX}, ${toY}, ${duration}, () => {
            uiController.uiScriptComplete("");
        });
    })();`;
}

function expectTouchCountToBe(count)
{
    shouldBeEqualToString("document.getElementById('touches').textContent", `${count}`);
}

if (window.testRunner && testRunner.runUIScript) {
    testRunner.dumpAsText();
    jsTestIsAsync = true;
    testRunner.runUIScript(getSwipeUIScript(100, 250, 100, 50, 0.1), () => {
        shouldBecomeDifferent("document.getElementById('container').scrollTop", "0", () => {
            expectTouchCountToBe(1);
            UIHelper.tapAt(100, 250).then(() => {
                expectTouchCountToBe(1);
                UIHelper.tapAt(100, 50).then(() => {
                    expectTouchCountToBe(2);
                    finishJSTest();
                });
            });
        });
    });
}
</script>
<script src="../../../resources/js-test-post.js"></script>
</body>