blob: bb0b5f5239652adbdd467e7ab4013865fd1609bf [file] [log] [blame]
<html>
<head>
<title>Drawing to canvas using video</title>
<script src=media-file.js></script>
<script>
var video;
var numberOfSeeks = 4;
var expectedResults = [
// [x, y, r, g, b]
[40, 165, 200, 200, 0], // yellow
[56, 165, 57, 202, 203], // blue/cyan
[73, 165, 53, 203, 9], // green
];
if (window.testRunner) {
testRunner.dumpAsText(true);
testRunner.waitUntilDone();
}
function checkColorAtLocation(ctx, x, y, r, g, b, tolerance)
{
var buffer = ctx.getImageData(x, y, 1, 1).data;
if (Math.abs(buffer[0] - r) < tolerance
&& Math.abs(buffer[1] - g) < tolerance
&& Math.abs(buffer[2] - b) < tolerance)
logResult(true, "Saw close enough to (" + r + ", " + g + ", " + b + ") at (" + x + ", " + y + ")");
else
logResult(false, "Expected (" + r + ", " + g + ", " + b + ") at (" + x + ", " + y + ") but saw (" + buffer[0] + ", " + buffer[1] + ", " + buffer[2] + ")");
}
function drawAndInsertFrame()
{
var canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
document.getElementById('canvases').appendChild(canvas);
// The test video has a number of colored squares.
// Check a few of them.
expectedResults.forEach(function (value) {
checkColorAtLocation(ctx, value[0], value[1], value[2], value[3], value[4], 3);
})
// Seek a few times. We exercise different code paths
// for the first few and then subsequent drawImage calls.
if (--numberOfSeeks) {
video.currentTime += 0.5;
return;
}
endTest();
}
function canplaythrough()
{
video.currentTime = 1;
}
function start()
{
findMediaElement();
waitForEvent('canplaythrough', canplaythrough);
waitForEvent('seeked', drawAndInsertFrame);
video.src = findMediaFile('video', 'content/test');
}
</script>
<script src=video-test.js></script>
</head>
<body onload="start()">
<video id="video"></video>
<div id="canvases"></div>
</body>
</html>