canvas-display-p3-drawImage-ImageBitmap-canvas.html (2525B)
1 <!DOCTYPE HTML> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="canvas-display-p3.js"></script> 5 <script> 6 // Test that ImageBitmaps created from canvas sources with different color 7 // spaces can be drawn into sRGB and Display P3 canvases, by reading pixels with 8 // getImageData() as sRGB and Display P3 values. 9 function runTest(sourceColorSpace, destinationColorSpace, colors) { 10 for (let [sourceColorString, expectedColor] of Object.entries(colors)) { 11 for (let cropSource of [false, true]) { 12 async_test(function(t) { 13 let source = document.createElement("canvas"); 14 source.width = 4; 15 source.height = 4; 16 17 let sourceContext = source.getContext("2d", { colorSpace: sourceColorSpace }); 18 19 let sourceColor = sourceColorString.split(",").map(x => +x); 20 21 let sourceImageData = new ImageData(4, 4, { colorSpace: sourceColorSpace }); 22 for (let i = 0; i < 4 * 4 * 4; i += 4) { 23 for (let c = 0; c < 4; ++c) 24 sourceImageData.data[i + c] = sourceColor[c]; 25 } 26 sourceContext.putImageData(sourceImageData, 0, 0); 27 28 let imageBitmapPromise; 29 if (cropSource) 30 imageBitmapPromise = createImageBitmap(source, 2, 2, 2, 2); 31 else 32 imageBitmapPromise = createImageBitmap(source); 33 34 imageBitmapPromise.then(t.step_func_done(function(imageBitmap) { 35 let destination = document.createElement("canvas"); 36 destination.width = 2; 37 destination.height = 2; 38 39 let destinationContext = destination.getContext("2d", { colorSpace: destinationColorSpace }); 40 destinationContext.drawImage(imageBitmap, 0, 0); 41 42 let destinationImageData = destinationContext.getImageData(1, 1, 1, 1); 43 44 assert_true(pixelsApproximatelyEqual(destinationImageData.data, expectedColor), `Actual pixel value ${[...destinationImageData.data]} is approximately equal to ${expectedColor}.`); 45 })); 46 }, `Source ${sourceColorSpace}, destination ${destinationColorSpace}, color ${sourceColorString}, cropSource=${cropSource}`); 47 } 48 } 49 } 50 51 runTest("srgb", "display-p3", fromSRGBToDisplayP3); 52 runTest("display-p3", "srgb", fromDisplayP3ToSRGB); 53 </script>