Skip to content

Install CJK fonts in the browser gate and regenerate the Linux visual baselines - #239

Merged
modacker merged 2 commits into
webuifrom
fix/webui-browser-cjk-font
Oct 23, 2026
Merged

modacker merged 2 commits into
webuifrom
fix/webui-browser-cjk-font

Conversation

@modacker

@modacker modacker commented Oct 23, 2026 •

Copy link
Copy Markdown
Collaborator

Why the committed baselines were tofu boxes

#236 regenerated the 14 Linux screenshots on the GitHub-hosted ubuntu-latest
runner and merged them. That runner had no CJK font installed at all: the gate
ran playwright install chromium, which downloads a browser and nothing else.
The WebUI is Chinese, so every Chinese glyph in those baselines was drawn as an
empty box. The baselines matched what CI rendered, so the gate was green — but
nobody could read the Chinese in a diff, and the visual gate no longer proved
that Chinese text renders correctly. It only proved that boxes render
consistently.

What installs the fonts

playwright install --with-deps chromium additionally installs Playwright's own
system dependency set for the platform. For ubuntu24.04-x64 that set is the
tools list in packages/playwright-core/src/server/registry/nativeDeps.ts,
and it includes fonts-wqy-zenhei (WenQuanYi Zen Hei), plus fonts-unifont,
fonts-ipafont-gothic and fonts-liberation. The Chinese surfaces then render
real glyphs.

The command lives in the test:webui-browser npm script, not in a workflow
file. Both Source verification (.github/workflows/ci.yml) and
WebUI npm preview (.github/workflows/webui-npm-preview.yml) reach the
browser gate through pnpm verify --profile full -> test:webui-browser, so
the script is the single place that decides what the gate installs. Putting the
install step in one workflow would let the other path drift, and the npm
preview path is the one that publishes.

The change is Linux-only in practice: registry.installDeps has branches for
win32 and linux only, so on macOS and Windows the call returns without
installing anything. Local development on those platforms is unaffected.

Reproducibility of the regenerated baselines

Regenerated on ubuntu-latest with playwright install --with-deps chromium
and --update-snapshots, against the same commit.

On the branch's final base, two consecutive runs are byte-identical in all
14 images
, and both are byte-identical to the committed files.

On an earlier base, three runs were compared instead, and they are identical
under Playwright's own comparison but not byte-for-byte:

comparison raw byte-level differing pixels Playwright comparison (pixelmatch, threshold 0.1)
run 1 vs run 2 1 0
run 1 vs run 3 9 0
run 2 vs run 3 10 0

Under Playwright's own comparison the runs are identical: zero differing pixels
in all 14 images, in every pair of runs. At the byte level two images differ
between runs, by one and by nine pixels of sub-threshold anti-aliasing jitter
(at most 2/765 on a channel). The gate's verdict therefore does not depend on
which run supplied the committed file.

Nothing was weakened

No assertion, expectation, pixel threshold, skip or retry was added, removed or
relaxed. The screenshot oracle is still the default toHaveScreenshot
comparison with the default zero-pixel tolerance. The 14 file names and the
file count are unchanged, so release/public-source.json and
test/vitest-suites.json are untouched. The DOM and geometry assertions in
visual-baselines.spec.mjs and plugin-catalogue-layout.spec.mjs are
unchanged, including the settle-wait that #236 brought in — it is kept as is.

The only difference the baselines now carry is that the Chinese is legible.

CI

verify (ubuntu-latest, 24): PASS, 14m25s. The browser gate reports
184 passed (4.0m) — 184 tests in 34 files, all of them compared against the
new baselines, none skipped, none retried. The test:webui gate before it
reports 213 files / 3301 tests passed. verify (macos-latest, 24),
verify (windows-latest, 24), build, performance and
source-history-artifact all pass.

The apt step is visible in the job log: Installing dependencies... at
06:09:33 and Setting up fonts-wqy-zenhei at 06:09:43, so the font install
costs about 10-25s. That is not separable from the runner's own variation:
across five Source verification runs on the base branch without this change
the same gate measured 191.6s, 251.0s, 255.3s, 255.8s and 289.1s, and the two
runs of this branch measured 210.1s and 264.0s. The whole verification stays
well inside the job's 25-minute ceiling (837.6s elapsed).

Remaining trade-offs

  • The gate now depends on apt on the runner. The apt update/install is
    normally ~17s, but it can be slow when the runner's package mirror is
    contended: one measured run of the install step took 5m24s instead of 24s.
    The verify (ubuntu-latest, 24) job keeps its 25-minute ceiling.
  • The baselines now record the runner's font set. A different font set or a
    different Chromium revision on the runner will turn the gate red. That is the
    intended behaviour — a font change is a rendering change — but it is a state
    the repository holds, not a guarantee that the gate stays green on an
    arbitrary runner.
  • The screenshots remain the only visual oracle for these surfaces. A reviewer
    now has to trust that the fonts on the runner are the ones the baselines were
    rendered with; the regeneration procedure is documented in
    packages/webui/docs/verification/browser-suite.md.

probe added 2 commits October 23, 2026 14:02
The Linux browser gate installed the pinned Chromium revision but none of
its system dependencies, so the runner had no CJK font available. The
WebUI is Chinese, and every Chinese glyph in the committed Linux
baselines rendered as a tofu box.

`playwright install --with-deps chromium` installs Playwright's own
dependency set for the platform, which for ubuntu24.04-x64 includes
fonts-wqy-zenhei. The command lives in the npm script rather than in a
workflow file on purpose: both `Source verification` and
`WebUI npm preview` reach the gate through `pnpm verify --profile full`,
so the script is the single place that decides what the gate installs.
Putting it in one workflow would let the other path drift.

On macOS and Windows `registry.installDeps` has no matching branch and
returns without installing anything, so local development is unaffected.
The baselines merged in #236 were rendered on a runner that had no CJK
font at all, so every Chinese glyph in them is a tofu box. This commit
replaces all 14 Linux screenshots with the same surfaces rendered with
Playwright's Linux system dependencies installed, which include
fonts-wqy-zenhei. The Chinese in the new baselines is readable text.

Regenerated on ubuntu-latest with `playwright install --with-deps
chromium` and `--update-snapshots`, three times. Under Playwright's own
comparison (pixelmatch, threshold 0.1) the three runs are identical:
zero differing pixels in all 14 images, in every pair of runs. At the
byte level two images differ between runs, by one and by nine raw pixels
respectively; both are far below the comparator threshold, so the gate
result does not depend on which run supplied the file.

No assertion, expectation or pixel threshold changed, and the file names
and count are unchanged.
@modacker
modacker force-pushed the fix/webui-browser-cjk-font branch from 03c1c54 to b7bb7f2 Compare October 23, 2026 06:03
@modacker
modacker merged commit 5dd91b3 into webui Oct 23, 2026
19 checks passed
@modacker
modacker deleted the fix/webui-browser-cjk-font branch October 23, 2026 06:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant