topmost-becomes-bottomost-for-scrolling.html

<html>
<head>
<style>
    #scroll {
        width: 230px;
        height: 230px;
        overflow: scroll;
        border: 1px solid black;
    }
    #container {
        width:200px;
        height:200px;
        background-color:blue;
        transform: rotate(180deg);
    }
    #spill {
        width:100px;
        height:100px;
        background-color:green;
        position:absolute;
        top:-50px;
    }
</style>
</head>

<body>

    <p id="result">
        FAIL. The transform has not been applied to the scrollHeight.
    </p>

    <div id="scroll">
        <div id="container">
            <div id="spill"></div>
        </div>
    </div>

    <script>
        if (window.testRunner)
            testRunner.dumpAsText();
        var scroll = document.getElementById("scroll");
        var scrollHeight = scroll.scrollHeight;
        if (scrollHeight > 215) {
            var result = document.getElementById("result");
            result.innerHTML = "SUCCESS! The transform was applied to the scrollHeight!";
        }
    </script>
</body>
</html>

chromium/third_party/blink/web_tests/transforms/topmost-becomes-bottomost-for-scrolling.html