OLD | NEW |
1 <!DOCTYPE html> | 1 <script src="../../resources/testharness.js"></script> |
2 | 2 <script src="../../resources/testharnessreport.js"></script> |
3 <script src="../../resources/js-test.js"></script> | |
4 | 3 |
5 <pre id="console"></pre> | 4 <pre id="console"></pre> |
6 <canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (
fallback content)</p></canvas> | 5 <canvas id="c" width="100" height="50"></canvas> |
7 | 6 |
8 <script> | 7 <script> |
| 8 // Tests that using the different composite modes to fill large rects doesn't cr
ash and works as expected. |
9 var canvas = document.getElementById("c"); | 9 var canvas = document.getElementById("c"); |
10 var ctx = canvas.getContext("2d"); | 10 var ctx = canvas.getContext("2d"); |
11 | 11 |
12 function clearContextToGreen() { | 12 function clearContextToGreen() { |
13 ctx.globalCompositeOperation="source-over"; | 13 ctx.globalCompositeOperation="source-over"; |
14 ctx.fillStyle = "rgb(0, 255, 0)"; | 14 ctx.fillStyle = "rgb(0, 255, 0)"; |
15 ctx.fillRect(0, 0, canvas.width, canvas.height); | 15 ctx.fillRect(0, 0, canvas.width, canvas.height); |
16 } | 16 } |
17 | 17 |
18 var testData = [ | 18 var testScenarios = [ |
19 {compositeMode: 'source-over', expected: [0, 0, 255]}, | 19 ['Test source-over', 'source-over', [0, 0, 255]], |
20 {compositeMode: 'source-in', expected: [0, 0, 255]}, | 20 ['Test source-in', 'source-in', [0, 0, 255]], |
21 {compositeMode: 'source-out', expected: [0, 0, 0]}, | 21 ['Test source-out', 'source-out', [0, 0, 0]], |
22 {compositeMode: 'source-atop', expected: [0, 0, 255]}, | 22 ['Test source-atop', 'source-atop', [0, 0, 255]], |
23 {compositeMode: 'destination-over', expected: [0, 255, 0]}, | 23 ['Test destination-over', 'destination-over', [0, 255, 0]], |
24 {compositeMode: 'destination-in', expected: [0, 255, 0]}, | 24 ['Test destiation-in', 'destination-in', [0, 255, 0]], |
25 {compositeMode: 'destination-out', expected: [0, 0, 0]}, | 25 ['Test destination-out', 'destination-out', [0, 0, 0]], |
26 {compositeMode: 'destination-atop', expected: [0, 255, 0]}, | 26 ['Test destination-atop', 'destination-atop', [0, 255, 0]], |
27 {compositeMode: 'lighter', expected: [0, 255, 255]}, | 27 ['Test lighter', 'lighter', [0, 255, 255]], |
28 {compositeMode: 'copy', expected: [0, 0, 255]}, | 28 ['Test copy', 'copy', [0, 0, 255]], |
29 {compositeMode: 'xor', expected: [0, 0, 0]}, | 29 ['Test xor', 'xor', [0, 0, 0]] |
30 ]; | 30 ]; |
31 | 31 |
32 function toHexString(number) { | 32 var fillSize = 0; |
33 var hexString = number.toString(16).toUpperCase(); | 33 function testLargeRect(compositeMode, expected) { |
34 if (number <= 9) | 34 clearContextToGreen(); |
35 hexString = '0' + hexString; | 35 ctx.fillStyle = "rgb(0, 0, 255)"; |
36 return hexString; | 36 ctx.globalCompositeOperation = compositeMode; |
| 37 ctx.fillRect(0, 0, fillSize, fillSize); |
| 38 |
| 39 var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data; |
| 40 var testPassed = true; |
| 41 for (var i = 0; i < 3; i++) |
| 42 if (data[i] != expected[i]) |
| 43 testPassed = false; |
| 44 assert_true(testPassed); |
37 } | 45 } |
38 | 46 |
39 function doTest(dataItem, fillSize) { | 47 [10000, 50000, 100000].forEach(function(fillSizeItem) { |
40 clearContextToGreen(); | 48 fillSize = fillSizeItem; |
41 ctx.fillStyle = "rgb(0, 0, 255)"; | 49 generate_tests(testLargeRect, testScenarios); |
42 ctx.globalCompositeOperation = dataItem.compositeMode; | 50 }); |
43 ctx.fillRect(0, 0, fillSize, fillSize); | |
44 | |
45 var data = ctx.getImageData(0, 0, canvas.width, canvas.height); | |
46 var pixelOK = true; | |
47 var pixelString = '#'; | |
48 var expectedString = '#'; | |
49 | |
50 for (var x = 0; x < 3; x++) { | |
51 pixelString = pixelString + toHexString(data.data[x]); | |
52 expectedString = expectedString + toHexString(dataItem.expected[x]); | |
53 if (data.data[x] != dataItem.expected[x]) | |
54 pixelOK = false; | |
55 } | |
56 | |
57 var testName = "Fill Size " + fillSize + ', ' + dataItem.compositeMode; | |
58 if (pixelOK) | |
59 testPassed(testName + ': ' + pixelString); | |
60 else | |
61 testFailed(testName + ': EXPECTED ' + expectedString + ', GOT ' + pixelS
tring); | |
62 } | |
63 | |
64 debug("Tests that using the different composite modes to fill large rects doesn'
t crash and works as expected."); | |
65 [10000, 50000, 100000].forEach(function(fillSize) { | |
66 testData.forEach(function(dataItem) { | |
67 doTest(dataItem, fillSize) | |
68 })}); | |
69 | 51 |
70 </script> | 52 </script> |
71 </html> | |
OLD | NEW |