| <!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. |
| |
| var opaqueReferencePxiels, transparentReferencePixels; |
| |
| function testPixels(actualPixels, alpha) |
| { |
| if (alpha == 1) |
| assert_array_approx_equals(actualPixels, opaqueReferencePxiels, 1); |
| else |
| assert_array_approx_equals(actualPixels, transparentReferencePixels, 2); |
| } |
| |
| function generateFillStyle(red, green, blue, alpha) { |
| return "rgba(" + red + "," + green + "," + blue + "," + alpha + ")"; |
| } |
| |
| function contextDrawHelper(ctx, alpha) { |
| 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 prepareReferenceExpectedResults() { |
| var canvas1 = document.createElement("canvas"); |
| canvas1.width = 2; |
| canvas1.height = 2; |
| var ctx1 = canvas1.getContext('2d'); |
| contextDrawHelper(ctx1, 1); |
| opaqueReferencePxiels = ctx1.getImageData(0, 0, 2, 2).data; |
| |
| var canvas2 = document.createElement("canvas"); |
| canvas2.width = 2; |
| canvas2.height = 2; |
| var ctx2 = canvas2.getContext('2d'); |
| contextDrawHelper(ctx2, 0.5); |
| transparentReferencePixels = ctx2.getImageData(0, 0, 2, 2).data; |
| } |
| |
| function createCanvas(testScenario) |
| { |
| var canvas = document.createElement("canvas"); |
| canvas.width = 2; |
| canvas.height = 2; |
| var ctx = canvas.getContext('2d', {colorSpace: testScenario.colorSpace, |
| pixelFormat: testScenario.pixelFormat}); |
| contextDrawHelper(ctx, testScenario.alpha); |
| return canvas; |
| } |
| |
| function testScenarioToString(testScenario) { |
| var str = "ImageFormat: " + testScenario.imageFormat + |
| ", 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 srcCanvas = createCanvas(testScenario); |
| var t_blob = async_test("Test if toBlob() respects legacy behavior in \ |
| color managed canvas: " + testScenarioToString(testScenario)); |
| |
| var image = new Image(); |
| image.onload = t_blob.step_func_done(function() { |
| var dstCanvas = document.createElement("canvas"); |
| dstCanvas.width = 2; |
| dstCanvas.height = 2; |
| var ctx = dstCanvas.getContext('2d'); |
| ctx.drawImage(image, 0, 0); |
| var actualPixels = ctx.getImageData(0, 0, 2, 2).data; |
| testPixels(actualPixels, testScenario.alpha); |
| }); |
| |
| srcCanvas.toBlob(function(blob) { |
| var urlCreator = window.URL || window.webkitURL; |
| image.src = urlCreator.createObjectURL(blob); |
| }, 'image/png', 1); |
| } |
| |
| function runToDataURLTest(testScenario) { |
| var srcCanvas = createCanvas(testScenario); |
| var t_dataURL = async_test("Test if toDataURL() respects legacy behavior \ |
| in color managed canvas: " + testScenarioToString(testScenario)); |
| |
| var image = new Image(); |
| image.onload = t_dataURL.step_func_done(function() { |
| var dstCanvas = document.createElement("canvas"); |
| dstCanvas.width = 2; |
| dstCanvas.height = 2; |
| var ctx = dstCanvas.getContext('2d'); |
| ctx.drawImage(image, 0, 0); |
| var actualPixels = ctx.getImageData(0, 0, 2, 2).data; |
| testPixels(actualPixels, testScenario.alpha); |
| }); |
| image.src = srcCanvas.toDataURL(); |
| } |
| |
| function runAllTests() { |
| prepareReferenceExpectedResults(); |
| |
| var imageFormats = ['image/jpeg', 'image/png', 'image/webp']; |
| var colorSpaces = [ |
| {colorSpace: 'srgb', pixelFormat: 'uint8'}, |
| {colorSpace: 'srgb', pixelFormat: 'float16'}, |
| ]; |
| var alphaValues = [0.5, 1]; |
| |
| var testScenarioSet = []; |
| for (var i = 0; i < imageFormats.length; i++) |
| for (var j = 0; j < colorSpaces.length; j++) |
| for (var k = 0; k < alphaValues.length; k++) { |
| var testScenario = {}; |
| testScenario.imageFormat = imageFormats[i]; |
| testScenario.colorSpace = colorSpaces[j].colorSpace; |
| testScenario.pixelFormat = colorSpaces[j].pixelFormat; |
| testScenario.alpha = alphaValues[k]; |
| testScenarioSet.push(testScenario); |
| } |
| |
| for (var i = 0; i < testScenarioSet.length; i++) |
| runToBlobTest(testScenarioSet[i]); |
| |
| for (var i = 0; i < testScenarioSet.length; i++) |
| runToDataURLTest(testScenarioSet[i]); |
| } |
| |
| test(function() { |
| runAllTests(); |
| }, "Overall test"); |
| |
| </script> |
