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

// The reference values are generated by calling SkImage::makeColorSpace()
// in a Skia fiddle as this is the API used in ImageBitmap for color conversion.
// SkColorSpaceXform() may generate slightly different results.
// Please see: https://fiddle.skia.org/c/94578944d9d52c2b4c2cadda88a4e204

var rec2020Red =   [0.627441, 0.070557, 0.015686, 1]; // SRGB(255,0,0,255)
var rec2020Green = [0.329346, 0.917480, 0.086243, 1]; // SRGB(0,255,0,255)
var rec2020Blue =  [0.043121, 0.011765, 0.894043, 1]; // SRGB(0,0,255,255)
var rec2020Black = [0, 0, 0, 1];                      // SRGB(0,0,0,255)

// SRGB(155,27,27,255)
var rec2020OpaqueRed = [0.207764, 0.031372, 0.015686, 1];
// SRGB(27,155,27,255)
var rec2020OpaqueGreen = [0.113708, 0.301758, 0.039215, 1];
// SRGB(27,27,155,255)
var rec2020OpaqueBlue = [0.023529, 0.015686, 0.293945, 1];
// SRGB(27,27,27,255)
var rec2020OpaqueBlack = [0.011765, 0.011765, 0.011765, 1];

// SRGB(155,27,27,128)
var rec2020TransparentRed = [0.207764, 0.031372, 0.015686, 0.501953];
// SRGB(27,155,27,128)
var rec2020TransparentGreen = [0.113708, 0.301758, 0.039215, 0.501953];
// SRGB(27,27,155,128)
var rec2020TransparentBlue = [0.023529, 0.015686, 0.293945, 0.501953];
// SRGB(27,27,27,128)
var rec2020TransparentBlack = [0.011765, 0.011765, 0.011765, 0.501953];

function testPixels(ctx, tests, sourceType)
{
    var actual, expected, tolerance = 0.01;
    if (sourceType === 'video')
        tolerance = 0.03;
    for (var i = 0; i < tests.length; i++) {
        actual = ctx.getImageData(tests[i][0], tests[i][1], 1, 1).dataUnion;
        expected = tests[i][2];
        assert_true(actual.length === expected.length);
       for (var i = 0; i < actual.length; i++)
           assert_approx_equals(actual[i], expected[i], tolerance, tests[i][3]);
    }
}

function checkNoCrop(imageBitmap, colorInfo, sourceType)
{
    var canvas = document.createElement('canvas');
    canvas.width = 50;
    canvas.height = 50;
    var ctx = canvas.getContext('2d',
        {colorSpace: 'rec2020', pixelFormat:'float16'});
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(imageBitmap, 0, 0);
    var tests;
    if (colorInfo == 'fullColor')
        tests = [[0, 0, rec2020Red, "This pixel should be Rec2020 red."],
                 [39, 0, rec2020Green, "This pixel should be Rec2020 green."],
                 [0, 39, rec2020Blue, "This pixel should be Rec2020 blue."],
                 [39, 39, rec2020Black, "This pixel should be Rec2020 black."],
                 [41, 41, rec2020Black, "This pixel should be Rec2020 black."]];
    else if (colorInfo == 'opaque')
        tests = [[0, 0, rec2020OpaqueRed,
                     "This pixel should be Rec2020 like red."],
                 [39, 0, rec2020OpaqueGreen,
                     "This pixel should be Rec2020 like green."],
                 [0, 39, rec2020OpaqueBlue,
                     "This pixel should be Rec2020 like blue."],
                 [39, 39, rec2020OpaqueBlack,
                     "This pixel should be Rec2020 like black."],
                 [41, 41, rec2020Black,
                     "This pixel should be Rec2020 black."]];
    else if (colorInfo == 'transparent')
        tests = [[0, 0, rec2020TransparentRed,
                     "This pixel should be Rec2020 transparent red."],
                 [39, 0, rec2020TransparentGreen,
                     "This pixel should be Rec2020 transparent green."],
                 [0, 39, rec2020TransparentBlue,
                     "This pixel should be Rec2020 transparent blue."],
                 [39, 39, rec2020TransparentBlack,
                     "This pixel should be Rec2020 transparent black."],
                 [41, 41, rec2020Black, "This pixel should be Rec2020 black."]];
    testPixels(ctx, tests, sourceType);
}

