| OLD | NEW |
| (Empty) |
| 1 // Based on http://philip.html5.org/tests/canvas/suite/tests/2d.pattern.modify.c
anvas1.html | |
| 2 | |
| 3 description("This test checks if pattern changes after the source canvas is modi
fied. See https://bugs.webkit.org/show_bug.cgi?id=20578 ."); | |
| 4 | |
| 5 function dataToArray(data) { | |
| 6 var result = new Array(data.length) | |
| 7 for (var i = 0; i < data.length; i++) | |
| 8 result[i] = data[i]; | |
| 9 return result; | |
| 10 } | |
| 11 | |
| 12 function getPixel(ctx, x, y) { | |
| 13 var data = ctx.getImageData(x,y,1,1); | |
| 14 if (!data) // getImageData failed, which should never happen | |
| 15 return [-1,-1,-1,-1]; | |
| 16 return dataToArray(data.data); | |
| 17 } | |
| 18 | |
| 19 function pixelShouldBe(ctx, x, y, colour) { | |
| 20 shouldBe("getPixel(ctx, " + [x, y] +")", "["+colour+"]"); | |
| 21 } | |
| 22 | |
| 23 function createCanvasImage(width, height, colour) { | |
| 24 var c = document.createElement("canvas"); | |
| 25 c.width = width; | |
| 26 c.height = height; | |
| 27 var context = c.getContext("2d"); | |
| 28 context.fillStyle = colour; | |
| 29 context.fillRect(0,0,width,height); | |
| 30 return c; | |
| 31 } | |
| 32 | |
| 33 var canvas = createCanvasImage(100, 50, '#fff'); | |
| 34 var ctx = canvas.getContext('2d'); | |
| 35 | |
| 36 var patternCanvas = createCanvasImage(100, 50, '#0f0'); | |
| 37 var pattern = ctx.createPattern(patternCanvas, 'no-repeat'); | |
| 38 | |
| 39 // Modify the original canvas after we create a pattern. | |
| 40 var patternCtx = patternCanvas.getContext('2d'); | |
| 41 patternCtx.fillStyle = '#f00'; | |
| 42 patternCtx.fillRect(0, 0, 100, 50); | |
| 43 | |
| 44 ctx.fillStyle = pattern; | |
| 45 ctx.fillRect(0, 0, 100, 50); | |
| 46 | |
| 47 pixelShouldBe(ctx, 1, 1, [0, 255, 0, 255]); | |
| 48 pixelShouldBe(ctx, 98, 1, [0, 255, 0, 255]); | |
| 49 pixelShouldBe(ctx, 1, 48, [0, 255, 0, 255]); | |
| 50 pixelShouldBe(ctx, 98, 48, [0, 255, 0, 255]); | |
| OLD | NEW |