chromium/src/third_party/blink/web_tests/fast/canvas/color-space/canvas-colorManaged-convertToBlob-roundtrip.html - manifest_repos/chromium_src - Git at Google

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

 // No matter what is the color space and pixel format of the color managed
 // canvas, toBlob() and toDataURL() always create the blob in sRGB color
 // space, and respect the legacy behavior by not including any color space
 // information in the blob/data url.
 // https://github.com/WICG/canvas-color-space/blob/master/CanvasColorSpaceProposal.md#common-properties-of-all-color-spaces

 var opaqueReferencePxiels, transparentReferencePixels;

 function testPixels(actualPixels, refPixels, testScenario)
 {
     // Narrowing down the source of expected error:
     // - Alpha values should always match.
     // - Color components should be acceptably close. All tests locally pass
     //   with a tolerance of 4 (uint8) or 0.02 (f16).
     // - The red channel of the green pixel has the largest error since green
     //   has the largest change in what's representable between sRGB and
     //   P3/Rec2020. Red channel of the green pixel is R channel of the second
     //   pixel. All tests locally pass with a tolerance of 8 (uint8) and 0.035 (f16).
     if (testScenario.canvasColorParam.pixelFormat == 'uint8') {
         let tolerance_color = 5;
         let tolerance_r_green = 8;
         for (let i = 0; i < actualPixels.length; i++) {
             // Alpha channel
             if (i % 4 == 3)
                 assert_approx_equals(actualPixels[i], refPixels[i], tolerance_color);
             // Red channel of the green pixel
             else if (i == 4)
                 assert_approx_equals(actualPixels[i], refPixels[i], tolerance_r_green);
             else
                 assert_approx_equals(actualPixels[i], refPixels[i], tolerance_color);
         }
     } else {
         // For half float backed canvas, we expect the error < 0.02.
         let tolerance_color = 0.02;
         let tolerance_r_green = 0.035;
         for (let i = 0; i < actualPixels.length; i++) {
             // Alpha channel
             if (i % 4 == 3)
                 assert_approx_equals(actualPixels[i], refPixels[i], tolerance_color);
             else if (i == 4)
                 assert_approx_equals(actualPixels[i], refPixels[i], tolerance_r_green);
             else
                 assert_approx_equals(actualPixels[i], refPixels[i], tolerance_color);
         }
     }
 }

 function createCanvas(testScenario)
 {
     var canvas = document.createElement("canvas");
     canvas.width = 2;
     canvas.height = 2;
     return canvas;
 }

 function generateFillStyle(red, green, blue, alpha) {
     return "rgba(" + red + "," + green + "," + blue + "," + alpha + ")";
 }

 function drawPatternOnCanvsa(ctx, alpha, compositeOverBlack) {
     if (compositeOverBlack) {
         ctx.fillStyle = generateFillStyle(0, 0, 0, 1);
         ctx.fillRect(0, 0, 2, 2);
     }
     ctx.fillStyle = generateFillStyle(155, 27, 27, alpha);
     ctx.fillRect(0, 0, 1, 1);
     ctx.fillStyle = generateFillStyle(27, 155, 27, alpha);
     ctx.fillRect(1, 0, 1, 1);
     ctx.fillStyle = generateFillStyle(27, 27, 155, alpha);
     ctx.fillRect(0, 1, 1, 1);
     ctx.fillStyle = generateFillStyle(27, 27, 27, alpha);
     ctx.fillRect(1, 1, 1, 1);
 }

 function testScenarioToString(testScenario) {
     var str = "mimeType: " + testScenario.encodeOptions.type +
         ", blobColorSpace: " + testScenario.encodeOptions.colorSpace +
         ", blobPixelFormat: " + testScenario.encodeOptions.pixelFormat +
         ", source color space: " + testScenario.canvasColorParam.colorSpace +
         ", pixel format: " + testScenario.canvasColorParam.pixelFormat +
         ", alpha: " + testScenario.alpha;
     return str;
 }

 function runConvertToBlobTest(testScenario) {
     var srcCanvas = createCanvas(testScenario);
     var ctx = srcCanvas.getContext('2d', testScenario.canvasColorParam);
     var compositeOverBlack = (testScenario.encodeOptions.type == "image/jpeg");
     drawPatternOnCanvsa(ctx, testScenario.alpha, compositeOverBlack);

     var refPixels = ctx.getImageData(0, 0, 2, 2, testScenario.imageSetting).data;

     var t = async_test("Test canvas convertToBlob(): " +
         testScenarioToString(testScenario));

     var image = new Image();
     image.onload = t.step_func_done(function() {
         var dstCanvas = createCanvas(testScenario);
         var dstCtx = dstCanvas.getContext('2d', testScenario.canvasColorParam);
         dstCtx.drawImage(image, 0, 0);
         var actualPixels = dstCtx.getImageData(0, 0, 2, 2, testScenario.imageSetting).data;
         testPixels(actualPixels, refPixels, testScenario);
     });

     srcCanvas.convertToBlob(testScenario.encodeOptions).then(
         t.step_func(function(blob) {
             var urlCreator = window.URL || window.webkitURL;
             image.src = urlCreator.createObjectURL(blob);
         }),
         t.step_func_done(function(e) {
             assert_false("convertToBlob failed.");
         })
     );
 }

 function runAllTests() {

     var mimeTypes = ['image/png', 'image/jpeg', 'image/webp'];
     var blobColorSpaces = ['srgb', 'rec2020', 'display-p3'];
     var blobPixelFormats = ['uint8', 'uint16'];

     var encodeOptionsSet = [];
     for (var i = 0; i < mimeTypes.length; i++)
         for (var j = 0; j < blobColorSpaces.length; j++)
             for (var k = 0; k < blobPixelFormats.length; k++) {
                 var encodeOptions = {};
                 // Extend convertToBlob layout tests with quality < 1.
                 // crbug.com/847513
                 encodeOptions.quality = 1;
                 encodeOptions.type = mimeTypes[i];
                 encodeOptions.colorSpace = blobColorSpaces[j];
                 encodeOptions.pixelFormat = blobPixelFormats[k];
                 encodeOptionsSet.push(encodeOptions);
             }

     var canvasColorParams = [
         {colorSpace: 'srgb', pixelFormat: 'uint8'},
         {colorSpace: 'srgb', pixelFormat: 'float16'},
         {colorSpace: 'rec2020', pixelFormat: 'float16'},
         {colorSpace: 'display-p3', pixelFormat: 'float16'},
     ];

     var imageColorSetting = [
         {colorSpace: 'srgb', storageFormat: 'uint8'},
         {colorSpace: 'srgb', storageFormat: 'float32'},
         {colorSpace: 'rec2020', storageFormat: 'float32'},
         {colorSpace: 'display-p3', storageFormat: 'float32'},
     ];

     var alphaValues = [0.5, 1];

     // The *correct* way to test convertToBlob() is to directly examine the
     // image file for the expected color space and pixels. Since this is not
     // easy to do in javascript, we use a round-trip test here and leave the
     // more thorough testing to unit tests.

     var testScenarioSet = [];
     for (var i = 0; i < encodeOptionsSet.length; i++)
         for (var j = 0; j < canvasColorParams.length; j++)
             for (var k = 0; k < alphaValues.length; k++) {
                 var testScenario = {};
                 testScenario.encodeOptions = encodeOptionsSet[i];
                 testScenario.canvasColorParam = canvasColorParams[j];
                 testScenario.imageSetting = imageColorSetting[j];
                 testScenario.alpha = alphaValues[k];
                 testScenarioSet.push(testScenario);
             }

     for (var i = 0; i < testScenarioSet.length; i++)
         runConvertToBlobTest(testScenarioSet[i]);
 }

 runAllTests();

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

	// No matter what is the color space and pixel format of the color managed
	// canvas, toBlob() and toDataURL() always create the blob in sRGB color
	// space, and respect the legacy behavior by not including any color space
	// information in the blob/data url.
	// https://github.com/WICG/canvas-color-space/blob/master/CanvasColorSpaceProposal.md#common-properties-of-all-color-spaces

	var opaqueReferencePxiels, transparentReferencePixels;

	function testPixels(actualPixels, refPixels, testScenario)
	{
	// Narrowing down the source of expected error:
	// - Alpha values should always match.
	// - Color components should be acceptably close. All tests locally pass
	// with a tolerance of 4 (uint8) or 0.02 (f16).
	// - The red channel of the green pixel has the largest error since green
	// has the largest change in what's representable between sRGB and
	// P3/Rec2020. Red channel of the green pixel is R channel of the second
	// pixel. All tests locally pass with a tolerance of 8 (uint8) and 0.035 (f16).
	if (testScenario.canvasColorParam.pixelFormat == 'uint8') {
	let tolerance_color = 5;
	let tolerance_r_green = 8;
	for (let i = 0; i < actualPixels.length; i++) {
	// Alpha channel
	if (i % 4 == 3)
	assert_approx_equals(actualPixels[i], refPixels[i], tolerance_color);
	// Red channel of the green pixel
	else if (i == 4)
	assert_approx_equals(actualPixels[i], refPixels[i], tolerance_r_green);
	else
	assert_approx_equals(actualPixels[i], refPixels[i], tolerance_color);
	}
	} else {
	// For half float backed canvas, we expect the error < 0.02.
	let tolerance_color = 0.02;
	let tolerance_r_green = 0.035;
	for (let i = 0; i < actualPixels.length; i++) {
	// Alpha channel
	if (i % 4 == 3)
	assert_approx_equals(actualPixels[i], refPixels[i], tolerance_color);
	else if (i == 4)
	assert_approx_equals(actualPixels[i], refPixels[i], tolerance_r_green);
	else
	assert_approx_equals(actualPixels[i], refPixels[i], tolerance_color);
	}
	}
	}

	function createCanvas(testScenario)
	{
	var canvas = document.createElement("canvas");
	canvas.width = 2;
	canvas.height = 2;
	return canvas;
	}

	function generateFillStyle(red, green, blue, alpha) {
	return "rgba(" + red + "," + green + "," + blue + "," + alpha + ")";
	}

	function drawPatternOnCanvsa(ctx, alpha, compositeOverBlack) {
	if (compositeOverBlack) {
	ctx.fillStyle = generateFillStyle(0, 0, 0, 1);
	ctx.fillRect(0, 0, 2, 2);
	}
	ctx.fillStyle = generateFillStyle(155, 27, 27, alpha);
	ctx.fillRect(0, 0, 1, 1);
	ctx.fillStyle = generateFillStyle(27, 155, 27, alpha);
	ctx.fillRect(1, 0, 1, 1);
	ctx.fillStyle = generateFillStyle(27, 27, 155, alpha);
	ctx.fillRect(0, 1, 1, 1);
	ctx.fillStyle = generateFillStyle(27, 27, 27, alpha);
	ctx.fillRect(1, 1, 1, 1);
	}

	function testScenarioToString(testScenario) {
	var str = "mimeType: " + testScenario.encodeOptions.type +
	", blobColorSpace: " + testScenario.encodeOptions.colorSpace +
	", blobPixelFormat: " + testScenario.encodeOptions.pixelFormat +
	", source color space: " + testScenario.canvasColorParam.colorSpace +
	", pixel format: " + testScenario.canvasColorParam.pixelFormat +
	", alpha: " + testScenario.alpha;
	return str;
	}

	function runConvertToBlobTest(testScenario) {
	var srcCanvas = createCanvas(testScenario);
	var ctx = srcCanvas.getContext('2d', testScenario.canvasColorParam);
	var compositeOverBlack = (testScenario.encodeOptions.type == "image/jpeg");
	drawPatternOnCanvsa(ctx, testScenario.alpha, compositeOverBlack);

	var refPixels = ctx.getImageData(0, 0, 2, 2, testScenario.imageSetting).data;

	var t = async_test("Test canvas convertToBlob(): " +
	testScenarioToString(testScenario));

	var image = new Image();
	image.onload = t.step_func_done(function() {
	var dstCanvas = createCanvas(testScenario);
	var dstCtx = dstCanvas.getContext('2d', testScenario.canvasColorParam);
	dstCtx.drawImage(image, 0, 0);
	var actualPixels = dstCtx.getImageData(0, 0, 2, 2, testScenario.imageSetting).data;
	testPixels(actualPixels, refPixels, testScenario);
	});

	srcCanvas.convertToBlob(testScenario.encodeOptions).then(
	t.step_func(function(blob) {
	var urlCreator = window.URL \|\| window.webkitURL;
	image.src = urlCreator.createObjectURL(blob);
	}),
	t.step_func_done(function(e) {
	assert_false("convertToBlob failed.");
	})
	);
	}

	function runAllTests() {

	var mimeTypes = ['image/png', 'image/jpeg', 'image/webp'];
	var blobColorSpaces = ['srgb', 'rec2020', 'display-p3'];
	var blobPixelFormats = ['uint8', 'uint16'];

	var encodeOptionsSet = [];
	for (var i = 0; i < mimeTypes.length; i++)
	for (var j = 0; j < blobColorSpaces.length; j++)
	for (var k = 0; k < blobPixelFormats.length; k++) {
	var encodeOptions = {};
	// Extend convertToBlob layout tests with quality < 1.
	// crbug.com/847513
	encodeOptions.quality = 1;
	encodeOptions.type = mimeTypes[i];
	encodeOptions.colorSpace = blobColorSpaces[j];
	encodeOptions.pixelFormat = blobPixelFormats[k];
	encodeOptionsSet.push(encodeOptions);
	}

	var canvasColorParams = [
	{colorSpace: 'srgb', pixelFormat: 'uint8'},
	{colorSpace: 'srgb', pixelFormat: 'float16'},
	{colorSpace: 'rec2020', pixelFormat: 'float16'},
	{colorSpace: 'display-p3', pixelFormat: 'float16'},
	];

	var imageColorSetting = [
	{colorSpace: 'srgb', storageFormat: 'uint8'},
	{colorSpace: 'srgb', storageFormat: 'float32'},
	{colorSpace: 'rec2020', storageFormat: 'float32'},
	{colorSpace: 'display-p3', storageFormat: 'float32'},
	];

	var alphaValues = [0.5, 1];

	// The correct way to test convertToBlob() is to directly examine the
	// image file for the expected color space and pixels. Since this is not
	// easy to do in javascript, we use a round-trip test here and leave the
	// more thorough testing to unit tests.

	var testScenarioSet = [];
	for (var i = 0; i < encodeOptionsSet.length; i++)
	for (var j = 0; j < canvasColorParams.length; j++)
	for (var k = 0; k < alphaValues.length; k++) {
	var testScenario = {};
	testScenario.encodeOptions = encodeOptionsSet[i];
	testScenario.canvasColorParam = canvasColorParams[j];
	testScenario.imageSetting = imageColorSetting[j];
	testScenario.alpha = alphaValues[k];
	testScenarioSet.push(testScenario);
	}

	for (var i = 0; i < testScenarioSet.length; i++)
	runConvertToBlobTest(testScenarioSet[i]);
	}

	runAllTests();

	</script>