function checkCrop(imageBitmap, colorInfo, sourceType)
{
    var canvas = document.createElement('canvas');
    canvas.width = 50;
    canvas.height = 50;
    var ctx = canvas.getContext('2d',
        {colorSpace: 'rec2020', pixelFormat:'float16'});
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(imageBitmap, 0, 0);
    var tests;
    if (colorInfo === 'fullColor')
        tests = [[0, 0, rec2020Red, "This pixel should be Rec2020 red."],
                 [19, 0, rec2020Green, "This pixel should be Rec2020 green."],
                 [0, 19, rec2020Blue, "This pixel should be Rec2020 blue."],
                 [19, 19, rec2020Black, "This pixel should be Rec2020 black."],
                 [21, 21, rec2020Black, "This pixel should be Rec2020 black."]];
    else if (colorInfo === 'opaque')
        tests = [[0, 0, rec2020OpaqueRed,
                     "This pixel should be Rec2020 like red."],
                 [19, 0, rec2020OpaqueGreen,
                     "This pixel should be Rec2020 like green."],
                 [0, 19, rec2020OpaqueBlue,
                     "This pixel should be Rec2020 like blue."],
                 [19, 19, rec2020OpaqueBlack,
                     "This pixel should be Rec2020 like black."],
                 [21, 21, rec2020Black, "This pixel should be Rec2020 black."]];
    else if (colorInfo === 'transparent')
        tests = [[0, 0, rec2020TransparentRed,
                     "This pixel should be Rec2020 transparent red."],
                 [19, 0, rec2020TransparentGreen,
                     "This pixel should be Rec2020 transparent green."],
                 [0, 19, rec2020TransparentBlue,
                     "This pixel should be Rec2020 transparent blue."],
                 [19, 19, rec2020TransparentBlack,
                     "This pixel should be Rec2020 transparent black."],
                 [21, 21, rec2020Black, "This pixel should be Rec2020 black."]];
    testPixels(ctx, tests, sourceType);
}


function compareBitmaps(bitmap1, bitmap2)
{
    var canvas1 = document.createElement('canvas');
    var canvas2 = document.createElement('canvas');
    canvas1.width = 50;
    canvas1.height = 50;
    canvas2.width = 50;
    canvas2.height = 50;
    var ctx1 = canvas1.getContext('2d',
        {colorSpace: 'rec2020', pixelFormat:'float16'});
    var ctx2 = canvas2.getContext('2d',
        {colorSpace: 'rec2020', pixelFormat:'float16'});
    ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
    ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
    ctx1.drawImage(bitmap1, 0, 0);
    ctx2.drawImage(bitmap2, 0, 0);
    var data1 = ctx1.getImageData(0, 0, 50, 50).dataUnion;
    var data2 = ctx2.getImageData(0, 0, 50, 50).dataUnion;
    var dataMatched = true;
    for (var i = 0; i < data1.length; i++) {
        if (data1[i] != data2[i]) {
            dataMatched = false;
            break;
        }
    }
    assert_false(dataMatched);
}

function testImageBitmap(source, colorInfo, sourceType)
{
    return Promise.all([
        createImageBitmap(source, {colorSpaceConversion: "rec2020",
            resizeWidth: 40, resizeHeight: 40, resizeQuality: "high"}),
        createImageBitmap(source, {colorSpaceConversion: "rec2020",
            resizeWidth: 40, resizeHeight: 40, resizeQuality: "medium"}),
        createImageBitmap(source, {colorSpaceConversion: "rec2020",
            resizeWidth: 40, resizeHeight: 40, resizeQuality: "low"}),
        createImageBitmap(source, {colorSpaceConversion: "rec2020",
            resizeWidth: 40, resizeHeight: 40, resizeQuality: "pixelated"}),
        createImageBitmap(source, 5, 5, 10, 10, {colorSpaceConversion: "rec2020",
            resizeWidth: 20, resizeHeight: 20, resizeQuality: "high"}),
        createImageBitmap(source, 5, 5, 10, 10, {colorSpaceConversion: "rec2020",
            resizeWidth: 20, resizeHeight: 20, resizeQuality: "medium"}),
        createImageBitmap(source, 5, 5, 10, 10, {colorSpaceConversion: "rec2020",
            resizeWidth: 20, resizeHeight: 20, resizeQuality: "low"}),
        createImageBitmap(source, 5, 5, 10, 10, {colorSpaceConversion: "rec2020",
            resizeWidth: 20, resizeHeight: 20, resizeQuality: "pixelated"}),
    ]).then(([noCropHigh, noCropMedium, noCropLow, noCropPixelated, cropHigh,
              cropMedium, cropLow, cropPixelated]) => {
        checkNoCrop(noCropHigh, colorInfo, sourceType);
        checkNoCrop(noCropMedium, colorInfo, sourceType);
        checkNoCrop(noCropLow, colorInfo, sourceType);
        checkNoCrop(noCropPixelated, colorInfo, sourceType);
        checkCrop(cropHigh, colorInfo, sourceType);
        checkCrop(cropMedium, colorInfo, sourceType);
        checkCrop(cropLow, colorInfo, sourceType);
        checkCrop(cropPixelated, colorInfo, sourceType);
        // Brute-force comparison among all bitmaps is too expensive.
        // In case of SVG, resize quality does not affect the images, so all
        // of them are the same and the tests fail. Since, we ignore this test
        // set for SVG.
        if (sourceType != 'svg') {
            compareBitmaps(noCropHigh, noCropMedium);
            compareBitmaps(noCropLow, noCropPixelated);
            compareBitmaps(cropHigh, cropMedium);
            compareBitmaps(cropLow, cropPixelated);
        }
    });
}

