| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script src ="routines.js"></script> |
| <style type="text/css"> |
| video { width: 40px; } |
| canvas { width: 40px; } |
| </style> |
| </head> |
| <body> |
| <div id="debuge"></div> |
| <script> |
| "use strict"; |
| |
| function with2DContext(subcase, canvas, patternNumber) |
| { |
| drawCanvasTestPattern2D(canvas, patternNumber); |
| } |
| |
| function withWebGL(subcase, canvas, patternNumber) |
| { |
| drawCanvasTestPatternWebGL(canvas, patternNumber); |
| } |
| |
| async function createLocalPeerConnectionStream(stream) |
| { |
| return new Promise((resolve, reject) => { |
| createConnections((firstConnection) => { |
| firstConnection.addTrack(stream.getVideoTracks()[0], stream); |
| }, (secondConnection) => { |
| secondConnection.ontrack = (trackEvent) => { |
| resolve(trackEvent.streams[0]); |
| }; |
| }); |
| }); |
| } |
| |
| function waitForVideoFrame(video) |
| { |
| return new Promise((resolve) => { |
| video.requestVideoFrameCallback((now, metadata) => { |
| resolve(now, metadata); |
| }); |
| }); |
| } |
| |
| const width = 500; |
| const height = 500; |
| |
| async function waitForVideoFrameSize(video, width, height, counter) |
| { |
| if (!counter) |
| counter = 0; |
| else if (counter > 100) |
| return Promise.reject("waitForVideoFrameSize timed out"); |
| |
| const result = await new Promise((resolve, reject) => { |
| video.requestVideoFrameCallback((now, metadata) => { |
| resolve(metadata.width === width && metadata.height === height); |
| }); |
| setTimeout(() => reject("video.requestVideoFrameCallback timed out"), 5000); |
| }); |
| if (result) |
| return; |
| |
| return waitForVideoFrameSize(video, width, height, ++counter); |
| } |
| |
| async function drawAndValidate(subcase, canvas, video, counter, stepName) |
| { |
| // First change canvas width and wait for width change to clear previous frames. |
| canvas.width = canvas.width + 500; |
| canvas.height = canvas.height + 500; |
| |
| let counter1 = counter; |
| let id = setInterval(() => { subcase.draw(subcase, canvas, counter1++)}, 100); |
| await waitForVideoFrameSize(video, canvas.width, canvas.height); |
| clearInterval(id); |
| |
| // Get back canvas size to normal and wait for width change to get test frames. |
| canvas.width = canvas.width - 500; |
| canvas.height = canvas.height - 500; |
| id = setInterval(() => { subcase.draw(subcase, canvas, counter)}, 100); |
| subcase.draw(subcase, canvas, counter); |
| await waitForVideoFrameSize(video, canvas.width, canvas.height); |
| clearInterval(id); |
| |
| assertImageSourceContainsCanvasTestPattern(video, counter, stepName); |
| } |
| |
| async function testCanvasToPeerConnection(t, subcase) |
| { |
| const canvas = document.createElement("canvas"); |
| canvas.width = width; |
| canvas.height = height; |
| debuge.appendChild(canvas); |
| t.add_cleanup(async () => debuge.removeChild(canvas)); |
| const localStream = canvas.captureStream(); |
| const remoteStream = await createLocalPeerConnectionStream(localStream); |
| t.add_cleanup(async () => closeConnections()); |
| |
| const video = document.createElement("video"); |
| video.autoplay = true; |
| video.controls = false; |
| debuge.appendChild(video); |
| t.add_cleanup(async () => debuge.removeChild(video)); |
| video.srcObject = remoteStream; |
| |
| for (let i = 0; i < 5; ++i) |
| await drawAndValidate(subcase, canvas, video, 1, `base case: ${i}`); |
| |
| for (let i = 0; i < 5; ++i) |
| await drawAndValidate(subcase, canvas, video, i, `iteration: ${i}`); |
| } |
| |
| const subcases = []; |
| // FIXME: This should be filled when 2D context supports HTMLCanvasElement.captureStream(). |
| // subcases.push({draw: with2DContext}); |
| subcases.push({draw: withWebGL}); |
| |
| function testDescription(subcase) { |
| return Object.keys(subcase).map((k) => `${k}: ${typeof subcase[k] === "function" ? subcase[k].name : subcase[k]}`).join(","); |
| } |
| |
| function createCanvasToPeerConnectionTests(slice, slices) { |
| const sliceSize = Math.floor(subcases.length / slices); |
| const first = sliceSize * slice; |
| for (const subcase of subcases.slice(first, first + sliceSize)) |
| promise_test(async t => { await testCanvasToPeerConnection(t, subcase); }, testDescription(subcase)); |
| } |
| createCanvasToPeerConnectionTests(0, 1); |
| </script> |
| </body> |
| </html> |
