<!DOCTYPE html>
<html>
<head>
<style>
#container {
    width: 300px;
    height: 300px;
    background-image: -webkit-canvas(sourceCanvas);
    background-size: 100%;
    display: inline-block;
}
</style>
</head>
<body>
    <p>This test passes if two green squares are displayed below.</p>
    <div>
        <div style="display: inline-block">
            <div id="container"></div>
        </div>
        <div id="canvas-container" style="display: inline-block"></div>
    </div>
    <script>
        var ctx = document.getCSSCanvasContext('2d', 'sourceCanvas', 300, 300);
        var canvas = ctx.canvas;

        function asyncDraw2() {
            ctx.fillStyle = "green";
            ctx.fillRect(0, 0, 300, 300);
        }

        function asyncDraw1() {
            ctx.fillStyle = "red";
            ctx.fillRect(0, 0, 300, 300);
            window.webkitRequestAnimationFrame(asyncDraw2);
        }

        window.webkitRequestAnimationFrame(asyncDraw1);

        document.querySelector('#canvas-container').appendChild(canvas);
    </script>
</body>
</html>