function testImageBitmapTransparent(source)
{
    return testImageBitmap(source, 'transparent', 'general');
}

function testImageBitmapFromVideo(source)
{
    return testImageBitmap(source, 'fullColor', 'video');
}

function testImageBitmapOpaque(source)
{
    return testImageBitmap(source, 'opaque', 'general');
}

function testImageBitmapFromSVG(source)
{
    return testImageBitmap(source, 'opaque', 'svg');
}

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

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

////////////////////////////////////////////////////////////////////////////////

// HTMLImageElement - Opaque SRGB
// File formats: Bitmap, GIF, ICO, JPEG, PNG, WEBP
promise_test(function() {
    return Promise.all(['bmp', 'gif', 'ico', 'jpg', 'png', 'webp'].map(
        ext => new Promise((resolve,reject) => {
            var image = new Image();
            image.onload = function() {
                resolve(image);
            }
            image.src = 'resources/pattern-srgb.' + ext;
        }).then(testImageBitmapOpaque)));
}, 'createImageBitmap in Rec2020 from an opaque SRGB HTMLImageElement (BMP, \
GIF, ICO, JPG, PNG, WEBP) with resize.');

// HTMLImageElement - Transparent SRGB
// File formats: Bitmap, GIF, ICO, PNG, WEBP
promise_test(function() {
    return Promise.all(['bmp', 'ico', 'png', 'webp'].map(
        ext => new Promise((resolve,reject) => {
            var image = new Image();
            image.onload = function() {
                resolve(image);
            }
            image.src = 'resources/pattern-srgb-transparent.' + ext;
        }).then(testImageBitmapTransparent)));
}, 'createImageBitmap in Rec2020 from a transparent SRGB HTMLImageElement (BMP, \
ICO, PNG, WEBP) with resize.');

// TODO(zakerinasab): crbug.com/668547
// Add at least two more test scenarios for loading the image element from P3
// and Rec2020 images.

////////////////////////////////////////////////////////////////////////////////

// SVG Image - SRGB
promise_test(function() {
    return new Promise((resolve, reject) => {
        var image = new Image();
        image.onload = function() {
            resolve(image);
        }
        image.src = 'resources/pattern-srgb.svg'
    }).then(testImageBitmapFromSVG);
}, 'createImageBitmap in Rec2020 from a SRGB SVG image with resize.');

// TODO(zakerinasab): crbug.com/668547
// Add at least two more tests for loading the image element from P3 and Rec2020
// SVG images.

////////////////////////////////////////////////////////////////////////////////

// HTMLVideoElement - SRGB
promise_test(function() {
    return new Promise((resolve, reject) => {
        var video = document.createElement("video");
        video.oncanplaythrough = function() {
            resolve(video);
        }
        video.src = 'resources/pattern-srgb-fullcolor.ogv'
    }).then(testImageBitmapFromVideo);
}, 'createImageBitmap in Rec2020 from a SRGB HTMLVideoElement with resize.');

// TODO(zakerinasab): crbug.com/668547
// Add at least two more tests for loading the video element from P3 and Rec2020
// videos.

////////////////////////////////////////////////////////////////////////////////

