transform-on-large-layer.html | Explore in Territory

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

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

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

        .start {
            transform: translate3d(0, 100%, 0);
        }
    </style>
    <script type="text/javascript">
        async function run()
        {
            if (window.testRunner) {
                testRunner.waitUntilDone();
            }
            var resizePromise = new Promise(resolve => window.onresize =
                function() {
                    var box = document.getElementById("box");
                    box.className = "end";
                    box.ontransitionend = notifyDone;
                    resolve();
            });
            window.resizeTo(1600,1200);
            await resizePromise;
        }
        function notifyDone() {
            if (window.testRunner) {
                testRunner.notifyDone();
            }
        }
    </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>
chromium/third_party/blink/web_tests/compositing/transitions/transform-on-large-layer.html
