<!DOCTYPE HTML>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script>
function testPixels(actualPixels, expectedPixels, pixelFormat)
{
var tolerance = 0;
if (pixelFormat == "float16")
tolerance = 0.01;
assert_array_approx_equals(actualPixels, expectedPixels, tolerance);
}
function generateFillStyle(red, green, blue, alpha) {
return "rgba(" + red + "," + green + "," + blue + "," + alpha + ")";
}
function createSourceCanvasAndExpectedResult(testScenario)
{
var canvas = document.createElement("canvas");
canvas.width = 2;
canvas.height = 2;
var ctx = canvas.getContext('2d', {colorSpace: testScenario.colorSpace,
pixelFormat: testScenario.pixelFormat});
ctx.fillStyle = generateFillStyle(155, 27, 27, testScenario.alpha);
ctx.fillRect(0, 0, 1, 1);
ctx.fillStyle = generateFillStyle(27, 155, 27, testScenario.alpha);
ctx.fillRect(1, 0, 1, 1);
ctx.fillStyle = generateFillStyle(27, 27, 155, testScenario.alpha);
ctx.fillRect(0, 1, 1, 1);
ctx.fillStyle = generateFillStyle(27, 27, 27, testScenario.alpha);
ctx.fillRect(1, 1, 1, 1);
imageData = ctx.getImageData(0, 0, 2, 2, testScenario.colorSetting).data;
var result = {};
result.canvas = canvas;
result.expectedPixels = imageData;
return result;
}
function testScenarioToString(testScenario) {
var str = "Source color space: " + testScenario.colorSpace +
", pixel format: " + testScenario.pixelFormat +
", alpha: " + testScenario.alpha;
if (testScenario.hasOwnProperty('colorSpaceConversion'))
str = str + ", intermediate color space: " +
testScenario.colorSpaceConversion;
return str;
}
function runToBlobTest(testScenario) {
var initVars = createSourceCanvasAndExpectedResult(testScenario);
var srcCanvas = initVars.canvas;
var expectedPixels = initVars.expectedPixels;
var image = new Image();
var t_dataurl = async_test("Test if toBlob is color managed: " +
testScenarioToString(testScenario));
image.onload = t_dataurl.step_func_done(function() {
var dstCanvas = document.createElement("canvas");
dstCanvas.width = 2;
dstCanvas.height = 2;
var ctx = dstCanvas.getContext('2d',
{colorSpace: testScenario.colorSpace,
pixelFormat: testScenario.pixelFormat});
ctx.drawImage(image, 0, 0);
var actualPixels = ctx.getImageData(0, 0, 2, 2, testScenario.colorSetting).data;
testPixels(actualPixels, expectedPixels, testScenario.pixelFormat);
});
srcCanvas.toBlob(function(blob) {
var urlCreator = window.URL || window.webkitURL;
image.src = urlCreator.createObjectURL(blob);
}, 'image/png', 1);
}
function runToDataURLTest(testScenario) {
var initVars = createSourceCanvasAndExpectedResult(testScenario);
var srcCanvas = initVars.canvas;
var expectedPixels = initVars.expectedPixels;
var image = new Image();
var t_dataurl = async_test("Test if toDataURL is color managed: " +
testScenarioToString(testScenario));
image.onload = t_dataurl.step_func_done(function() {
var dstCanvas = document.createElement("canvas");
dstCanvas.width = 2;
dstCanvas.height = 2;
var ctx = dstCanvas.getContext('2d',
{colorSpace: testScenario.colorSpace,
pixelFormat: testScenario.pixelFormat});
ctx.drawImage(image, 0, 0);
var actualPixels = ctx.getImageData(0, 0, 2, 2, testScenario.colorSetting).data;
testPixels(actualPixels, expectedPixels, testScenario.pixelFormat);
});
image.src = srcCanvas.toDataURL();
}
function runToBlobTestWithImageBitmap(testScenario) {
var initVars = createSourceCanvasAndExpectedResult(testScenario);
var srcCanvas = initVars.canvas;
var expectedPixels = initVars.expectedPixels;
var image = new Image();
var t_dataurl = async_test("Test if toBlob is color managed with ImageBitmap: " +
testScenarioToString(testScenario));
image.onload = t_dataurl.step_func_done(function() {
var options = {colorSpaceConversion: testScenario.colorSpaceConversion};
var imagebitmap;
var p1 = createImageBitmap(image, options).then(function(bitmap) {
imagebitmap = bitmap });
return Promise.all([p1]).then(
t_dataurl.step_func_done(function() {
var dstCanvas = document.createElement("canvas");
dstCanvas.width = 2;
dstCanvas.height = 2;
var ctx = dstCanvas.getContext('2d',
{colorSpace: testScenario.colorSpace,
pixelFormat: testScenario.pixelFormat});
ctx.drawImage(image, 0, 0);
var actualPixels = ctx.getImageData(0, 0, 2, 2, testScenario.colorSetting).data;
testPixels(actualPixels, expectedPixels, testScenario.pixelFormat);
}), t_dataurl.step_func_done(function() {
assert_true(false, "createImageBitmap promise rejected.");
}));
});
srcCanvas.toBlob(function(blob) {
var urlCreator = window.URL || window.webkitURL;
image.src = urlCreator.createObjectURL(blob);
}, 'image/png', 1);
}
function runToDataURLTestWithImageBitmap(testScenario) {
var initVars = createSourceCanvasAndExpectedResult(testScenario);
var srcCanvas = initVars.canvas;
var expectedPixels = initVars.expectedPixels;
var image = new Image();
var t_dataurl = async_test("Test if toDataURL is color managed with ImageBitmap: " +
testScenarioToString(testScenario));
image.onload = t_dataurl.step_func_done(function() {
var options = {colorSpaceConversion: testScenario.colorSpaceConversion};
var imagebitmap;
var p1 = createImageBitmap(image, options).then(function(bitmap) {
imagebitmap = bitmap });
return Promise.all([p1]).then(
t_dataurl.step_func_done(function() {
var dstCanvas = document.createElement("canvas");
dstCanvas.width = 2;
dstCanvas.height = 2;
var ctx = dstCanvas.getContext('2d',
{colorSpace: testScenario.colorSpace,
pixelFormat: testScenario.pixelFormat});
ctx.drawImage(image, 0, 0);
var actualPixels = ctx.getImageData(0, 0, 2, 2, testScenario.colorSetting).data;
testPixels(actualPixels, expectedPixels, testScenario.pixelFormat);
}), t_dataurl.step_func_done(function() {
assert_true(false, "createImageBitmap promise rejected.");
}));
});
image.src = srcCanvas.toDataURL();
}
function runAllTests() {
var colorSpaces = [
{colorSpace: 'srgb', pixelFormat: 'uint8', imageFormat: 'uint8'},
{colorSpace: 'srgb', pixelFormat: 'float16', imageFormat: 'float32'},
{colorSpace: 'rec2020', pixelFormat: 'float16', imageFormat: 'float32'},
{colorSpace: 'display-p3', pixelFormat: 'float16', imageFormat: 'float32'}];
var alphaValues = [0.5, 1];
var colorSettings = [
{colorSpace: 'srgb', storageFormat: 'uint8'},
{colorSpace: 'srgb', storageFormat: 'float32'},
{colorSpace: 'rec2020', storageFormat: 'float32'},
{colorSpace: 'display-p3', storageFormat: 'float32'}
];
var testScenarioSet = [];
for (var i = 0; i < colorSpaces.length; i++)
for (var j = 0; j < alphaValues.length; j++) {
var testScenario = {};
testScenario.colorSpace = colorSpaces[i].colorSpace;
testScenario.pixelFormat = colorSpaces[i].pixelFormat;
testScenario.colorSetting = colorSettings[i];
testScenario.alpha = alphaValues[j];
testScenarioSet.push(testScenario);
}
for (var i = 0; i < 8; i++)
runToBlobTest(testScenarioSet[i]);
for (var i = 0; i < 8; i++)
runToDataURLTest(testScenarioSet[i]);
var colorSpaceConversions = ['default', 'srgb', 'linear-rgb', 'rec2020', 'display-p3'];
var testScenarioSetWithImageBitmap = [];
for (var i = 0; i < colorSpaces.length; i++)
for (var j = 0; j < alphaValues.length; j++)
for (var k = 0; k < colorSpaceConversions.length; k++) {
var testScenario = {};
testScenario.colorSpace = colorSpaces[i].colorSpace;
testScenario.pixelFormat = colorSpaces[i].pixelFormat;
testScenario.alpha = alphaValues[j];
testScenario.colorSpaceConversion = colorSpaceConversions[k];
testScenarioSetWithImageBitmap.push(testScenario);
}
for (var i = 0; i < 40; i++)
runToBlobTestWithImageBitmap(testScenarioSetWithImageBitmap[i]);
for (var i = 0; i < 40; i++)
runToDataURLTestWithImageBitmap(testScenarioSetWithImageBitmap[i]);
}
runAllTests();
</script>
Codebase Browser
chromium