canvas-display-p3-drawImage-ImageBitmap-Blob.html (1921B)
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 drawing ImageBitmaps with different image Blob source bit depths 7 // and color profiles into sRGB and Display P3 canvases works, by reading pixels 8 // with getImageData() as sRGB and Display P3 values. 9 for (let [filename, expectedPixels] of Object.entries(imageTests)) { 10 for (let contextColorSpace of ["srgb", "display-p3"]) { 11 for (let imageDataColorSpace of ["srgb", "display-p3"]) { 12 for (let cropSource of [false, true]) { 13 async_test(function(t) { 14 fetch(`resources/${filename}`) 15 .then(t.step_func(response => response.blob())) 16 .then(t.step_func(blob => (cropSource ? createImageBitmap(blob, 1, 1, 1, 1) : createImageBitmap(blob)))) 17 .then(t.step_func_done(function(imageBitmap) { 18 let canvas = document.createElement("canvas"); 19 canvas.width = 2; 20 canvas.height = 2; 21 22 let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace }); 23 ctx.drawImage(imageBitmap, 0, 0); 24 25 let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: imageDataColorSpace }); 26 27 let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`]; 28 assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`); 29 })); 30 }, `${filename}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}, cropSource=${cropSource}`); 31 } 32 } 33 } 34 } 35 </script>