| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| test(function(t) { |
| }, "This test ensures that paths are correctly handled over save/restore boundaries"); |
| |
| function pixelShouldBe(x, y, color) { |
| assert_array_equals(context.getImageData(x, y, 1, 1).data, color); |
| } |
| |
| var canvas = document.createElement("canvas"); |
| canvas.width = 100; |
| canvas.height = 100; |
| |
| var context = canvas.getContext("2d"); |
| context.fillStyle = "red"; |
| context.fillRect(0, 0, 100, 100); |
| context.fillStyle = "green"; |
| |
| // Test translate |
| context.beginPath(); |
| context.save(); |
| context.translate(100, 100); |
| context.rect(-100, -100, 50, 50); |
| context.restore(); |
| context.fill(); |
| pixelShouldBe(25, 25, [0, 128, 0, 255]); |
| |
| // Test scale |
| context.beginPath(); |
| context.save(); |
| context.scale(2, 2); |
| context.rect(25, 0, 25, 25); |
| context.restore(); |
| context.fill(); |
| pixelShouldBe(75, 25, [0, 128, 0, 255]); |
| pixelShouldBe(75, 75, [255, 0, 0, 255]); |
| |
| // Test rotate |
| context.beginPath(); |
| context.save(); |
| context.rotate(90/180 * Math.PI); |
| context.rect(50, -50, 50, 50); |
| context.restore(); |
| context.fill(); |
| pixelShouldBe(25, 75, [0, 128, 0, 255]); |
| pixelShouldBe(75, 75, [255, 0, 0, 255]); |
| |
| // Test transform |
| context.beginPath(); |
| context.save(); |
| context.transform(1, 0, 0, 1, 50, 50); |
| context.rect(0, 0, 50, 50); |
| context.restore(); |
| context.fill(); |
| pixelShouldBe(75, 75, [0, 128, 0, 255]); |
| </script> |