155 lines
5.1 KiB
HTML
155 lines
5.1 KiB
HTML
<!DOCTYPE HTML>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|
|
|
<title>Canvas2D test: CaptureStream()</title>
|
|
|
|
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<script src="captureStream_common.js"></script>
|
|
<link rel="stylesheet" href="/tests/SimpleTest/test.css">
|
|
<body>
|
|
<script>
|
|
SimpleTest.waitForExplicitFinish();
|
|
SimpleTest.requestFlakyTimeout("Ensuring nothing happens until timing out with good margin");
|
|
|
|
// CaptureStreamTestHelper holding utility test functions.
|
|
const h = new CaptureStreamTestHelper2D();
|
|
// Canvas element captured by streams.
|
|
const c = h.createAndAppendElement('canvas', 'c');
|
|
// Video element with captureStream stream in automatic mode.
|
|
const vauto = h.createAndAppendElement('video', 'vauto');
|
|
// Video element with captureStream stream in manual (fps 0) mode.
|
|
const vmanual = h.createAndAppendElement('video', 'vmanual');
|
|
// Video element with captureStream stream with fixed frame rate.
|
|
const vrate = h.createAndAppendElement('video', 'vrate');
|
|
|
|
async function checkDrawColorInitialRed() {
|
|
info("Checking that all video elements become red when initiated just after the first drawColor(red).");
|
|
|
|
h.drawColor(c, h.red);
|
|
|
|
vauto.srcObject = c.captureStream();
|
|
vmanual.srcObject = c.captureStream(0);
|
|
vrate.srcObject = c.captureStream(10);
|
|
|
|
ok(h.isPixel(h.getPixel(vauto), h.blackTransparent, 0),
|
|
"vauto should not be drawn to before stable state");
|
|
ok(h.isPixel(h.getPixel(vrate), h.blackTransparent, 0),
|
|
"vrate should not be drawn to before stable state");
|
|
ok(h.isPixel(h.getPixel(vmanual), h.blackTransparent, 0),
|
|
"vmanual should not be drawn to before stable state");
|
|
|
|
await h.pixelMustBecome(vauto, h.red, {
|
|
infoString: "should become red automatically",
|
|
});
|
|
await h.pixelMustBecome(vrate, h.red, {
|
|
infoString: "should become red automatically",
|
|
});
|
|
await h.pixelMustBecome(vmanual, h.red, {
|
|
infoString: "should become red when we get to stable state (first frame)",
|
|
});
|
|
}
|
|
|
|
async function checkDrawColorGreen() {
|
|
info("Checking that drawing green propagates properly to video elements.");
|
|
|
|
const drawing = h.startDrawing(() => h.drawColor(c, h.green));
|
|
|
|
try {
|
|
await h.pixelMustBecome(vauto, h.green, {
|
|
infoString: "should become green automatically",
|
|
});
|
|
await h.pixelMustBecome(vrate, h.green, {
|
|
infoString: "should become green automatically",
|
|
});
|
|
await h.pixelMustBecome(vmanual, h.red, {
|
|
infoString: "should still be red",
|
|
});
|
|
h.requestFrame(vmanual);
|
|
await h.pixelMustBecome(vmanual, h.green, {
|
|
infoString: "should become green after requstFrame()",
|
|
});
|
|
}
|
|
catch(err) {
|
|
ok(false, "checkDrawColorGreen failed: ", err);
|
|
}
|
|
drawing.stop();
|
|
}
|
|
|
|
async function checkRequestFrameOrderGuarantee() {
|
|
info("Checking that requestFrame() immediately after a drawColor() " +
|
|
"call results in the expected frame seen in the stream.");
|
|
|
|
await h.pixelMustBecome(vmanual, h.green, {
|
|
infoString: "should still be green",
|
|
});
|
|
h.drawColor(c, h.red); // 1. Draw canvas red
|
|
h.requestFrame(vmanual); // 2. Immediately request a frame
|
|
await h.pixelMustBecome(vmanual, h.red, {
|
|
infoString: "should become red after call order test",
|
|
});
|
|
}
|
|
|
|
async function checkDrawImageNotCleanRed() {
|
|
info("Checking that drawImage with not origin-clean image renders streams useless.");
|
|
const ctx = c.getContext('2d');
|
|
const notCleanRed = new Image();
|
|
|
|
await new Promise((resolve, reject) => {
|
|
notCleanRed.onload = resolve;
|
|
notCleanRed.onerror = () => reject(new Error("Failed to load tainted image."));
|
|
notCleanRed.src = "http://example.com/tests/dom/canvas/test/image_red_crossorigin_credentials.png";
|
|
document.body.appendChild(notCleanRed);
|
|
});
|
|
const drawing = h.startDrawing(
|
|
() => ctx.drawImage(notCleanRed, 0, 0, c.width, c.height));
|
|
h.testNotClean(c);
|
|
try {
|
|
await h.pixelMustNotBecome(vauto, h.red, {
|
|
timeout: 1000,
|
|
infoString: "should not become red",
|
|
});
|
|
ok(h.isPixelNot(h.getPixel(vrate), h.red, 250),
|
|
"should not have become red");
|
|
await h.pixelMustBecome(vmanual, h.green, {
|
|
infoString: "should still be green",
|
|
});
|
|
h.requestFrame(vmanual);
|
|
await h.pixelMustNotBecome(vmanual, h.red, {
|
|
timeout: 1000,
|
|
infoString: "should not become red",
|
|
});
|
|
} catch(err) {
|
|
ok(false, "checkDrawImageNotCleanRed failed: ", err);
|
|
}
|
|
drawing.stop();
|
|
}
|
|
|
|
async function checkEndedOnStop() {
|
|
const promises = [vauto, vmanual, vrate].map(elem => {
|
|
elem.srcObject.getTracks()[0].stop();
|
|
return new Promise(resolve =>
|
|
elem.addEventListener("ended", function endedListener(event) {
|
|
ok(true, "Element " + elem.id + " ended.");
|
|
resolve();
|
|
elem.removeEventListener("ended", endedListener);
|
|
}));
|
|
});
|
|
await Promise.all(promises);
|
|
}
|
|
|
|
function finish() {
|
|
ok(true, 'Test complete.');
|
|
SimpleTest.finish();
|
|
}
|
|
|
|
(async () => {
|
|
await checkDrawColorInitialRed();
|
|
await checkDrawColorGreen();
|
|
await checkRequestFrameOrderGuarantee();
|
|
await checkDrawColorGreen(); // Restore video elements to green.
|
|
await checkDrawImageNotCleanRed();
|
|
await checkEndedOnStop();
|
|
finish();
|
|
})();
|
|
</script>
|
|
|