canvas-display-p3-drawImage-video.html (2324B)
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 videos with different color spaces into sRGB and Display P3 8 // canvases works, by reading pixels with getImageData() as sRGB and Display P3 9 // 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 scaleImage 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 canvas = document.createElement("canvas"); 32 canvas.width = 2; 33 canvas.height = 2; 34 35 let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace }); 36 if (scaleImage) 37 ctx.drawImage(video, 0, 0, 10, 10); 38 else 39 ctx.drawImage(video, 0, 0); 40 video.remove(); 41 42 let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: imageDataColorSpace }); 43 44 let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`]; 45 assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`); 46 47 }, `${filenameBase}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}, scaleImage=${scaleImage}`); 48 } 49 } 50 } 51 } 52 </script>