<!DOCTYPE html>

<script src="../../resources/js-test-pre.js"></script>

<pre id="console"></pre>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>

<script>
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

function clearContextToGreen() {
    ctx.globalCompositeOperation="source-over";
    ctx.fillStyle = "rgb(0, 255, 0)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

var testData = [
    {compositeMode: 'source-over', expected: [0, 0, 255]},
    {compositeMode: 'source-in', expected: [0, 0, 255]},
    {compositeMode: 'source-out', expected: [0, 0, 0]},
    {compositeMode: 'source-atop', expected: [0, 0, 255]},
    {compositeMode: 'destination-over', expected: [0, 255, 0]},
    {compositeMode: 'destination-in', expected: [0, 255, 0]},
    {compositeMode: 'destination-out', expected: [0, 0, 0]},
    {compositeMode: 'destination-atop', expected: [0, 255, 0]},
    {compositeMode: 'lighter', expected: [0, 255, 255]},
    {compositeMode: 'copy', expected: [0, 0, 255]},
    {compositeMode: 'xor', expected: [0, 0, 0]},
];

function toHexString(number) {
    var hexString = number.toString(16).toUpperCase();
    if (number <= 9)
        hexString = '0' + hexString;
    return hexString;
}

function doTest(dataItem, fillSize) {
    clearContextToGreen();
    ctx.fillStyle = "rgb(0, 0, 255)";
    ctx.globalCompositeOperation = dataItem.compositeMode;
    ctx.fillRect(0, 0, fillSize, fillSize);

    var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var pixelOK = true;
    var pixelString = '#';
    var expectedString = '#';

    for (var x = 0; x < 3; x++) {
        pixelString = pixelString + toHexString(data.data[x]);
        expectedString = expectedString + toHexString(dataItem.expected[x]);
        if (data.data[x] != dataItem.expected[x])
            pixelOK = false;
    }

    var testName = "Fill Size " + fillSize + ', ' + dataItem.compositeMode;
    if (pixelOK)
        testPassed(testName + ': ' + pixelString);
    else
        testFailed(testName + ': EXPECTED ' + expectedString + ', GOT ' + pixelString);
}

debug("Tests that using the different composite modes to fill large rects doesn't crash and works as expected.");
[10000, 50000, 100000].forEach(function(fillSize) {
    testData.forEach(function(dataItem) {
        doTest(dataItem, fillSize)
    })});

</script>
</html>