<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                margin: 0;
            }

            #topTarget {
                position: absolute;
                top: 0;
                left: 0;
                border: 1px black solid;
            }

            #bottomTarget {
                position: absolute;
                top: 400px;
                left: 0;
                border: 1px black solid;
            }

            .gallery {
                width: 400px;
                height: 400px;
                overflow-y: hidden;
                overflow-x: auto;
                margin-bottom: 2px;
                scroll-snap-type: x mandatory;
                opacity: 0.5;
            }

            .galleryDrawer {
                width: 2400px;
                height: 400px;
            }

            .colorBox {
                height: 400px;
                width: 400px;
                float: left;
                scroll-snap-align: start;
            }
            #itemH0, #itemV0 { background-color: red; }
            #itemH1, #itemV1 { background-color: green; }
            #itemH2, #itemV2 { background-color: blue; }
            #itemH3, #itemV3 { background-color: aqua; }
            #itemH4, #itemV4 { background-color: yellow; }
            #itemH5, #itemV5 { background-color: fuchsia; }
        </style>
        <script src="../../resources/ui-helper.js"></script>
        <script>
        function locationInWindowCoordinates(element)
        {
            var position = {};
            position.x = element.offsetLeft;
            position.y = element.offsetTop;

            while (element.offsetParent) {
                position.x = position.x + element.offsetParent.offsetLeft;
                position.y = position.y + element.offsetParent.offsetTop;
                if (element == document.getElementsByTagName("body")[0])
                    break;

                element = element.offsetParent;
            }

            return position;
        }

        let swipeWithMomentum = (element) => swipeInElement(element, true);
        let swipeWithoutMomentum = (element) => swipeInElement(element, false);
        
        async function swipeInElement(element, momentum)
        {
            write(`* Swiping ${momentum ? "with" : "without"} momentum in ${element.id} with scroll offset ${element.scrollLeft}`);

            internals.setPlatformMomentumScrollingPredictionEnabled(false);
            const location = locationInWindowCoordinates(element);

            let events = [
                {
                    type : "wheel",
                    viewX : location.x,
                    viewY : location.y,
                    deltaX : -10,
                    phase : "began"
                },
                {
                    type : "wheel",
                    deltaX : -10,
                    phase : "changed"
                },
                {
                    type : "wheel",
                    deltaX : -10,
                    phase : "changed"
                },
                {
                    type : "wheel",
                    phase : "ended"
                }
            ];
            const momentumEvents = [
                {
                    type : "wheel",
                    deltaX : -10,
                    momentumPhase : "began"
                },
                {
                    type : "wheel",
                    deltaX : -10,
                    momentumPhase : "changed"
                },
                {
                    type : "wheel",
                    momentumPhase : "ended"
                }
            ];
            
            if (momentum) 
                events.push(...momentumEvents);

            await UIHelper.mouseWheelSequence({ events: events });

            write(`  topTarget now has scroll offset ${topTarget.scrollLeft}`);
            write(`  bottomTarget now has scroll offset ${bottomTarget.scrollLeft}`);
            write("");
        }

        function run()
        {
            if (!window.eventSender)
                return;

            swipeWithMomentum(topTarget)
                .then(() => swipeWithoutMomentum(topTarget))
                .then(() => swipeWithMomentum(bottomTarget))
                .then(() => swipeWithoutMomentum(bottomTarget))
                .then(() => testRunner.notifyDone());
        }
        </script>
    </head>
    <body onload=run()>
        <div style="position: relative; width: 400px">
            <p>Manually test with the following steps:</p>
            <p>1. Scroll with momentum to the green box in the first div.</p>
            <p>2. In the first div, drag so the blue box is partially visible, then let go so the div snaps back to show green.</p>
            <p>3. Scroll with momentum to the green box in the second div.</p>
            <p>4. In the second div, drag so the blue box is partially visible, then let go so the div snaps back to show green.</p>
            <div class="gallery" id="topTarget">
                <div class="galleryDrawer">
                    <div id="itemH0" class="colorBox"></div>
                    <div id="itemH1" class="colorBox"></div>
                    <div id="itemH2" class="colorBox"></div>
                    <div id="itemH3" class="colorBox"></div>
                    <div id="itemH4" class="colorBox"></div>
                    <div id="itemH5" class="colorBox"></div>
                </div>
            </div>
            <div class="gallery" id="bottomTarget">
                <div class="galleryDrawer">
                    <div id="itemV0" class="colorBox"></div>
                    <div id="itemV1" class="colorBox"></div>
                    <div id="itemV2" class="colorBox"></div>
                    <div id="itemV3" class="colorBox"></div>
                    <div id="itemV4" class="colorBox"></div>
                    <div id="itemV5" class="colorBox"></div>
                </div>
            </div>
            <div id="output"></div>
            <script>
                let write = s => output.innerHTML += s + "<br>";
                testRunner.dumpAsText();
                testRunner.waitUntilDone();
            </script>
        </div>
    </body>
</html>