1 description("Test for canvas regression where pattern transforms were ignored https://bugs.webkit.org/show_bug.cgi?id=21498");
3 function pixelValueAt(context, x, y) {
4 var imageData = context.getImageData(x, y, 1, 1);
8 function pixelToString(p) {
9 return "[" + p[0] + ", " + p[1] + ", " + p[2] + ", " + p[3] + "]"
12 function pixelShouldBe(context, x, y, expectedPixelString) {
13 var pixel = pixelValueAt(context, x, y);
14 var expectedPixel = eval(expectedPixelString);
16 var pixelString = "pixel " + x + ", " + y;
17 if (areArraysEqual(pixel, expectedPixel)) {
18 testPassed(pixelString + " is " + pixelToString(pixel));
20 testFailed(pixelString + " should be " + pixelToString(expectedPixel) + " was " + pixelToString(pixel));
24 function fillWithColor(context, color) {
26 context.fillStyle = color;
27 context.fillRect(0, 0, canvas.width, canvas.height);
31 var canvas = document.createElement("canvas");
34 canvas.style.height = "100";
35 canvas.style.width = "100";
37 document.body.appendChild(canvas);
39 var patternImage = document.createElement("canvas");
40 patternImage.height = 10;
41 patternImage.width = 10;
42 var patternImageCtx = patternImage.getContext('2d');
43 fillWithColor(patternImageCtx, "green");
44 var greenPixel = pixelValueAt(patternImageCtx, 0, 0);
47 var ctx = canvas.getContext('2d');
48 var pattern = ctx.createPattern(patternImage, "no-repeat");
50 fillWithColor(ctx, "blue");
52 ctx.fillStyle = pattern;
53 ctx.translate(20, 20);
54 ctx.fillRect(0, 0, 10, 10);
55 pixelShouldBe(ctx, 20, 20, "greenPixel");