<!DOCTYPE html>
<html>
    <head>
        <title>Clicking in the scrollbar gutter should trigger scroll snapping</title>
        <style type="text/css">
            /* Use customized scrollbar to avoid platform differences. */
            ::-webkit-scrollbar {
                width: 20px;
                height: 20px;
            }
            ::-webkit-scrollbar-button {
                height: 0px;
                width: 0px;
            }

            ::-webkit-scrollbar-track-piece  {
                background-color: gray;
            }

            ::-webkit-scrollbar-thumb {
                height: 20px;
                width: 20px;
                background-color: black;
            }

            body {
                margin: 0px;
            }

            .container {
                height: 200px;
                width: 200px;
                overflow: auto;
                scroll-snap-type: both mandatory;
            }

            .horizontal-drawer {
                height: 100%;
                width: 2000px;
            }

            .horizontal-drawer > div {
                float: left;
                width: 990px;
                height: 100%;
            }

            .horizontal-drawer > div.snap-point {
                scroll-snap-align: start;
                width: 10px;
             }

            #vertical-container > div {
                width: 100%;
                height: 990px;
            }

            #vertical-container > div.snap-point {
                scroll-snap-align: start;
                height: 10px;
            }

        </style>
        <script src="../../resources/js-test.js"></script>
        <script src="../../resources/ui-helper.js"></script>
        <script>
        window.jsTestIsAsync = true;

        async function onLoad()
        {
            if (window.eventSender == undefined) {
                document.getElementById('console').innerText = "Clicking in the scrollbar gutter should trigger scroll snapping.";
                return;
            }
            try {
                eventSender.mouseMoveTo(175, 190);
                eventSender.mouseDown();
                eventSender.mouseUp();

                let horizontalContainer = document.getElementById("horizontal-container");
                await UIHelper.waitForTargetScrollAnimationToSettle(horizontalContainer);
                expectTrue(horizontalContainer.scrollLeft == 1000, "clicking the horizontal scrollbar gutter snapped");

                eventSender.mouseMoveTo(190, 370);
                eventSender.mouseDown();
                eventSender.mouseUp();
                let verticalContainer = document.getElementById("vertical-container");
                await UIHelper.waitForTargetScrollAnimationToSettle(verticalContainer);
                expectTrue(verticalContainer.scrollTop == 1000, "dragging the vertical scrollbar thumb snapped");
            } catch (e) {
                console.log(e);
            } finally {
                finishJSTest();
            }
        }
        </script>
    </head>
    <body onload="onLoad();">
        <div id="horizontal-container" class="container">
            <div class="horizontal-drawer">
                <div class="snap-point" style="background: #80475E"></div>
                <div></div>
                <div class="snap-point" style="background: #CC5A71"></div>
                <div></div>
            </div>
        </div>
        <div id="vertical-container" class="container">
            <div class="snap-point" style="background: #80475E"></div>
            <div></div>
            <div class="snap-point" style="background: #CC5A71"></div>
            <div></div>
        </div>
        <p id="console"></p>
        <script>
        </script>
    </body>
</html>