canvas-display-p3-drawImage-ImageBitmap-cloned.html (2627B)
1 <!DOCTYPE HTML> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="canvas-display-p3.js"></script> 5 <script> 6 // Test that drawing structured cloned ImageBitmaps with different image source 7 // bit depths and color profiles into sRGB and Display P3 canvases works, by 8 // reading pixels with getImageData() as sRGB and Display P3 values. 9 10 let nextTestID = 0; 11 12 class Test { 13 constructor(testConfiguration) { 14 Object.assign(this, testConfiguration); 15 this.testID = nextTestID++; 16 } 17 18 run() { 19 let self = this; 20 async_test(function(t) { 21 self.t = t; 22 self.image = new Image(); 23 self.image.onload = t.step_func(self.onImageLoaded.bind(self)); 24 self.image.src = `resources/${self.filename}`; 25 }, `${this.filename}, Context ${this.contextColorSpace}, ImageData ${this.imageDataColorSpace}, cropSource=${this.cropSource}`); 26 } 27 28 onImageLoaded() { 29 let imageBitmapPromise; 30 if (this.cropSource) 31 imageBitmapPromise = createImageBitmap(this.image, 1, 1, 1, 1); 32 else 33 imageBitmapPromise = createImageBitmap(this.image); 34 imageBitmapPromise.then(this.t.step_func(this.onImageBitmapCreated.bind(this))); 35 } 36 37 onImageBitmapCreated(imageBitmap) { 38 window.addEventListener("message", this.t.step_func(this.onMessage.bind(this))); 39 window.postMessage({ imageBitmap, testID: this.testID }); 40 } 41 42 onMessage(message) { 43 if (message.data.testID != this.testID) 44 return; 45 46 let canvas = document.createElement("canvas"); 47 canvas.width = 2; 48 canvas.height = 2; 49 50 let ctx = canvas.getContext("2d", { colorSpace: this.contextColorSpace }); 51 ctx.drawImage(message.data.imageBitmap, 0, 0); 52 53 let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: this.imageDataColorSpace }); 54 55 let expected = this.expectedPixels[`${this.contextColorSpace} ${this.imageDataColorSpace}`]; 56 assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`); 57 58 this.t.done(); 59 } 60 } 61 62 for (let [filename, expectedPixels] of Object.entries(imageTests)) { 63 for (let contextColorSpace of ["srgb", "display-p3"]) { 64 for (let imageDataColorSpace of ["srgb", "display-p3"]) { 65 for (let cropSource of [false, true]) 66 new Test({ filename, expectedPixels, contextColorSpace, imageDataColorSpace, cropSource }).run(); 67 } 68 } 69 } 70 </script>