canvas-imageSmoothingQuality-pixel.html

<html>
<head>
<style>
    .hide {display:none}
    .row {display:table-row}
    .cell {display:table-cell; padding:10px}
    #test-output {display:table}
    label {display:row}
</style>
<body>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<canvas class="hide" id="source-up-canvas"></canvas>
<canvas class="hide" id="source-down-canvas"></canvas>
<div id="test-output">
    <label>Scale Up</label>
    <div id="up" class="row">
        <div class="cell">
            <div id="low-up"></div>
            <canvas id="low-up-canvas"></canvas>
        </div>
        <div class="cell">
            <div id="medium-up"></div>
            <canvas id="medium-up-canvas"></canvas>
        </div>
        <div class="cell">
            <div id="high-up"></div>
            <canvas id="high-up-canvas"></canvas>
        </div>
    </div>

    <label>Scale Down</label>
    <div id="down" class="row">
        <div class="cell">
            <div id="low-down"></div>
            <canvas id="low-down-canvas"></canvas>
        </div>
        <div class="cell">
            <div id="medium-down"></div>
            <canvas id="medium-down-canvas"></canvas>
        </div>
        <div class="cell">
            <div id="high-down"></div>
            <canvas id="high-down-canvas"></canvas>
        </div>
    </div>
</div>

<script>

function drawCanvas(quality, scale, drawFunc) {
    var id = quality + "-" + scale;
    var canvas = document.getElementById(id + "-canvas");
    var context = canvas.getContext("2d");
    var testCaseTitle = document.getElementById(id);
    if (testCaseTitle) {
        testCaseTitle.innerHTML = quality;
    }
    drawFunc(canvas, context, quality, scale);
}

function copyPicture(canvas, context, quality, scale) {
    var source = document.getElementById("source-" + scale + "-canvas");
    canvas.width = 100;
    canvas.height = 100;
    context.imageSmoothingQuality = quality;
    context.drawImage(source, 0, 0, canvas.width, canvas.height);
}

function drawWord(canvas, context) {
    canvas.width = 1800;
    canvas.height = 1800;
    context.font = '250pt Calibri';
    context.textAlign = 'center';
    context.fillStyle = 'blue';
    context.fillText('Hello World!', canvas.width/2, canvas.height/2);
}

function drawPicture(canvas, context) {
    canvas.width = 5;
    canvas.height = 5;

    var image = context.createImageData(canvas.width, canvas.height);

    function drawBlackDot(x, y, col) {
        var offset = y * 4 * canvas.width + x * 4;
        image.data[offset + 0] = col[0]; // R
        image.data[offset + 1] = col[1] ; // G
        image.data[offset + 2] = col[2] ; // B
        image.data[offset + 3] = 225; // Alpha
    }

    var imageData = [
        ['b', 'w', 'b', 'w', 'b',],['w', 'b', 'w', 'b', 'w',],
        ['b', 'w', 'b', 'w', 'b',],['w', 'b', 'w', 'b', 'w',],
        ['b', 'w', 'b', 'w', 'b',],
    ]
    var nameToColor = {
        'w' : [255,255,255],
        'b' : [0,0,0],
    }
    for (var x = 0 ; x < canvas.width; x++) {
        for (var y = 0; y < canvas.height; y++) {
            drawBlackDot(x, y, nameToColor[imageData[x][y]]);
        }
    }
    context.putImageData(image, 0, 0);
}

test(function(t) {
    drawCanvas("source", "up", drawPicture);
    drawCanvas("source", "down", drawWord);

    qualities = ["low", "medium", "high"];
    scales = ["up", "down"];
    for (var i = 0; i < scales.length; i++) {
        for (var j = 0; j < qualities.length; j++) {
            drawCanvas(qualities[j], scales[i], copyPicture);
        }
    }
}, 'Test that createImageBitmap from a bitmaprenderer canvas produces correct result');
</script>
</body>
chromium/third_party/blink/web_tests/fast/canvas/canvas-imageSmoothingQuality-pixel.html
