CERBERUS/speedtest
1
0
Fork 0
mirror of https://github.com/librespeed/speedtest.git synced 2026-10-21 15:51:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: constrain shared result image on mobile (#850)
Some checks are pending
Docker / e2e (push) Waiting to run
Details
Docker / build (./Dockerfile, , ghcr.io/${{ github.repository }}) (push) Blocked by required conditions
Details
Docker / build (./Dockerfile.alpine, -alpine, ghcr.io/${{ github.repository }}) (push) Blocked by required conditions
Details

Browse source 
* fix: constrain shared result image on mobile

* test: cover share dialog image height

Co-authored-by: sstidl <12804296+sstidl@users.noreply.github.com>

* test: cover share dialog image dimensions

---------

Co-authored-by: Stefan Stidl <sti-github@stidl.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: sstidl <12804296+sstidl@users.noreply.github.com>
This commit is contained in:
sstidl 2026-09-11 20:29:20 +02:00 • committed by GitHub
parent 22b89a76c5
commit b8d47b24cd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 52 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/styling/dialog.css
View file

@ -32,6 +32,13 @@ dialog {
animation: fade-in 0.3s ease-out;
}
& > #results {
max-width: 100%;
max-height: calc(100% - 8rem);
height: auto;
object-fit: contain;
}
& > .close-dialog {
display: flex;
align-items: center;

45
tests/e2e/mobile-result-image.spec.js Normal file
View file

@ -0,0 +1,45 @@
const { test, expect } = require("@playwright/test");
const { baseUrls } = require("./helpers/env");
test.use({ viewport: { width: 360, height: 800 } });
async function openResultImage(page, width, height) {
await page.goto(`${baseUrls.standaloneNew}/index-modern.html`);
await page.locator("#results").evaluate(
(image, dimensions) => {
image.src =
"data:image/svg+xml," +
encodeURIComponent(
`<svg xmlns="http://www.w3.org/2000/svg" width="${dimensions.width}" height="${dimensions.height}"><rect width="100%" height="100%" fill="black"/></svg>`
);
},
{ width, height }
);
await page.locator("#share").evaluate(dialog => dialog.showModal());
const image = page.locator("#results");
await expect(image).toBeVisible();
await expect(image).toHaveJSProperty("complete", true);
return image.evaluate(element => ({
width: element.getBoundingClientRect().width,
height: element.getBoundingClientRect().height,
dialogWidth: element.closest("dialog").clientWidth,
dialogHeight: element.closest("dialog").clientHeight
}));
}
test.describe("Mobile result-image sharing", () => {
test("keeps the landscape result image within the share dialog width", async ({ page }) => {
const dimensions = await openResultImage(page, 800, 480);
expect(dimensions.width).toBeLessThanOrEqual(dimensions.dialogWidth);
});
test("keeps a tall result image within the share dialog height", async ({ page }) => {
const dimensions = await openResultImage(page, 480, 1600);
expect(dimensions.height).toBeLessThanOrEqual(dimensions.dialogHeight);
});
});