web/tests/postprocess_content.test.cjs - main - githubmirror/zulip

web/tests/postprocess_content.test.cjs
563 строки37 KB
Dhruv Vira
web: Use slash syntax for aspect-ratio to fix JSDOM tests.
24 апр 2026, 23:32
24 апр 2026, 23:3292476fd
"use strict";

const assert = require("node:assert/strict");

const {mock_esm, zrequire} = require("./lib/namespace.cjs");
const {run_test} = require("./lib/test.cjs");

const thumbnail = mock_esm("../src/thumbnail", {
    get_media_preview_size() {
        return 10;
    },
});

const {postprocess_content} = zrequire("postprocess_content");
const {initialize_user_settings} = zrequire("user_settings");

const user_settings = {web_font_size_px: 16};
initialize_user_settings({user_settings});

run_test("emoji_only", () => {
    // Test emoji-only message
    assert.equal(
        postprocess_content(
            '<p><span aria-label="wave" class="emoji emoji-1f44b" role="img" title="wave">:wave:</span></p>',
        ),
        '<p class="emoji-only"><span aria-label="wave" class="emoji emoji-1f44b" role="img" title="wave">:wave:</span></p>',
    );
    // Test emoji with other text content
    assert.equal(
        postprocess_content(
            '<p><span aria-label="wave" class="emoji emoji-1f44b" role="img" title="wave">:wave:</span> hi</p>',
        ),
        '<p><span aria-label="wave" class="emoji emoji-1f44b" role="img" title="wave">:wave:</span> hi</p>',
    );
    // Test emoji with other node content
    assert.equal(
        postprocess_content(
            '<p><span aria-label="wave" class="emoji emoji-1f44b" role="img" title="wave">:wave:</span> <strong>hi</strong></p>',
        ),
        '<p><span aria-label="wave" class="emoji emoji-1f44b" role="img" title="wave">:wave:</span> <strong>hi</strong></p>',
    );
});

run_test("ordered_lists", () => {
    assert.equal(
        postprocess_content('<ol start="9"><li>Nine</li><li>Ten</li></ol>'),
        '<ol start="9" class="counter-length-2" style="counter-reset: count 8;"><li>Nine</li><li>Ten</li></ol>',
    );
});

// Care should be taken to present real-world cases here and
// throughout, rather than contrived examples that serve
// only to satisfy 100% test coverage.
run_test("postprocess_basic_links", () => {
    assert.equal(
        postprocess_content(
            '<a href="http://example.com">good</a> ' +
                '<a href="http://zulip.zulipdev.com/user_uploads/w/ha/tever/file.png">upload</a> ' +
                '<a href="http://localhost:NNNN">invalid</a> ' +
                '<a href="javascript:alert(1)">unsafe</a> ' +
                '<a href="/#fragment" target="_blank">fragment</a>' +
                "<a>missing href</a>",
        ),
        '<a href="http://example.com" target="_blank" rel="noopener noreferrer" title="http://example.com/">good</a> ' +
            '<a href="http://zulip.zulipdev.com/user_uploads/w/ha/tever/file.png" target="_blank" rel="noopener noreferrer" title="translated: Download file.png">upload</a> ' +
            "<a>invalid</a> " +
            "<a>unsafe</a> " +
            '<a href="/#fragment" title="http://zulip.zulipdev.com/#fragment">fragment</a>' +
            "<a>missing href</a>",
    );
});

