test/viewport/README.md rewritten sentence by sentence

test/viewport/README.md is rewritten from scratch so that every sentence reads on the first pass. It says what the layout test checks, at which widths, how to run it and what it cannot cover, and drops the history of how the test came about. Part of #189.

Model: fable-5-1 (rewrite, review); opus-5-5 (merge)
Co-authored-by: clawbot <clawbot@noreply.example.org>

.editorconfig

@@ -11,7 +11,8 @@ insert_final_newline = true
 [Makefile]
 indent_style = tab
 
-# This repository's own entries, after the shared content above.
-
 [*.go]
 indent_style = tab
+
+# This repository's own sections, such as one for another language it
+# uses, go below this comment, and a re-vendor keeps them.

.gitignore

@@ -27,7 +27,7 @@ node_modules/
 # Environment files. `*.env` covers bare `.env` and the `prod.env`
 # convention. Only the templates `example.env` and `sample.env` are
 # re-included below. A repository that commits any other template adds
-# its own negation after these lines, for example `!.env.example`.
+# its own negation at the end of this file, for example `!.env.example`.
 *.[eE][nN][vV]
 .[eE][nN][vV].*
 .[eE][nN][vV][rR][cC]
@@ -46,7 +46,9 @@ node_modules/
 [iI][dD]_[eE][dD]25519
 [iI][dD]_[eE][dD]25519_[sS][kK]
 
-# This repository's own entries, after the shared content above.
+# This repository's own entries, such as its build outputs, go below
+# this comment, and a re-vendor keeps them. Anchor a binary built at the
+# root: `/myapp`, never `myapp`, which also ignores `cmd/myapp/`.
 
 # Build output
 dist/

.golangci.yml

@@ -25,6 +25,8 @@ linters:
     # silenced by disabling that name, not by enabling the successor.
     - wsl              # Deprecated, replaced by wsl_v5
     - gomodguard       # Deprecated, replaced by gomodguard_v2
+    # Misses findings at random in v2.14.0; back once a pinned release fixes it
+    - canonicalheader
   settings:
     lll:
       line-length: 88

README.md

@@ -220,7 +220,8 @@ packages are in `internal/`:
 
 - **`cli`**: Runs `netwatch-server` from its command line: the `check-cidr` and
   `prepare-data-dir` subcommands, which `bin/entrypoint.sh` runs before it
