mirror of
https://github.com/zulip/zulip.git
synced 2026-06-03 21:01:43 +08:00
92476fdbde
PR #39034 introduced aspect-ratio property to message_media_image which was in decimal format. This caused JSDOM tests to fail since it doesn't support decimal format for aspect-ratio. This commit changes the format to use slash syntax which is supported by JSDOM. Also updates the test snapshots to correctly assert aspect-ratio.
564 lines
37 KiB
JavaScript
564 lines
37 KiB
JavaScript
"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("https://example.com/preview.jpeg")"></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("https://example.com/preview.jpeg")" 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">',
|
|
),
|
|
"",
|
|
);
|
|
});
|