vh/booth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(as-S2): legibility — nothing fades, labels 11px, sentences 12px

Browse Source 
From the anti-slop run (design-dev, 2026-09-28). Faded is not legible:
opacity divides whatever contrast a line had.

- Review arrows: the chip under the thin chevron is 82% dense, not 60%;
  the glyph now clears 7:1 over a white stage by colour (was 3.84:1), and
  reads at pixel level where the detector sampled a 2.9:1 median.
- Filmstrip numbers, the marks' state stamp and the inline ask's state tag
  are labels at 11px (were 9.5 / 10.5 / 10.5px).
- The Desk's section rules, the board note and the bench note are
  sentences at 12px.
- Retired benches: no opacity; the link and URL take --text-muted.
- Embed chrome: answered-ask details and the "recorded:" line inherit the
  host's text colour at full strength (the embed cannot know the host's
  palette); the notes placeholder inherits it at 75%, not the UA grey.

Folded from the heid bug-hunt: the embed's ask title no longer fades
either (Q9), and the legibility claims are also held on the browser's
COMPUTED style (tests/test_antislop_s2_browser.py): a stylesheet grep
cannot see a later rule in the cascade (font-size:1px, color:transparent,
filter:grayscale, a placeholder at opacity:0); the browser can.

Folded after the first gate run: the flagged tray's number, the tile's
"flagged" stamp and compare's A/B badge were still under the 11px label
floor; they take --size-micro too. Two film-number rows are re-anchored
on the .film-ord selector: the tray's line is now identical to it, and
the runner mutates the first match.

