72 lines
2.4 KiB
HTML
72 lines
2.4 KiB
HTML
<!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>
|