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