forked from burg/timelapse
/
canvas-large-fills.html
71 lines (59 loc) · 2.38 KB
/
canvas-large-fills.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!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>