blob: f51442fe5dd1f38d71ef6c38d26ebb88e8f578b4 [file] [log] [blame]
<html>
<head>
<title>Create patterns on canvas using video</title>
<script src="media-file.js"></script>
<script src="video-test.js"></script>
<script src="../resources/platform-helper.js"></script>
<script>
var video;
var numberOfSeeks = 4;
var expectedResults = [
// Each entry is formatted as [x, y, r, g, b].
[40, 165, 194, 193, 14], // Represents yellow north west tile.
[355, 165, 194, 193, 14], // Represents yellow north east tile.
[40, 403, 194, 193, 14], // Represents yellow south west tile.
[355, 403, 194, 193, 14], // Represents yellow south east tile.
[56, 165, 17, 197, 195], // Represents blue/cyan north west tile.
[371, 165, 17, 197, 195], // Represents blue/cyan north east tile.
[56, 403, 17, 197, 195], // Represents blue/cyan south west tile.
[371, 403, 17, 197, 195], // Represents blue/cyan south east tile.
[73, 165, 20, 200, 18], // Represents green north west tile.
[388, 165, 20, 200, 18], // Represents green north east tile.
[73, 403, 20, 200, 18], // Represents green south west tile.
[388, 403, 20, 200, 18], // Represents green south east tile.
]
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 = 2 * video.videoWidth;
canvas.height = 2 * video.videoHeight;
var ctx = canvas.getContext('2d');
ctx.fillStyle = ctx.createPattern(video, 'repeat');
ctx.fillRect(0, 0, canvas.width, canvas.height);
document.getElementById('canvases').appendChild(canvas);
expectedResults.forEach(function(element) {
checkColorAtLocation(ctx, element[0], element[1], element[2], element[3], element[4], videoCanvasPixelComparisonTolerance());
});
// Ensure that the test seeks a couple of times.
if (--numberOfSeeks) {
video.currentTime += 0.24;
return;
}
endTest();
}
function canplaythrough()
{
video.currentTime = 1;
}
function start()
{
findMediaElement();
waitForEvent('canplaythrough', canplaythrough);
waitForEvent('seeked', drawAndInsertFrame);
video.src = findMediaFile('video', 'content/test');
}
</script>
</head>
<body onload="start()">
<video id="video"></video>
<div id="canvases"></div>
</body>
</html>