| <!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> |
