<!DOCTYPE HTML>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
function createNewCanvas(width, height)
{
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, width, height);
return ctx;
}
function compareTwoCanvases(ctx1, ctx2, width, height)
{
var data1 = ctx1.getImageData(0, 0, width, height).data;
var data2 = ctx2.getImageData(0, 0, width, height).data;
var dataMatched = true;
for (var i = 0; i < data1.length; i++) {
if (data1[i] != data2[i]) {
dataMatched = false;
break;
}
}
assert_false(dataMatched);
}
async_test(function(t) {
var video = document.createElement("video");
video.oncanplaythrough = t.step_func_done(function() {
video.pause();
var width = 100;
var height = 100;
var ctx1 = createNewCanvas(width, height);
var ctx2 = createNewCanvas(width, height);
ctx1.imageSmoothingEnabled = false;
ctx2.imageSmoothingEnabled = true;
ctx2.imageSmoothingQuality = 'high';
ctx1.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, width, height);
ctx2.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, width, height);
compareTwoCanvases(ctx1, ctx2, width, height);
});
video.preload = "auto";
video.src = "../../compositing/resources/video.ogv";
}, 'drawImage from a video should look differently with imageSmoothing enabled');
</script>