mirror of
https://github.com/go-gitea/gitea.git
synced 2026-10-28 16:47:01 +09:00
silverwind
643bd38051
Mermaid scales diagrams wider than the markup column down to its width, but the iframe kept the unscaled viewBox height, leaving a large blank area below them. The iframe now uses a CSS `aspect-ratio` capped at the viewBox height, so it follows the rendered diagram on any width and resize without measuring, which keeps diagrams in collapsed `<details>` working. Diagrams that don't scale (`useMaxWidth: false`) keep the fixed height. Fixes: https://github.com/go-gitea/gitea/issues/40045
29 lines
1.5 KiB
TypeScript
29 lines
1.5 KiB
TypeScript
import {env} from 'node:process';
|
|
import {expect, test} from '@playwright/test';
|
|
import {apiCreateRepo, apiCreateIssue, assertNoJsError, randomString} from './utils.ts';
|
|
|
|
test('mermaid diagram in issue', async ({page, request}) => {
|
|
const repoName = `e2e-mermaid-${randomString(8)}`;
|
|
const owner = env.GITEA_TEST_E2E_USER;
|
|
await apiCreateRepo(request, {name: repoName, autoInit: false});
|
|
const source = 'flowchart TD\n Alpha --> Beta --> Gamma\n Alpha --> Node1 & Node2 & Node3 & Node4 & Node5 & Node6 & Node7 & Node8';
|
|
const {index} = await apiCreateIssue(request, {owner, repo: repoName, title: 'mermaid test', body: `\`\`\`mermaid\n${source}\n\`\`\`\n`});
|
|
await page.goto(`/${owner}/${repoName}/issues/${index}`);
|
|
|
|
const svg = page.frameLocator('iframe.markup-content-iframe').locator('svg');
|
|
await expect(svg).toContainText(/Alpha[\s\S]*Beta[\s\S]*Gamma/);
|
|
const [iframeWidth, iframeHeight, svgWidth, svgHeight] = await page.locator('iframe.markup-content-iframe').evaluate((iframe: HTMLIFrameElement) => {
|
|
const iframeRect = iframe.getBoundingClientRect();
|
|
const svgRect = iframe.contentDocument!.querySelector('svg')!.getBoundingClientRect();
|
|
return [iframeRect.width, iframeRect.height, svgRect.width, svgRect.height];
|
|
});
|
|
expect(svgWidth).toBeCloseTo(iframeWidth, 0);
|
|
expect(svgHeight).toBeCloseTo(iframeHeight, 0);
|
|
|
|
await svg.hover();
|
|
await page.locator('.code-copy').click();
|
|
await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe(source);
|
|
|
|
await assertNoJsError(page);
|
|
});
|