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:
+16
-13
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user