run_test("postprocess_media_and_embeds", () => {
    assert.equal(
        postprocess_content(
            '<div class="message_inline_image message_inline_video">' +
                '<a href="http://zulip.zulipdev.com/user_uploads/w/ha/tever/inline-video-embed.mp4">' +
                '<video src="http://zulip.zulipdev.com/user_uploads/w/ha/tever/inline-video-embed.mp4"></video>' +
                "</a>" +
                "</div>" +
                '<div class="youtube-video message_inline_image">' +
                '<a class="" href="https://www.youtube.com/watch?v=tyKJueEk0XM">' +
                '<img src="https://i.ytimg.com/vi/tyKJueEk0XM/default.jpg">' +
                "</a>" +
                "</div>" +
                '<div class="message_embed">' +
                '<a class="message_embed_image" href="https://example.com/about" style="background-image: url(&quot;https://example.com/preview.jpeg&quot;)"></a>' +
                '<div class="data-container">' +
                '<div class="message_embed_title">' +
                '<a href="https://example.com/about">About us</a>' +
                "</div>" +
                '<div class="message_embed_description">All about us.</div>' +
                "</div>" +
                "</div>",
        ),
        '<div class="message-thumbnail-gallery">' +
            '<div class="message-media-preview-video message_inline_video">' +
            '<a href="http://zulip.zulipdev.com/user_uploads/w/ha/tever/inline-video-embed.mp4" target="_blank" rel="noopener noreferrer" class="media-anchor-element">' +
            '<video src="http://zulip.zulipdev.com/user_uploads/w/ha/tever/inline-video-embed.mp4" class="media-video-element media-image-element"></video>' +
            "</a>" +
            "</div>" +
            '<div class="youtube-video message-media-preview-image">' +
            '<a class="media-anchor-element" href="https://www.youtube.com/watch?v=tyKJueEk0XM" target="_blank" rel="noopener noreferrer">' +
            '<img src="https://i.ytimg.com/vi/tyKJueEk0XM/mqdefault.jpg" class="media-image-element" loading="lazy">' +
            "</a>" +
            "</div>" +
            "</div>" +
            '<div class="message_embed">' +
            '<a class="message_embed_image" href="https://example.com/about" style="background-image: url(&quot;https://example.com/preview.jpeg&quot;)" target="_blank" rel="noopener noreferrer" title="https://example.com/about"></a>' +
            '<div class="data-container">' +
            '<div class="message_embed_title">' +
            '<a href="https://example.com/about" class="message-embed-title-link" target="_blank" rel="noopener noreferrer" title="https://example.com/about">About us</a>' +
            "</div>" +
            '<div class="message_embed_description">All about us.</div>' +
            "</div>" +
            "</div>",
    );
});