// HTMLCanvasElement - Opaque SRGB
promise_test(function() {
    var testCanvas = initializeTestCanvas('srgb', '8-8-8-8');
    return testImageBitmapOpaque(testCanvas);
}, 'createImageBitmap in Rec2020 from an opaque SRGB HTMLCanvasElement with resize.');

// HTMLCanvasElement - Opaque Linear RGB
promise_test(function() {
    var testCanvas = initializeTestCanvas('srgb', 'float16');
    return testImageBitmapOpaque(testCanvas);
}, 'createImageBitmap in Rec2020 from an opaque linear RGB HTMLCanvasElement with resize.');

// HTMLCanvasElement - Opaque Rec2020
promise_test(function() {
    var testCanvas = initializeTestCanvas('rec2020', 'float16');
    return testImageBitmapOpaque(testCanvas);
}, 'createImageBitmap in Rec2020 from an opaque Rec2020 HTMLCanvasElement with resize.');

// HTMLCanvasElement - Opaque P3
promise_test(function() {
    var testCanvas = initializeTestCanvas('p3', 'float16');
    return testImageBitmapOpaque(testCanvas);
}, 'createImageBitmap in Rec2020 from an opaque P3 HTMLCanvasElement with resize.');

////////////////////////////////////////////////////////////////////////////////

// HTMLCanvasElement - Transparent SRGB
promise_test(function() {
    var testCanvas = initializeTestCanvasTransparent('srgb', '8-8-8-8');
    return testImageBitmapTransparent(testCanvas);
}, 'createImageBitmap in Rec2020 from a transparent SRGB HTMLCanvasElement with resize.');

// HTMLCanvasElement - Transparent Linear RGB
promise_test(function() {
    var testCanvas = initializeTestCanvasTransparent('srgb', 'float16');
    return testImageBitmapTransparent(testCanvas);
}, 'createImageBitmap in Rec2020 from a transparent linear RGB HTMLCanvasElement with resize.');

// HTMLCanvasElement - Transparent Rec2020
promise_test(function() {
    var testCanvas = initializeTestCanvasTransparent('rec2020', 'float16');
    return testImageBitmapTransparent(testCanvas);
}, 'createImageBitmap in Rec2020 from a transparent Rec2020 HTMLCanvasElement with resize.');

// HTMLCanvasElement - Transparent P3
promise_test(function() {
    var testCanvas = initializeTestCanvasTransparent('p3', 'float16');
    return testImageBitmapTransparent(testCanvas);
}, 'createImageBitmap in Rec2020 from a transparent P3 HTMLCanvasElement with resize.');

////////////////////////////////////////////////////////////////////////////////

// Blob - Opaque SRGB
promise_test(function() {
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", 'resources/pattern-srgb.png');
        xhr.responseType = 'blob';
        xhr.send();
        xhr.onload = function() {
            resolve(xhr.response);
        };
    }).then(testImageBitmapOpaque);
}, 'createImageBitmap in Rec2020 from an opaque SRGB Blob with resize.');

// Blob - Transparent SRGB
promise_test(function() {
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", 'resources/pattern-srgb-transparent.png');
        xhr.responseType = 'blob';
        xhr.send();
        xhr.onload = function() {
            resolve(xhr.response);
        };
    }).then(testImageBitmapTransparent);
}, 'createImageBitmap in Rec2020 from a transparent SRGB Blob with resize.');

// TODO(zakerinasab): crbug.com/668547
// Add at least two more tests for loading the blob from P3 and Rec2020 images.

////////////////////////////////////////////////////////////////////////////////

// ImageData - Opaque SRGB
promise_test(function() {
    var canvas = initializeTestCanvas('srgb', '8-8-8-8');
    var ctx = canvas.getContext('2d');
    var data = ctx.getImageData(0, 0, 20, 20);
    return testImageBitmapOpaque(data);
}, 'createImageBitmap in Rec2020 from an opaque SRGB ImageData with resize.');

// ImageData - Opaque Linear RGB
promise_test(function() {
    var canvas = initializeTestCanvas('srgb', 'float16');
    var ctx = canvas.getContext('2d',
        {colorSpace: 'srgb', pixelFormat:'float16'});
    var data = ctx.getImageData(0, 0, 20, 20);
    return testImageBitmapOpaque(data);
}, 'createImageBitmap in Rec2020 from an opaque Linear RGB ImageData with resize.');

