<!DOCTYPE html>
<style>
    canvas {
        width: 10px;
        height: 10px;
        image-rendering: pixelated;
    }
    img {
        width: 10px;
        height: 10px;
        image-rendering: pixelated;
    }
    svg {
        width: 10px;
        height: 10px;
    }
    image {
        image-rendering: pixelated;
    }
</style>
<body>
    <!-- The output should be checkerboards all 20x20 with sharp 2x2 blocks and no blurring. -->
    <!-- FIXME: this test is a little too small to visually inspect for blurring. Should we make the test larger and more accessible? -->
    <canvas width="10" height="10"></canvas>
    <img src="resources/pixelated-hdpi.png">
    <svg><image width="10" height="10" xlink:href="resources/pixelated-hdpi.png"/></svg>
</body>
<script>
    function drawImageToCanvas() {
        var image = document.getElementsByTagName("img")[0];
        var canvas = document.getElementsByTagName("canvas")[0].getContext("2d");
        canvas.drawImage(image, 0, 0);
    }

    function runTest() {
        if (!window.testRunner)
            return;

        testRunner.waitUntilDone();
        testRunner.setBackingScaleFactor(2, function () {
            drawImageToCanvas();
            testRunner.notifyDone();
        });
    }

    window.onload = runTest;
</script>