| <!doctype html> |
| <html> |
| <head> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <div> |
| <canvas id="canvas1" width=100 height=100></canvas> |
| <canvas id="canvas2" width=100 height=100></canvas> |
| <br> |
| <video id="video" width=100 height=100 autoplay playsinline></video> |
| <br> |
| <image id='image'></image> |
| <script> |
| function getPixel(x, y, canvas, data) |
| { |
| const position = 4 * (x * canvas.width + y); |
| return {r: data[position], g: data[position+1], b: data[position+2]}; |
| } |
| |
| function isPixelGreen(x, y, canvas, data) |
| { |
| const pixel = getPixel(x, y, canvas, data); |
| return pixel.r === 0 && pixel.g === 128 && pixel.b === 0; |
| } |
| |
| function isPixelAlmostGreen(x, y, canvas, data) |
| { |
| const pixel = getPixel(x, y, canvas, data); |
| return pixel.r <= 64 && pixel.g >= 100 && pixel.g <= 200 && pixel.b <= 64; |
| } |
| |
| function isPixelWhite(x, y, canvas, data) |
| { |
| const pixel = getPixel(x, y, canvas, data); |
| return pixel.r === 255 && pixel.g === 255 && pixel.b === 255; |
| } |
| |
| async function validateSnapshot() |
| { |
| if (!window.testRunner) |
| return true; |
| const dataURL = await new Promise(resolve => testRunner.takeViewPortSnapshot(resolve)); |
| |
| const loadPromise = new Promise((resolve, reject) => { |
| image.onload = resolve; |
| image.onerror = reject; |
| setTimeout(() => reject("image load timed out"), 2000); |
| }); |
| image.src = dataURL; |
| await loadPromise; |
| |
| const canvas = document.createElement("canvas"); |
| canvas.width = image.width; |
| canvas.height = image.height; |
| canvas.getContext('2d').drawImage(image, 0, 0); |
| const data = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height).data; |
| |
| // We inspect the vertial line at pixel 50. We should get white, then green, then white, then almost green (encoder might change a bit the color), then white. |
| const verticalLine = 50; |
| let i = 0; |
| |
| if (!isPixelWhite(i, verticalLine, canvas, data)) |
| return false; |
| while (isPixelWhite(++i, verticalLine, canvas, data)) { }; |
| |
| if (!isPixelGreen(i, verticalLine, canvas, data)) |
| return false; |
| while (isPixelGreen(++i, verticalLine, canvas, data)) { }; |
| |
| if (!isPixelWhite(i, verticalLine, canvas, data)) |
| return false; |
| while (isPixelWhite(++i, verticalLine, canvas, data)) { }; |
| |
| if (!isPixelAlmostGreen(i, verticalLine, canvas, data)) |
| return false; |
| while (isPixelAlmostGreen(++i, verticalLine, canvas, data)) { }; |
| |
| if (!isPixelWhite(i, verticalLine, canvas, data)) |
| return false; |
| |
| return true; |
| } |
| |
| promise_test(async () => { |
| const context1 = canvas1.getContext('2d'); |
| setInterval(() => { |
| context1.fillStyle = "green"; |
| context1.fillRect(0, 0, 100, 100); |
| }, 100); |
| video.srcObject = canvas1.captureStream(); |
| await video.play(); |
| await new Promise(resolve => setTimeout(resolve, 500)); |
| video.style.display = 'none'; |
| await new Promise(resolve => setTimeout(resolve, 500)); |
| |
| video.style.display = 'block'; |
| const context2 = canvas2.getContext('2d'); |
| setInterval(() => { |
| context2.fillStyle = "green"; |
| context2.fillRect(0, 0, 100, 100); |
| }, 100); |
| video.srcObject = canvas2.captureStream(); |
| await video.play(); |
| |
| let counter = 0; |
| let result = false; |
| while (counter++ < 150 && !result) { |
| await new Promise(resolve => video.requestVideoFrameCallback(resolve)); |
| try { |
| result = await validateSnapshot(); |
| } catch (e) { |
| } |
| } |
| assert_true(result); |
| image.parentNode.removeChild(image); |
| }, "Validate second srcObject is being rendered") |
| </script> |
| </body> |
| </html> |