// ImageData - Opaque Rec2020
promise_test(function() {
    var canvas = initializeTestCanvas('rec2020', 'float16');
    var ctx = canvas.getContext('2d',
        {colorSpace: 'rec2020', pixelFormat:'float16'});
    var data = ctx.getImageData(0, 0, 20, 20);
    return testImageBitmapOpaque(data);
}, 'createImageBitmap in Rec2020 from an opaque Rec2020 ImageData with resize.');

// ImageData - Opaque P3
promise_test(function() {
    var canvas = initializeTestCanvas('p3', 'float16');
    var ctx = canvas.getContext('2d',
        {colorSpace: 'p3', pixelFormat:'float16'});
    var data = ctx.getImageData(0, 0, 20, 20);
    return testImageBitmapOpaque(data);
}, 'createImageBitmap in Rec2020 from an opaque P3 ImageData with resize.');

////////////////////////////////////////////////////////////////////////////////

// ImageData - Transparent SRGB
promise_test(function() {
    var canvas = initializeTestCanvasTransparent('srgb', '8-8-8-8');
    var ctx = canvas.getContext('2d');
    var data = ctx.getImageData(0, 0, 20, 20);
    return testImageBitmapTransparent(data);
}, 'createImageBitmap in Rec2020 from a transparent SRGB ImageData with resize.');

// ImageData - Transparent Linear RGB
promise_test(function() {
    var canvas = initializeTestCanvasTransparent('srgb', 'float16');
    var ctx = canvas.getContext('2d',
        {colorSpace: 'srgb', pixelFormat:'float16'});
    var data = ctx.getImageData(0, 0, 20, 20);
    return testImageBitmapTransparent(data);
}, 'createImageBitmap in Rec2020 from a transparent Linear RGB ImageData with resize.');

// ImageData - Transparent Rec2020
promise_test(function() {
    var canvas = initializeTestCanvasTransparent('rec2020', 'float16');
    var ctx = canvas.getContext('2d',
        {colorSpace: 'rec2020', pixelFormat:'float16'});
    var data = ctx.getImageData(0, 0, 20, 20);
    return testImageBitmapTransparent(data);
}, 'createImageBitmap in Rec2020 from a transparent Rec2020 ImageData with resize.');

// ImageData - Transparent P3
promise_test(function() {
    var canvas = initializeTestCanvasTransparent('p3', 'float16');
    var ctx = canvas.getContext('2d',
        {colorSpace: 'p3', pixelFormat:'float16'});
    var data = ctx.getImageData(0, 0, 20, 20);
    return testImageBitmapTransparent(data);
}, 'createImageBitmap in Rec2020 from a transparent P3 ImageData with resize.');

////////////////////////////////////////////////////////////////////////////////

// ImageBitmap - Opaque SRGB
promise_test(function() {
    var testCanvas = initializeTestCanvas('srgb', '8-8-8-8');
    return createImageBitmap(testCanvas).then(testImageBitmapOpaque);
}, 'createImageBitmap in Rec2020 from an opaque SRGB ImageBitmap with resize.');

// ImageBitmap - Opaque Linear RGB
promise_test(function() {
    var testCanvas = initializeTestCanvas('srgb', 'float16');
    return createImageBitmap(testCanvas, {colorSpaceConversion: "linear-rgb"}
        ).then(testImageBitmapOpaque);
}, 'createImageBitmap in Rec2020 from an opaque Linear RGB ImageBitmap with resize.');

// ImageBitmap - Opaque Rec2020
promise_test(function() {
    var testCanvas = initializeTestCanvas('rec2020', 'float16');
    return createImageBitmap(testCanvas, {colorSpaceConversion: "rec2020"}
        ).then(testImageBitmapOpaque);
}, 'createImageBitmap in Rec2020 from an opaque Rec2020 ImageBitmap with resize.');

// ImageBitmap - Opaque P3
promise_test(function() {
    var testCanvas = initializeTestCanvas('p3', 'float16');
    return createImageBitmap(testCanvas, {colorSpaceConversion: "p3"}
        ).then(testImageBitmapOpaque);
}, 'createImageBitmap in Rec2020 from an opaque P3 ImageBitmap with resize.');

////////////////////////////////////////////////////////////////////////////////

// ImageBitmap - Transparent SRGB
promise_test(function() {
    var testCanvas = initializeTestCanvasTransparent('srgb', '8-8-8-8');
    return createImageBitmap(testCanvas).then(testImageBitmapTransparent);
}, 'createImageBitmap in Rec2020 from a transparent SRGB ImageBitmap with resize.');

