diff --git a/tests/e2e/dimmer.test.e2e.ts b/tests/e2e/dimmer.test.e2e.ts index 04c6433a5a..9ee6f82c07 100644 --- a/tests/e2e/dimmer.test.e2e.ts +++ b/tests/e2e/dimmer.test.e2e.ts @@ -37,3 +37,36 @@ test('Dimmed modal', async ({page}) => { await expect(page.locator('.ui.dimmer')).toHaveCount(1); await save_visual(page); }); + +test('Dimmed overflow', async ({page}, workerInfo) => { + test.skip(['Mobile Safari'].includes(workerInfo.project.name), 'Mouse wheel is not supported in mobile WebKit'); + await page.goto('/user2/repo1/_new/master/'); + + // Type in a file name. + await page.locator('#file-name').click(); + await page.keyboard.type('todo.txt'); + + // Scroll to the bottom. + const scrollY = await page.evaluate(() => document.body.scrollHeight); + await page.mouse.wheel(0, scrollY); + + // Click on 'Commit changes' + await page.locator('#commit-button').click(); + + // Expect a 'are you sure, this file is empty' modal. + await expect(page.locator('.ui.dimmer')).toBeVisible(); + await expect(page.locator('.ui.dimmer .header')).toContainText('Commit an empty file'); + await save_visual(page); + + // Trickery to check that the dimmer covers the whole page. + const viewport = page.viewportSize(); + const box = await page.locator('.ui.dimmer').boundingBox(); + expect(box.x).toBe(0); + expect(box.y).toBe(0); + expect(box.width).toBe(viewport.width); + expect(box.height).toBe(viewport.height); + + // Trickery to check the page cannot be scrolled. + const {scrollHeight, clientHeight} = await page.evaluate(() => document.body); + expect(scrollHeight).toBe(clientHeight); +}); diff --git a/web_src/css/modules/dimmer.css b/web_src/css/modules/dimmer.css index 1d0bf83390..7ef4618a18 100644 --- a/web_src/css/modules/dimmer.css +++ b/web_src/css/modules/dimmer.css @@ -1,3 +1,7 @@ +body:has(> .ui.active.dimmer) { + overflow: hidden; +} + .ui.active.dimmer { display: flex; opacity: 1; @@ -10,8 +14,9 @@ display: none; flex-direction: column; height: 100%; - position: absolute; + position: fixed; opacity: 0; + transform-origin: center center; justify-content: center; user-select: none; width: 100%;