1<!DOCTYPE html>
2<html>
3<head>
4<style>
5#container {
6    width: 300px;
7    height: 300px;
8    background-image: -webkit-canvas(sourceCanvas);
9    background-size: 100%;
10    display: inline-block;
11}
12</style>
13</head>
14<body>
15    <p>This test passes if two green squares are displayed below.</p>
16    <div>
17        <div style="display: inline-block">
18            <div id="container"></div>
19        </div>
20        <div id="canvas-container" style="display: inline-block"></div>
21    </div>
22    <script>
23        var ctx = document.getCSSCanvasContext('2d', 'sourceCanvas', 300, 300);
24        var canvas = ctx.canvas;
25
26        function asyncDraw2() {
27            ctx.fillStyle = "green";
28            ctx.fillRect(0, 0, 300, 300);
29        }
30
31        function asyncDraw1() {
32            ctx.fillStyle = "red";
33            ctx.fillRect(0, 0, 300, 300);
34            window.webkitRequestAnimationFrame(asyncDraw2);
35        }
36
37        window.webkitRequestAnimationFrame(asyncDraw1);
38
39        document.querySelector('#canvas-container').appendChild(canvas);
40    </script>
41</body>
42</html>
43