Contract: as_antislop S2. Falsifiers: antislop.toml 34/34 proved (S1+S2);
all 12 tables 314/314 proved on this tree.
This commit is contained in:
vh
2026-09-28 13:30:31 -07:00
parent 09071dcb65
commit 54f3531833
7 changed files with 401 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/mutations/antislop.toml
+144
View File
@@ -118,3 +118,147 @@ file = "booth/templates/booth.html"
test = "tests/test_antislop.py::test_board_rows_use_the_house_clock"
old = '''{% if e.who|byline %}<span class="board-who">{{ e.who|byline }}</span>{% endif %}'''
new = '''{% if e.who %}<span class="board-who">{{ e.who }}</span>{% endif %}'''
# ---- S2: legibility
[[mutation]]
label = "S2 the review arrows' chip lets a light stage through (60%)"
file = "booth/templates/view.html"
test = "tests/test_antislop.py::test_review_arrows_hold_over_a_white_stage"
old = '''background:oklch(0.17 0.01 250 / .82);'''
new = '''background:oklch(0.17 0.01 250 / .6);'''
[[mutation]]
label = "S2 the filmstrip numbers back at 9.5px"
file = "booth/templates/base.html"
test = "tests/test_antislop.py::test_film_numbers_meet_the_label_floor"
old = ''' .film-ord{position:absolute;left:3px;top:3px;padding:1px 4px;border-radius:var(--radius-sm);
font:600 var(--size-micro)/1.2 var(--font-mono);background:oklch(0.17 0.01 250 / .85);'''
new = ''' .film-ord{position:absolute;left:3px;top:3px;padding:1px 4px;border-radius:var(--radius-sm);
font:600 9.5px/1.2 var(--font-mono);background:oklch(0.17 0.01 250 / .85);'''
[[mutation]]
label = "S2 the marks' state stamp back at 10.5px"
file = "booth/templates/base.html"
test = "tests/test_antislop.py::test_mark_state_meets_the_label_floor"
old = ''' .mark-state{font-family:var(--font-mono);font-size:var(--size-micro);'''
new = ''' .mark-state{font-family:var(--font-mono);font-size:10.5px;'''
[[mutation]]
label = "S2 the Desk's section rules back at the label size"
file = "booth/templates/base.html"
test = "tests/test_antislop.py::test_hint_lines_meet_the_sentence_floor"
old = ''' .desk-rule{font-size:var(--size-caption);font-weight:400;'''
new = ''' .desk-rule{font-weight:400;'''
[[mutation]]
label = "S2 the board note back at 11px"
file = "booth/templates/base.html"
test = "tests/test_antislop.py::test_hint_lines_meet_the_sentence_floor"
old = ''' .board-note{font-family:var(--font-mono);font-size:var(--size-caption);'''
new = ''' .board-note{font-family:var(--font-mono);font-size:var(--size-micro);'''
[[mutation]]
label = "S2 the bench note back at 11px"
file = "booth/templates/base.html"
test = "tests/test_antislop.py::test_hint_lines_meet_the_sentence_floor"
old = ''' .bench-note{font-family:var(--font-mono);font-size:var(--size-caption);'''
new = ''' .bench-note{font-family:var(--font-mono);font-size:var(--size-micro);'''
[[mutation]]
label = "S2 retired benches faded again"
file = "booth/templates/base.html"
test = "tests/test_antislop.py::test_retired_benches_are_not_faded"
old = ''' .bench-row.is-retired .bench-link,.bench-row.is-retired .bench-url{color:var(--text-muted)}'''
new = ''' .bench-row.is-retired{opacity:.5}'''
[[mutation]]
label = "S2 an answered ask's option details faded again"
file = "booth/static/embed.js"
test = "tests/test_antislop.py::test_embed_fades_nothing"
old = ''' ".bk-ask-det{font-size:.82rem}",'''
new = ''' ".bk-ask-det{font-size:.82rem;opacity:.68}",'''
[[mutation]]
label = "S2 the recorded line faded again"
file = "booth/static/embed.js"
test = "tests/test_antislop.py::test_embed_fades_nothing"
old = ''' ".bk-ask-was{margin:.15rem 0 .55rem;font-size:.86rem}",'''
new = ''' ".bk-ask-was{margin:.15rem 0 .55rem;font-size:.86rem;opacity:.8}",'''
[[mutation]]
label = "S2 the notes placeholder back to the browser's grey"
file = "booth/static/embed.js"
test = "tests/test_antislop.py::test_embed_fades_nothing"
old = ''' ".bk-ask-notes::placeholder{color:inherit;opacity:.75}",'''
new = ''''''
[[mutation]]
label = "S2 the inline ask's state tag back at 10.5px"
file = "booth/static/embed.js"
test = "tests/test_antislop.py::test_the_ask_tag_meets_the_label_floor"
old = """ "font:600 11px/1.3 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;","""
new = """ "font:600 10.5px/1.3 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;","""
# ---- S2, folded from the heid bug-hunt guard grid: what the COMPUTED style shows
[[mutation]]
label = "S2 the ask title fades (Q9)"
file = "booth/static/embed.js"
test = "tests/test_antislop_s2_browser.py::test_nothing_fades"
old = """ "letter-spacing:.12em;text-transform:uppercase}","""
new = """ "letter-spacing:.12em;text-transform:uppercase;opacity:.62}","""
[[mutation]]
label = "S2 a later rule shrinks the film numbers (cascade, not shorthand)"
file = "booth/templates/base.html"
test = "tests/test_antislop_s2_browser.py::test_labels_and_sentences_render_at_their_floors"
old = """ .film-ord{position:absolute;left:3px;top:3px;padding:1px 4px;border-radius:var(--radius-sm);
font:600 var(--size-micro)/1.2 var(--font-mono);background:oklch(0.17 0.01 250 / .85);color:oklch(0.91 0.008 216)}"""
new = """ .film-ord{position:absolute;left:3px;top:3px;padding:1px 4px;border-radius:var(--radius-sm);
font:600 var(--size-micro)/1.2 var(--font-mono);background:oklch(0.17 0.01 250 / .85);color:oklch(0.91 0.008 216);font-size:1px}"""
[[mutation]]
label = "S2 the details go transparent without any opacity"
file = "booth/static/embed.js"
test = "tests/test_antislop_s2_browser.py::test_nothing_fades"
old = """ ".bk-ask-det{font-size:.82rem}","""
new = """ ".bk-ask-det{font-size:.82rem;color:transparent}","""
[[mutation]]
label = "S2 the placeholder vanishes (opacity 0) while keeping color:inherit"
file = "booth/static/embed.js"
test = "tests/test_antislop_s2_browser.py::test_nothing_fades"
old = """ ".bk-ask-notes::placeholder{color:inherit;opacity:.75}","""
new = """ ".bk-ask-notes::placeholder{color:inherit;opacity:0}","""
[[mutation]]
label = "S2 retired benches greyed by a filter instead of opacity"
file = "booth/templates/base.html"
test = "tests/test_antislop_s2_browser.py::test_nothing_fades"
old = """ .bench-row.is-retired .bench-link,.bench-row.is-retired .bench-url{color:var(--text-muted)}"""
new = """ .bench-row.is-retired .bench-link,.bench-row.is-retired .bench-url{color:var(--text-muted)}
.bench-row.is-retired{filter:grayscale(.6) opacity(.5)}"""
[[mutation]]
label = "S2 the flagged tray's number back at 10px"
file = "booth/templates/base.html"
test = "tests/test_antislop_s2_browser.py::test_labels_and_sentences_render_at_their_floors"
old = ''' .tray-ord{position:absolute;left:3px;bottom:3px;padding:1px 4px;border-radius:var(--radius-sm);
font:600 var(--size-micro)/1.2 var(--font-mono);'''
new = ''' .tray-ord{position:absolute;left:3px;bottom:3px;padding:1px 4px;border-radius:var(--radius-sm);
font:600 10px/1.2 var(--font-mono);'''
[[mutation]]
label = "S2 the tile's flagged stamp back at 10.5px"
file = "booth/templates/base.html"
test = "tests/test_antislop_s2_browser.py::test_labels_and_sentences_render_at_their_floors"
old = ''' font:600 var(--size-micro)/1.3 var(--font-mono);letter-spacing:var(--tracking-caps);text-transform:uppercase;'''
new = ''' font:600 10.5px/1.3 var(--font-mono);letter-spacing:var(--tracking-caps);text-transform:uppercase;'''
[[mutation]]
label = "S2 compare's A/B badge back at 9.5px"
file = "booth/templates/base.html"
test = "tests/test_antislop_s2_browser.py::test_labels_and_sentences_render_at_their_floors"
old = ''' font:700 var(--size-micro)/1.2 var(--font-mono);background:var(--accent);color:var(--accent-contrast)}'''
new = ''' font:700 9.5px/1.2 var(--font-mono);background:var(--accent);color:var(--accent-contrast)}'''
tests/test_antislop.py
+109
View File
@@ -174,3 +174,112 @@ def test_a_malformed_answer_costs_its_line_not_the_page(client):
(b / ".marks.json").write_text(_json.dumps(doc))
for url in ("/b/b/", "/b/b/marks"):
assert c.get(url).status_code == 200, url
# ---- S2: legibility ----------------------------------------------------------------
# Faded is not legible; labels >= 11px (--size-micro); sentence-like lines >= 12px
# (--size-caption). These read the shipped CSS, and the arrow test composites the
# colours with INDEPENDENT maths (OKLCH -> sRGB -> WCAG), not with anything the
# page computes.
import math as _math
from pathlib import Path as _Path
_T = _Path(__file__).resolve().parent.parent / "booth" / "templates"
_EMBED = _Path(__file__).resolve().parent.parent / "booth" / "static" / "embed.js"
def _rule(css: str, selector: str) -> str:
m = re.search(r"(?:^|[}\s])" + re.escape(selector) + r"\s*\{([^}]*)\}", css)
assert m, f"no rule for {selector!r}"
return m.group(1)
def _oklch_srgb(l, c, h):
a, b = c * _math.cos(_math.radians(h)), c * _math.sin(_math.radians(h))
l_, m_, s_ = (l + 0.3963377774 * a + 0.2158037573 * b, l - 0.1055613458 * a - 0.0638541728 * b,
l - 0.0894841775 * a - 1.2914855480 * b)
L, M, S = l_ ** 3, m_ ** 3, s_ ** 3
lin = (4.0767416621 * L - 3.3077115913 * M + 0.2309699292 * S,
-1.2684380046 * L + 2.6097574011 * M - 0.3413193965 * S,
-0.0041960863 * L - 0.7034186147 * M + 1.7076147010 * S)
enc = lambda v: 12.92 * v if v <= 0.0031308 else 1.055 * v ** (1 / 2.4) - 0.055
return [max(0.0, min(1.0, enc(v))) for v in lin]
def _lum(rgb):
f = lambda v: v / 12.92 if v <= 0.03928 else ((v + 0.055) / 1.055) ** 2.4
return 0.2126 * f(rgb[0]) + 0.7152 * f(rgb[1]) + 0.0722 * f(rgb[2])
def _oklch(decl: str, prop: str):
m = re.search(prop + r"\s*:\s*oklch\(([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*/\s*([\d.]+))?\)", decl)
assert m, f"{prop} is not an oklch() colour in {decl!r}"
return _oklch_srgb(*map(float, m.groups()[:3])), float(m.group(4) or 1)
def test_review_arrows_hold_over_a_white_stage():
"""The worst stage is white: composite the chip over it in sRGB, as the
browser does, and measure the glyph against the result."""
decl = _rule((_T / "view.html").read_text(), ".vnav")
glyph, _ = _oklch(decl, r"(?<![-\w])color")
chip, alpha = _oklch(decl, "background")
under = [alpha * c + (1 - alpha) * 1.0 for c in chip]
a, b = _lum(glyph), _lum(under)
ratio = (max(a, b) + 0.05) / (min(a, b) + 0.05)
assert ratio >= 7, f"arrow glyph over the chip over white: {ratio:.2f}:1"
def _px(decl: str) -> float:
m = re.search(r"font(?:-size)?\s*:[^;]*?(?:(\d+(?:\.\d+)?)px|var\(--size-(micro|caption|sm|body)\))", decl)
assert m, decl
return float(m.group(1)) if m.group(1) else {"micro": 11, "caption": 12, "sm": 13, "body": 14}[m.group(2)]
def test_film_numbers_meet_the_label_floor():
assert _px(_rule((_T / "base.html").read_text(), ".film-ord")) >= 11
def test_mark_state_meets_the_label_floor():
assert _px(_rule((_T / "base.html").read_text(), ".mark-state")) >= 11
@pytest.mark.parametrize("selector", [".desk-rule", ".board-note", ".bench-note"])
def test_hint_lines_meet_the_sentence_floor(selector):
css = (_T / "base.html").read_text()
decls = [m.group(1) for m in re.finditer(r"(?:^|[}\s])" + re.escape(selector) + r"\s*\{([^}]*)\}", css)]
sizes = [_px(d) for d in decls if "font" in d]
assert sizes and min(sizes) >= 12, (selector, sizes)
def test_retired_benches_are_not_faded():
css = (_T / "base.html").read_text()
for m in re.finditer(r"([^{}]*is-retired[^{}]*)\{([^}]*)\}", css):
assert "opacity" not in m.group(2), m.group(0)
def _js_rule(js: str, selector: str) -> str:
"""embed.js carries its sheet as JS string literals: `".sel{...}"`."""
m = re.search(r'"' + re.escape(selector) + r"\{([^}]*)\}", js)
assert m, f"no rule for {selector!r} in embed.js"
return m.group(1)
def test_embed_fades_nothing():
js = _EMBED.read_text()
for sel in (".bk-ask-det", ".bk-ask-was", ".bk-ask-title"):
decl = _js_rule(js, sel)
assert "opacity" not in decl, (sel, decl)
assert not re.search(r'"\.bk-ask-was b\{', js), "a child restoring opacity means the parent fades"
ph = _js_rule(js, ".bk-ask-notes::placeholder")
assert "color:inherit" in ph.replace(" ", ""), ph
def test_the_ask_tag_meets_the_label_floor():
"""The inline ask's state tag is a label (`? your pick`, `✓ answered 28 Sep 0848`).
Its sheet is split over JS string literals, so read the font line that follows
the selector."""
js = _EMBED.read_text()
i = js.index('".bk-ask-tag{')
m = re.search(r"font:\d+ (\d+(?:\.\d+)?)px", js[i:i + 400])
assert m and float(m.group(1)) >= 11, m and m.group(0)
tests/test_antislop_s2_browser.py
+96
View File
@@ -0,0 +1,96 @@
"""S2 of the anti-slop fix slices, read off the browser's COMPUTED style.
The string tests in test_antislop.py read the stylesheet; a later rule in the
cascade (`font-size:1px`, `color:transparent`, `filter:grayscale`, a placeholder
at `opacity:0`) passes them and is still illegible (heid bug-hunt guard grid).
These open the pages in the real uvicorn + Chromium harness and read what the
browser will actually paint. 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)
WIDE = {"width": 1280, "height": 800}
def _seed(root: pathlib.Path):
from booth.benches import set_bench_state, upsert_bench
from booth.links import LINKS_FILE
from booth.marks import answer_pick, declare_pick, marks_for
g = root / "g"
g.mkdir()
for n in ("a.png", "b.png"):
(g / n).write_bytes(_png(64, 48))
from booth.marks import set_flag
set_flag(g, "a.png", True) # the tray's number, the tile's stamp
declare_pick(g, "p1", {"prompt": "Which?", "options": ["North", "South"]})
answer_pick(g, "p1", "North", who="127.0.0.1")
r = root / "r"
r.mkdir()
(r / "index.html").write_text("<!doctype html><title>r</title><body><h1>R</h1><p>body</p></body>")
declare_pick(r, "p2", {"title": "Round one", "prompt": "Which gate?", "notes": True,
"options": [{"id": "n", "label": "North", "detail": "the gate by the road"},
{"id": "s", "label": "South", "detail": "the loading dock"}]})
answer_pick(r, "p2", marks_for(r)[0].options[0]["id"], who="127.0.0.1")
board = root / "links"
board.mkdir()
(board / LINKS_FILE).write_text("- [x](http://x.example/) <sub>· infra-ops · 2026-09-06 23:35</sub>\n")
bench, _ = upsert_bench(root, "http://10.100.10.50:7788/talk", "talk demo", "booth")
set_bench_state(root, bench.id, "retired")
def _size(page, sel):
return page.locator(sel).first.evaluate("e => parseFloat(getComputedStyle(e).fontSize)")
def test_labels_and_sentences_render_at_their_floors(browser, live):
base, root = live
_seed(root)
page = browser.new_page(viewport=WIDE)
checks = [("/b/g/view?f=a.png", ".film-ord", 11), ("/b/g/marks", ".mark-state", 11), ("/", ".desk-rule", 12),
("/b/links/", ".board-note", 12), ("/b/links/", ".bench-note", 12)]
for url, sel, floor in checks:
page.goto(base + url, wait_until="load")
assert _size(page, sel) >= floor, (url, sel, _size(page, sel))
# folded after the S2 gate: three labels the report's list did not name
for url, sel in (("/b/g/", ".tray-ord"), ("/b/g/compare?a=a.png&b=b.png", ".film-ab")):
page.goto(base + url, wait_until="load")
assert _size(page, sel) >= 11, (url, sel, _size(page, sel))
page.goto(base + "/b/g/", wait_until="load")
stamp = page.locator(".item.is-flagged").first.evaluate(
"e => parseFloat(getComputedStyle(e, '::before').fontSize)")
assert stamp >= 11, ("the tile's 'flagged' stamp", stamp)
page.goto(base + "/b/r/", wait_until="load")
page.wait_for_selector(".bk-ask-tag")
assert _size(page, ".bk-ask-tag") >= 11
page.close()
_FADE = """e => { const cs = getComputedStyle(e), parent = getComputedStyle(e.parentElement);
const a = c => { const m = c.match(/rgba?\\(([^)]+)\\)/); if (!m) return 1; const p = m[1].split(',');
return p.length > 3 ? parseFloat(p[3]) : 1; };
return {opacity: parseFloat(cs.opacity), filter: cs.filter, alpha: a(cs.color),
color: cs.color, parent: parent.color}; }"""
def test_nothing_fades(browser, live):
base, root = live
_seed(root)
page = browser.new_page(viewport=WIDE)
page.goto(base + "/b/r/", wait_until="load")
page.wait_for_selector(".bk-ask-det")
for sel in (".bk-ask-det", ".bk-ask-was", ".bk-ask-title"):
got = page.locator(sel).first.evaluate(_FADE)
assert got["opacity"] == 1 and got["filter"] == "none" and got["alpha"] == 1, (sel, got)
det = page.locator(".bk-ask-det").first.evaluate(_FADE)
assert det["color"] == det["parent"], ("details take the host's own colour", det)
ph = page.locator(".bk-ask-notes").first.evaluate("""e => { const p = getComputedStyle(e, '::placeholder');
return {opacity: parseFloat(p.opacity), color: p.color, field: getComputedStyle(e).color}; }""")
assert ph["opacity"] >= 0.7 and ph["color"] == ph["field"], ph
page.goto(base + "/b/links/", wait_until="load")
row = page.locator(".bench-row.is-retired").first.evaluate(_FADE)
assert row["opacity"] == 1 and row["filter"] == "none", row
page.close()