canvas-display-p3-pattern-image.html (1679B)
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 patterns created from images with different bit depths and color 7 // profiles into can be drawn into sRGB and Display P3 canvases, by reading 8 // pixels 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 async_test(function(t) { 13 let image = new Image(); 14 image.onload = t.step_func_done(function() { 15 16 let canvas = document.createElement("canvas"); 17 canvas.width = 4; 18 canvas.height = 4; 19 20 let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace }); 21 ctx.fillStyle = ctx.createPattern(image, "repeat"); 22 ctx.fillRect(0, 0, 4, 4); 23 24 let imageData = ctx.getImageData(2, 2, 1, 1, { colorSpace: imageDataColorSpace }); 25 26 let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`]; 27 assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`); 28 29 t.done(); 30 31 }); 32 image.src = `resources/${filename}`; 33 }, `${filename}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}`); 34 } 35 } 36 } 37 </script>