| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| // Based on http://philip.html5.org/tests/canvas/suite/tests/2d.pattern.modify.canvas1.html |
| |
| function pixelShouldBe(ctx, x, y, color) { |
| assert_array_equals(ctx.getImageData(x, y, 1, 1).data, color); |
| } |
| |
| function createCanvasImage(width, height, color) { |
| var c = document.createElement("canvas"); |
| c.width = width; |
| c.height = height; |
| var context = c.getContext("2d"); |
| context.fillStyle = color; |
| context.fillRect(0, 0, width, height); |
| return c; |
| } |
| |
| test(function(t) { |
| var canvas = createCanvasImage(100, 50, '#fff'); |
| var ctx = canvas.getContext('2d'); |
| |
| var patternCanvas = createCanvasImage(100, 50, '#0f0'); |
| var pattern = ctx.createPattern(patternCanvas, 'no-repeat'); |
| |
| // Modify the original canvas after we create a pattern. |
| var patternCtx = patternCanvas.getContext('2d'); |
| patternCtx.fillStyle = '#f00'; |
| patternCtx.fillRect(0, 0, 100, 50); |
| |
| ctx.fillStyle = pattern; |
| ctx.fillRect(0, 0, 100, 50); |
| |
| pixelShouldBe(ctx, 1, 1, [0, 255, 0, 255]); |
| pixelShouldBe(ctx, 98, 1, [0, 255, 0, 255]); |
| pixelShouldBe(ctx, 1, 48, [0, 255, 0, 255]); |
| pixelShouldBe(ctx, 98, 48, [0, 255, 0, 255]); |
| }, "This test checks if pattern changes after the source canvas is modified. See https://bugs.webkit.org/show_bug.cgi?id=20578 ."); |
| </script> |