<!DOCTYPE html>
<style>
    img {
        display: none;
    }
    canvas {
        width: 100px;
        height: 100px;
        image-rendering: pixelated;
    }
    .canvas2 {
        image-rendering: auto;
    }
</style>
<body>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII=">
    <!-- Test that gpu accelerated canvases work with pixelated. -->
    <!-- The result is 3 canvases, each with a 2x2 block of colors. Only the middle canvas should be blurred. -->
    <canvas class="canvas0" width="4" height="4"></canvas>
    <canvas class="canvas1" width="4" height="4"></canvas>
    <canvas class="canvas2" width="4" height="4"></canvas>
</body>
<script>
    function drawToCanvas(canvas) {
        var ctx = canvas.getContext("2d")
        ctx.drawImage(document.getElementsByTagName("img")[0], 1, 1);
    }

    function draw() {
        drawToCanvas(document.getElementsByTagName("canvas")[0]);
        var canvas1 = document.getElementsByTagName("canvas")[1];
        var canvas2 = document.getElementsByTagName("canvas")[2];
        drawToCanvas(canvas1);
        drawToCanvas(canvas2);
        // The first canvas stays pixelated. Flip the pixelated-ness of the
        // other two.
        canvas1.style.imageRendering = "auto";
        canvas2.style.imageRendering = "pixelated";
    }
    window.onload = draw;
</script>