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

function initializeBlankCanvas(canvasColorSpace, canvasPixelFormat)
{
    var testCanvas = document.createElement("canvas");
    testCanvas.width = 4;
    testCanvas.height = 4;
    var testCtx = testCanvas.getContext('2d',
        {colorSpace: canvasColorSpace, pixelFormat:canvasPixelFormat});
    return testCtx;
}

function initializeCanvas(canvasColorSpace, canvasPixelFormat)
{
    var testCanvas = document.createElement("canvas");
    testCanvas.width = 4;
    testCanvas.height = 4;
    var testCtx = testCanvas.getContext('2d',
        {colorSpace: canvasColorSpace, pixelFormat:canvasPixelFormat});
    testCtx.fillStyle = "rgba(155, 27, 27, 1)";
    testCtx.fillRect(0, 0, 2, 2);
    testCtx.fillStyle = "rgba(27, 155, 27, 1)";
    testCtx.fillRect(2, 0, 2, 2);
    testCtx.fillStyle = "rgba(27, 27, 155, 1)";
    testCtx.fillRect(0, 2, 2, 2);
    testCtx.fillStyle = "rgba(27, 27, 27, 1)";
    testCtx.fillRect(2, 2, 2, 2);
    return testCtx;
}

function initializeCanvasTransparent(canvasColorSpace, canvasPixelFormat)
{
    var testCanvas = document.createElement("canvas");
    testCanvas.width = 4;
    testCanvas.height = 4;
    var testCtx = testCanvas.getContext('2d',
        {colorSpace: canvasColorSpace, pixelFormat:canvasPixelFormat});
    testCtx.fillStyle = "rgba(155, 27, 27, 0.5)";
    testCtx.fillRect(0, 0, 2, 2);
    testCtx.fillStyle = "rgba(27, 155, 27, 0.5)";
    testCtx.fillRect(2, 0, 2, 2);
    testCtx.fillStyle = "rgba(27, 27, 155, 0.5)";
    testCtx.fillRect(0, 2, 2, 2);
    testCtx.fillStyle = "rgba(27, 27, 27, 0.5)";
    testCtx.fillRect(2, 2, 2, 2);
    return testCtx;
}


function initializeOffscreenCanvas(canvasColorSpace, canvasPixelFormat)
{
    var canvas = document.createElement("canvas");
    canvas.width = 4;
    canvas.height = 4;
    var offscreen = canvas.transferControlToOffscreen();
    var ctx = offscreen.getContext('2d',
        {colorSpace: canvasColorSpace, pixelFormat:canvasPixelFormat});
    ctx.fillStyle = "rgba(155, 27, 27, 1)";
    ctx.fillRect(0, 0, 2, 2);
    ctx.fillStyle = "rgba(27, 155, 27, 1)";
    ctx.fillRect(2, 0, 2, 2);
    ctx.fillStyle = "rgba(27, 27, 155, 1)";
    ctx.fillRect(0, 2, 2, 2);
    ctx.fillStyle = "rgba(27, 27, 27, 1)";
    ctx.fillRect(2, 2, 2, 2);
    return offscreen;
}

function initializeOffscreenCanvasTransparent(canvasColorSpace, canvasPixelFormat)
{
    var canvas = document.createElement("canvas");
    canvas.width = 4;
    canvas.height = 4;
    var offscreen = canvas.transferControlToOffscreen();
    var ctx = offscreen.getContext('2d',
        {colorSpace: canvasColorSpace, pixelFormat:canvasPixelFormat});
    ctx.fillStyle = "rgba(155, 27, 27, 0.5)";
    ctx.fillRect(0, 0, 2, 2);
    ctx.fillStyle = "rgba(27, 155, 27, 0.5)";
    ctx.fillRect(2, 0, 2, 2);
    ctx.fillStyle = "rgba(27, 27, 155, 0.5)";
    ctx.fillRect(0, 2, 2, 2);
    ctx.fillStyle = "rgba(27, 27, 27, 0.5)";
    ctx.fillRect(2, 2, 2, 2);
    return offscreen;
}

