summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-ImageBitmap.html
blob: 0bd18e9bebd05b3a0f4736d7d4aac06773e7025c (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
<!DOCTYPE HTML>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="canvas-display-p3.js"></script>
<script>
// Test that drawing ImageBitmaps created from other ImageBitamps with different
// image source bit depths and color profiles into sRGB and Display P3
// canvases works, by reading pixels with getImageData() as sRGB and Display P3
// values.
for (let [filename, expectedPixels] of Object.entries(imageTests)) {
    for (let contextColorSpace of ["srgb", "display-p3"]) {
        for (let imageDataColorSpace of ["srgb", "display-p3"]) {
            for (let cropSource of [false, true]) {
                async_test(function(t) {
                    let image = new Image();
                    image.onload = t.step_func_done(function() {

                        let canvas = document.createElement("canvas");
                        canvas.width = 2;
                        canvas.height = 2;

                        let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace });

                        createImageBitmap(image).then(t.step_func(function(sourceImageBitmap) {
                            let imageBitmapPromise;
                            if (cropSource)
                                imageBitmapPromise = createImageBitmap(sourceImageBitmap, 1, 1, 1, 1);
                            else
                                imageBitmapPromise = createImageBitmap(sourceImageBitmap);

                            imageBitmapPromise.then(t.step_func_done(function(imageBitmap) {
                                ctx.drawImage(imageBitmap, 0, 0);

                                let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: imageDataColorSpace });

                                let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`];
                                assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`);
                            }));
                        }));
                    });
                    image.src = `resources/${filename}`;
                }, `${filename}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}, cropSource=${cropSource}`);
            }
        }
    }
}
</script>