chromium/src/third_party/blink/web_tests/fast/canvas/canvas-getImageData.html

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>

<script>

var canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 200;
var context = canvas.getContext("2d");

function dataToArray(data) {
    var result = new Array(data.length)
    for (var i = 0; i < data.length; i++)
        result[i] = data[i];
    return result;
}

function getPixel(ctx, x, y) {
    var data = ctx.getImageData(x,y,1,1);
    assert_not_equals(data, null);
    return dataToArray(data.data);
}

function pixelShouldBe(ctx, x, y, colour) {
    var ctxColour = getPixel(ctx, x, y);
    for (var i = 0; i < 4; i++)
        assert_equals(colour[i], ctxColour[i]);
}

test(function(t) {

    if (!context.setFillColor)
        context.setFillColor = function(r,g,b,a) {
            this.fillStyle = "rgba("+[Math.round(r*255),Math.round(g*255),Math.round(b*255),Math.round(a*255)]+")";
        }
    
    // Check that getImageData is return the data for the right portion of the image
    for(var x = 0; x < 100; x += 4) {
        context.setFillColor(0, x/96, 0, 1);
        context.fillRect(x, 0, 1, 1);
        pixelShouldBe(context, x, 0, [0, Math.round(255*x/96), 0, 255]);
    }
    
    // Check rgba ordering
    context.clearRect(0, 0, 100, 100);
    context.setFillColor(0.25, 0.5, 0.75, 1);
    context.fillRect(5, 5, 1, 1);
    pixelShouldBe(context, 5, 5, [Math.round(0.25*255), Math.round(0.5*255), Math.round(0.75*255), 255]);
    
    // Make sure we return correct values for the row
    for (var i = 0; i < 100; i++) {
        context.fillStyle = "rgba("+[0, i, 0, 1]+")";
        context.fillRect(i, 10, 1, 1);
    }
    
    var rowImageData = context.getImageData(0, 10, 100, 1).data;
    var rowCheck = true;
    for (var i = 0; i < 100; i++) {
        if (rowImageData[i * 4 + 1] != i) {
            rowCheck = false;
            break;
        }
    }
    assert_true(rowCheck);
    
    // Check that we return transparent black for regions outside the canvas proper
    context.fillStyle = "rgba(255,255,255,255)";
    context.fillRect(198, 5, 4, 1); // final 2 pixels horizontally should be clipped
    var content = dataToArray(context.getImageData(198, 5, 4, 1).data);
    var expected = [255,255,255,255,255,255,255,255,
                    0,0,0,0,0,0,0,0];
    for (var i = 0; i < 16; i++)
        assert_equals(content[i], expected[i]);

}, 'This test ensures that getImageData works correctly.');
</script>