| <!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: 5px; left: 0px; background-color:green; width:200px; height:390px"></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; |
| } |
| |
| 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; |
| |
| // We expect to have a green horizontal line until getting some white. |
| let j = 100; |
| if (!isPixelGreen(100, j, canvas, data)) |
| return Promise.reject("first pixel is not green"); |
| |
| while (isPixelGreen(100, ++j, canvas, data)) { }; |
| |
| // We then expect a vertical line until the end of the canvas. |
| j = j + 5; |
| if (!isPixelWhite(100, 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 === canvas.height; |
| } |
| |
| async function waitFor(element, type) { |
| return new Promise(resolve => { |
| element.addEventListener(type, event => { |
| resolve(event); |
| }, { once: true }); |
| }); |
| } |
| |
| 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)); |
| |
| await waitFor(video, 'timeupdate'); |
| counter = 0; |
| let isValidSnapshot = false; |
| do { |
| await new Promise(resolve => setTimeout(resolve, 50)); |
| try { |
| isValidSnapshot = await validateSnapshot(); |
| } catch (e) { } |
| } while (++counter < 100 && !isValidSnapshot) |
| |
| log.innerHTML = counter < 100 ? "PASS" : "FAIL"; |
| |
| if (counter < 100) |
| document.body.removeChild(image); |
| } catch (e) { |
| console.log(e); |
| } |
| |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| if (window.testRunner) { |
| testRunner.dumpAsText(true); |
| testRunner.waitUntilDone(); |
| } |
| </script> |
| </body> |
| </html> |
