From b36d3a4960495f531829666ba5c0bea05da51489 Mon Sep 17 00:00:00 2001
From: Terencio Agozzino <terencio.agozzino@gmail.com>
Date: Fri, 30 Oct 2026 21:27:14 +0100
Subject: [PATCH] test: run every browser test in Safari's engine too

The T's curl was cropped only in Safari, and the tests, Chrome only,
could not see it. Each test now runs in Chrome and in WebKit; Lighthouse
stays last and alone.
---
 .github/workflows/ci.yml |  2 +-
 CONTRIBUTING.md          |  5 +++--
 playwright.config.ts     | 11 +++++++++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e1bbb26..aade667 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -49,5 +49,5 @@ jobs:
       # practices and SEO at 100, no layout shift, a page under 250 KB.
       - name: Browser tests and Lighthouse
         run: |
-          npx playwright install --with-deps chromium
+          npx playwright install --with-deps chromium webkit
           npm test
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index d04c62e..d678eb6 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -19,7 +19,8 @@ and hold no text of their own, except section headings.
    theme follows the clock, so change the hour, or set `data-season` and
    `data-time` on `<html>` in the browser's inspector.
 3. Before pushing: `npm run format`, then `npm run build && npm test`.
-   The first time, `npx playwright install chromium` downloads the test browser.
+   The first time, `npx playwright install chromium webkit` downloads the test
+   browsers: Chrome, and Safari's engine.
 4. Open a pull request into `develop`. CI runs the same checks; it must pass.
 5. To publish, merge `develop` into `master`. `deploy.yml` builds and deploys.
 
@@ -29,7 +30,7 @@ and hold no text of their own, except section headings.
 | ---------------------------------- | ------------------------------- | -------------------------- |
 | Formatting                         | Prettier, no diff               | `npm run format`           |
 | Types                              | `astro check`, strict, 0 errors | `npm run build`            |
-| Browser tests                      | All pass                        | `tests/`                   |
+| Browser tests (Chrome, Safari)     | All pass                        | `tests/`                   |
 | Lighthouse performance             | ≥ 95                            | `tests/lighthouse.spec.ts` |
 | Accessibility, best practices, SEO | 100                             | `tests/lighthouse.spec.ts` |
 | Layout shift (CLS)                 | ≤ 0.01                          | `tests/lighthouse.spec.ts` |
diff --git a/playwright.config.ts b/playwright.config.ts
index b98a709..ac9ca9c 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -16,14 +16,21 @@ export default defineConfig({
     timezoneId: 'Europe/Brussels',
     locale: 'en-GB',
   },
+  // Every test in Chrome and in Safari's engine, which draws some things its
+  // own way: it once cropped the name's T while it faded in.
   projects: [
     {
-      name: 'site',
+      name: 'chrome',
       testIgnore: 'lighthouse.spec.ts',
       use: { ...devices['Desktop Chrome'] },
     },
+    {
+      name: 'safari',
+      testIgnore: 'lighthouse.spec.ts',
+      use: { ...devices['Desktop Safari'] },
+    },
     // Last, alone: performance is not measured while other tests run.
-    { name: 'lighthouse', testMatch: 'lighthouse.spec.ts', dependencies: ['site'] },
+    { name: 'lighthouse', testMatch: 'lighthouse.spec.ts', dependencies: ['chrome', 'safari'] },
   ],
   webServer: {
     command: `npm run preview -- --port ${port} --ignore-lock`,