diff --git a/frontend/styling/dialog.css b/frontend/styling/dialog.css index cfbfe03..25b5675 100644 --- a/frontend/styling/dialog.css +++ b/frontend/styling/dialog.css @@ -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; diff --git a/tests/e2e/mobile-result-image.spec.js b/tests/e2e/mobile-result-image.spec.js new file mode 100644 index 0000000..b063720 --- /dev/null +++ b/tests/e2e/mobile-result-image.spec.js @@ -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( + `` + ); + }, + { 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); + }); +});