run_test("inline_image_galleries", ({override}) => {
    const thumbnail_formats = [
        {
            name: "840x560.webp",
            max_width: 840,
            max_height: 560,
            format: "webp",
            animated: false,
        },
    ];
    override(thumbnail, "preferred_format", thumbnail_formats[0]);

    assert.equal(
        postprocess_content(
            "<p>Message text</p>" +
                '<div class="message_inline_image">' +
                '<a href="/user_uploads/path/to/legacy-portrait-image.png" title="legacy-portrait-image.png">' +
                '<img data-original-dimensions="1000x2000" src="/user_uploads/thumbnail/path/to/legacy-portrait-image.png/840x560.webp">' +
                "</a>" +
                "</div>" +
                '<div class="message_inline_image">' +
                '<a href="/user_uploads/path/to/legacy-landscape-image.png" title="legacy-landscape-image.png">' +
                '<img data-original-dimensions="2000x1000" src="/user_uploads/thumbnail/path/to/legacy-landscape-image.png/840x560.webp">' +
                "</a>" +
                "</div>",
        ),
        "<p>Message text</p>" +
            '<div class="message-thumbnail-gallery">' +
            '<div class="message-media-preview-image">' +
            '<a href="/user_uploads/path/to/legacy-portrait-image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="legacy-portrait-image.png">' +
            '<img data-original-dimensions="1000x2000" src="/user_uploads/thumbnail/path/to/legacy-portrait-image.png/840x560.webp" ' +
            'class="media-image-element portrait-thumbnail" loading="lazy" width="1000" height="2000" style="width: 5em; aspect-ratio: 1000 / 2000;">' +
            "</a>" +
            "</div>" +
            '<div class="message-media-preview-image">' +
            '<a href="/user_uploads/path/to/legacy-landscape-image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="legacy-landscape-image.png">' +
            '<img data-original-dimensions="2000x1000" src="/user_uploads/thumbnail/path/to/legacy-landscape-image.png/840x560.webp" ' +
            'class="media-image-element landscape-thumbnail" loading="lazy" width="2000" height="1000" style="width: 20em; aspect-ratio: 2000 / 1000;">' +
            "</a>" +
            "</div>" +
            "</div>",
        "** Legacy gallery failed to post-process",
    );

    assert.equal(
        postprocess_content(
            "<p>Message text</p>" +
                '<div class="message_inline_image">' +
                '<a href="/user_uploads/path/to/legacy-singleton-image.png" title="legacy-singleton-image.png">' +
                '<img data-original-dimensions="1000x1000" src="/user_uploads/thumbnail/path/to/legacy-singleton-image.png/840x560.webp">' +
                "</a>" +
                "</div>",
        ),
        "<p>Message text</p>" +
            '<div class="message-thumbnail-gallery">' +
            '<div class="message-media-preview-image">' +
            '<a href="/user_uploads/path/to/legacy-singleton-image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="legacy-singleton-image.png">' +
            '<img data-original-dimensions="1000x1000" src="/user_uploads/thumbnail/path/to/legacy-singleton-image.png/840x560.webp" ' +
            'class="media-image-element portrait-thumbnail" loading="lazy" width="1000" height="1000" style="width: 10em; aspect-ratio: 1000 / 1000;">' +
            "</a>" +
            "</div>" +
            "</div>",
        "** Legacy singleton gallery failed to post-process",
    );

    assert.equal(
        postprocess_content(
            "<p>" +
                '<img alt="image" class="inline-image" data-original-content-type="image/png" data-original-dimensions="900x600" data-original-src="/user_uploads/path/to/inline-image-wide.png" src="/user_uploads/thumbnail/path/to/inline-image-wide.png/900x600.webp">' +
                " or " +
                '<img alt="image" class="inline-image" data-original-content-type="image/png" data-original-dimensions="600x900" data-original-src="/user_uploads/path/to/inline-image-tall.png" src="/user_uploads/thumbnail/path/to/inline-image-tall.png/600x900.webp">' +
                "</p>",
        ),
        "<p>" +
            '<span class="message-media-inline-image">' +
            '<a href="/user_uploads/path/to/inline-image-wide.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image">' +
            '<img alt="image" class="inline-image image-opens-message media-image-element landscape-thumbnail" data-original-content-type="image/png" ' +
            'data-original-dimensions="900x600" data-original-src="/user_uploads/path/to/inline-image-wide.png" ' +
            'src="/user_uploads/thumbnail/path/to/inline-image-wide.png/840x560.webp" loading="lazy" width="900" height="600" style="width: 15em; aspect-ratio: 900 / 600;">' +
            "</a>" +
            "</span>" +
            " or " +
            '<span class="message-media-inline-image">' +
            '<a href="/user_uploads/path/to/inline-image-tall.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image">' +
            '<img alt="image" class="inline-image media-image-element portrait-thumbnail" data-original-content-type="image/png" ' +
            'data-original-dimensions="600x900" data-original-src="/user_uploads/path/to/inline-image-tall.png" ' +
            'src="/user_uploads/thumbnail/path/to/inline-image-tall.png/840x560.webp" loading="lazy" width="600" height="900" style="width: 6.666666666666667em; aspect-ratio: 600 / 900;">' +
            "</a>" +
            "</span>" +
            "</p>",
        "** Inline image gallery with text separator failed to post-process",
    );

    assert.equal(
        postprocess_content(
            "<p>" +
                '<img alt="image" class="inline-image" data-original-content-type="image/png" data-original-dimensions="900x600" data-original-src="/user_uploads/path/to/inline-image-wide.png" src="/user_uploads/thumbnail/path/to/inline-image-wide.png/900x600.webp">' +
                "<br>\n" +
                '<img alt="image" class="inline-image" data-original-content-type="image/png" data-original-dimensions="600x900" data-original-src="/user_uploads/path/to/inline-image-tall.png" src="/user_uploads/thumbnail/path/to/inline-image-tall.png/600x900.webp">' +
                "</p>",
        ),
        "<p>" +
            '<span class="message-thumbnail-gallery">' +
            '<span class="message-media-inline-image message-media-gallery-image">' +
            '<a href="/user_uploads/path/to/inline-image-wide.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image">' +
            '<img alt="image" class="inline-image media-image-element landscape-thumbnail" data-original-content-type="image/png" ' +
            'data-original-dimensions="900x600" data-original-src="/user_uploads/path/to/inline-image-wide.png" ' +
            'src="/user_uploads/thumbnail/path/to/inline-image-wide.png/840x560.webp" loading="lazy" width="900" height="600" style="width: 15em; aspect-ratio: 900 / 600;">' +
            "</a>" +
            "</span>" +
            '<span class="message-media-inline-image message-media-gallery-image">' +
            '<a href="/user_uploads/path/to/inline-image-tall.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image">' +
            '<img alt="image" class="inline-image media-image-element portrait-thumbnail" data-original-content-type="image/png" ' +
            'data-original-dimensions="600x900" data-original-src="/user_uploads/path/to/inline-image-tall.png" ' +
            'src="/user_uploads/thumbnail/path/to/inline-image-tall.png/840x560.webp" loading="lazy" width="600" height="900" style="width: 6.666666666666667em; aspect-ratio: 600 / 900;">' +
            "</a>" +
            "</span>" +
            "</span>\n" +
            "</p>",
        "** Inline image gallery with break separator failed to post-process",
    );

    assert.equal(
        postprocess_content(
            '<p>And here is a gallery in the inline style, with text before the images...<br>\n<img alt="inline-image-01.png" class="inline-image" data-original-content-type="image/png" data-original-dimensions="800x800" data-original-src="/user_uploads/2/17/k0c4iGRefC2aCr4Jxf6NQdfH/inline-image-01.png" src="/user_uploads/thumbnail/2/17/k0c4iGRefC2aCr4Jxf6NQdfH/inline-image-01.png/840x560.webp"><br>\n<img alt="inline-image-02.png" class="inline-image" data-original-content-type="image/png" data-original-dimensions="800x800" data-original-src="/user_uploads/2/3f/B0vUyCSpixMgDLG29fKeUkk6/inline-image-02.png" src="/user_uploads/thumbnail/2/3f/B0vUyCSpixMgDLG29fKeUkk6/inline-image-02.png/840x560.webp"><br>\n...and text after (again, line breaks only, no new paragraphs).</p>' +
                '<p><img alt="inline-image-square.png" class="inline-image" data-original-content-type="image/png" data-original-dimensions="800x800" data-original-src="/user_uploads/2/48/mo114lAto6fft973UYWtik2T/inline-image-square.png" src="/user_uploads/thumbnail/2/48/mo114lAto6fft973UYWtik2T/inline-image-square.png/840x560.webp"></p>' +
                '<p><img alt="inline-image-03.png" class="inline-image" data-original-content-type="image/png" data-original-dimensions="800x800" data-original-src="/user_uploads/2/1e/qsBe-4wztqriUHkB2ukYdauM/inline-image-03.png" src="/user_uploads/thumbnail/2/1e/qsBe-4wztqriUHkB2ukYdauM/inline-image-03.png/840x560.webp"> inline image with trailing text</p>',
        ),
        "<p>And here is a gallery in the inline style, with text before the images...\n" +
            '<span class="message-thumbnail-gallery"><span class="message-media-inline-image message-media-gallery-image">' +
            '<a href="/user_uploads/2/17/k0c4iGRefC2aCr4Jxf6NQdfH/inline-image-01.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="inline-image-01.png">' +
            '<img alt="inline-image-01.png" class="inline-image media-image-element portrait-thumbnail" data-original-content-type="image/png" ' +
            'data-original-dimensions="800x800" data-original-src="/user_uploads/2/17/k0c4iGRefC2aCr4Jxf6NQdfH/inline-image-01.png" ' +
            'src="/user_uploads/thumbnail/2/17/k0c4iGRefC2aCr4Jxf6NQdfH/inline-image-01.png/840x560.webp" ' +
            'loading="lazy" width="800" height="800" style="width: 10em; aspect-ratio: 800 / 800;">' +
            "</a></span>" +
            '<span class="message-media-inline-image message-media-gallery-image">' +
            '<a href="/user_uploads/2/3f/B0vUyCSpixMgDLG29fKeUkk6/inline-image-02.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="inline-image-02.png">' +
            '<img alt="inline-image-02.png" class="inline-image media-image-element portrait-thumbnail" data-original-content-type="image/png" ' +
            'data-original-dimensions="800x800" data-original-src="/user_uploads/2/3f/B0vUyCSpixMgDLG29fKeUkk6/inline-image-02.png" ' +
            'src="/user_uploads/thumbnail/2/3f/B0vUyCSpixMgDLG29fKeUkk6/inline-image-02.png/840x560.webp" ' +
            'loading="lazy" width="800" height="800" style="width: 10em; aspect-ratio: 800 / 800;">' +
            "</a></span></span>\n" +
            "\n" +
            "...and text after (again, line breaks only, no new paragraphs).</p>" +
            '<p><span class="message-thumbnail-gallery"><span class="message-media-inline-image message-media-gallery-image">' +
            '<a href="/user_uploads/2/48/mo114lAto6fft973UYWtik2T/inline-image-square.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="inline-image-square.png">' +
            '<img alt="inline-image-square.png" class="inline-image media-image-element portrait-thumbnail" data-original-content-type="image/png" ' +
            'data-original-dimensions="800x800" data-original-src="/user_uploads/2/48/mo114lAto6fft973UYWtik2T/inline-image-square.png" ' +
            'src="/user_uploads/thumbnail/2/48/mo114lAto6fft973UYWtik2T/inline-image-square.png/840x560.webp" ' +
            'loading="lazy" width="800" height="800" style="width: 10em; aspect-ratio: 800 / 800;">' +
            "</a></span></span></p>" +
            '<p><span class="message-media-inline-image">' +
            '<a href="/user_uploads/2/1e/qsBe-4wztqriUHkB2ukYdauM/inline-image-03.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="inline-image-03.png">' +
            '<img alt="inline-image-03.png" class="inline-image image-opens-message media-image-element portrait-thumbnail" data-original-content-type="image/png" ' +
            'data-original-dimensions="800x800" data-original-src="/user_uploads/2/1e/qsBe-4wztqriUHkB2ukYdauM/inline-image-03.png" ' +
            'src="/user_uploads/thumbnail/2/1e/qsBe-4wztqriUHkB2ukYdauM/inline-image-03.png/840x560.webp" ' +
            'loading="lazy" width="800" height="800" style="width: 10em; aspect-ratio: 800 / 800;">' +
            "</a></span> inline image with trailing text</p>",
        "** Inline image gallery with leading text, break separator failed to post-process",
    );
});

