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 |