diff --git a/test/viewport/README.md b/test/viewport/README.md index b66de9a..a0fa863 100644 --- a/test/viewport/README.md +++ b/test/viewport/README.md @@ -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 person to look at when a check fails. -The test is not part of `make check`: it needs Docker and takes minutes, and -`make test` has to finish in under 60 seconds. +The test is not part of `make check`: it takes minutes, and `make test` has to +finish in under 60 seconds. ## The widths -The widths come from the page's own CSS. `viewports.js` reads the `min-width` -and `max-width` conditions out of the `@media` blocks in `web/src/styles.css`. -It also looks in `web/src/main.js` and `web/index.html` for Tailwind's -responsive class prefixes, such as `md:`, and takes their breakpoints. Each -breakpoint is tested at one pixel below it, exactly on it, and one pixel above -it. Today the CSS has one breakpoint, `max-width: 768px`, and no responsive -prefix is used. +The breakpoints are read from the page's own files. `viewports.js` reads the +`min-width` and `max-width` conditions out of the `@media` blocks in +`web/src/styles.css`. It also looks in `web/src/main.js` and `web/index.html` +for Tailwind's responsive class prefixes, such as `md:`, and takes their +breakpoints. Each breakpoint is tested at one pixel below it, exactly on it, and +one pixel above it. Today the CSS has one breakpoint, `max-width: 768px`, and no +responsive prefix is used. 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 @@ -50,6 +50,8 @@ Four more widths are fixed, each for a stated reason: touch device - 1280 by 800 pixels: a desktop window +Every width but 1280 by 800 is tested as a touch device. + ## The checks 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. - `nothing-past-viewport-edge`: no visible element extends past the window's edge. -- `no-clipped-text`: no element hides its text behind `overflow: hidden`. 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. +- `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 @@ -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. 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, 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 rows show a latency before it measures. The page discards its first round, so