51 lines
1.2 KiB
HTML
51 lines
1.2 KiB
HTML
<!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>
|
|
|