chromium/third_party/blink/web_tests/fast/canvas/canvas-drawImage-animated.html

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>

<!-- This image is an animated GIF (1px by 1px). Animation time is 0ms. First frame has the color rgb(64, 4, 30). The second one has the color rgb(10, 153, 30) -->
<img id="image" src="data:image/gif;base64,R0lGODlhAQABAIACAEAEHgqZHiH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAkAAAEALAAAAAABAAEAAAICRAEAIfkECAAA/wAsAAAAAAEAAQAAAgJMAQA7" alt="Animated Image" />

<canvas id="canvas" width="1" height="1"></canvas>

<script>
async_test(t => {
    window.onload = function() {
        var canvas = document.getElementById("canvas");
        var image = document.getElementById("image");
        var canvasContext = canvas.getContext("2d");
        t.step(function(){
            canvasContext.drawImage(image, 0, 0);
            imageData = canvasContext.getImageData(0, 0, 1, 1);
            assert_equals(imageData.data[0], 64);
            assert_equals(imageData.data[1], 4);
            assert_equals(imageData.data[2], 30);
        });
        t.done();
    }
}, 'When drawing an animated image to a canvas, the poster frame (or the first frame) should be printed. This test passes if the canvas is filled with the color rgb(64, 4, 30).');
</script>
</body>