canvas-display-p3-drawImage.https.html (1895B)
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 images with different bit depths and color profiles into 7 // sRGB and Display P3 canvases works, by reading pixels with getImageData() 8 // as sRGB and Display P3 values. 9 for (let [filename, expectedPixels] of Object.entries({...imageTests, ...svgImageTests})) { 10 for (let contextColorSpace of ["srgb", "display-p3"]) { 11 for (let imageDataColorSpace of ["srgb", "display-p3"]) { 12 for (let scaleImage of [false, true]) { 13 async_test(function(t) { 14 let image = new Image(); 15 image.onload = t.step_func_done(function() { 16 17 let canvas = document.createElement("canvas"); 18 canvas.width = 2; 19 canvas.height = 2; 20 21 let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace }); 22 if (scaleImage) 23 ctx.drawImage(image, 0, 0, 10, 10); 24 else 25 ctx.drawImage(image, 0, 0); 26 27 let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: imageDataColorSpace }); 28 29 let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`]; 30 assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`); 31 32 t.done(); 33 34 }); 35 image.src = `resources/${filename}`; 36 }, `${filename}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}, scaleImage=${scaleImage}`); 37 } 38 } 39 } 40 } 41 </script>