blob: d22d0dbaf2367d8b73012391570a6597e97c2316 [file] [log] [blame]
<!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 p3Red = [0.823242, 0.031372, 0.015686, 1]; // SRGB(255,0,0,255)
var p3Green = [0.176392, 0.968262, 0.070557, 1]; // SRGB(0,255,0,255)
var p3Blue = [0, 0, 0.909668, 1]; // SRGB(0,0,255,255)
var p3Black = [0, 0, 0, 1]; // SRGB(0,0,0,255)
var p3OpaqueRed = [0.270508, 0.019608, 0.015686, 1]; // SRGB(155,27,27,255)
var p3OpaqueGreen = [0.066650, 0.317627, 0.035278, 1]; // SRGB(27,155,27,255)
var p3OpaqueBlue = [0.011765, 0.011765, 0.297852, 1]; // SRGB(27,27,155,255)
var p3OpaqueBlack = [0.011765, 0.011765, 0.011765, 1]; // SRGB(27,27,27,255)
// SRGB(155,27,27,128)
var p3TransparentRed = [0.270508, 0.019608, 0.015686, 0.501953];
// SRGB(27,155,27,128)
var p3TransparentGreen = [0.066650, 0.317627, 0.035278, 0.501953];
// SRGB(27,27,155,128)
var p3TransparentBlue = [0.011765, 0.011765, 0.297852, 0.501953];
// SRGB(27,27,27,128)
var p3TransparentBlack = [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: 'p3', pixelFormat:'float16'});
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(imageBitmap, 0, 0);
var tests;
if (colorInfo == 'fullColor')
tests = [[0, 0, p3Red, "This pixel should be P3 red."],
[39, 0, p3Green, "This pixel should be P3 green."],
[0, 39, p3Blue, "This pixel should be P3 blue."],
[39, 39, p3Black, "This pixel should be P3 black."],
[41, 41, p3Black, "This pixel should be P3 black."]];
else if (colorInfo == 'opaque')
tests = [[0, 0, p3OpaqueRed, "This pixel should be P3 like red."],
[39, 0, p3OpaqueGreen, "This pixel should be P3 like green."],
[0, 39, p3OpaqueBlue, "This pixel should be P3 like blue."],
[39, 39, p3OpaqueBlack, "This pixel should be P3 like black."],
[41, 41, p3Black, "This pixel should be P3 black."]];
else if (colorInfo == 'transparent')
tests = [[0, 0, p3TransparentRed,
"This pixel should be P3 transparent red."],
[39, 0, p3TransparentGreen,
"This pixel should be P3 transparent green."],
[0, 39, p3TransparentBlue,
"This pixel should be P3 transparent blue."],
[39, 39, p3TransparentBlack,
"This pixel should be P3 transparent black."],
[41, 41, p3Black, "This pixel should be P3 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: 'p3', pixelFormat:'float16'});
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(imageBitmap, 0, 0);
var tests;
if (colorInfo === 'fullColor')
tests = [[0, 0, p3Red, "This pixel should be P3 red."],
[19, 0, p3Green, "This pixel should be P3 green."],
[0, 19, p3Blue, "This pixel should be P3 blue."],
[19, 19, p3Black, "This pixel should be P3 black."],
[21, 21, p3Black, "This pixel should be P3 black."]];
else if (colorInfo === 'opaque')
tests = [[0, 0, p3OpaqueRed, "This pixel should be P3 like red."],
[19, 0, p3OpaqueGreen, "This pixel should be P3 like green."],
[0, 19, p3OpaqueBlue, "This pixel should be P3 like blue."],
[19, 19, p3OpaqueBlack, "This pixel should be P3 like black."],
[21, 21, p3Black, "This pixel should be P3 black."]];
else if (colorInfo === 'transparent')
tests = [[0, 0, p3TransparentRed,
"This pixel should be P3 transparent red."],
[19, 0, p3TransparentGreen,
"This pixel should be P3 transparent green."],
[0, 19, p3TransparentBlue,
"This pixel should be P3 transparent blue."],
[19, 19, p3TransparentBlack,
"This pixel should be P3 transparent black."],
[21, 21, p3Black, "This pixel should be P3 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: 'p3', pixelFormat:'float16'});
var ctx2 = canvas2.getContext('2d',
{colorSpace: 'p3', 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: "p3", resizeWidth: 40,
resizeHeight: 40, resizeQuality: "high"}),
createImageBitmap(source, {colorSpaceConversion: "p3", resizeWidth: 40,
resizeHeight: 40, resizeQuality: "medium"}),
createImageBitmap(source, {colorSpaceConversion: "p3", resizeWidth: 40,
resizeHeight: 40, resizeQuality: "low"}),
createImageBitmap(source, {colorSpaceConversion: "p3", resizeWidth: 40,
resizeHeight: 40, resizeQuality: "pixelated"}),
createImageBitmap(source, 5, 5, 10, 10, {colorSpaceConversion: "p3",
resizeWidth: 20, resizeHeight: 20, resizeQuality: "high"}),
createImageBitmap(source, 5, 5, 10, 10, {colorSpaceConversion: "p3",
resizeWidth: 20, resizeHeight: 20, resizeQuality: "medium"}),
createImageBitmap(source, 5, 5, 10, 10, {colorSpaceConversion: "p3",
resizeWidth: 20, resizeHeight: 20, resizeQuality: "low"}),
createImageBitmap(source, 5, 5, 10, 10, {colorSpaceConversion: "p3",
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 P3 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 P3 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 P3 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 P3 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 P3 from an opaque SRGB HTMLCanvasElement with resize.');
// HTMLCanvasElement - Opaque Linear RGB
promise_test(function() {
var testCanvas = initializeTestCanvas('srgb', 'float16');
return testImageBitmapOpaque(testCanvas);
}, 'createImageBitmap in P3 from an opaque linear RGB HTMLCanvasElement with resize.');
// HTMLCanvasElement - Opaque Rec2020
promise_test(function() {
var testCanvas = initializeTestCanvas('rec2020', 'float16');
return testImageBitmapOpaque(testCanvas);
}, 'createImageBitmap in P3 from an opaque Rec2020 HTMLCanvasElement with resize.');
// HTMLCanvasElement - Opaque P3
promise_test(function() {
var testCanvas = initializeTestCanvas('p3', 'float16');
return testImageBitmapOpaque(testCanvas);
}, 'createImageBitmap in P3 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 P3 from a transparent SRGB HTMLCanvasElement with resize.');
// HTMLCanvasElement - Transparent Linear RGB
promise_test(function() {
var testCanvas = initializeTestCanvasTransparent('srgb', 'float16');
return testImageBitmapTransparent(testCanvas);
}, 'createImageBitmap in P3 from a transparent linear RGB HTMLCanvasElement with resize.');
// HTMLCanvasElement - Transparent Rec2020
promise_test(function() {
var testCanvas = initializeTestCanvasTransparent('rec2020', 'float16');
return testImageBitmapTransparent(testCanvas);
}, 'createImageBitmap in P3 from a transparent Rec2020 HTMLCanvasElement with resize.');
// HTMLCanvasElement - Transparent P3
promise_test(function() {
var testCanvas = initializeTestCanvasTransparent('p3', 'float16');
return testImageBitmapTransparent(testCanvas);
}, 'createImageBitmap in P3 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 P3 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 P3 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 P3 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 P3 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 P3 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 P3 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 P3 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 P3 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 P3 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 P3 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 P3 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 P3 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 P3 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 P3 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 P3 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 P3 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 P3 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 P3 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 P3 from an opaque SRGB OffscreenCanvas with resize.');
//OffscreenCanvas - Opaque Linear RGB
promise_test(function() {
var offscreen = initializeOffscreenCanvas('srgb', 'float16');
return testImageBitmapOpaque(offscreen);
}, 'createImageBitmap in P3 from an opaque linear RGB OffscreenCanvas with resize.');
//OffscreenCanvas - Opaque Rec2020
promise_test(function() {
var offscreen = initializeOffscreenCanvas('rec2020', 'float16');
return testImageBitmapOpaque(offscreen);
}, 'createImageBitmap in P3 from an opaque Rec2020 OffscreenCanvas with resize.');
//OffscreenCanvas - Opaque P3
promise_test(function() {
var offscreen = initializeOffscreenCanvas('p3', 'float16');
return testImageBitmapOpaque(offscreen);
}, 'createImageBitmap in P3 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 P3 from a transparent SRGB OffscreenCanvas with resize.');
//OffscreenCanvas - Transparent Linear RGB
promise_test(function() {
var offscreen = initializeOffscreenCanvasTransparent('srgb', 'float16');
return testImageBitmapTransparent(offscreen);
}, 'createImageBitmap in P3 from a transparent linear RGB OffscreenCanvas with resize.');
//OffscreenCanvas - Transparent Rec2020
promise_test(function() {
var offscreen = initializeOffscreenCanvasTransparent('rec2020', 'float16');
return testImageBitmapTransparent(offscreen);
}, 'createImageBitmap in P3 from a transparent Rec2020 OffscreenCanvas with resize.');
//OffscreenCanvas - Transparent P3
promise_test(function() {
var offscreen = initializeOffscreenCanvasTransparent('p3', 'float16');
return testImageBitmapTransparent(offscreen);
}, 'createImageBitmap in P3 from a transparent P3 OffscreenCanvas with resize.');
////////////////////////////////////////////////////////////////////////////////
</script>