OLD | NEW |
1 <script src="../../resources/js-test.js"></script> | 1 <script src="../../resources/testharness.js"></script> |
2 <script src="canvas-save-restore-with-path.js"></script> | 2 <script src="../../resources/testharnessreport.js"></script> |
| 3 <script> |
| 4 test(function(t) { |
| 5 }, "This test ensures that paths are correctly handled over save/restore boundar
ies"); |
| 6 |
| 7 function pixelShouldBe(x, y, color) { |
| 8 assert_array_equals(context.getImageData(x, y, 1, 1).data, color); |
| 9 } |
| 10 |
| 11 var canvas = document.createElement("canvas"); |
| 12 canvas.width = 100; |
| 13 canvas.height = 100; |
| 14 |
| 15 var context = canvas.getContext("2d"); |
| 16 context.fillStyle = "red"; |
| 17 context.fillRect(0, 0, 100, 100); |
| 18 context.fillStyle = "green"; |
| 19 |
| 20 // Test translate |
| 21 context.beginPath(); |
| 22 context.save(); |
| 23 context.translate(100, 100); |
| 24 context.rect(-100, -100, 50, 50); |
| 25 context.restore(); |
| 26 context.fill(); |
| 27 pixelShouldBe(25, 25, [0, 128, 0, 255]); |
| 28 |
| 29 // Test scale |
| 30 context.beginPath(); |
| 31 context.save(); |
| 32 context.scale(2, 2); |
| 33 context.rect(25, 0, 25, 25); |
| 34 context.restore(); |
| 35 context.fill(); |
| 36 pixelShouldBe(75, 25, [0, 128, 0, 255]); |
| 37 pixelShouldBe(75, 75, [255, 0, 0, 255]); |
| 38 |
| 39 // Test rotate |
| 40 context.beginPath(); |
| 41 context.save(); |
| 42 context.rotate(90/180 * Math.PI); |
| 43 context.rect(50, -50, 50, 50); |
| 44 context.restore(); |
| 45 context.fill(); |
| 46 pixelShouldBe(25, 75, [0, 128, 0, 255]); |
| 47 pixelShouldBe(75, 75, [255, 0, 0, 255]); |
| 48 |
| 49 // Test transform |
| 50 context.beginPath(); |
| 51 context.save(); |
| 52 context.transform(1, 0, 0, 1, 50, 50); |
| 53 context.rect(0, 0, 50, 50); |
| 54 context.restore(); |
| 55 context.fill(); |
| 56 pixelShouldBe(75, 75, [0, 128, 0, 255]); |
| 57 </script> |
OLD | NEW |