| <!DOCTYPE html> |
| <script> |
| var ctx; |
| window.onload = function () { |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| } |
| ctx = document.getElementById('c').getContext('2d'); |
| ctx.fillStyle = 'green'; |
| ctx.fillRect(0, 0, 100, 100); |
| ctx.save(); |
| ctx.translate(10, 0); |
| requestAnimationFrame(blueSquare); |
| } |
| |
| function blueSquare() { |
| ctx.fillStyle = 'blue'; |
| ctx.fillRect(0, 10, 80, 80); |
| requestAnimationFrame(redSquare); |
| } |
| |
| function redSquare() { |
| ctx.fillStyle = 'red'; |
| ctx.fillRect(10, 20, 60, 60); |
| if (window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| } |
| </script> |
| <p>The canvas below should contain green, blue and red nested squares, all centered with respect to each other.</p> |
| <canvas id="c" width="100" height="100"></canvas> |
