<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<canvas id="dest" height="100" width="100"></canvas>

<script>
var sourceWidth = 100;
var sourceHeight = 100;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceImg = document.createElementNS('http://www.w3.org/2000/svg', 'image');
sourceImg.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '../2x2.png');
sourceImg.width = sourceWidth;
sourceImg.height = sourceHeight;
var destCtx = destCanvas.getContext('2d');

function checkPixel(x, y, expected, epsilon) {
    var actual = destCtx.getImageData(x, y, 1, 1).data;
    assert_true(actual.length === expected.length);
    for (var i=0; i < actual.length; i++)
        assert_approx_equals(actual[i], expected[i], epsilon);
}

var pixelTests = [
    ['Pixel Top Left Image', 0, 0, [253, 140, 245, 255], 1],
    ['Pixel Top Right Image', 0, 99, [253, 140, 245, 255], 1],
    ['Pixel Bottom Left Image', 99, 0, [253, 140, 245, 255], 1],
    ['Pixel Bottom Right Image', 99, 99, [253, 140, 245, 255], 1],
];

function runTest() {
    destCtx.fillStyle = "#FF0000";
    destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
    destCtx.imageSmoothingEnabled = smoothingEnabled;
    // 2 arguments, the dest origin is 0,0
    // The source canvas will copied to the 0,0 position of the destination canvas
    destCtx.drawImage(sourceImg, 0, 0);
    generate_tests(checkPixel, pixelTests);
}

async_test(t => {
        window.onload = function() {
            t.step(runTest);
            t.done();
        }
}, 'Load a 100x100 image to a SVG image and draw it to a 100x100 canvas.');
</script>