function testPixels(testCtx, refCtx, pixelFormat, isTrnasparent)
{
    var actual = testCtx.getImageData(0, 0, 4, 4).dataUnion;
    var expected = refCtx.getImageData(0, 0, 4, 4).dataUnion;

    var tolerance = 4;
    if (pixelFormat === 'float16')
        tolerance = 0.02;
    if (isTrnasparent)
        tolerance = tolerance * 2;
    assert_array_approx_equals(actual, expected, tolerance);
}


function runDrawOffscreenCanvasTestOpaque(testScenario) {
    var canvas_ctx_opaque = initializeCanvas(
        testScenario.canvasColorSpace, testScenario.canvasPixelFormat);

    var canvas_ctx_blank = initializeBlankCanvas(
        testScenario.canvasColorSpace, testScenario.canvasPixelFormat);
    var offscreen_canvas_opaque = initializeOffscreenCanvas(
        testScenario.imageColorSpace, testScenario.imagePixelFormat);
    canvas_ctx_blank.drawImage(offscreen_canvas_opaque, 0, 0);
    testPixels(canvas_ctx_blank, canvas_ctx_opaque,
               testScenario.canvasPixelFormat, false);
}

function runDrawOffscreenCanvasTestTransparent(testScenario) {
    var canvas_ctx_transparent = initializeCanvasTransparent(
        testScenario.canvasColorSpace, testScenario.canvasPixelFormat);

    var canvas_ctx_blank = initializeBlankCanvas(
        testScenario.canvasColorSpace, testScenario.canvasPixelFormat);
    var offscreen_canvas_transparent = initializeOffscreenCanvasTransparent(
        testScenario.imageColorSpace, testScenario.imagePixelFormat);
    canvas_ctx_blank.drawImage(offscreen_canvas_transparent, 0, 0);
    testPixels(canvas_ctx_blank, canvas_ctx_transparent,
               testScenario.canvasPixelFormat, true);
}

function runAllTests() {
    var canvasColorSpaces = ['srgb'];
    var canvasPixelFormats = ['uint8', 'float16'];

    var testScenarioSet = [];
    for (var i = 0; i < canvasColorSpaces.length; i++) {
        for (var j = 0; j < canvasPixelFormats.length; j++) {
            var canvas_color_space = canvasColorSpaces[i];
            var canvas_pixel_format = canvasPixelFormats[j];
            for (var k = 0; k < canvasColorSpaces.length; k++) {
                for (var m = 0; m < canvasPixelFormats.length; m++) {
                    var image_host_color_space = canvasColorSpaces[k];
                    var image_host_pixel_format = canvasPixelFormats[m];

                    var testScenario = {};
                    testScenario.canvasColorSpace = canvas_color_space;
                    testScenario.canvasPixelFormat = canvas_pixel_format;
                    testScenario.imageColorSpace = image_host_color_space;
                    testScenario.imagePixelFormat = image_host_pixel_format;
                    testScenarioSet.push(testScenario);
                }
            }
        }
    }

    for (var i = 0; i < testScenarioSet.length; i++) {
        test(function(t) {
            runDrawOffscreenCanvasTestOpaque(testScenarioSet[i]);
            runDrawOffscreenCanvasTestTransparent(testScenarioSet[i]);
        }, testScenarioToString(testScenarioSet[i]));
    }
}

function testScenarioToString(testScenario) {
    var str = "Test drawing color managed OffscreenCanvas: " +
        "Canvas color params: " +
        testScenario.canvasColorSpace + ", " +
        testScenario.canvasPixelFormat +
        ";  OffscreenCanvas color params: " +
        testScenario.imageColorSpace + ", " +
        testScenario.imagePixelFormat;
    return str;
}

runAllTests();
</script>