| <!DOCTYPE HTML> |
| <html> |
| <script> |
| var canvas, context, pattern, image; |
| |
| function runTest() { |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| canvas = document.getElementById('canvas'); |
| context = canvas.getContext('2d'); |
| |
| // Initialize the canvas with orange. |
| context.fillStyle = '#FFA500'; |
| context.fillRect(0, 0, 100, 100); |
| |
| image = document.getElementById('image'); |
| image.setAttribute('src', 'resources/green-flash-at-50ms.svg'); |
| image.onload = function() { |
| pattern = context.createPattern(image, 'repeat'); |
| setTimeout(function() { drawPatternAndFinish(); }, 55); |
| } |
| } |
| |
| function drawPatternAndFinish() { |
| // Advance the image one more time to the last frame. |
| // The pattern should not be affected. |
| window.internals.advanceImageAnimation(image); |
| |
| context.fillStyle = pattern; |
| context.fillRect(0, 0, 200, 200); |
| |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| |
| </script> |
| <body onload='runTest()'> |
| Test for crbug.com/279445: createPattern should synchronously snapshot an animating image.<br/> |
| This test passes if there is a blue square below:<br/> |
| <canvas id='canvas' width='100' height='100'></canvas><br/> |
| And a green square below:<br/> |
| <img id='image' width='100' height='100'> |
| </body> |
| </html> |
