<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <style>
        div {
            box-sizing: border-box;
        }
        .container {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 10px;
            border: 1px solid black;
        }
        
        .scroller {
            overflow: scroll;
        }
        
        .content {
            width: 100%;
            height: 300%;
            background-image: repeating-linear-gradient(white, silver 200px);
        }
        
        .overlay {
            transform-origin: top left;
            background-color: rgba(0, 0, 0, 0.25);
        }
        
        .container > div {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="../../../resources/ui-helper.js"></script>
    <script src="../../../resources/js-test-pre.js"></script>
    <script>
        var scrollTopWithScale0Overlay;
        var scrollTopWithScaledOverlayHitOverlay;
        var scrollTopWithScaledOverlayHitScroller;

        window.addEventListener('load', async () => {

            let scrollers = document.querySelectorAll('.scroller');
            let bounds = scrollers[0].getBoundingClientRect();

            await UIHelper.immediateScrollElementAtContentPointToOffset(bounds.left + 10, bounds.top + 10, 0, 100);
            scrollTopWithScale0Overlay = scrollers[0].scrollTop;
            
            // In case the previous scroll failed.
            document.scrollingElement.scrollTop = 0;
            scrollers[1].scrollTop = 0;

            bounds = scrollers[1].getBoundingClientRect();
            // Hit the overlay
            await UIHelper.immediateScrollElementAtContentPointToOffset(bounds.left + 10, bounds.top + 10, 0, 100);
            scrollTopWithScaledOverlayHitOverlay = scrollers[1].scrollTop;

            // In case the previous scroll failed.
            document.scrollingElement.scrollTop = 0;
            scrollers[1].scrollTop = 0;

            // Hit the scroller
            await UIHelper.immediateScrollElementAtContentPointToOffset(bounds.left + bounds.width / 2 + 10, bounds.top + 10, 0, 100);
            scrollTopWithScaledOverlayHitScroller = scrollers[1].scrollTop;
            
            description('Tests hit-testing of layers over scrollers with odd transforms');
            shouldBe('scrollTopWithScale0Overlay', '100');
            shouldBe('scrollTopWithScaledOverlayHitOverlay', '0');
            shouldBe('scrollTopWithScaledOverlayHitScroller', '100');

            finishJSTest();
            
        }, false);

        var successfullyParsed = true;
        var jsTestIsAsync = true;
    </script>
    <script src="../../../resources/js-test-post.js"></script>
</head>
<body>
    <div class="container">
        <div class="scroller">
            <div class="content"></div>
        </div>
        <div class="overlay" style="transform: scale(0)"></div>
    </div>

    <div class="container">
        <div class="scroller">
            <div class="content"></div>
        </div>
        <div class="overlay" style="transform: scale(0.5)"></div>
    </div>
</body>
</html>