| OLD | NEW |
| (Empty) |
| 1 description("Test for supporting setTransform on canvas patterns"); | |
| 2 | |
| 3 function pixelValueAt(context, x, y) { | |
| 4 var imageData = context.getImageData(x, y, 1, 1); | |
| 5 return imageData.data; | |
| 6 } | |
| 7 | |
| 8 function pixelToString(p) { | |
| 9 return "[" + p[0] + ", " + p[1] + ", " + p[2] + ", " + p[3] + "]" | |
| 10 } | |
| 11 | |
| 12 function pixelShouldBe(context, x, y, expectedPixelString) { | |
| 13 var pixel = pixelValueAt(context, x, y); | |
| 14 var expectedPixel = eval(expectedPixelString); | |
| 15 | |
| 16 var pixelString = "pixel " + x + ", " + y; | |
| 17 if (areArraysEqual(pixel, expectedPixel)) { | |
| 18 testPassed(pixelString + " is " + pixelToString(pixel)); | |
| 19 } else { | |
| 20 testFailed(pixelString + " should be " + pixelToString(expectedPixel) +
" was " + pixelToString(pixel)); | |
| 21 } | |
| 22 } | |
| 23 | |
| 24 function fillWithColor(context, canvas, color1, color2) { | |
| 25 context.save(); | |
| 26 context.fillStyle = color1; | |
| 27 context.fillRect(0, 0, canvas.width / 2, canvas.height); | |
| 28 context.fillStyle = color2; | |
| 29 context.fillRect(canvas.width / 2, 0, canvas.width / 2, canvas.height); | |
| 30 context.restore(); | |
| 31 } | |
| 32 | |
| 33 var canvas = document.createElement("canvas"); | |
| 34 canvas.height = 100; | |
| 35 canvas.width = 100; | |
| 36 canvas.style.height = "100"; | |
| 37 canvas.style.width = "100"; | |
| 38 | |
| 39 document.body.appendChild(canvas); | |
| 40 | |
| 41 var patternImage = document.createElement("canvas"); | |
| 42 patternImage.height = 10; | |
| 43 patternImage.width = 20; | |
| 44 var patternImageCtx = patternImage.getContext('2d'); | |
| 45 fillWithColor(patternImageCtx, patternImage, "red", "green"); | |
| 46 var greenPixel = pixelValueAt(patternImageCtx, 10, 0); | |
| 47 | |
| 48 | |
| 49 var ctx = canvas.getContext('2d'); | |
| 50 var pattern = ctx.createPattern(patternImage, "repeat-x"); | |
| 51 var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"); | |
| 52 var matrix = svgElement.createSVGMatrix(); | |
| 53 matrix = matrix.translate(10, 0); | |
| 54 pattern.setTransform(matrix); | |
| 55 | |
| 56 fillWithColor(ctx, canvas, "blue", "blue"); | |
| 57 | |
| 58 ctx.fillStyle = pattern; | |
| 59 ctx.translate(20, 20); | |
| 60 ctx.fillRect(0, 0, 10, 10); | |
| 61 pixelShouldBe(ctx, 20, 20, "greenPixel"); | |
| OLD | NEW |