run_test("message_image_thumbnailing", ({override}) => {
    const thumbnail_formats = [
        {
            name: "840x560-anim.webp",
            max_width: 840,
            max_height: 560,
            format: "webp",
            animated: true,
        },
        {
            name: "840x560.webp",
            max_width: 840,
            max_height: 560,
            format: "webp",
            animated: false,
        },
        {
            name: "300x200-anim.webp",
            max_width: 300,
            max_height: 200,
            format: "webp",
            animated: true,
        },
        {
            name: "300x200.webp",
            max_width: 300,
            max_height: 200,
            format: "webp",
            animated: false,
        },
        {
            name: "300x200.jpg",
            max_width: 300,
            max_height: 200,
            format: "jpg",
            animated: false,
        },
    ];
    // TODO: Initialize the real thumbnail.ts rather than mocking it.
    override(thumbnail, "preferred_format", thumbnail_formats[3]);
    override(thumbnail, "animated_format", thumbnail_formats[2]);

    // Test for landscape thumbnails
    assert.equal(
        postprocess_content(
            '<div class="message_inline_image">' +
                '<a href="/user_uploads/path/to/landscape-thumbnailed-image.png" title="landscape-thumbnailed-image.png">' +
                '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/landscape-thumbnailed-image.png/840x560.webp">' +
                "</a>" +
                "</div>",
        ),
        '<div class="message-thumbnail-gallery">' +
            '<div class="message-media-preview-image">' +
            '<a href="/user_uploads/path/to/landscape-thumbnailed-image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="landscape-thumbnailed-image.png">' +
            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/landscape-thumbnailed-image.png/300x200.webp" ' +
            'class="media-image-element landscape-thumbnail" loading="lazy" width="3264" height="2448" style="width: 13.333333333333334em; aspect-ratio: 3264 / 2448;">' +
            "</a>" +
            "</div>" +
            "</div>",
    );

    // Test for portrait thumbnails
    assert.equal(
        postprocess_content(
            '<div class="message_inline_image">' +
                '<a href="/user_uploads/path/to/portrait-thumbnailed-image.png" title="portrait-thumbnailed-image.png">' +
                '<img data-original-dimensions="100x200" src="/user_uploads/thumbnail/path/to/portrait-thumbnailed-image.png/840x560.webp">' +
                "</a>" +
                "</div>",
        ),
        '<div class="message-thumbnail-gallery">' +
            '<div class="message-media-preview-image">' +
            '<a href="/user_uploads/path/to/portrait-thumbnailed-image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="portrait-thumbnailed-image.png">' +
            '<img data-original-dimensions="100x200" src="/user_uploads/thumbnail/path/to/portrait-thumbnailed-image.png/300x200.webp" ' +
            'class="media-image-element portrait-thumbnail" loading="lazy" width="100" height="200" style="width: 5em; aspect-ratio: 100 / 200;">' +
            "</a>" +
            "</div>" +
            "</div>",
    );

    // Test for dinky thumbnails
    assert.equal(
        postprocess_content(
            '<div class="message_inline_image">' +
                '<a href="/user_uploads/path/to/dinky-thumbnailed-image.png" title="dinky-thumbnailed-image.png">' +
                '<img data-original-dimensions="1x10" src="/user_uploads/thumbnail/path/to/dinky-thumbnailed-image.png/840x560.webp">' +
                "</a>" +
                "</div>",
        ),
        '<div class="message-thumbnail-gallery">' +
            '<div class="message-media-preview-image">' +
            '<a href="/user_uploads/path/to/dinky-thumbnailed-image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="dinky-thumbnailed-image.png">' +
            '<img data-original-dimensions="1x10" src="/user_uploads/thumbnail/path/to/dinky-thumbnailed-image.png/300x200.webp" ' +
            'class="media-image-element dinky-thumbnail extreme-aspect-ratio portrait-thumbnail" loading="lazy" width="1" height="10" style="width: 1px; aspect-ratio: 1 / 10;">' +
            "</a>" +
            "</div>" +
            "</div>",
    );

    // Now verify the behavior for animated images.
    override(user_settings, "web_animate_image_previews", "always");
    assert.equal(
        postprocess_content(
            '<div class="message_inline_image">' +
                '<a href="/user_uploads/path/to/preview-animated-legacy-image.png" title="preview-animated-legacy-image.png">' +
                '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/preview-animated-legacy-image.png/840x560.webp" data-animated="true">' +
                "</a>" +
                "</div>" +
                "<p>" +
                '<img alt="preview-animated-image-landscape" class="inline-image" data-original-content-type="image/png" data-original-dimensions="900x600" data-original-src="/user_uploads/path/to/preview-animated-image-landscape.png" src="/user_uploads/thumbnail/path/to/preview-animated-image-landscape.png/900x600.webp" data-animated="true">' +
                " or " +
                '<img alt="preview-animated-image-portrait" class="inline-image" data-original-content-type="image/png" data-original-dimensions="600x900" data-original-src="/user_uploads/path/to/preview-animated-image-portrait.png" src="/user_uploads/thumbnail/path/to/preview-animated-image-portrait.png/600x900.webp" data-animated="true">' +
                "</p>",
        ),
        '<div class="message-thumbnail-gallery">' +
            '<div class="message-media-preview-image">' +
            '<a href="/user_uploads/path/to/preview-animated-legacy-image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="preview-animated-legacy-image.png">' +
            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/preview-animated-legacy-image.png/300x200-anim.webp" ' +
            'data-animated="true" class="media-image-element landscape-thumbnail" loading="lazy" width="3264" height="2448" style="width: 13.333333333333334em; aspect-ratio: 3264 / 2448;">' +
            "</a>" +
            "</div>" +
            "</div>" +
            "<p>" +
            '<span class="message-media-inline-image">' +
            '<a href="/user_uploads/path/to/preview-animated-image-landscape.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="preview-animated-image-landscape">' +
            '<img alt="preview-animated-image-landscape" class="inline-image image-opens-message media-image-element landscape-thumbnail" ' +
            'data-original-content-type="image/png" data-original-dimensions="900x600" data-original-src="/user_uploads/path/to/preview-animated-image-landscape.png" ' +
            'src="/user_uploads/thumbnail/path/to/preview-animated-image-landscape.png/300x200-anim.webp" data-animated="true" ' +
            'loading="lazy" width="900" height="600" style="width: 15em; aspect-ratio: 900 / 600;">' +
            "</a>" +
            "</span>" +
            " or " +
            '<span class="message-media-inline-image">' +
            '<a href="/user_uploads/path/to/preview-animated-image-portrait.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="preview-animated-image-portrait">' +
            '<img alt="preview-animated-image-portrait" class="inline-image media-image-element portrait-thumbnail" ' +
            'data-original-content-type="image/png" data-original-dimensions="600x900" data-original-src="/user_uploads/path/to/preview-animated-image-portrait.png" ' +
            'src="/user_uploads/thumbnail/path/to/preview-animated-image-portrait.png/300x200-anim.webp" data-animated="true" ' +
            'loading="lazy" width="600" height="900" style="width: 6.666666666666667em; aspect-ratio: 600 / 900;">' +
            "</a>" +
            "</span>" +
            "</p>",
    );

    // And verify the different behavior for other values of the animation setting.
    override(user_settings, "web_animate_image_previews", "on_hover");
    assert.equal(
        postprocess_content(
            '<div class="message_inline_image">' +
                '<a href="/user_uploads/path/to/preview-animated-legacy-image.png" title="preview-animated-legacy-image.png">' +
                '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/preview-animated-legacy-image.png/840x560.webp" data-animated="true">' +
                "</a>" +
                "</div>" +
                "<p>" +
                '<img alt="preview-animated-image-landscape" class="inline-image" data-original-content-type="image/png" data-original-dimensions="900x600" data-original-src="/user_uploads/path/to/preview-animated-image-landscape.png" src="/user_uploads/thumbnail/path/to/preview-animated-image-landscape.png/900x600.webp" data-animated="true">' +
                " or " +
                '<img alt="preview-animated-image-portrait" class="inline-image" data-original-content-type="image/png" data-original-dimensions="600x900" data-original-src="/user_uploads/path/to/preview-animated-image-portrait.png" src="/user_uploads/thumbnail/path/to/preview-animated-image-portrait.png/600x900.webp" data-animated="true">' +
                "</p>",
        ),
        '<div class="message-thumbnail-gallery">' +
            '<div class="message-media-preview-image message_inline_animated_image_still">' +
            '<a href="/user_uploads/path/to/preview-animated-legacy-image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="preview-animated-legacy-image.png">' +
            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/preview-animated-legacy-image.png/300x200.webp" ' +
            'data-animated="true" class="media-image-element landscape-thumbnail" loading="lazy" width="3264" height="2448" style="width: 13.333333333333334em; aspect-ratio: 3264 / 2448;">' +
            "</a>" +
            "</div>" +
            "</div>" +
            "<p>" +
            '<span class="message-media-inline-image message_inline_animated_image_still">' +
            '<a href="/user_uploads/path/to/preview-animated-image-landscape.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="preview-animated-image-landscape">' +
            '<img alt="preview-animated-image-landscape" class="inline-image image-opens-message media-image-element landscape-thumbnail" ' +
            'data-original-content-type="image/png" data-original-dimensions="900x600" data-original-src="/user_uploads/path/to/preview-animated-image-landscape.png" ' +
            'src="/user_uploads/thumbnail/path/to/preview-animated-image-landscape.png/300x200.webp" ' +
            'data-animated="true" loading="lazy" width="900" height="600" style="width: 15em; aspect-ratio: 900 / 600;">' +
            "</a>" +
            "</span>" +
            " or " +
            '<span class="message-media-inline-image message_inline_animated_image_still">' +
            '<a href="/user_uploads/path/to/preview-animated-image-portrait.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="preview-animated-image-portrait">' +
            '<img alt="preview-animated-image-portrait" class="inline-image media-image-element portrait-thumbnail" ' +
            'data-original-content-type="image/png" data-original-dimensions="600x900" data-original-src="/user_uploads/path/to/preview-animated-image-portrait.png" ' +
            'src="/user_uploads/thumbnail/path/to/preview-animated-image-portrait.png/300x200.webp" ' +
            'data-animated="true" loading="lazy" width="600" height="900" style="width: 6.666666666666667em; aspect-ratio: 600 / 900;">' +
            "</a>" +
            "</span>" +
            "</p>",
    );

    override(user_settings, "web_animate_image_previews", "never");
    assert.equal(
        postprocess_content(
            '<div class="message_inline_image">' +
                '<a href="/user_uploads/path/to/preview-animated-legacy-image.png" title="preview-animated-legacy-image.png">' +
                '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/preview-animated-legacy-image.png/840x560.webp" data-animated="true">' +
                "</a>" +
                "</div>" +
                "<p>" +
                '<img alt="preview-animated-image-landscape" class="inline-image" data-original-content-type="image/png" data-original-dimensions="900x600" data-original-src="/user_uploads/path/to/preview-animated-image-landscape.png" src="/user_uploads/thumbnail/path/to/preview-animated-image-landscape.png/900x600.webp" data-animated="true">' +
                " or " +
                '<img alt="preview-animated-image-portrait" class="inline-image" data-original-content-type="image/png" data-original-dimensions="600x900" data-original-src="/user_uploads/path/to/preview-animated-image-portrait.png" src="/user_uploads/thumbnail/path/to/preview-animated-image-portrait.png/600x900.webp" data-animated="true">' +
                "</p>",
        ),
        '<div class="message-thumbnail-gallery">' +
            '<div class="message-media-preview-image message_inline_animated_image_still">' +
            '<a href="/user_uploads/path/to/preview-animated-legacy-image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="preview-animated-legacy-image.png">' +
            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/preview-animated-legacy-image.png/300x200.webp" ' +
            'data-animated="true" class="media-image-element landscape-thumbnail" loading="lazy" width="3264" height="2448" style="width: 13.333333333333334em; aspect-ratio: 3264 / 2448;">' +
            "</a>" +
            "</div>" +
            "</div>" +
            "<p>" +
            '<span class="message-media-inline-image message_inline_animated_image_still">' +
            '<a href="/user_uploads/path/to/preview-animated-image-landscape.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="preview-animated-image-landscape">' +
            '<img alt="preview-animated-image-landscape" class="inline-image image-opens-message media-image-element landscape-thumbnail" ' +
            'data-original-content-type="image/png" data-original-dimensions="900x600" data-original-src="/user_uploads/path/to/preview-animated-image-landscape.png" ' +
            'src="/user_uploads/thumbnail/path/to/preview-animated-image-landscape.png/300x200.webp" ' +
            'data-animated="true" loading="lazy" width="900" height="600" style="width: 15em; aspect-ratio: 900 / 600;">' +
            "</a>" +
            "</span>" +
            " or " +
            '<span class="message-media-inline-image message_inline_animated_image_still">' +
            '<a href="/user_uploads/path/to/preview-animated-image-portrait.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="preview-animated-image-portrait">' +
            '<img alt="preview-animated-image-portrait" class="inline-image media-image-element portrait-thumbnail" ' +
            'data-original-content-type="image/png" data-original-dimensions="600x900" data-original-src="/user_uploads/path/to/preview-animated-image-portrait.png" ' +
            'src="/user_uploads/thumbnail/path/to/preview-animated-image-portrait.png/300x200.webp" ' +
            'data-animated="true" loading="lazy" width="600" height="900" style="width: 6.666666666666667em; aspect-ratio: 600 / 900;">' +
            "</a>" +
            "</span>" +
            "</p>",
    );

    // Broken/invalid source URLs in image previews should be
    // dropped. Inspired by a real message found in chat.zulip.org
    // history.
    assert.equal(
        postprocess_content(
            '<div class="message_inline_image">' +
                '<a href="https://zulip.%20[Click%20to%20join%20video%20call](https://meeting.example.com/abcd1234)%20example.com/user_uploads/2/ab/abcd1234/image.png" target="_blank" title="image.png">' +
                '<img src="https://zulip.%20[Click%20to%20join%20video%20call](https://meeting.example.com/abcd1234)%20example.com/user_uploads/2/ab/abcd1234/image.png">' +
                "</a>" +
                "</div>",
        ),
        "",
    );
});

