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

        .box {
            width: 100vw;
            height: 100vh;
        }
        </style>
        <script src="../../resources/js-test.js"></script>
        <script src="../../resources/ui-helper.js"></script>
        <script>
        window.jsTestIsAsync = true;

        async function runTests()
        {
            try {
                await UIHelper.keyDown("pageDown");
                await UIHelper.waitForTargetScrollAnimationToSettle(document.scrollingElement);

                expectTrue(document.scrollingElement.scrollTop != 0, "paging moved body");
                let defaultPagePosition = document.scrollingElement.scrollTop;
                let viewportHeight = document.scrollingElement.clientHeight;
                let pageProportion = document.scrollingElement.scrollTop / viewportHeight;

                document.scrollingElement.scrollTop = 0;
                await UIHelper.waitForTargetScrollAnimationToSettle(document.scrollingElement);

                document.documentElement.style.scrollPaddingTop = "10px";
                await UIHelper.keyDown("pageDown");
                await UIHelper.waitForTargetScrollAnimationToSettle(document.scrollingElement);

                let expected = (viewportHeight - 10) * pageProportion;
                expectTrue(document.scrollingElement.scrollTop != 0, "paging moved padded body");
                shouldBeCloseTo("document.scrollingElement.scrollTop", expected, 1);

                document.scrollingElement.scrollTop = 0;
                await UIHelper.waitForTargetScrollAnimationToSettle(document.scrollingElement);

                document.documentElement.style.scrollPaddingTop = "0px";
                document.documentElement.style.scrollPaddingBottom = "10px";
                await UIHelper.keyDown("pageDown");
                await UIHelper.waitForTargetScrollAnimationToSettle(document.scrollingElement);

                expectTrue(document.scrollingElement.scrollTop != 0, "paging moved padded body");
                shouldBeCloseTo("document.scrollingElement.scrollTop", expected, 1);

                document.scrollingElement.scrollTop = 0;
                await UIHelper.waitForTargetScrollAnimationToSettle(document.scrollingElement);

                document.documentElement.style.scrollPaddingTop = "10px";
                document.documentElement.style.scrollPaddingBottom = "10px";
                await UIHelper.keyDown("pageDown");
                await UIHelper.waitForTargetScrollAnimationToSettle(document.scrollingElement);

                expected = (viewportHeight - 20) * pageProportion;
                expectTrue(document.scrollingElement.scrollTop != 0, "paging moved padded body");
                shouldBeCloseTo("document.scrollingElement.scrollTop", expected, 2);
            } catch (e) {
                console.log(e);
            } finally {
                finishJSTest();
            }
        }

        function onLoad()
        {
            if (window.eventSender) {
                runTests();
            } else {
                var console = document.getElementById('console');
                console.innerText = "This test cannot be run manually."
            }
        }
        </script>
    </head>
    <body onload="onLoad();">
        <div class="box" style="background: green;"><div id="console"></div></div>
        <div class="box" style="background: red;"></div>
        <div class="box" style="background: pink;"></div>
        <div class="box" style="background: yellow;"></div>
        <div class="box" style="background: orange;"></div>
    </body>
</html>