| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <canvas></canvas> |
| <script> |
| |
| description("The test to ensure resetting scaling by height change"); |
| |
| function assertPixelApprox(ctx, x,y, r,g,b,a, tolerance) |
| { |
| var imgdata = ctx.getImageData(x, y, 1, 1); |
| var diff = Math.max(Math.abs(r-imgdata.data[0]), Math.abs(g-imgdata.data[1]), Math.abs(b-imgdata.data[2]), Math.abs(a-imgdata.data[3])); |
| shouldBeFalse((diff > tolerance).toString()); |
| } |
| |
| function quadToPath(quad) |
| { |
| ctx.beginPath(); |
| ctx.moveTo(quad[0].x, quad[0].y); |
| ctx.lineTo(quad[1].x, quad[1].y); |
| ctx.lineTo(quad[2].x, quad[2].y); |
| ctx.lineTo(quad[3].x, quad[3].y); |
| ctx.closePath(); |
| } |
| |
| window.canvas = document.querySelector("canvas"); |
| window.ctx = canvas.getContext("2d"); |
| |
| for (var i=0; i<100; i++) { |
| ctx.scale(10, 10); |
| } |
| // Setting width or height resets the transform of the canvas context |
| canvas.width = 200; |
| canvas.height = 100; |
| |
| quadToPath([{x:0,y:0},{x:0,y:100},{x:100,y:100},{x:100,y:0}]); |
| ctx.fillStyle = 'rgb(0, 255, 0)'; |
| ctx.fill(); |
| |
| assertPixelApprox(ctx, 50, 50, 0, 255, 0, 255, 0); |
| assertPixelApprox(ctx, 150, 50, 0, 0, 0, 0, 0); |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
| |
