| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Test that the clip state persists across frame boundaries.</title> |
| </head> |
| <body> |
| <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> |
| <script> |
| var canvas1 = document.getElementById('canvas1'); |
| var canvas2 = document.getElementById('canvas2'); |
| var canvas3 = document.getElementById('canvas3'); |
| var canvas4 = document.getElementById('canvas4'); |
| var ctx1 = canvas1.getContext('2d'); |
| var ctx2 = canvas2.getContext('2d'); |
| var ctx3 = canvas3.getContext('2d'); |
| var ctx4 = canvas4.getContext('2d'); |
| |
| ctx1.fillStyle = 'green'; |
| ctx1.fillRect(0, 0, 100, 100); |
| ctx1.beginPath(); |
| ctx1.moveTo(10, 10); |
| ctx1.lineTo(90, 50); |
| ctx1.lineTo(10, 90); |
| ctx1.clip(); |
| ctx1.fillStyle = 'yellow'; |
| ctx1.fillRect(0, 0, 100, 100); |
| |
| ctx2.drawImage(canvas1, 0, 0); |
| ctx2.fillStyle = 'green'; |
| ctx2.fillRect(0, 0, 50, 100); |
| |
| ctx3.drawImage(canvas1, 0, 0); |
| |
| // ctx4 transformed clip |
| ctx4.fillStyle = 'green'; |
| ctx4.fillRect(0, 0, 10, 100); |
| ctx4.drawImage(canvas1, 10, 0); |
| |
| </script> |
| </body> |
| </html> |
