vh
44b80e6d9a
From the anti-slop run (design-dev, 2026-09-28). Measured in a real browser at 390x844 (tests/test_antislop_browser.py), because a layout claim read off a stylesheet is a guess. - Bench rows wrap at <=600px (state + name/URL, then who/when/actions); the name's column was squeezed to ~53px and overprinted the owner and date. - The board head and the benches head drop their note under the count, so "33 links · 1 pinned" / "3 benches" keep one line. - An inline doc's bar wraps: the name takes the full width and breaks only where it must; it was set one word wide. - A file tile's download link starts below the ordinal badge. - The review and compare stages drop the tagline at <=600px (the server marks them `page-stage` on <html>), so the header is one line; the Desk keeps its tagline (the test's negative control). Not changed, with reasons in the contract: `.vname` already ellipsises, and the filmstrip's clipped edge frame is the scroller's "more" cue. Contract: as_antislop S3. Falsifiers: antislop.toml 41/41 proved (S1-S3); all 12 tables 321/321 proved on this tree.
118 lines
5.3 KiB
Python
118 lines
5.3 KiB
Python
"""S3 of the anti-slop fix slices, measured in a real browser at phone width.
|
|
|
|
A layout claim read off a stylesheet is a guess, so these open the pages in the
|
|
same real uvicorn + Chromium harness as test_flow_browser and measure boxes. At
|
|
390x844 no text may overprint other text, and no word may be set in a column
|
|
narrower than itself. Skips, never fails, when no usable Chromium exists.
|
|
"""
|
|
|
|
import pathlib
|
|
import sys
|
|
|
|
sys.path.insert(0, str(pathlib.Path(__file__).resolve().parent))
|
|
from test_flow_browser import _png, browser, live # noqa: E402,F401 (fixtures)
|
|
|
|
PHONE = {"width": 390, "height": 844}
|
|
|
|
|
|
def _boxes_intersect(a, b, slack=1.0):
|
|
return (min(a["r"], b["r"]) - max(a["l"], b["l"]) > slack
|
|
and min(a["b"], b["b"]) - max(a["t"], b["t"]) > slack)
|
|
|
|
|
|
_RECT = "e => { const b = e.getBoundingClientRect(); return {l: b.left, r: b.right, t: b.top, b: b.bottom, w: b.width, h: b.height}; }"
|
|
|
|
|
|
def _board(root: pathlib.Path):
|
|
from booth.benches import set_bench_state, upsert_bench
|
|
from booth.links import LINKS_FILE
|
|
b = root / "links"
|
|
b.mkdir()
|
|
(b / LINKS_FILE).write_text(
|
|
"- [talk, a fleet voice (HTTPS, trusted cert)](https://talk.example:8092/) <sub>· tts-dev · 2026-09-06 23:35</sub>\n"
|
|
"- [a second link](http://x.example/) <sub>· infra-ops · 2026-09-07 09:12</sub>\n")
|
|
for url, name, owner, state in [("http://10.100.10.50:5173/", "peedlar desk", "peedlar-dev", "live"),
|
|
("http://10.100.10.50:8931/board", "svos board", "highseat-dev", "promoted"),
|
|
("http://10.100.10.50:7788/talk", "talk demo", "booth", "retired")]:
|
|
bench, _ = upsert_bench(root, url, name, owner)
|
|
set_bench_state(root, bench.id, state)
|
|
return b
|
|
|
|
|
|
def test_bench_rows_do_not_overprint_on_a_phone(browser, live):
|
|
base, root = live
|
|
_board(root)
|
|
page = browser.new_page(viewport=PHONE)
|
|
page.goto(f"{base}/b/links/", wait_until="load")
|
|
rows = page.locator(".bench-row")
|
|
assert rows.count() == 3, "positive control: the three benches render"
|
|
for i in range(rows.count()):
|
|
row = rows.nth(i)
|
|
parts = {sel: row.locator(sel).first.evaluate(_RECT)
|
|
for sel in (".bench-state", ".bench-link", ".bench-url", ".bench-who", ".bench-when", ".bench-acts")}
|
|
names = list(parts)
|
|
for x in range(len(names)):
|
|
for y in range(x + 1, len(names)):
|
|
assert not _boxes_intersect(parts[names[x]], parts[names[y]]), \
|
|
f"row {i}: {names[x]} overprints {names[y]}: {parts[names[x]]} / {parts[names[y]]}"
|
|
main = row.locator(".bench-main").evaluate(_RECT)
|
|
assert main["w"] >= 200, f"row {i}: the name's column is squeezed to {main['w']:.0f}px"
|
|
page.close()
|
|
|
|
|
|
def test_board_head_stays_compact_on_a_phone(browser, live):
|
|
base, root = live
|
|
_board(root)
|
|
page = browser.new_page(viewport=PHONE)
|
|
page.goto(f"{base}/b/links/", wait_until="load")
|
|
for sel in (".board-title", ".bench-title"):
|
|
title = page.locator(sel).evaluate(
|
|
"e => ({h: e.getBoundingClientRect().height, lh: parseFloat(getComputedStyle(e).lineHeight) || parseFloat(getComputedStyle(e).fontSize) * 1.3})")
|
|
assert title["h"] <= title["lh"] * 1.5, f"{sel} wraps: {title}"
|
|
page.close()
|
|
|
|
|
|
def test_doc_name_keeps_a_readable_line_on_a_phone(browser, live):
|
|
base, root = live
|
|
d = root / "d"
|
|
d.mkdir()
|
|
(d / "01-information-architecture.md").write_text("# The Booth\n\nA paragraph of text.\n")
|
|
page = browser.new_page(viewport=PHONE)
|
|
page.goto(f"{base}/b/d/", wait_until="load")
|
|
name = page.locator(".doc-name").first.evaluate(_RECT)
|
|
assert name["w"] >= 240, f"the doc name is set {name['w']:.0f}px wide"
|
|
page.close()
|
|
|
|
|
|
def test_file_tile_number_clears_the_download_link(browser, live):
|
|
base, root = live
|
|
f = root / "f"
|
|
f.mkdir()
|
|
(f / "ldp-demo-kit-2026-09-23-18b8cee.zip").write_bytes(b"PK\x05\x06" + b"\x00" * 18)
|
|
for vp in (PHONE, {"width": 1280, "height": 800}):
|
|
page = browser.new_page(viewport=vp)
|
|
page.goto(f"{base}/b/f/", wait_until="load")
|
|
ord_box = page.locator(".item > .ord").first.evaluate(_RECT)
|
|
text_box = page.locator(".item .dl").first.evaluate(
|
|
"e => { const r = document.createRange(); r.selectNodeContents(e); const b = r.getBoundingClientRect();"
|
|
" return {l: b.left, r: b.right, t: b.top, b: b.bottom, w: b.width, h: b.height}; }")
|
|
assert not _boxes_intersect(ord_box, text_box), (vp, ord_box, text_box)
|
|
page.close()
|
|
|
|
|
|
def test_review_header_is_one_line_on_a_phone(browser, live):
|
|
base, root = live
|
|
g = root / "g"
|
|
g.mkdir()
|
|
(g / "a.png").write_bytes(_png(64, 48))
|
|
(g / "b.png").write_bytes(_png(64, 48))
|
|
page = browser.new_page(viewport=PHONE)
|
|
for url in (f"{base}/b/g/view?f=a.png", f"{base}/b/g/compare?a=a.png&b=b.png"):
|
|
page.goto(url, wait_until="load")
|
|
assert page.locator(".topbar .tagline").evaluate("e => getComputedStyle(e).display") == "none", url
|
|
assert page.locator(".topbar").evaluate("e => e.getBoundingClientRect().height") <= 64, url
|
|
page.goto(f"{base}/", wait_until="load")
|
|
assert page.locator(".topbar .tagline").evaluate("e => getComputedStyle(e).display") != "none", \
|
|
"the Desk keeps its tagline (negative control)"
|
|
page.close()
|