Mermaid in a Web Worker: the getBBox rules, side by side

Mermaid 12.2.0 can run in a Web Worker in the browser: on a DOM without layout (linkedom), with getBBox, getComputedTextLength and getBoundingClientRect answered by a small measuring layer (text widths from OffscreenCanvas.measureText). The page's main thread then never runs mermaid.

Checked against Chrome on every example of mermaid's docs/syntax at 12.2.0 (538 examples, 33 diagram types including zenuml; htmlLabels: false, dagre, classic look): each example is drawn on the main thread and in the worker, both in Chrome, and compared. 538 of 538 match: the size within 5%, and every text within max(8 px, 2% of the diagonal).

Each rule below was needed because some diagram type drew differently without it. For each one: mermaid in Chrome, the worker as it is, and the worker with only that rule switched off. The images are captured, so they keep showing the difference whatever mermaid version is current. The source is under each one, as text.

1. CSS cascade order

When a font setting is given in several places, the inline style wins over the stylesheet, and the stylesheet wins over the plain SVG attribute, so the worker has to measure text in the font the browser will actually use.