From 146ab72c17eddcdedd1016c86bec9e3e29ab4434 Mon Sep 17 00:00:00 2001
From: stroblme <stroblme@posteo.de>
Date: Thu, 15 Oct 2026 16:15:39 +0200
Subject: [PATCH] make test-webkit runs the drag specs in WebKit against the
 test stack

WebKit takes *.localhost to loopback through GLib and ignores /etc/hosts, so
the container shares Traefik's network namespace. The webkit project only
exists with PLAYWRIGHT_WEBKIT=1, so test-frontend stays Chromium only.
---
 Makefile                      |  9 ++++++++-
 development.md                | 11 ++++++++---
 frontend/playwright.config.ts | 24 ++++++++++++++++--------
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/Makefile b/Makefile
index 62cc4a0..c6a1b7c 100644
--- a/Makefile
+++ b/Makefile
@@ -3,7 +3,7 @@
 # The workspace root delegates to these (see ../Makefile).
 
 .PHONY: init env-check dev-utils dev dev-local dev-lan rebuild-frontend up down update install dev-backend dev-frontend \
-        generate-client sync-example test test-backend test-checks test-stack test-frontend soak \
+        generate-client sync-example test test-backend test-checks test-stack test-frontend test-webkit soak \
         bench-startup lint lint-backend lint-frontend format-frontend umami build docs docs-serve clean help
 
 COMPOSE_ROOT := $(CURDIR)
@@ -225,6 +225,13 @@ test-frontend: test-stack  ## Run frontend tests (Playwright e2e) against the te
 	  -e HOST_RESOLVER_RULES="MAP app.$(TEST_DOMAIN) $$ip, MAP api.$(TEST_DOMAIN) $$ip" \
 	  $(PW_IMAGE) npx playwright test $(PLAYWRIGHT_ARGS)
 
+# WebKit takes *.localhost to loopback through GLib and ignores /etc/hosts, so
+# this run shares Traefik's network namespace, where loopback *is* Traefik.
+# Only the drag specs, which is where the engines differ.
+test-webkit: test-stack  ## Run the drag specs in WebKit against the test stack
+	@$(PW_RUN) --network container:fluksio-app-proxy-1 -e PLAYWRIGHT_WEBKIT=1 \
+	  $(PW_IMAGE) npx playwright test --project=webkit $(PLAYWRIGHT_ARGS)
+
 # Load and chaos against a *running* stack, never part of `make test`: it
 # restarts this stack's containers. `SOAK_ARGS="--dry-run"` only looks.
 soak:  ## Run the soak/chaos harness (SOAK_ARGS="--minutes 30 --scenario redis --force")
diff --git a/development.md b/development.md
index 76582d2..cac3c93 100644
--- a/development.md
+++ b/development.md
@@ -144,10 +144,15 @@ the Traefik container's address twice, with `--add-host` and with `HOST_RESOLVER
 because Chromium pins `*.localhost` to loopback whatever `/etc/hosts` says. Narrow a run with
 `make test-frontend PLAYWRIGHT_ARGS="--grep flows"`.
 
+`make test-webkit` runs the drag specs in WebKit against the same stack. WebKit takes
+`*.localhost` to loopback through GLib and ignores `/etc/hosts`, so that container shares
+Traefik's network namespace, where loopback is Traefik. Playwright's Linux WebKit reads a
+`writing-mode: vertical-lr` range across, so a vertical slider's geometry is not asserted there.
+
 The specs are `frontend/tests/*.spec.ts`; `playwright.config.ts` defines `setup` →
-`chromium` and `mobile`. `auth.setup.ts` logs in once into `playwright/.auth/user.json`,
-which both browser projects reuse; `mobile` runs `mobile.spec.ts` only, on a Pixel 5 at
-393px.
+`chromium` and `mobile`, plus `webkit` when `PLAYWRIGHT_WEBKIT=1` is set. `auth.setup.ts` logs
+in once into `playwright/.auth/user.json`, which the browser projects reuse; `mobile` runs
+`mobile.spec.ts` only, on a Pixel 5 at 393px.
 
 Both origins come from `PLAYWRIGHT_BASE_URL` and `PLAYWRIGHT_API_URL`, deliberately never
 from `VITE_API_URL` — that one belongs to the app build and in a deployment checkout it
diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts
index fd9f2c7..0fc88dd 100644
--- a/frontend/playwright.config.ts
+++ b/frontend/playwright.config.ts
@@ -81,14 +81,22 @@ export default defineConfig({
     //   dependencies: ['setup'],
     // },
 
-    // {
-    //   name: 'webkit',
-    //   use: {
-    //     ...devices['Desktop Safari'],
-    //     storageState: 'playwright/.auth/user.json',
-    //   },
-    //   dependencies: ['setup'],
-    // },
+    /* The drag specs in WebKit, where the engines differ. Opt-in, because
+       WebKit only reaches a *.localhost stack from inside Traefik's network
+       namespace, which is what `make test-webkit` runs in. */
+    ...(process.env.PLAYWRIGHT_WEBKIT
+      ? [
+          {
+            name: 'webkit',
+            use: {
+              ...devices['Desktop Safari'],
+              storageState: 'playwright/.auth/user.json',
+            },
+            testMatch: /-drag\.spec\.ts/,
+            dependencies: ['setup'],
+          },
+        ]
+      : []),
 
     // {
     //   name: 'Mobile Safari',