Add screenshot regression test

.github/workflows/playwright.yml

@@ -0,0 +1,44 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+permissions:
+  contents: read
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: test/screenshot-based
+    steps:
+    - uses: actions/checkout@v6
+      with:
+        persist-credentials: false
+
+    - name: Use OCaml 4.14.x
+      uses: ocaml/setup-ocaml@v3
+      with:
+        ocaml-compiler: 4.14.x
+
+    - name: Install OCaml dependencies
+      working-directory: .
+      run: opam install --deps-only -y .
+
+    - name: Generate the HTML files
+      working-directory: .
+      run: opam exec -- dune build --profile release
+
+    # In Playwright's Docker image, so that the rendering is the same as when
+    # the screenshots were generated
+    - name: Run Playwright tests
+      run: ./playwright-docker.sh
+
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: test/screenshot-based/playwright-report/
+        retention-days: 30

.gitignore

@@ -10,3 +10,13 @@ docs/extra_html
 docs/doc-repl/main.js
 docs/_ext/__pycache__/
 docs/_static/main.js
+
+
+# Playwright
+test/screenshot-based/node_modules/
+test/screenshot-based/test-results/
+test/screenshot-based/playwright-report/
+test/screenshot-based/blob-report/
+test/screenshot-based/playwright/.cache/
+test/screenshot-based/playwright/.auth/
+test/screenshot-based/**/*.html

CHANGELOG.md

@@ -2,9 +2,14 @@
 
 ## unreleased
 
+## Added
+
+- Screenshot-based regression tests (#286)
+
 ## Fixed
 
 - Precompiled binaries for macOS no longer rely on Homebrew libraries (#146)
+- Fixed some blurriness in Chrome related to zooming (#286)
 
 ## [v0.13.0] Juraslip Park (Satursday, the 5th of September, 2026)
 

src/engine/runtime/universe/universe.css

@@ -14,5 +14,5 @@ body {
 
 .slipshow-scale-container {
     /* contain: paint layout; */
-    will-change: transform
+    /* will-change: transform is only set during zooms, see window.ml */
 }

src/engine/runtime/universe/window.ml

@@ -73,6 +73,30 @@ let setup el =
       ~at:[ At.class' (Jstr.v "slipshow-rotate-container") ]
       [ scale_container ]
   in
+  (* [will-change: transform] makes Chrome keep the scale container rasterized
+     at the scale it had when the property was set, so the content is blurry
+     after a zoom. We only set it while a zoom is in progress (see
+     [move_pure]), and remove it once the transition is over so that the
+     content is rasterized again at the final scale. *)
+  let () =
+    let stop_will_change ev =
+      if
+        Jv.strict_equal
+          (Ev.target_to_jv (Ev.target ev))
+          (El.to_jv scale_container)
+      then El.remove_inline_style (Jstr.v "will-change") scale_container
+    in
+    List.iter
+      (fun ev ->
+        let _listener : Ev.listener =
+          Ev.listen
+            (Ev.Type.create (Jstr.v ev))
+            stop_will_change
+            (El.as_target scale_container)
+        in
+        ())
+      [ "transitionend"; "transitioncancel" ]
+  in
   Brr.El.insert_siblings `Replace el [ rotate_container ];
   Brr.El.append_children universe [ el ];
   let+ () =
@@ -143,6 +167,10 @@ let move_pure mode window ({ x; y; scale } as target : Coordinates.window)
             ( (TransitionTiming "", TransitionDelay 0.),
               (TransitionTiming "", TransitionDelay 0.) )
       in
+      (* Only during a transition, see [setup] *)
+      if duration > 0. && scale <> (State.get_coord ()).scale then
+        El.set_inline_style (Jstr.v "will-change") (Jstr.v "transform")
+          window.scale_container;
       State.set_coord target;
       let x = -.x +. (width () /. 2.) in
       let y = -.y +. (height () /. 2.) in

test/README.md

@@ -0,0 +1,64 @@
+# Tests
+
+There are two kinds of tests
+
+## CLI tests
+
+CLI tests take the form of [cram tests](https://dune.readthedocs.io/en/stable/tests.html#cram-tests)
+
+Run them with:
+
+```shell
+dune test
+```
+
+## Browser tests
+
+Browser tests take the form of screenshot tests, implemented using [playwright visual tests](https://playwright.dev/docs/test-snapshots).
+
+Running the tests is done in two steps, from the `screenshot-based` folder.
+
+First, generate the HTML files of all tests with dune:
+
+```shell
+dune build --profile release
+```
+
+Each test folder has a `dune` file that compiles its `.slp` and `.md` entries
+to HTML files next to them, with the same base name. When adding an entry to a
+`run.json`, add the corresponding rule.
+
+Then, run the tests in [Playwright's Docker image](https://playwright.dev/docs/docker).
+Browser rendering depends on the fonts and libraries of the host, so using the
+same image everywhere ensures that the screenshots are the same locally and in
+the CI. This only requires Docker, not OCaml nor the Playwright browsers:
+
+```shell
+./playwright-docker.sh
+```
+
+The arguments of `playwright-docker.sh` are passed to `playwright test`. For
+instance, to run only some tests, use `-g` with a regular expression matching
+the test titles, which have the form `<folder>/<entry> › step <N>`, and
+optionally `--project` to select a browser:
+
+```shell
+# One test folder
+./playwright-docker.sh -g 'math/'
+
+# One step of one entry, in one browser
+./playwright-docker.sh -g 'bobkonf.html.*step 5$' --project=chromium
+```
+
+Use `.*` rather than the `›` separator, and end with `$` so that `step 5` does
+not also match `step 50`. Add `--list` to see the selected tests without
+running them, and `--update-snapshots` to accept the current rendering of the
+selected tests. Screenshots generated outside of the Docker image may differ
+slightly from the ones of the CI.
+
+To see the screenshots of failed tests, including the ones of the CI (download
+the `playwright-report` artifact of the workflow run), use:
+
+```shell
+npx playwright show-report <report folder>
+```