fix(flowchart): paint the edge label background behind math

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

.changeset/flowchart-math-edge-label-background.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: paint the edge label background behind math in flowchart edge labels so the edge no longer shows through them

e2e/rendering/flowchart/pr-check/flowchart-math-edge-label.spec.ts

@@ -0,0 +1,25 @@
+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
+        );
+      }
+    );
+  });
+});

packages/mermaid/src/diagrams/flowchart/styles.ts

@@ -211,6 +211,10 @@ const getStyles = (options: FlowChartStyleOptions) =>
     p {
       background-color: ${options.edgeLabelBackground};
     }
+    /* Labels with math wrap each line in a <div> instead of a <p> */
+    > div {
+      background-color: ${options.edgeLabelBackground};
+    }
     rect {
       opacity: 0.5;
       background-color: ${options.edgeLabelBackground};