summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-canvas.html
blob: f3156349ed95cf9c864522e154a9084aeecca1b0 (plain)
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
45
46
47
48
49
50
51
52
53
<!DOCTYPE HTML>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="canvas-display-p3.js"></script>
<script>
// Test that ImageBitmaps 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)) {
        for (let cropSource of [false, true]) {
            async_test(function(t) {
                let source = document.createElement("canvas");
                source.width = 4;
                source.height = 4;

                let sourceContext = source.getContext("2d", { colorSpace: sourceColorSpace });

                let sourceColor = sourceColorString.split(",").map(x => +x);

                let sourceImageData = new ImageData(4, 4, { colorSpace: sourceColorSpace });
                for (let i = 0; i < 4 * 4 * 4; i += 4) {
                    for (let c = 0; c < 4; ++c)
                        sourceImageData.data[i + c] = sourceColor[c];
                }
                sourceContext.putImageData(sourceImageData, 0, 0);

                let imageBitmapPromise;
                if (cropSource)
                    imageBitmapPromise = createImageBitmap(source, 2, 2, 2, 2);
                else
                    imageBitmapPromise = createImageBitmap(source);

                imageBitmapPromise.then(t.step_func_done(function(imageBitmap) {
                    let destination = document.createElement("canvas");
                    destination.width = 2;
                    destination.height = 2;

                    let destinationContext = destination.getContext("2d", { colorSpace: destinationColorSpace });
                    destinationContext.drawImage(imageBitmap, 0, 0);

                    let destinationImageData = destinationContext.getImageData(1, 1, 1, 1);

                    assert_true(pixelsApproximatelyEqual(destinationImageData.data, expectedColor), `Actual pixel value ${[...destinationImageData.data]} is approximately equal to ${expectedColor}.`);
                }));
            }, `Source ${sourceColorSpace}, destination ${destinationColorSpace}, color ${sourceColorString}, cropSource=${cropSource}`);
        }
    }
}

runTest("srgb", "display-p3", fromSRGBToDisplayP3);
runTest("display-p3", "srgb", fromDisplayP3ToSRGB);
</script>