<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
<html>
<head>
    <style>
        .container {
            width: 200px;
            height: 200px;
            margin: 10px;
            display: inline-block;
            background-color: silver;
            position: relative;
            overflow: scroll;
            perspective: 500px;
        }

        /* Transformed to be edge-on, and therefore invisible */
        .angled {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: red;
            transform: rotateX(90deg);
        }

        .angled.vertical {
            transform: rotateY(90deg);
        }

        .contents {
            height: 300%;
        }
        .wide.contents {
            width: 300%;
        }

        #scroll-down .angled {
            top: 100px;
        }

        #scroll-right .angled {
            left: 100px;
        }
    </style>
    <script>
        // This is a hack to avoid having scrollbars take space, needed until webkit.org/b/211787 is fixed.
        if (window.internals)
            internals.setUsesOverlayScrollbars(true);

        window.addEventListener('load', () => {
            document.getElementById('scroll-down').scrollTop = 100;
            document.getElementById('scroll-right').scrollLeft = 100;
        }, false);
    </script>
</head>
<body>
    <div class="container" style="transform-box: border-box; border-left: 50px solid black; border-top: 50px solid black; perspective-origin: 150px 150px;">
        <div class="angled"></div>
        <div class="angled vertical"></div>
        <div class="contents"></div>
    </div>

    <div id="scroll-down" class="container" style="transform-box: border-box; border-left: 50px solid black; border-top: 50px solid black; perspective-origin: 150px 150px;">
        <div class="angled"></div>
        <div class="angled vertical"></div>
        <div class="contents"></div>
    </div>

    <div class="container" style="transform-box: content-box; border-right: 50px solid black; border-bottom: 50px solid black; perspective-origin: 100px 100px">
        <div class="angled"></div>
        <div class="angled vertical"></div>
        <div class="contents"></div>
    </div>

    <div id="scroll-right" class="container" style="transform-box: content-box; border-right: 50px solid black; border-bottom: 50px solid black; perspective-origin: 100px 100px">
        <div class="angled"></div>
        <div class="angled vertical"></div>
        <div class="wide contents"></div>
    </div>
</body>
</html>