<!DOCTYPE html>

<html>
<head>
    <style>
        * {
            box-sizing: border-box;
        }
        .container {
            width: 100px;
            height: 100px;
            margin: 200px;
            -webkit-perspective: 1000px;
            border: 1px solid black;
        }
        
        .middle {
            -webkit-transform-style: preserve-3d;
            -webkit-transform: translate3d(0px, 0px, 800px);
            width: 100px;
            height: 100px;
        }
        
        #leaf {
            width: 400px;
            height: 400px;
            position: absolute;
            border: 5px solid blue;
            -webkit-transform-origin: top left;
            -webkit-transform: matrix3d(
                    0.2, 0, 0, 0,
                    0, 0.2, 0, 0,
                    0, 0, 0.2, 0,
                    0, 0, 0, 1);
            background-image: repeating-linear-gradient(white, black 50px, white 50px);
        }
    </style>
    <script>
        if (window.testRunner)
            testRunner.waitUntilDone();
        
        function doTest()
        {
            window.setTimeout(function() {
                window.setTimeout(function() {
                    document.getElementById('leaf').style.height = '401px';
                    if (window.testRunner)
                        testRunner.notifyDone();
                }, 0);
            }, 0);
        }
        
        window.addEventListener('load', doTest, false);
    </script>
</head>
<body>

    <div class="container">
        <div class="middle">
            <div id="leaf">
            </div>
        </div>
    </div>
</body>
</html>