| Torne (Richard Coles) | 926b001 | 2013-03-28 15:32:48 +0000 | [diff] [blame] | 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> |