canvas-display-p3-pattern-canvas.html (2065B)
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 canvas sources with different color spaces 7 // 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 test(function() { 12 let source = document.createElement("canvas"); 13 source.width = 2; 14 source.height = 2; 15 16 let sourceContext = source.getContext("2d", { colorSpace: sourceColorSpace }); 17 18 let sourceColor = sourceColorString.split(",").map(x => +x); 19 20 let sourceImageData = new ImageData(2, 2, { colorSpace: sourceColorSpace }); 21 for (let i = 0; i < 2 * 2 * 4; i += 4) { 22 for (let c = 0; c < 4; ++c) 23 sourceImageData.data[i + c] = sourceColor[c]; 24 } 25 sourceContext.putImageData(sourceImageData, 0, 0); 26 27 let destination = document.createElement("canvas"); 28 destination.width = 4; 29 destination.height = 4; 30 31 let destinationContext = destination.getContext("2d", { colorSpace: destinationColorSpace }); 32 destinationContext.fillStyle = destinationContext.createPattern(source, "repeat"); 33 destinationContext.fillRect(0, 0, 4, 4); 34 35 let destinationImageData = destinationContext.getImageData(2, 2, 1, 1); 36 37 assert_true(pixelsApproximatelyEqual(destinationImageData.data, expectedColor), `Actual pixel value ${[...destinationImageData.data]} is approximately equal to ${expectedColor}.`); 38 }, `Source ${sourceColorSpace}, destination ${destinationColorSpace}, color ${sourceColorString}`); 39 } 40 } 41 42 runTest("srgb", "display-p3", fromSRGBToDisplayP3); 43 runTest("display-p3", "srgb", fromDisplayP3ToSRGB); 44 </script>