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