<!DOCTYPE html>
<html>
<head>
<title>Test that restoring a valid matrix after aplying non-invertible doesn't collapse all path to 0,0.</title>
</head>
<body>
<canvas id='canvas0' width='100' height='100'></canvas>
<canvas id='canvas1' width='100' height='100'></canvas>
<canvas id='canvas2' width='100' height='100'></canvas>
<canvas id='canvas3' width='100' height='100'></canvas>
<canvas id='canvas4' width='100' height='100'></canvas>
<canvas id='canvas5' width='100' height='100'></canvas>
<canvas id='canvas6' width='100' height='100'></canvas>
<canvas id='canvas7' width='100' height='100'></canvas>
<script>
var canvas0 = document.getElementById('canvas0');
var canvas1 = document.getElementById('canvas1');
var canvas2 = document.getElementById('canvas2');
var canvas3 = document.getElementById('canvas3');
var canvas4 = document.getElementById('canvas4');
var canvas5 = document.getElementById('canvas5');
var canvas6 = document.getElementById('canvas6');
var canvas7 = document.getElementById('canvas7');
var ctx0 = canvas0.getContext('2d');
var ctx1 = canvas1.getContext('2d');
var ctx2 = canvas2.getContext('2d');
var ctx3 = canvas3.getContext('2d');
var ctx4 = canvas4.getContext('2d');
var ctx5 = canvas5.getContext('2d');
var ctx6 = canvas6.getContext('2d');
var ctx7 = canvas7.getContext('2d');
// Testing moveTo.
ctx0.moveTo(80,80);
ctx0.lineTo(20,80);
ctx0.save();
ctx0.setTransform(0,0,0,0,0,0);
ctx0.moveTo(50,50);
ctx0.restore();
ctx0.lineTo(20,80);
ctx0.stroke();
// Testing lineTo.
ctx1.moveTo(80,80);
ctx1.lineTo(20,80);
ctx1.save();
ctx1.scale(0,0);
ctx1.lineTo(80,20);
ctx1.restore();
ctx1.stroke();
// Testing quadraticCurveTo.
ctx2.moveTo(80,80);
ctx2.lineTo(20,80);
ctx2.save();
ctx2.setTransform(0,0,0,0,0,0);
ctx2.quadraticCurveTo(20,20,80,20);
ctx2.restore();
ctx2.stroke();
// Testing bezierCurveTo.
ctx3.moveTo(80,80);
ctx3.lineTo(20,80);
ctx3.save();
ctx3.scale(0,0);
ctx3.bezierCurveTo(20,20,80,80,80,20);
ctx3.restore();
ctx3.stroke();
// Testing arcTo.
ctx4.moveTo(80,80);
ctx4.lineTo(20,80);
ctx4.save();
ctx4.setTransform(0,0,0,0,0,0);
ctx4.arcTo(20,20,80,20,60);
ctx4.restore();
ctx4.stroke();
// Testing lineTo with non-invertible, non-0 scale.
ctx5.moveTo(80,80);
ctx5.lineTo(20,80);
ctx5.save();
ctx5.scale(0,1);
ctx5.lineTo(80,20);
ctx5.restore();
ctx5.stroke();
// Testing lineTo with non-invertible, non-0 scale.
ctx6.moveTo(80,80);
ctx6.lineTo(20,80);
ctx6.save();
ctx6.scale(1,0);
ctx6.quadraticCurveTo(20,20,80,20);
ctx6.restore();
ctx6.stroke();
// Different way to go from a non-infertible CTM to an invertible one.
ctx7.scale(0,0); // Non-invertible.
// These will both be maped to 0,0.
ctx7.moveTo(10,10);
ctx7.lineTo(20,20);
// Now we go back to a inverible matix (identity).
ctx7.setTransform(1,0,0,1,0,0);
ctx7.lineTo(20,80);
ctx7.lineTo(80,80);
ctx7.stroke();
</script>
</body>
</html>
Codebase Browser
chromium