// ImageBitmap - Transparent Linear RGB
promise_test(function() {
    var testCanvas = initializeTestCanvasTransparent('srgb', 'float16');
    return createImageBitmap(testCanvas, {colorSpaceConversion: "linear-rgb"}
        ).then(testImageBitmapTransparent);
}, 'createImageBitmap in Rec2020 from a transparent Linear RGB ImageBitmap with resize.');

// ImageBitmap - Transparent Rec2020
promise_test(function() {
    var testCanvas = initializeTestCanvasTransparent('rec2020', 'float16');
    return createImageBitmap(testCanvas, {colorSpaceConversion: "rec2020"}
        ).then(testImageBitmapTransparent);
}, 'createImageBitmap in Rec2020 from a transparent Rec2020 ImageBitmap with resize.');

// ImageBitmap - Transparent P3
promise_test(function() {
    var testCanvas = initializeTestCanvasTransparent('p3', 'float16');
    return createImageBitmap(testCanvas, {colorSpaceConversion: "p3"}
        ).then(testImageBitmapTransparent);
}, 'createImageBitmap in Rec2020 from a transparent P3 ImageBitmap with resize.');

////////////////////////////////////////////////////////////////////////////////

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

//OffscreenCanvas - Opaque SRGB
promise_test(function() {
    var offscreen = initializeOffscreenCanvas('srgb', '8-8-8-8');
    return testImageBitmapOpaque(offscreen);
}, 'createImageBitmap in Rec2020 from an opaque SRGB OffscreenCanvas with resize.');

//OffscreenCanvas - Opaque Linear RGB
promise_test(function() {
    var offscreen = initializeOffscreenCanvas('srgb', 'float16');
    return testImageBitmapOpaque(offscreen);
}, 'createImageBitmap in Rec2020 from an opaque linear RGB OffscreenCanvas with resize.');

//OffscreenCanvas - Opaque Rec2020
promise_test(function() {
    var offscreen = initializeOffscreenCanvas('rec2020', 'float16');
    return testImageBitmapOpaque(offscreen);
}, 'createImageBitmap in Rec2020 from an opaque Rec2020 OffscreenCanvas with resize.');

//OffscreenCanvas - Opaque P3
promise_test(function() {
    var offscreen = initializeOffscreenCanvas('p3', 'float16');
    return testImageBitmapOpaque(offscreen);
}, 'createImageBitmap in Rec2020 from an opaque P3 OffscreenCanvas with resize.');

////////////////////////////////////////////////////////////////////////////////

function initializeOffscreenCanvasTransparent(canvasColorSpace, canvasPixelFormat)
{
    var canvas = document.createElement("canvas");
    canvas.width = 20;
    canvas.height = 20;
    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, 10, 10);
    ctx.fillStyle = "rgba(27, 155, 27, 0.5)";
    ctx.fillRect(10, 0, 10, 10);
    ctx.fillStyle = "rgba(27, 27, 155, 0.5)";
    ctx.fillRect(0, 10, 10, 10);
    ctx.fillStyle = "rgba(27, 27, 27, 0.5)";
    ctx.fillRect(10, 10, 10, 10);
    return offscreen;
}

//OffscreenCanvas - Transparent SRGB
promise_test(function() {
    var offscreen = initializeOffscreenCanvasTransparent('srgb', '8-8-8-8');
    return testImageBitmapTransparent(offscreen);
}, 'createImageBitmap in Rec2020 from a transparent SRGB OffscreenCanvas with resize.');

//OffscreenCanvas - Transparent Linear RGB
promise_test(function() {
    var offscreen = initializeOffscreenCanvasTransparent('srgb', 'float16');
    return testImageBitmapTransparent(offscreen);
}, 'createImageBitmap in Rec2020 from a transparent linear RGB OffscreenCanvas with resize.');

//OffscreenCanvas - Transparent Rec2020
promise_test(function() {
    var offscreen = initializeOffscreenCanvasTransparent('rec2020', 'float16');
    return testImageBitmapTransparent(offscreen);
}, 'createImageBitmap in Rec2020 from a transparent Rec2020 OffscreenCanvas with resize.');

//OffscreenCanvas - Transparent P3
promise_test(function() {
    var offscreen = initializeOffscreenCanvasTransparent('p3', 'float16');
    return testImageBitmapTransparent(offscreen);
}, 'createImageBitmap in Rec2020 from a transparent P3 OffscreenCanvas with resize.');

////////////////////////////////////////////////////////////////////////////////

</script>