canvas-display-p3-drawImage-ImageBitmap-video.html (2479B)
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 <body> 6 <script> 7 // Test that drawing ImageBitmaps with different video source color profiles 8 // into sRGB and Display P3 canvases works, by reading pixels with 9 // getImageData() as sRGB and Display P3 values. 10 for (let [filenameBase, expectedPixels] of Object.entries(videoTests)) { 11 for (let contextColorSpace of ["srgb", "display-p3"]) { 12 for (let imageDataColorSpace of ["srgb", "display-p3"]) { 13 for (let cropSource of [false, true]) { 14 promise_test(async function(t) { 15 16 let video = document.createElement("video"); 17 for (let format of ["mp4", "webm"]) { 18 let source = document.createElement("source"); 19 source.src = `resources/${filenameBase}.${format}`; 20 source.type = `video/${format}`; 21 video.append(source); 22 } 23 24 let loadedData = new Promise(resolver => video.onloadeddata = resolver); 25 26 document.body.append(video); 27 await video.play(); 28 await loadedData; 29 await new Promise(requestAnimationFrame); 30 31 let imageBitmap; 32 if (cropSource) 33 imageBitmap = await createImageBitmap(video, 1, 1, 1, 1); 34 else 35 imageBitmap = await createImageBitmap(video); 36 37 video.remove(); 38 39 let canvas = document.createElement("canvas"); 40 canvas.width = 2; 41 canvas.height = 2; 42 43 let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace }); 44 45 ctx.drawImage(imageBitmap, 0, 0); 46 47 let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: imageDataColorSpace }); 48 49 let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`]; 50 assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`); 51 52 }, `${filenameBase}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}, cropSource=${cropSource}`); 53 } 54 } 55 } 56 } 57 </script>