<!DOCTYPE html>
<html>
<head>
    <title>Animating transform on large tiled layer.</title>
    <style type="text/css">
        #box {
            display: block;
            width: 1000px;
            height: 2000px;
            background-color: green;
            transition: -webkit-transform 0.2s step-end;
        }

        #sandbox {
            height: 1000px;
            width: 1000px;
            background-color: red;
            overflow: hidden;
        }

        .end {
            -webkit-transform: translate3d(0, -1000px, 0);
        }

        .start {
            -webkit-transform: translate3d(0, 100%, 0);
        }
    </style>
    <script>
        if (window.testRunner)
            testRunner.waitUntilDone();

        function run()
        {
            var box = document.getElementById('box');
            box.addEventListener('transitionend', function() {
                if (window.testRunner)
                    testRunner.notifyDone();
            }, false);

            box.className = 'end';
        }
    </script>
</head>
<body onload="run()">
    <div id="description">
        The test passes if the box below turns green.
    </div>
    <div id="sandbox">
        <div id="box" class="start"><font style="opacity:0">ABC</font></div>
    </div>
</body>
</html>