| <!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> |
