` that
# settings-page.js and profile-page.js return. No sidebar in either, so the
# only thing that can differ between them is the page's own width.
FRAGMENT = textwrap.dedent(f"""
Node
Overview
{_overview_table()}
Audit
{_audit_table()}
Settings
Downloads
A line of settings text.
""")
WIDTHS = [320, 360, 412, 768, 1024]
SELECTORS = ["#node.node-page", "#settings", "#node .node-table-scroll",
"#node .node-table-audit", "#node .node-group",
"#node .node-table-overview", "#node .node-key",
"#settings .settings-section"]
@pytest.fixture(scope="module")
def measured(tmp_path_factory):
"""One browser for every width — launching one apiece cost three minutes."""
fragment = tmp_path_factory.mktemp("nodewidth") / "fragment.html"
fragment.write_text(FRAGMENT)
proc = subprocess.run(
["python3", str(HARNESS), ",".join(str(w) for w in WIDTHS),
str(fragment), *SELECTORS],
capture_output=True, text=True, timeout=180)
assert proc.returncode == 0, f"probe failed: {proc.stdout}{proc.stderr}"
out = json.loads(proc.stdout)
assert "error" not in out, f"no measurement: {out}"
return out
def _box(measured, width, selector):
box = measured[str(width)]["boxes"][selector]
assert box is not None, f"{selector} did not render at {width} px"
return box
@pytest.mark.parametrize("width", WIDTHS)
def test_the_node_page_is_the_width_of_a_settings_page(measured, width):
"""The request itself. Same `.main`, same page, same width."""
node = _box(measured, width, "#node.node-page")["width"]
settings = _box(measured, width, "#settings")["width"]
assert node == settings, (
f"at {width} px the Node page is {node} px wide against the Settings "
f"page's {settings} px")
@pytest.mark.parametrize("width", WIDTHS)
def test_a_node_card_lines_up_with_a_settings_card(measured, width):
"""`.node-group` and `.settings-section` are the same rule twice over —
same background, border, radius, padding. They should also be the same
rectangle, or the two pages read as different designs."""
node = _box(measured, width, "#node .node-group")
settings = _box(measured, width, "#settings .settings-section")
assert (node["left"], node["width"]) == (settings["left"], settings["width"]), (
f"at {width} px a node card is {node['width']} px at x={node['left']} "
f"and a settings card {settings['width']} px at x={settings['left']}")
def test_the_audit_table_stops_scrolling_sideways_on_a_desktop(measured):
"""What the width was actually for.
Six columns, five of them `white-space: nowrap`, in a 700px page: the
table was wider than the scroller it sat in, so reading an audit line
meant dragging it sideways — with empty page beside it the whole time.
Measured at 1024px, where `.main` reaches its own 960px cap and the old
rule was the only thing standing between the table and the room it needed.
Below about 800px the viewport was already the tighter constraint, and the
table scrolls there whatever this page is allowed — see the phone case.
"""
table = _box(measured, 1024, "#node .node-table-audit")["width"]
scroller = _box(measured, 1024, "#node .node-table-scroll")["width"]
assert table <= scroller, (
f"the audit table is {table} px inside a {scroller} px scroller — it "
"still has to be dragged sideways on a desktop")
# `max-width: 700px` left roughly 596px here, after `.main`'s 32px padding
# either side and the card's own 20px.
assert scroller > 700, (
f"the audit table has {scroller} px, which is less room than a page "
"capped at 700px would have to give it — the cap is back")
@pytest.mark.parametrize("width", [320, 360, 412])
def test_the_audit_table_still_scrolls_itself_on_a_phone(measured, width):
"""The narrow case is not a regression, it is the design.
Six nowrap columns will never fit a phone. `.node-table-scroll` is what
keeps that contained: the table scrolls inside its own box and the page
does not grow sideways around it.
"""
r = measured[str(width)]
assert r["docScrollW"] <= r["viewport"]["w"], (
f"the document scrolls to {r['docScrollW']} px on a {width} px screen "
"— the audit table is pushing the page wider instead of scrolling")
page = _box(measured, width, "#node.node-page")
assert page["offRight"] == 0, (
f"{page['offRight']} px of the Node page is off a {width} px screen")
@pytest.mark.parametrize("width", [320, 360, 412])
def test_the_node_key_does_not_widen_the_page_on_a_phone(measured, width):
"""The Overview table has no scroller of its own.
`.node-table-audit` may overflow because `.node-table-scroll` contains it.
Overview is a bare `.node-table` in a `.node-group`, so a cell that refuses
to wrap sets the column's minimum width and pushes the document itself
wider than the screen -- which detaches every `position: sticky` element on
the page from a viewport the reader can no longer see, the navigation bar
included. `.node-key` carries `word-break: break-all` for that reason;
remove it and this fails.
"""
r = measured[str(width)]
assert r["docScrollW"] <= r["viewport"]["w"], (
f"the document scrolls to {r['docScrollW']} px on a {width} px screen "
"— the node key is pushing the page wider instead of wrapping")
table = _box(measured, width, "#node .node-table-overview")
card = _box(measured, width, "#node .node-group")
assert table["width"] <= card["width"], (
f"at {width} px the Overview table is {table['width']} px inside a "
f"{card['width']} px card — the key is driving the column")
key = _box(measured, width, "#node .node-key")
assert key["offRight"] == 0, (
f"{key['offRight']} px of the node key is off a {width} px screen")