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

// Reference values generated by:
// https://fiddle.skia.org/c/8e7238b69744678e75b3e34715b29e0b

var transparentBlack = [0, 0, 0, 0];

// sRGB(255,0,0,255)
var rec2020Red = [0.82324, 0.32935, 0.18030, 1.00000];
// sRGB(0,255,0,255)
var rec2020Green = [0.63135, 0.96436, 0.36450, 1.00000];
// sRGB(0,0,255,255)
var rec2020Blue = [0.27051, 0.15283, 0.95654, 1.00000];
// sRGB(0,0,0,255)
var rec2020Black = [0.00000, 0.00000, 0.00000, 1.00000];

// sRGB(155,27,27,255)
var rec2020OpaqueRed = [0.52148, 0.23914, 0.18030, 1.00000];
// sRGB(27,155,27,255)
var rec2020OpaqueGreen = [0.40771, 0.60742, 0.25879, 1.00000];
// sRGB(27,27,155,255)
var rec2020OpaqueBlue = [0.21558, 0.17249, 0.59961, 1.00000];
// sRGB(27,27,27,255)
var rec2020OpaqueBlack = [0.15283, 0.15283, 0.15283, 1.00000];

// sRGB(155,27,27,128)
var rec2020TransparentRed = [0.52148, 0.23914, 0.18030, 0.50195];
// sRGB(27,155,27,128)
var rec2020TransparentGreen = [0.40771, 0.60742, 0.25879, 0.50195];
// sRGB(27,27,155,128)
var rec2020TransparentBlue = [0.21558, 0.17249, 0.59961, 0.50195];
// sRGB(27,27,27,128)
var rec2020TransparentBlack = [0.15283, 0.15283, 0.15283, 0.50195];

// sRGB(226,31,31,128)
var rec2020TransparentRedImage = [0.73682, 0.32153, 0.21960, 0.50195];
// sRGB(226,31,31,128)
var rec2020TransparentGreenImage = [0.56836, 0.86230, 0.34888, 0.50195];
// sRGB(226,31,31,128)
var rec2020TransparentBlueImage = [0.27832, 0.20386, 0.85059, 0.50195];
// sRGB(226,31,31,128)
var rec2020TransparentBlackImage = [0.16858, 0.16858, 0.16858, 0.50195];

function testPixels(ctx, tests, sourceType, imageDataSetting)
{
    var actual, expected, tolerance = 0.02;
    if (sourceType === 'video')
        tolerance = 0.04;
    for (var i = 0; i < tests.length; i++) {
        actual = ctx.getImageData(tests[i][0], tests[i][1], 1, 1, imageDataSetting).data;
        expected = tests[i][2];
        assert_true(actual.length === expected.length);
        for (var j = 0; j < actual.length; j++)
           assert_approx_equals(actual[j], expected[j], 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, transparentBlack, "This pixel should be transparent 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, transparentBlack, "This pixel should be transparent 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, transparentBlack,
                     "This pixel should be transparent black."]];
    else if (colorInfo === 'transparent-image')
        tests = [[0, 0, rec2020TransparentRedImage,
                     "This pixel should be Rec 2020 transparent red."],
                 [39, 0, rec2020TransparentGreenImage,
                     "This pixel should be Rec 2020 transparent green."],
                 [0, 39, rec2020TransparentBlueImage,
                     "This pixel should be Rec 2020 transparent blue."],
                 [39, 39, rec2020TransparentBlackImage,
                     "This pixel should be Rec 2020 transparent black."],
                 [41, 41, transparentBlack,
                     "This pixel should be transparent black."]];
    testPixels(ctx, tests, sourceType, {colorSpace: 'rec2020', storageFormat:'float32'});
}

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, transparentBlack, "This pixel should be transparent 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, transparentBlack,
                     "This pixel should be transparent 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, transparentBlack,
                     "This pixel should be transparent black."]];
    else if (colorInfo === 'transparent-image')
        tests = [[0, 0, rec2020TransparentRedImage,
                     "This pixel should be Rec2020 transparent red."],
                 [19, 0, rec2020TransparentGreenImage,
                     "This pixel should be Rec2020 transparent green."],
                 [0, 19, rec2020TransparentBlueImage,
                     "This pixel should be Rec2020 transparent blue."],
                 [19, 19, rec2020TransparentBlackImage,
                     "This pixel should be Rec2020 transparent black."],
                 [21, 21, transparentBlack,
                     "This pixel should be transparent black."]];
    testPixels(ctx, tests, sourceType, {colorSpace: 'rec2020', storageFormat:'float32'});
}


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'});
    var imageDataSetting = {colorSpace: 'rec2020', storageFormat:'float32'}
    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, imageDataSetting).data;
    var data2 = ctx2.getImageData(0, 0, 50, 50, imageDataSetting).data;
    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, {
            resizeWidth: 40, resizeHeight: 40, resizeQuality: "high"}),
        createImageBitmap(source, {
            resizeWidth: 40, resizeHeight: 40, resizeQuality: "medium"}),
        createImageBitmap(source, {
            resizeWidth: 40, resizeHeight: 40, resizeQuality: "low"}),
        createImageBitmap(source, {
            resizeWidth: 40, resizeHeight: 40, resizeQuality: "pixelated"}),
        createImageBitmap(source, 5, 5, 10, 10, {
            resizeWidth: 20, resizeHeight: 20, resizeQuality: "high"}),
        createImageBitmap(source, 5, 5, 10, 10, {
            resizeWidth: 20, resizeHeight: 20, resizeQuality: "medium"}),
        createImageBitmap(source, 5, 5, 10, 10, {
            resizeWidth: 20, resizeHeight: 20, resizeQuality: "low"}),
        createImageBitmap(source, 5, 5, 10, 10, {
            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 testImageBitmapFromTransparentImage(source)
{
    return testImageBitmap(source, 'transparent-image', '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(testImageBitmapFromTransparentImage)));
}, 'createImageBitmap in Rec2020 from a transparent sRGB HTMLImageElement (BMP, \
ICO, PNG, WEBP) with resize.');

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

// 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.');

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

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

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

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

// HTMLCanvasElement - Opaque e-sRGB
promise_test(function() {
    var testCanvas = initializeTestCanvas('srgb', 'float16');
    return testImageBitmapOpaque(testCanvas);
}, 'createImageBitmap in Rec2020 from an opaque e-sRGB 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('display-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', 'uint8');
    return testImageBitmapTransparent(testCanvas);
}, 'createImageBitmap in Rec2020 from a transparent sRGB HTMLCanvasElement with resize.');

// HTMLCanvasElement - Transparent e-sRGB
promise_test(function() {
    var testCanvas = initializeTestCanvasTransparent('srgb', 'float16');
    return testImageBitmapTransparent(testCanvas);
}, 'createImageBitmap in Rec2020 from a transparent e-sRGB 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('display-p3', 'float16');
    return testImageBitmapTransparent(testCanvas);
}, 'createImageBitmap in Rec2020 from a transparent P3 HTMLCanvasElement with resize.');

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

