| <!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> |
