summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-cloned.html
blob: cf4f38f8db4d3b1bd6be7930800146a0a91ffdb9 (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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!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 structured cloned ImageBitmaps 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.

let nextTestID = 0;

class Test {
    constructor(testConfiguration) {
        Object.assign(this, testConfiguration);
        this.testID = nextTestID++;
    }

    run() {
        let self = this;
        async_test(function(t) {
            self.t = t;
            self.image = new Image();
            self.image.onload = t.step_func(self.onImageLoaded.bind(self));
            self.image.src = `resources/${self.filename}`;
        }, `${this.filename}, Context ${this.contextColorSpace}, ImageData ${this.imageDataColorSpace}, cropSource=${this.cropSource}`);
    }

    onImageLoaded() {
        let imageBitmapPromise;
        if (this.cropSource)
            imageBitmapPromise = createImageBitmap(this.image, 1, 1, 1, 1);
        else
            imageBitmapPromise = createImageBitmap(this.image);
        imageBitmapPromise.then(this.t.step_func(this.onImageBitmapCreated.bind(this)));
    }

    onImageBitmapCreated(imageBitmap) {
        window.addEventListener("message", this.t.step_func(this.onMessage.bind(this)));
        window.postMessage({ imageBitmap, testID: this.testID });
    }

    onMessage(message) {
        if (message.data.testID != this.testID)
            return;

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

        let ctx = canvas.getContext("2d", { colorSpace: this.contextColorSpace });
        ctx.drawImage(message.data.imageBitmap, 0, 0);

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

        let expected = this.expectedPixels[`${this.contextColorSpace} ${this.imageDataColorSpace}`];
        assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`);

        this.t.done();
    }
}

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])
                new Test({ filename, expectedPixels, contextColorSpace, imageDataColorSpace, cropSource }).run();
        }
    }
}
</script>