// Blob from file - 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 from file - 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(testImageBitmapFromTransparentImage);
}, 'createImageBitmap in Rec2020 from a transparent sRGB Blob with resize.');

// Color managed blob from canvas
function testCreateImageBitmapFromColorManagedBlob(colorSpace, pixelFormat,
                                                   isTransparent) {
    let canvasPixelFormat = 'uint8';
    if (pixelFormat == 'uint16')
        canvasPixelFormat = 'float16';
    var testCanvas;
    if (isTransparent)
      testCanvas = initializeTestCanvasTransparent('srgb', canvasPixelFormat);
    else
      testCanvas = initializeTestCanvas('srgb', canvasPixelFormat);
    var encodeOptions = {};
    encodeOptions.quality = 1;
    encodeOptions.type = 'image/png';
    encodeOptions.colorSpace = colorSpace;
    encodeOptions.pixelFormat = pixelFormat;

    var t = async_test('createImageBitmap in Rec2020 from color managed Blob' +
        ' with resize. blobColorSpace: ' + colorSpace + ', blobPixelFormat: ' +
        pixelFormat + ', transparency: ' + isTransparent);
    testCanvas.convertToBlob(encodeOptions).then(
        t.step_func_done(function(blob) {
            if (isTransparent)
                testImageBitmapTransparent(blob);
            else
                testImageBitmapOpaque(blob);
        }));
}

function runAllCreateImageBitmapFromColorManagedBlobTests() {
    var blobColorSpaces = ['srgb', 'rec2020', 'display-p3'];
    var blobPixelFormats = ['uint8', 'uint16'];
    var transparencies = [false, true];
    for (var i = 0; i < blobColorSpaces.length; i++)
        for (var j = 0; j < blobPixelFormats.length; j++)
            for (var k = 0; k < transparencies.length; k++) {
                testCreateImageBitmapFromColorManagedBlob(blobColorSpaces[i],
                    blobPixelFormats[j], transparencies[k]);
            }
}

runAllCreateImageBitmapFromColorManagedBlobTests();
var image_data_setting = {colorSpace: 'rec2020', storageFormat:'float32'}
////////////////////////////////////////////////////////////////////////////////

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

// ImageData - Opaque e-sRGB
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,
        {colorSpace: 'srgb', storageFormat:'float32'});
    return testImageBitmapOpaque(data);
}, 'createImageBitmap in Rec2020 from an opaque e-sRGB 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,
        {colorSpace: 'rec2020', storageFormat:'float32'});
    return testImageBitmapOpaque(data);
}, 'createImageBitmap in Rec2020 from an opaque Rec2020 ImageData with resize.');

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

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

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

// ImageData - Transparent e-sRGB
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,
        {colorSpace: 'srgb', storageFormat:'float32'});
    return testImageBitmapTransparent(data);
}, 'createImageBitmap in Rec2020 from a transparent e-sRGB 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,
        {colorSpace: 'rec2020', storageFormat:'float32'});
    return testImageBitmapTransparent(data);
}, 'createImageBitmap in Rec2020 from a transparent Rec2020 ImageData with resize.');

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

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

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

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

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

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

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

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

// ImageBitmap - Transparent P3
promise_test(function() {
    var testCanvas = initializeTestCanvasTransparent('display-p3', 'float16');
    return createImageBitmap(testCanvas).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', 'uint8');
    return testImageBitmapOpaque(offscreen);
}, 'createImageBitmap in Rec2020 from an opaque sRGB OffscreenCanvas with resize.');

//OffscreenCanvas - Opaque e-sRGB
promise_test(function() {
    var offscreen = initializeOffscreenCanvas('srgb', 'float16');
    return testImageBitmapOpaque(offscreen);
}, 'createImageBitmap in Rec2020 from an opaque e-sRGB 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('display-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', 'uint8');
    return testImageBitmapTransparent(offscreen);
}, 'createImageBitmap in Rec2020 from a transparent sRGB OffscreenCanvas with resize.');

//OffscreenCanvas - Transparent e-sRGB
promise_test(function() {
    var offscreen = initializeOffscreenCanvasTransparent('srgb', 'float16');
    return testImageBitmapTransparent(offscreen);
}, 'createImageBitmap in Rec2020 from a transparent e-sRGB 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('display-p3', 'float16');
    return testImageBitmapTransparent(offscreen);
}, 'createImageBitmap in Rec2020 from a transparent P3 OffscreenCanvas with resize.');

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

</script>