pixelated-resize.html | Explore in Territory

<!DOCTYPE html>
<style>
    img {
        display: none;
    }
    canvas {
        width: 100px;
        height: 100px;
        image-rendering: pixelated;
    }
</style>
<body>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII=">
    <!-- Test that resizing a pixelated canvas works. -->
    <!-- The canvas should be upscaled without blurring. -->
    <canvas 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() {
        var canvas = document.getElementsByTagName("canvas")[0];
        drawToCanvas(canvas);
        // Resize so that the image buffer is reset.
        canvas.width = 5;
        canvas.style.width = "201px";
        drawToCanvas(canvas);
    }
    window.onload = draw;
</script>

chromium/third_party/blink/web_tests/fast/canvas/pixelated-resize.html