63 lines
1.7 KiB
HTML
63 lines
1.7 KiB
HTML
<!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>
|