<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<script>
description("Test that compositing does not influence the gradient space to context space mapping.");
var ctx = document.createElement('canvas').getContext('2d');
const tolerance = 3;

function dataToArray(data) {
    var result = new Array(data.length)
    for (var i = 0; i < data.length; i++)
        result[i] = data[i];
    return result;
}

function getPixel(x, y) {
    var data = ctx.getImageData(x,y,1,1);
    if (!data) // getImageData failed, which should never happen
        return [-1,-1,-1,-1];
    return dataToArray(data.data);
}

function pixelShouldBeNear(x, y, colour) {
    var c = getPixel(x, y);
    var diff = Math.max(Math.abs(c[0]-colour[0]), Math.abs(c[1]-colour[1]), Math.abs(c[2]-colour[2]), Math.abs(c[3]-colour[3]));
    if (diff < tolerance)
        testPassed("getPixel(" + [x, y] + ") is close to [" + colour + "].");
    else
        testFailed("getPixel(" + [x, y] + ") should be close to [" + colour + "]. Was [" + c + "].");
}

var grad = ctx.createLinearGradient(100,0,200,0);
grad.addColorStop(0, 'rgba(0,0,0,0)');
grad.addColorStop(0.5, 'rgba(0,0,0,0)');
grad.addColorStop(0.5, 'rgba(0,128,0,1)');
grad.addColorStop(1, 'rgba(0,128,0,1)');

ctx.fillStyle = "rgba(0,0,0,0)";
ctx.beginPath();
ctx.moveTo(100,0);
ctx.rect(100,0,100,100);
ctx.closePath();
ctx.fill();

ctx.globalCompositeOperation = 'destination-atop';

ctx.fillStyle = grad;
ctx.beginPath();
ctx.moveTo(100,0);
ctx.rect(100,0,100,100);
ctx.closePath();
ctx.fill();

pixelShouldBeNear(125,50,[0,0,0,0]);
pixelShouldBeNear(175,50,[0,128,0,255]);
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>