<!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>