An edge label with $$...$$ has each line wrapped in a <div> instead of a <p>, so it missed the `.edgeLabel p` background rule. All that was left behind it was the faded `.labelBkg`, so the edge showed through the label. Give those wrappers the same background as the <p>. Resolves #5543
26 lines
791 B
TypeScript
26 lines
791 B
TypeScript
import { expect, test, type Locator } from '@playwright/test';
|
|
import { imgSnapshotTest } from '../../../helpers/util';
|
|
|
|
test.describe('Flowchart edge label with math', () => {
|
|
test('gets the same background as a plain edge label', async ({ page }, testInfo) => {
|
|
await imgSnapshotTest(
|
|
page,
|
|
testInfo,
|
|
`flowchart LR
|
|
A --- |"Ratio $$\\dfrac{a}{b}$$"| B
|
|
C --- |"plain label"| D`,
|
|
{},
|
|
false,
|
|
async (svg: Locator) => {
|
|
const plainBackground = await svg
|
|
.locator('span.edgeLabel > p')
|
|
.evaluate((label) => getComputedStyle(label).backgroundColor);
|
|
await expect(svg.locator('span.edgeLabel > div')).toHaveCSS(
|
|
'background-color',
|
|
plainBackground
|
|
);
|
|
}
|
|
);
|
|
});
|
|
});
|