-  starts the server, and otherwise the server, with the `fx` wiring.
+  starts the server, and, given no arguments, the server, with the `fx` wiring.
+  It refuses any other arguments with a usage message and exit code 2.
 - **`config`**: Loads configuration from environment variables and config files
   via Viper.
 - **`handlers`**: HTTP request handlers for the API (health check, report
@@ -412,20 +413,36 @@ Local hosts are tracked separately from WAN stats.
 
 ### Latency measurement
 
-GET requests to each target's URL as written, with `mode: 'no-cors'` and
+Each check is a GET request to the target's URL as written, with
-`cache: 'no-store'`, timed with `performance.now()`. No query string is added:
+`mode: 'no-cors'`, `cache: 'no-store'` and `referrerPolicy: 'no-referrer'`. Its
-the Hetzner speed-test servers close the connection without an answer when the
+figure is the time from sending the request until the answer's headers arrive,
-URL has one, and `no-store` keeps the browser's cache out of the measurement.
+timed with `performance.now()`. Unlike ping, this includes the time the server
-Each check times out after 80% of the refresh interval (24 seconds at 30
+takes to answer. It also includes the DNS lookup, connection setup and TLS
-seconds) and is then recorded as a timeout, so a round's checks have all
+whenever the browser opens a new connection. Chrome opens one for every check of
-finished before the next round is due. When no WAN host answers, a recovery
+the Hetzner speed-test servers, and for more targets at longer intervals.
-probe checks 4 WAN hosts, picked at random when it starts, every half second,
+
-giving up the checks it started half a second before. As soon as one answers, a
+The S3 regions are checked with a HEAD request instead. Chrome keeps the
-new round starts at once, as it does after an interval change. A round started
+connection to an S3 region open after a HEAD request, but closes it after most
-early gives up the last round's checks if they are still waiting, and that round
+GET requests. The Hetzner speed-test servers do not answer a HEAD request.
-records nothing more, so rounds never overlap. The browser chooses between IPv4
+
-and IPv6 for each target, as for any request; the local targets are IPv4
+The browser follows every redirect, and the figure then includes the request to
-addresses.
+the new URL too. So a target whose home page answers with a redirect is checked
+at `/robots.txt` on the same host, which answers without one. An S3 region
+answers it with 403, and any answer counts as reachable.
+
+The Hetzner speed-test servers close the connection without an answer when the
+URL has a query string or the request has a `Referer` header. So no query string
+is added, and no `Referer` header is sent, wherever the page is served from.
+`no-store` keeps the browser's cache out of the measurement. Each check times
+out after 80% of the refresh interval (24 seconds at 30 seconds) and is then
+recorded as a timeout, so a round's checks have all finished before the next
+round is due. When no WAN host answers, a recovery probe checks 4 WAN hosts,
+picked at random when it starts, every half second, giving up the checks it
+started half a second before. As soon as one answers, a new round starts at
+once, as it does after an interval change. A round started early gives up the
+last round's checks if they are still waiting, and that round records nothing
+more, so rounds never overlap. The browser chooses between IPv4 and IPv6 for
+each target, as for any request; the local targets are IPv4 addresses.
 
 Each recorded check that fails writes one line to the browser console with
 `console.error`, and the same line to the debug log: the target's name and URL,

configs/security-headers.conf

@@ -8,10 +8,9 @@ add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" alway
 # Scripts and styles load only from the page's own origin. Inline ones
 # are blocked, style attributes in markup included, so style elements
 # through classes or element.style. data: images are for the favicon
-# in web/index.html. connect-src is * because the browser checks each
+# in web/index.html. connect-src is * because the page checks every
-# probe in web/src/main.js against it, and also every redirect the probe
+# target in web/src/main.js. A list of hosts here would have to change
-# follows, and several of those hosts redirect to others; a list of
+# with every change to those targets. It also covers the reports the
-# hosts here would block those probes. It also covers the reports the
 # page sends to its own origin.
 add_header Content-Security-Policy "default-src 'self'; connect-src *; img-src 'self' data:; object-src 'none'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'" always;
 

internal/cli/cli.go

@@ -1,7 +1,7 @@
 // Package cli runs netwatch-server from its command line: the
 // check-cidr and prepare-data-dir subcommands, which bin/entrypoint.sh
-// runs before it starts the server, and otherwise the server, with the
+// runs before it starts the server, and, given no arguments, the
-// fx wiring.
+// server, with the fx wiring.
 package cli
 
 import (
@@ -22,16 +22,21 @@ import (
 	"go.uber.org/fx/fxevent"
 )
 
+// usageExitCode is what Main returns for a command line it does not
+// understand, the usual exit code for a usage error.
+const usageExitCode = 2
+
 // Main runs netwatch-server with args, its command line after the
-// program's name, and returns the exit code; the subcommands write
+// program's name, and returns the exit code. With no args, Main runs
-// their errors to stderr. Unless args are "check-cidr CIDR" or
+// the server by calling serve with appname and version, the name and
-// "prepare-data-dir DATA_DIR", Main runs the server by calling serve
+// version the server logs and reports. With "check-cidr CIDR" or
-// with appname and version, the name and version the server logs and
+// "prepare-data-dir DATA_DIR" it runs that subcommand, which writes its
-// reports. main passes os.Stderr and RunServer; the tests pass a
+// errors to stderr. Any other args get a one-line usage message on
-// buffer and a function that fails them, so that no test starts the
+// stderr and exit code 2. main passes os.Stderr and RunServer; the
-// server. When serve is RunServer and the server fails to start, to
+// tests pass a buffer and a function of their own, so that no test
-// listen or to stop, fx's Run exits the process with status 1 and Main
+// starts the server. When serve is RunServer and the server fails to
-// never returns.
+// start, to listen or to stop, fx's Run exits the process with status 1
+// and Main never returns.
 func Main(
 	stderr io.Writer,
 	appname, version string,
@@ -53,6 +58,15 @@ func Main(
 		return prepareDataDir(stderr, "/data", args[1], "netwatch")
 	}
 
+	// Any other command line is refused, so that a mistyped one does
+	// not start the server.
+	if len(args) > 0 {
+		_, _ = fmt.Fprintln(stderr,
+			"usage: netwatch-server [check-cidr CIDR | prepare-data-dir DATA_DIR]")
+
+		return usageExitCode
+	}
+
 	serve(appname, version)
 
 	return 0

internal/cli/cli_test.go

@@ -61,6 +61,61 @@ func TestMainRunsPrepareDataDir(t *testing.T) {
 	}
 }
 
+// TestMainRunsServerWithNoArguments: Main given no arguments starts the
+// server with the name and version it was given, writes nothing and
+// returns 0.
+func TestMainRunsServerWithNoArguments(t *testing.T) {
+	t.Parallel()
+
+	var (
+		stderr                 bytes.Buffer
+		gotAppname, gotVersion string
+	)
+
+	code := cli.Main(&stderr, "netwatch", "test", []string{},
+		func(appname, version string) {
+			gotAppname, gotVersion = appname, version
+		})
+	if code != 0 || stderr.Len() != 0 {
+		t.Errorf("exit %d, stderr %q; want exit 0 and no output",
+			code, stderr.String())
+	}
+
+	if gotAppname != "netwatch" || gotVersion != "test" {
+		t.Errorf("server started with %q %q; want %q %q",
+			gotAppname, gotVersion, "netwatch", "test")
+	}
+}
+
+// TestMainRefusesOtherCommandLines: Main given a subcommand with too
+// few or too many values, or a misspelt subcommand, writes the usage
+// message to stderr, returns 2 and does not start the server.
+func TestMainRefusesOtherCommandLines(t *testing.T) {
+	t.Parallel()
+
+	want := "usage: netwatch-server " +
+		"[check-cidr CIDR | prepare-data-dir DATA_DIR]\n"
+
+	for _, commandLine := range []string{
+		"netwatch-server check-cidr",
+		"netwatch-server check-cidr 192.0.2.0/24 198.51.100.0/24",
+		"netwatch-server prepare-data-dir",
+		"netwatch-server prepare-data-dir /data/reports /data/other",
+		"netwatch-server check-cdir 192.0.2.0/24",
+	} {
+		var stderr bytes.Buffer
+
+		// Main takes the command line after the program's name.
+		args := strings.Fields(commandLine)[1:]
+
+		code := cli.Main(&stderr, "netwatch", "test", args, failIfServerStarts(t))
+		if code != 2 || stderr.String() != want {
+			t.Errorf("%q: exit %d, stderr %q; want exit 2 and %q",
+				commandLine, code, stderr.String(), want)
+		}
+	}
+}
+
 // TestCheckCIDRTakesCIDR: check-cidr exits 0, writing nothing, for a
 // CIDR the server takes in its TRUSTED_PROXIES.
 func TestCheckCIDRTakesCIDR(t *testing.T) {

internal/server/server.go

@@ -79,7 +79,7 @@ func New(
 			s.SetupRoutes()
 			s.httpServer = s.newHTTPServer()
 
-			go s.listenAndServe()
+			go func() { s.listenAndServe() }()
 
 			return nil
 		},

package.json

@@ -1,6 +1,6 @@
 {
     "name": "netwatch",
-    "version": "1.0.0",
+    "private": true,
     "description": "Real-time network latency monitor SPA",
     "type": "module",
     "scripts": {

test/unit/main.test.js

@@ -180,6 +180,91 @@ test("a check fetches the target's URL as written, with no query string added",
     );
 });
 
+test("a check sends no Referer header, wherever the page is served from", async (t) => {
+    mockTargets(t, () => 10);
+    const check = measureLatency("https://fsn1-speed.hetzner.com");
+    t.mock.timers.tick(10);
+    assert.notEqual(await settled(check), "still waiting");
+    assert.equal(
+        fetch.mock.calls[0].arguments[1].referrerPolicy,
+        "no-referrer",
+    );
+});
+
+// These targets' home pages answer with a redirect. A check follows it and
+// times the request to the new URL too, often on another host. The Google
+// Cloud Console redirects only requests that do not say they come from
+// another site, such as curl's. Each target is checked at /robots.txt on
+// its own host, which answers without a redirect. An S3 region answers it
+// with 403, and any answer counts as reachable.
+test("a target whose home page redirects is checked at /robots.txt on its own host", () => {
+    const checked = new Map(
+        new AppState([]).wan.map((host) => [host.name, host.url]),
+    );
+    for (const [name, url] of [
+        ["AWS Console", "https://console.aws.amazon.com/robots.txt"],
+        ["Google Cloud Console", "https://console.cloud.google.com/robots.txt"],
+        ["Akamai", "https://www.akamai.com/robots.txt"],
+        ["B2", "https://api.backblazeb2.com/robots.txt"],
+        [
+            "S3 af-south-1 (Cape Town)",
+            "https://s3.af-south-1.amazonaws.com/robots.txt",
+        ],
+        [
+            "S3 eu-west-2 (London)",
+            "https://s3.eu-west-2.amazonaws.com/robots.txt",
+        ],
+        [
+            "S3 me-south-1 (Bahrain)",
+            "https://s3.me-south-1.amazonaws.com/robots.txt",
+        ],
+        [
+            "S3 ap-northeast-1 (Tokyo)",
+            "https://s3.ap-northeast-1.amazonaws.com/robots.txt",
+        ],
+        [
+            "S3 ap-southeast-1 (Singapore)",
+            "https://s3.ap-southeast-1.amazonaws.com/robots.txt",
+        ],
+        [
+            "S3 ap-southeast-2 (Sydney)",
+            "https://s3.ap-southeast-2.amazonaws.com/robots.txt",
+        ],
+        [
+            "S3 us-west-2 (Oregon)",
+            "https://s3.us-west-2.amazonaws.com/robots.txt",
+        ],
+        [
+            "S3 sa-east-1 (São Paulo)",
+            "https://s3.sa-east-1.amazonaws.com/robots.txt",
+        ],
+    ]) {
+        assert.equal(checked.get(name), url);
+    }
+});
+
+// Chrome keeps the connection to an S3 region open after a HEAD check, but
+// closes it after most GET checks. The Hetzner servers do not answer HEAD.
+test("a round checks each S3 region with a HEAD request and every other target with a GET request", async (t) => {
+    const state = new AppState([
+        { name: "Local CPE", url: "http://192.168.100.1" },
+    ]);
+    mockTargets(t, () => 10);
+    const round = tick(state, new AbortController().signal);
+    t.mock.timers.tick(10);
+    assert.notEqual(await settled(round), "still waiting");
+    const methods = new Map(
+        fetch.mock.calls.map((call) => [
+            call.arguments[0],
+            call.arguments[1].method,
+        ]),
+    );
+    for (const host of state.allHosts) {
+        const method = host.name.startsWith("S3 ") ? "HEAD" : "GET";
+        assert.equal(methods.get(host.url), method, host.name);
+    }
+});
+
 test("at a 30000ms interval, a target answering after 1000ms shows in its row while another target's check is still waiting", async (t) => {
     CONFIG.updateInterval = 30000;
     const state = new AppState([

test/viewport/README.md

@@ -1,114 +1,146 @@
-# Responsive-layout harness
+# The viewport test
 
-Automated verification of the responsive layout that landed in #5. Run it with:
+`make frontend-viewport-test` checks the page's layout at several window widths
+in a real browser:
 
 ```bash
 make frontend-viewport-test
 ```
 
-It builds `dist/`, serves it from the same digest-pinned `nginx` image and the
+First it runs the unit tests. Then it builds the page into `dist/`. It serves
-same `configs/nginx.conf` the shipping container uses, drives a digest-pinned
+`dist/` with the nginx image and the `configs/nginx.conf` that the Docker image
-headless Chrome against it over CDP, and asserts on computed layout at every
+ships. Before the browser starts, it fetches `/` and `/no-such-page`, which
-viewport width derived from the app's own CSS. Screenshots land in
+nginx answers with the page. Both must carry `Cache-Control: no-cache` and a
-`tmp/viewport/` alongside a `results.json`; they are artifacts for a human to
+`Content-Security-Policy` header. Then it starts a headless Chrome in a
-look at when something fails, not the evidence. The assertions are the evidence.
+container and opens the page in it at each width. For each width it measures the
+layout inside the page and checks the measurements in Node. The checks decide
+pass or fail. Screenshots and a `results.json` land in `tmp/viewport/`, for a
+person to look at when a check fails.
 
-The target is deliberately outside `make check`: it takes minutes, and
+The test is not part of `make check`: it takes minutes, and `make test` has to
-`make test` has to stay under 60 seconds.
+finish in under 60 seconds.
 
-## How the widths are chosen
+## The widths
 
-Not from a list of phone models. `viewports.js` parses the `@media` conditions
+The breakpoints are read from the page's own files. `viewports.js` reads the
-out of `web/src/styles.css` and scans `web/src/main.js` and `web/index.html` for
+`min-width` and `max-width` conditions out of the `@media` blocks in
-Tailwind responsive prefixes, then tests every breakpoint it finds at one pixel
+`web/src/styles.css`. It also looks in `web/src/main.js` and `web/index.html`
-below it, exactly on it, and one pixel above it. A generic 375px "phone" test
+for Tailwind's responsive class prefixes, such as `md:`, and takes their
-sails straight past an off-by-one at a media query boundary; `max-width: 768px`
+breakpoints. Each breakpoint is tested at one pixel below it, exactly on it, and
-matches _at_ 768, and the sweep pins down which side of that line each layout is
+one pixel above it. Today the CSS has one breakpoint, `max-width: 768px`, and no
-on.
+responsive prefix is used.
 
-Nothing hardcodes 768. Add a second media block or start using `md:` classes and
+A `max-width: 768px` block matches at 768 pixels. Testing both sides of each
-the new breakpoint is covered without this directory being touched. The app is
+breakpoint catches a layout that switches one pixel too early or too late. A
-desktop-first today (all narrow rules live in `max-width` blocks); a
+second media block, or a first `md:` class, is covered without a change to this
-`min-width`-only, mobile-first set is handled as its inverse, and a set that
+directory.
-mixes the two makes the run fail loudly rather than test the right widths with
-the wrong expectation. Four further viewports are fixed anchors, each with a
-stated reason: a 320px floor, a 1280px desktop baseline, and two phone-landscape
-sizes straddling the breakpoint for the rotation case.
 
-## What it asserts
+The page is desktop-first: the wide layout is the default, and every narrow rule
+is in a `max-width` block. So a width is expected to show the narrow layout when
+one of those blocks matches it. A page with only `min-width` blocks would be
+read the other way round. A page that mixes the two kinds fails the run with a
+message, because the right expectation for each width can no longer be read from
+the breakpoints alone.
 
-- **app-rendered** — enough host rows exist and enough of them show a numeric
+Four more widths are fixed, each for a stated reason:
-  latency. This one exists so the rest cannot pass vacuously against a blank
-  page.
-- **no-horizontal-overflow** — `documentElement.scrollWidth` fits the layout
-  viewport, with the widest offending element named.
-- **nothing-past-viewport-edge** — no visible element's box extends past the
-  viewport edge.
-- **no-clipped-text** — nothing hides text behind `overflow: hidden`. Deliberate
-  ellipsis truncation (Tailwind's `truncate`, used on host names and URLs) is
-  excluded: it is a design choice, not breakage.
-- **tap-targets-44px** — every interactive control is at least 44x44 CSS px on
-  touch viewports, _and_ each selector in the control list matched at least the
-  number of visible elements it declares: one of each single control, and one
-  pin button per WAN host row. The second half is what stops the check passing
-  vacuously: with size alone, a renamed class would take its controls out of the
-  measured set and the check would report "all 0 controls are at least 44x44"
-  and pass. See below.
-- **host-rows-stacked / host-rows-side-by-side** — the rows genuinely reflow.
-  Computed `flex-direction` _and_ the actual geometry are checked, and in the
-  narrow layout the info block and the sparkline must each occupy essentially
-  the full row width. A row that merely shrank its 420px column would fail.
-- **probing-still-runs / gateway-detection-still-runs** — narrow viewports keep
-  probing and keep detecting the gateway. The mobile early-return path proposed
-  in #8 was rejected; this is what would catch it coming back.
 
-### The tap-target threshold
+- 320 by 568 pixels: the narrowest width still in common use
+- 667 by 375 pixels: a phone in landscape, inside the narrow layout
+- 844 by 390 pixels: a large phone in landscape, in the wide layout but still a
+  touch device
+- 1280 by 800 pixels: a desktop window
 
-44x44 CSS px. That is the figure in Apple's Human Interface Guidelines and in
+Every width but 1280 by 800 is tested as a touch device.
-WCAG 2.2 SC 2.5.5 "Target Size (Enhanced)". WCAG 2.2 SC 2.5.8 (level AA) sets a
-lower 24x24 floor, but that floor comes with a spacing exception these controls
-do not qualify for — the pin buttons sit directly against the host name they
-belong to.
 
-## Determinism
+## The checks
 
-The browser container runs on an `--internal` docker network and has no route to
+A failed check does not stop the others.
-the internet, so the app's latency probes cannot reach anything real. The
-harness answers them itself from a fixed delay table, with a deterministic
-fraction failed outright, so the rows render a realistic spread of one-, two-
-and three-digit latencies plus some unreachable rows. That spread is what the
-layout has to survive; a `---` placeholder in every row would not exercise it.
 
-## What this cannot verify
+- `app-rendered`: at least 10 WAN host rows exist, and at least 5 rows show a
+  number as their latency. Without this, the other checks could pass against a
+  blank page.
+- `no-horizontal-overflow`: the document is no wider than the window. On a
+  failure, the widest content is named.
+- `nothing-past-viewport-edge`: no visible element extends past the window's
+  edge.
+- `no-clipped-text`: no element hides its text behind `overflow: hidden` or
+  `overflow: clip`. Text cut with an ellipsis is allowed: that cut is a design
+  choice, not a defect. Tailwind's `truncate` cuts host names and URLs that way.
+- `tap-targets-44px`, on touch widths: each measured control is at least 44 by
+  44 CSS pixels. The controls are `#pause-btn`, `#interval-select`,
+  `#debug-toggle` and the `.pin-btn` in each WAN host row. The check also
+  demands that each selector matches enough visible elements: one of each single
+  control, and one pin button per WAN host row. A renamed class would otherwise
+  take its controls out of the measured set, and the check would pass on
+  nothing.
+- `host-rows-stacked` or `host-rows-side-by-side`: each host row shows the
+  layout expected at that width. In the narrow layout, the row's
+  `flex-direction` is `column`, the graph sits below the host's details, and
+  each takes at least 90% of the row's width. In the wide layout, the direction
+  is `row` and the graph sits to the right of the details. A row that only
+  shrank its fixed 420-pixel column fails.
+- `probing-still-runs`: the page sent at least one check to a target at this
+  width. The narrow layout must not skip the checks.
+- `gateway-detection-still-runs`: the `Local Gateway` row is present at this
+  width, so the gateway was looked for and found. The narrow layout must not
+  skip that search.
 
-Real limits, so nobody re-parks this issue as needing hardware:
+### The tap-target size
 
-- **Non-Chromium engines.** This is Chrome. iOS Safari is WebKit and cannot be
+44 by 44 CSS pixels is the figure in Apple's Human Interface Guidelines and in
-  emulated by it; Safari-specific bugs (viewport units under a collapsing URL
+WCAG 2.2 success criterion 2.5.5, "Target Size (Enhanced)". WCAG 2.2 criterion
-  bar, `-webkit-fill-available`, form control metrics) will not show up here.
+2.5.8 sets a lower minimum of 24 by 24 pixels, with an exception that depends on
-- **Real touch input.** `hasTouch` emulation changes what the page is told, not
+the space around a control. The pin buttons sit against the host name they
-  how a finger behaves. Gesture handling, scroll momentum, double-tap zoom and
+belong to, so the test keeps 44.
-  hover-state fallbacks on touch are out of scope.
-- **Physical pixel density and rendering.** `deviceScaleFactor` is set, but
-  subpixel antialiasing, OLED colour rendering and actual legibility at a given
-  physical size are not measurable here.
-- **Fonts.** The container has DejaVu, not the platform's own UI monospace. Text
-  metrics are therefore close to, but not identical to, a real device — a layout
-  that fits here by a few pixels might not there.
-- **On-device performance.** Canvas sparkline redraw cost, battery, and
-  behaviour on a slow radio are not measured.
-- **Browser chrome.** The address bar, safe-area insets and notch cutouts are
-  not simulated.
 
-Everything else this issue was actually about — does the layout reflow, does
+## The browser's network
-anything overflow, is content clipped, are the controls big enough — is a
+
-function of viewport width and CSS, and is covered above.
+The browser container runs on an internal Docker network with no route to the
+internet, so the page's checks reach no real host. The test answers them itself
+from a fixed table of delays: 2, 45, 123, 456 and 780 milliseconds. Which delay
+a target gets depends on its URL, and about one target in seven fails outright.
+So the rows show one-, two- and three-digit latencies and some unreachable rows,
+and the layout is tested against that spread. The request to
+`http://192.168.1.1` is answered after 5 milliseconds, so the `Local Gateway`
+row appears.
+
+At each width, the test sets the interval to 1 second and waits until at least 5
+rows show a latency before it measures. The page discards its first round, so
+this reaches a filled page without waiting out two rounds at 3 seconds.
+
+## What the test cannot check
+
+- Other browser engines. The test runs Chrome. Safari uses WebKit, and bugs that
+  only WebKit has do not show up here.
+- Real touch input. Touch emulation changes what the page is told, not how a
+  finger behaves. Gestures, scroll momentum, double-tap zoom and hover states on
+  touch are not tested.
+- Physical pixels. The device pixel ratio is set, but antialiasing, colour
+  rendering and legibility at a given physical size are not measured.
+- Fonts. The container has DejaVu, not a phone's own monospace font. Text is
+  about as wide as on a real device, but not exactly. A layout that fits here by
+  a few pixels might not fit there.
+- Performance. The cost of redrawing the graphs, battery use and behaviour on a
+  slow connection are not measured.
+- The browser's own frame. The address bar, safe-area insets and notch cutouts
+  are not simulated.
+
+## The files
+
+- `viewports.js` derives the widths from the sources.
+- `facts.js` is run inside the page and measures the layout. It only measures;
+  it decides nothing.
+- `checks.js` turns the measurements into the pass or fail of each check, with
+  the numbers that decided it.
+- `harness.js` connects to the browser, runs each width, writes the screenshots
+  and `results.json`, and prints the results. `script/frontend-viewport-test`
+  starts it; every input it needs arrives in the environment.
 
 ## Relation to the unit tests
 
-Complementary layers, not two stacks. The unit tests in `test/unit/`, which
+The unit tests in `test/unit/` call the functions that `web/src/main.js`
-`make test` runs with Node's built-in test runner, exercise the functions
+exports, with no browser. `make test` runs them with Node's built-in test
-`web/src/main.js` exports in-process with no browser. This harness exercises
+runner. This test runs the built page in a real browser engine and is the only
-rendered layout in a real engine and is the only thing here that can see a media
+test here that can see a media query. Neither replaces the other. Checks on
-query. Neither replaces the other; assertions about computed styles and element
+computed styles and element geometry belong here; checks on functions belong in
-geometry belong here, assertions about functions belong in `test/unit/`.
+`test/unit/`.

web/src/main.js

@@ -67,51 +67,66 @@ export const CONFIG = {
 
 // WAN endpoints to monitor. These are used for the aggregate health/stats
 // display (min/max/avg). Ordered: personal, LLM APIs, big-3 cloud, then
-// CDN/hosting/other.
+// CDN/hosting/other. A check follows a redirect and times the request to
+// the new URL too. So a target whose home page redirects is checked at
+// /robots.txt on its own host. That URL answers without a redirect.
 const WAN_HOSTS = [
     { name: "datavi.be", url: "https://datavi.be" },
     { name: "Anthropic API", url: "https://api.anthropic.com" },
     { name: "OpenAI API", url: "https://api.openai.com" },
-    { name: "AWS Console", url: "https://console.aws.amazon.com" },
+    { name: "AWS Console", url: "https://console.aws.amazon.com/robots.txt" },
-    { name: "Google Cloud Console", url: "https://console.cloud.google.com" },
+    {
+        name: "Google Cloud Console",
+        url: "https://console.cloud.google.com/robots.txt",
+    },
     { name: "Microsoft Azure", url: "https://portal.azure.com" },
     { name: "Cloudflare", url: "https://www.cloudflare.com" },
     { name: "Fastly CDN", url: "https://www.fastly.com" },
-    { name: "Akamai", url: "https://www.akamai.com" },
+    { name: "Akamai", url: "https://www.akamai.com/robots.txt" },
     { name: "Google", url: "https://www.google.com" },
     { name: "GitHub", url: "https://github.com" },
-    { name: "B2", url: "https://api.backblazeb2.com" },
+    { name: "B2", url: "https://api.backblazeb2.com/robots.txt" },
+    // Chrome keeps the connection to an S3 region open after a HEAD check,
+    // but closes it after most GET checks.
     {
         name: "S3 af-south-1 (Cape Town)",
-        url: "https://s3.af-south-1.amazonaws.com",
+        url: "https://s3.af-south-1.amazonaws.com/robots.txt",
+        method: "HEAD",
     },
     {
         name: "S3 eu-west-2 (London)",
-        url: "https://s3.eu-west-2.amazonaws.com",
+        url: "https://s3.eu-west-2.amazonaws.com/robots.txt",
+        method: "HEAD",
     },
     {
         name: "S3 me-south-1 (Bahrain)",
-        url: "https://s3.me-south-1.amazonaws.com",
+        url: "https://s3.me-south-1.amazonaws.com/robots.txt",
+        method: "HEAD",
     },
     {
         name: "S3 ap-northeast-1 (Tokyo)",
-        url: "https://s3.ap-northeast-1.amazonaws.com",
+        url: "https://s3.ap-northeast-1.amazonaws.com/robots.txt",
+        method: "HEAD",
     },
     {
         name: "S3 ap-southeast-1 (Singapore)",
-        url: "https://s3.ap-southeast-1.amazonaws.com",
+        url: "https://s3.ap-southeast-1.amazonaws.com/robots.txt",
+        method: "HEAD",
     },
     {
         name: "S3 ap-southeast-2 (Sydney)",
-        url: "https://s3.ap-southeast-2.amazonaws.com",
+        url: "https://s3.ap-southeast-2.amazonaws.com/robots.txt",
+        method: "HEAD",
     },
     {
         name: "S3 us-west-2 (Oregon)",
-        url: "https://s3.us-west-2.amazonaws.com",
+        url: "https://s3.us-west-2.amazonaws.com/robots.txt",
+        method: "HEAD",
     },
     {
         name: "S3 sa-east-1 (São Paulo)",
-        url: "https://s3.sa-east-1.amazonaws.com",
+        url: "https://s3.sa-east-1.amazonaws.com/robots.txt",
+        method: "HEAD",
     },
     // Hetzner regional speed test servers — genuine per-DC endpoints
     {
@@ -271,6 +286,7 @@ export class HostState {
     constructor(host, pinned = false) {
         this.name = host.name;
         this.url = host.url;
+        this.method = host.method;
         // Each entry is either a check's result, { timestamp, latency,
         // error }, or a round skipped while paused, { timestamp,
         // latency: null, paused: true }.
@@ -567,16 +583,18 @@ export class Reporter {
 
 // --- Latency Measurement -----------------------------------------------------
 
-// Checks one target. The check times out after CONFIG.requestTimeout; the
+// Checks one target with the given HTTP method, GET when none is given. The
-// caller can give it up sooner through the optional signal, which also ends
+// check times out after CONFIG.requestTimeout; the caller can give it up
-// it as a timeout. A failed check's reason says what went wrong and after
+// sooner through the optional signal, which also ends it as a timeout. A
-// how long; a check that answered has none.
+// failed check's reason says what went wrong and after how long; a check
+// that answered has none.
 //
-// The URL is fetched as written, with nothing added to it: the Hetzner
+// The Hetzner speed-test servers close the connection without an answer
-// speed-test servers close the connection without an answer when the URL
+// when the URL has a query string or the request has a Referer header. So
-// has a query string, and cache: "no-store" keeps the browser's cache out
+// the URL is fetched as written, and referrerPolicy: "no-referrer" sends
-// of the measurement.
+// no Referer header, wherever the page is served from. cache: "no-store"
-export async function measureLatency(url, signal) {
+// keeps the browser's cache out of the measurement.
+export async function measureLatency(url, signal, method = "GET") {
     const controller = new AbortController();
     const timeoutId = setTimeout(
         () => controller.abort(),
@@ -588,9 +606,10 @@ export async function measureLatency(url, signal) {
 
     try {
         await fetch(url, {
-            method: "GET",
+            method,
             mode: "no-cors",
             cache: "no-store",
+            referrerPolicy: "no-referrer",
             signal: controller.signal,
         });
         const latency = Math.round(performance.now() - start);
@@ -1290,7 +1309,7 @@ export async function tick(state, signal, onOffline) {
     // the round started.
     await Promise.all(
         state.allHosts.map(async (host) => {
-            const r = await measureLatency(host.url, signal);
+            const r = await measureLatency(host.url, signal, host.method);
             if (state.paused || signal.aborted || state.tickCount === 0) {
                 return;
             }
@@ -1363,7 +1382,7 @@ function startRecoveryProbe(state, startRounds) {
         const checks = new AbortController();
         state._recoveryProbeChecks = checks;
         for (const host of canaries) {
-            measureLatency(host.url, checks.signal).then((r) => {
+            measureLatency(host.url, checks.signal, host.method).then((r) => {
                 if (r.error !== null || checks.signal.aborted) return;
                 log.notice("Recovery probe: connectivity detected");
                 stopRecoveryProbe(state);