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> |
9 var canvas = document.getElementById("c"); | 8 var canvas = document.getElementById("c"); |
10 var ctx = canvas.getContext("2d"); | 9 var ctx = canvas.getContext("2d"); |
11 | 10 |
12 function clearContextToGreen() { | 11 function clearContextToGreen() { |
13 ctx.globalCompositeOperation="source-over"; | 12 ctx.globalCompositeOperation="source-over"; |
14 ctx.fillStyle = "rgb(0, 255, 0)"; | 13 ctx.fillStyle = "rgb(0, 255, 0)"; |
15 ctx.fillRect(0, 0, canvas.width, canvas.height); | 14 ctx.fillRect(0, 0, canvas.width, canvas.height); |
16 } | 15 } |
17 | 16 |
18 var testData = [ | 17 var testScenarios = [ |
19 {compositeMode: 'source-over', expected: [0, 0, 255]}, | 18 ['Test source-over', 'source-over', [0, 0, 255]], |
20 {compositeMode: 'source-in', expected: [0, 0, 255]}, | 19 ['Test source-in', 'source-in', [0, 0, 255]], |
21 {compositeMode: 'source-out', expected: [0, 0, 0]}, | 20 ['Test source-out', 'source-out', [0, 0, 0]], |
22 {compositeMode: 'source-atop', expected: [0, 0, 255]}, | 21 ['Test source-atop', 'source-atop', [0, 0, 255]], |
23 {compositeMode: 'destination-over', expected: [0, 255, 0]}, | 22 ['Test destination-over', 'destination-over', [0, 255, 0]], |
24 {compositeMode: 'destination-in', expected: [0, 255, 0]}, | 23 ['Test destiation-in', 'destination-in', [0, 255, 0]], |
25 {compositeMode: 'destination-out', expected: [0, 0, 0]}, | 24 ['Test destination-out', 'destination-out', [0, 0, 0]], |
26 {compositeMode: 'destination-atop', expected: [0, 255, 0]}, | 25 ['Test destination-atop', 'destination-atop', [0, 255, 0]], |
27 {compositeMode: 'lighter', expected: [0, 255, 255]}, | 26 ['Test lighter', 'lighter', [0, 255, 255]], |
28 {compositeMode: 'copy', expected: [0, 0, 255]}, | 27 ['Test copy', 'copy', [0, 0, 255]], |
29 {compositeMode: 'xor', expected: [0, 0, 0]}, | 28 ['Test xor', 'xor', [0, 0, 0]] |
30 ]; | 29 ]; |
31 | 30 |
32 function toHexString(number) { | 31 var fillSize = 0; |
33 var hexString = number.toString(16).toUpperCase(); | 32 function testLargeRect(compositeMode, expected) { |
34 if (number <= 9) | 33 clearContextToGreen(); |
35 hexString = '0' + hexString; | 34 ctx.fillStyle = "rgb(0, 0, 255)"; |
36 return hexString; | 35 ctx.globalCompositeOperation = compositeMode; |
36 ctx.fillRect(0, 0, fillSize, fillSize); | |
37 | |
38 var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data; | |
39 var testPassed = true; | |
40 for (var i = 0; i < 3; i++) | |
41 if (data[i] != expected[i]) | |
42 testPassed = false; | |
43 assert_true(testPassed); | |
37 } | 44 } |
38 | 45 |
39 function doTest(dataItem, fillSize) { | 46 test(function(t) { |
40 clearContextToGreen(); | 47 [10000, 50000, 100000].forEach(function(fillSizeItem) { |
41 ctx.fillStyle = "rgb(0, 0, 255)"; | 48 fillSize = fillSizeItem; |
42 ctx.globalCompositeOperation = dataItem.compositeMode; | 49 generate_tests(testLargeRect, testScenarios); |
Justin Novosad
2017/02/16 15:41:56
should not put generate_tests inside a test.
zakerinasab
2017/02/16 18:12:40
Acknowledged.
| |
43 ctx.fillRect(0, 0, fillSize, fillSize); | 50 }); |
44 | 51 }, "Tests that using the different composite modes to fill large rects doesn't c rash and works as expected."); |
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 | 52 |
70 </script> | 53 </script> |
71 </html> | |
OLD | NEW |