synchronous-create-pattern.html | Explore in Territory

<!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-100ms.svg');
    image.onload = function() {
        pattern = context.createPattern(image, 'repeat');
        setTimeout(function() { drawPatternAndFinish(); }, 105);
    }
}

function drawPatternAndFinish() {
    // Advance the image one more time to the last frame.
    // The pattern should not be affected.
    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>
chromium/third_party/blink/web_tests/fast/canvas/synchronous-create-pattern.html
