| <!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Testing video rotation</title> |
| </head> |
| <body> |
| <video style="z-index: 1; position: absolute; top: 0px; left: 0px;" id="video" autoplay playsInline></video> |
| <div style="z-index: 2; position: absolute; top: 2px; left: 0px; background-color:green; width:200px; height:396px"></div> |
| <image id='image'></image> |
| <canvas id='canvas'></canvas> |
| <div style="z-index: 3" id="log"></div> |
| <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 isPixelWhite(x, y, canvas, data) |
| { |
| const pixel = getPixel(x, y, canvas, data); |
| return pixel.r === 255 && pixel.g === 255 && pixel.b === 255; |
| } |
| |
| function computeGreenRectangleHeight(canvas, data) |
| { |
| let i = 100; |
| let j = 100; |
| while (++i < canvas.height && isPixelGreen(i, j, canvas, data)) { }; |
| return i; |
| } |
| |
| async function validateSnapshot() |
| { |
| 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; |
| |
| 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; |
| |
| image.src = ''; |
| canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height); |
| |
| // We expect to have a green horizontal line until getting some white. |
| let j = 100; |
| if (!isPixelGreen(300, j, canvas, data)) |
| return Promise.reject("first pixel is not green"); |
| |
| while (isPixelGreen(300, ++j, canvas, data)) { }; |
| |
| // We then expect a vertical line until the end of the canvas. |
| j = j + 5; |
| if (!isPixelWhite(300, j, canvas, data)) |
| return Promise.reject("did not find white pixel"); |
| |
| let i = 100; |
| while (++i < canvas.height && isPixelWhite(i, j, canvas, data)) { }; |
| |
| return i >= computeGreenRectangleHeight(canvas, data); |
| } |
| |
| onload = async () => { |
| try { |
| video.srcObject = await navigator.mediaDevices.getUserMedia({video: {width: 400, height: 200} }); |
| await video.play(); |
| |
| if (!window.testRunner) |
| return; |
| |
| testRunner.setMockCameraOrientation(90); |
| let counter = 0; |
| while (video.videoWidth !== 200 && ++counter < 100) |
| await new Promise(resolve => setTimeout(resolve, 50)); |
| |
| counter = 0; |
| let isValidSnapshot = false; |
| do { |
| await new Promise(resolve => setTimeout(resolve, 50)); |
| isValidSnapshot = await validateSnapshot(); |
| } while (++counter < 50 && !isValidSnapshot) |
| |
| if (counter >= 50) |
| log.innerHTML = "FAIL first part"; |
| else { |
| testRunner.terminateGPUProcess(); |
| testRunner.setMockCameraOrientation(90); |
| await new Promise(resolve => setTimeout(resolve, 1000)); |
| |
| counter = 0; |
| do { |
| await new Promise(resolve => setTimeout(resolve, 50)); |
| isValidSnapshot = await validateSnapshot(); |
| } while (++counter < 50 && !isValidSnapshot) |
| } |
| |
| log.innerHTML = counter < 50 ? "PASS" : "FAIL"; |
| if (counter < 50) { |
| document.body.removeChild(image); |
| document.body.removeChild(canvas); |
| } |
| } catch (e) { |
| console.log(e); |
| } |
| |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| if (window.testRunner) { |
| testRunner.dumpAsText(true); |
| testRunner.waitUntilDone(); |
| } |
| </script> |
| </body> |
| </html> |
