Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 112 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-cloned.html - WPT Dashboard Interop Dashboard
<!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>