| <!DOCTYPE html> |
| <script> |
| var context; |
| |
| window.onload = function() { |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| context = document.getElementById('c').getContext('2d'); |
| context.scale(2,2); |
| context.beginPath(); |
| context.rect(0,0,75,75); |
| context.clip(); |
| context.fillStyle = 'red'; |
| context.fillRect(0,0,30,30); |
| context.fillRect(50,50,30,30); |
| context.save(); |
| context.scale(0.5,0.5); |
| context.beginPath(); |
| context.rect(0,0,5,5); |
| context.clip(); |
| requestAnimationFrame(drawSecondFrame); |
| } |
| |
| function drawSecondFrame() { |
| context.restore(); |
| context.fillStyle = 'green'; |
| context.fillRect(0,0,30,30); |
| context.fillRect(50,50,30,30); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| </script> |
| <p>Two green squares of different sizes should appear below</p> |
| <canvas id="c" width="300" height="300"></canvas> |
