| <!DOCTYPE html> |
| <html> |
| <body style="zoom: 1.5"> |
| <p>An all green square should appear below</p> |
| <canvas id="A" width=300 height=300></canvas> |
| <script type="text/javascript" charset="utf-8"> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| var context; |
| |
| window.onload = function() { |
| context = document.getElementById("A").getContext("2d"); |
| context.fillStyle = 'red'; |
| context.fillRect(1, 1, 298, 298); |
| requestAnimationFrame(doUpdate1); |
| } |
| |
| function doUpdate1() { |
| context.fillStyle = 'red'; |
| context.fillRect(1, 1, 298, 298); |
| // We need to chain 2 rAFs because the first rAF may be called |
| // before the initial presentation. |
| requestAnimationFrame(doUpdate2); |
| } |
| |
| function doUpdate2() { |
| context.fillStyle = 'green'; |
| context.fillRect(1, 1, 298, 298); |
| testRunner.notifyDone(); |
| } |
| |
| </script> |
| </body> |
| </html> |
