| <body style="margin:0px"> |
| <canvas width="50" height="50" style="width:50px; height:50px; display:block; transform:translateZ(0)" id="canvas"></canvas> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| var ctx = canvas.getContext('2d'); |
| var width = 50; |
| var height = 50; |
| canvas.width = width; |
| canvas.height= height; |
| ctx.fillStyle = "red"; |
| ctx.fillRect(0, 0, 50, 50); |
| window.requestAnimationFrame(newFrame); |
| function newFrame() { |
| ctx.fillStyle = "yellow"; |
| ctx.fillRect(0, 0, 50, 50); |
| window.requestAnimationFrame(newFrame2); |
| } |
| function newFrame2() { |
| let imageData = ctx.createImageData(width, height); |
| let data = imageData.data; |
| for (let i = 0; i < width * height; ++i) { |
| data[4 * i + 0] = 0; |
| data[4 * i + 1] = 255; |
| data[4 * i + 2] = 0; |
| data[4 * i + 3] = 255; |
| } |
| ctx.putImageData(imageData, 0, 0); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| </script> |
| </html> |
