canvas-display-p3-drawImage-ImageBitmap-ImageBitmap.html (2367B)
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 ImageBitmaps created from other ImageBitamps with different 7 // image source bit depths and color profiles into sRGB and Display P3 8 // canvases works, by reading pixels with getImageData() as sRGB and Display P3 9 // values. 10 for (let [filename, expectedPixels] of Object.entries(imageTests)) { 11 for (let contextColorSpace of ["srgb", "display-p3"]) { 12 for (let imageDataColorSpace of ["srgb", "display-p3"]) { 13 for (let cropSource of [false, true]) { 14 async_test(function(t) { 15 let image = new Image(); 16 image.onload = t.step_func_done(function() { 17 18 let canvas = document.createElement("canvas"); 19 canvas.width = 2; 20 canvas.height = 2; 21 22 let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace }); 23 24 createImageBitmap(image).then(t.step_func(function(sourceImageBitmap) { 25 let imageBitmapPromise; 26 if (cropSource) 27 imageBitmapPromise = createImageBitmap(sourceImageBitmap, 1, 1, 1, 1); 28 else 29 imageBitmapPromise = createImageBitmap(sourceImageBitmap); 30 31 imageBitmapPromise.then(t.step_func_done(function(imageBitmap) { 32 ctx.drawImage(imageBitmap, 0, 0); 33 34 let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: imageDataColorSpace }); 35 36 let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`]; 37 assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`); 38 })); 39 })); 40 }); 41 image.src = `resources/${filename}`; 42 }, `${filename}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}, cropSource=${cropSource}`); 43 } 44 } 45 } 46 } 47 </script>