test/viewport/README.md: rework against the third review
check / check (push) Canceled after 0s

Docker is no longer given as the reason the test is outside make
check; the widths tested as touch devices are named. The full pass
fixed three sentences narrower than the code: where the breakpoints
come from, overflow: clip, and the gateway's fixed 5 ms answer.

Model: fable-5-1
This commit is contained in:
clawbot
2026-10-26 05:13:25 +00:00
parent b18ae0724b
commit d624d16c28
+16 -13
View File
@@ -17,18 +17,18 @@ 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 pass or fail. Screenshots and a `results.json` land in `tmp/viewport/`, for a
person to look at when a check fails. person to look at when a check fails.
The test is not part of `make check`: it needs Docker and takes minutes, and The test is not part of `make check`: it takes minutes, and `make test` has to
`make test` has to finish in under 60 seconds. finish in under 60 seconds.
## The widths ## The widths
The widths come from the page's own CSS. `viewports.js` reads the `min-width` The breakpoints are read from the page's own files. `viewports.js` reads the
and `max-width` conditions out of the `@media` blocks in `web/src/styles.css`. `min-width` and `max-width` conditions out of the `@media` blocks in
It also looks in `web/src/main.js` and `web/index.html` for Tailwind's `web/src/styles.css`. It also looks in `web/src/main.js` and `web/index.html`
responsive class prefixes, such as `md:`, and takes their breakpoints. Each for Tailwind's responsive class prefixes, such as `md:`, and takes their
breakpoint is tested at one pixel below it, exactly on it, and one pixel above breakpoints. Each breakpoint is tested at one pixel below it, exactly on it, and
it. Today the CSS has one breakpoint, `max-width: 768px`, and no responsive one pixel above it. Today the CSS has one breakpoint, `max-width: 768px`, and no
prefix is used. responsive prefix is used.
A `max-width: 768px` block matches at 768 pixels. Testing both sides of each A `max-width: 768px` block matches at 768 pixels. Testing both sides of each
breakpoint catches a layout that switches one pixel too early or too late. A breakpoint catches a layout that switches one pixel too early or too late. A
@@ -50,6 +50,8 @@ Four more widths are fixed, each for a stated reason:
touch device touch device
- 1280 by 800 pixels: a desktop window - 1280 by 800 pixels: a desktop window
Every width but 1280 by 800 is tested as a touch device.
## The checks ## The checks
A failed check does not stop the others. A failed check does not stop the others.
@@ -61,9 +63,9 @@ A failed check does not stop the others.
failure, the widest content is named. failure, the widest content is named.
- `nothing-past-viewport-edge`: no visible element extends past the window's - `nothing-past-viewport-edge`: no visible element extends past the window's
edge. edge.
- `no-clipped-text`: no element hides its text behind `overflow: hidden`. Text - `no-clipped-text`: no element hides its text behind `overflow: hidden` or
cut with an ellipsis is allowed: that cut is a design choice, not a defect. `overflow: clip`. Text cut with an ellipsis is allowed: that cut is a design
Tailwind's `truncate` cuts host names and URLs that way. 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 - `tap-targets-44px`, on touch widths: each measured control is at least 44 by
44 CSS pixels. The controls are `#pause-btn`, `#interval-select`, 44 CSS pixels. The controls are `#pause-btn`, `#interval-select`,
`#debug-toggle` and the `.pin-btn` in each WAN host row. The check also `#debug-toggle` and the `.pin-btn` in each WAN host row. The check also
@@ -99,7 +101,8 @@ 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. 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, 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 and the layout is tested against that spread. The request to
`http://192.168.1.1` is answered, so the `Local Gateway` row appears. `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 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 rows show a latency before it measures. The page discards its first round, so