run_test("inline_images", ({override}) => {
    const thumbnail_formats = [
        {
            name: "840x560.webp",
            max_width: 840,
            max_height: 560,
            format: "webp",
            animated: false,
        },
    ];

    override(thumbnail, "preferred_format", thumbnail_formats[0]);

    assert.equal(
        postprocess_content(
            '<img alt="dinky-inline-image" class="inline-image" data-original-content-type="image/png" data-original-dimensions="128x128" data-original-src="/user_uploads/path/to/dinky-inline-image.png" src="/user_uploads/thumbnail/path/to/dinky-inline-image.png/840x560.webp">',
        ),
        '<span class="message-media-inline-image">' +
            '<a href="/user_uploads/path/to/dinky-inline-image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="dinky-inline-image">' +
            '<img alt="dinky-inline-image" class="inline-image media-image-element dinky-thumbnail portrait-thumbnail" ' +
            'data-original-content-type="image/png" data-original-dimensions="128x128" data-original-src="/user_uploads/path/to/dinky-inline-image.png" ' +
            'src="/user_uploads/thumbnail/path/to/dinky-inline-image.png/840x560.webp" loading="lazy" width="128" height="128" style="width: 128px; aspect-ratio: 128 / 128;">' +
            "</a>" +
            "</span>",
    );

    // Broken/invalid source URLs in image previews should be
    // dropped. Inspired by a real message found in chat.zulip.org
    // history.
    assert.equal(
        postprocess_content(
            '<img class="inline-image" data-original-src="https://zulip.%20[Click%20to%20join%20video%20call](https://meeting.example.com/abcd1234)%20example.com/user_uploads/2/ab/abcd1234/image.png" src="https://zulip.%20[Click%20to%20join%20video%20call](https://meeting.example.com/abcd1234)%20example.com/user_uploads/2/ab/abcd1234/image.png">',
        ),
        "",
    );
});