7edc941843
Browsers automatically calculate an aspect ratio based on the width/height attributes of an `<img`. HOWEVER that aspect ratio only applies while the image is loading. Once loaded, it'll use the image's actual dimensions. This can cause things to jump around after loading. For example: - if a user deliberately inserts false width/height - the image fails to load (404) - an optimised image is a few pixels different, due to a rounding when resizing This decorator explicitly sets the `aspect-ratio` property so that things are consistent throughout the lifetime of all `<img` elements.
13 lines
427 B
JavaScript
13 lines
427 B
JavaScript
import { acceptance, query } from "discourse/tests/helpers/qunit-helpers";
|
|
import { visit } from "@ember/test-helpers";
|
|
import { test } from "qunit";
|
|
|
|
acceptance("Image aspect ratio", function () {
|
|
test("it applies the aspect ratio", async function (assert) {
|
|
await visit("/t/2480");
|
|
const image = query("#post_3 img[src='/assets/logo.png']");
|
|
|
|
assert.strictEqual(image.style.aspectRatio, "690 / 388");
|
|
});
|
|
});
|