1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
|
"""
Layouts measured in a browser instead of read out of the stylesheet.
`test_layout_responsive.py` says, in its own docstring, that a layout cannot be
measured here because there is no browser in the suite. There is one now —
Chrome is what the video work has been verified against — and the difference
matters: `width: 330px` in a rule tells you nothing about whether the thing
lands on the screen. That depends on where its anchor sits, which depends on
everything to its right.
The transfers panel is the case that proved it. 330 px wide, anchored to the
right edge of its button — but that button is not at the right edge of the
screen, the bell and the user menu come after it. Measured before the fix:
320 px viewport -> panel at -138..192, 138 px off the left
360 px -> -98..232
412 px -> -46..284
What is cut off is the left-hand side, which is where the file names are, so
what was left on screen was a strip of progress bars belonging to nothing —
reported as "on mobile you only see the right-hand side, without the content".
Every assertion here is a rectangle, not a declaration.
"""
import json
import shutil
import subprocess
import textwrap
from pathlib import Path
import pytest
HARNESS = Path(__file__).parent / "harness" / "layout_probe.py"
STATIC = Path(__file__).resolve().parents[1] / "src" / "meshbay_hub" / "static"
pytestmark = pytest.mark.skipif(
shutil.which("google-chrome") is None or not (STATIC / "style.css").exists(),
reason="Chrome or the SPA stylesheet is not available")
# The nav as `Nav()` renders it: the transfers widget is not last — the bell and
# the user menu follow it, which is the whole reason the panel hangs off.
NAV = textwrap.dedent("""
<nav class="nav">
<div class="nav-left">
<button class="nav-hamburger">☰</button>
<a class="nav-brand" href="#/">MeshBay</a>
</div>
<div class="nav-right">
<div class="transfer-wrap">
<button class="nav-notif transfer-btn">↓</button>
<div class="transfer-panel">
<div class="transfer-head">Transfers<button class="btn-secondary">Clear</button></div>
<div class="transfer-item">
<div class="transfer-line">
<span class="transfer-kind">↓</span>
<span class="transfer-name">Some Saga S03E01 - A Long Enough Title.mp4</span>
<button class="transfer-cancel">✕</button>
</div>
<div class="dl-progress"><div class="dl-fill" style="width:42%"></div></div>
<div class="transfer-meta"><span>210 MB / 493 MB</span><span>3.1 MB/s</span></div>
</div>
</div>
</div>
<a class="nav-notif" href="#/">🔔</a>
<div class="user-menu"><button class="nav-btn">someone</button></div>
</div>
</nav>
""")
WIDTHS = [320, 360, 412, 768, 1024]
SELECTORS = [".transfer-panel", ".transfer-name"]
@pytest.fixture(scope="module")
def measured(tmp_path_factory):
"""One browser for every width, because launching one apiece cost the
suite three minutes."""
fragment = tmp_path_factory.mktemp("layout") / "fragment.html"
fragment.write_text(NAV)
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}"
for w in WIDTHS:
assert out[str(w)]["viewport"]["w"] == w, (
f"asked for {w} px and measured at {out[str(w)]['viewport']['w']}")
return out
def _box(measured, width: int, selector: str) -> dict:
return measured[str(width)]["boxes"][selector]
@pytest.mark.parametrize("width", [320, 360, 412])
def test_the_transfers_panel_fits_a_phone(measured, width):
"""The reported defect, as a rectangle."""
box = _box(measured, width, ".transfer-panel")
assert box is not None, "the panel did not render"
assert box["offLeft"] == 0, (
f"{box['offLeft']} px of the panel is off the left of a {width} px "
"screen — and the left is where the file names are")
assert box["offRight"] == 0, (
f"{box['offRight']} px of the panel is off the right of a {width} px screen")
@pytest.mark.parametrize("width", [320, 360])
def test_the_file_name_gets_room_to_be_read(measured, width):
"""Fitting on screen is not the same as being legible.
A panel could satisfy the test above by being narrow enough to show
nothing. The name is the one part a viewer needs.
"""
box = _box(measured, width, ".transfer-name")
assert box is not None and box["width"] >= 180, (
f"the file name has {box['width'] if box else 0} px on a {width} px "
"screen, which is not enough to tell two downloads apart")
def test_the_desktop_panel_is_untouched(measured):
"""The fix is a media query, and it must stay inside it."""
box = _box(measured, 1024, ".transfer-panel")
assert box["width"] == 330, (
f"the desktop panel is now {box['width']} px — the mobile rule has "
"escaped its breakpoint")
assert box["offLeft"] == 0 and box["offRight"] == 0
def test_it_does_not_stretch_across_a_tablet(measured):
"""Pinned to both edges, a panel would be 750 px wide at 768."""
box = _box(measured, 768, ".transfer-panel")
assert box["width"] <= 440, (
f"{box['width']} px of panel on a tablet, which is a list of two "
"filenames stretched over most of the screen")
@pytest.mark.parametrize("width", [320, 360, 412])
def test_the_page_does_not_scroll_sideways(measured, width):
"""The other half of "it fits": nothing pushed the document wider."""
r = measured[str(width)]
assert r["docScrollW"] <= r["viewport"]["w"], (
f"the document scrolls to {r['docScrollW']} px on a {width} px screen")
# ── The grouped panel (§8.2) ────────────────────────────────────────────────
#
# The panel gained groups, a header summary and a waiting row. Every one of
# those can push something off a 320 px screen, and none of it can be seen by
# reading the stylesheet: what decides where the panel lands is the button it
# hangs from, which is not at the right edge. That is the defect this file was
# written for, and it comes back with any change to the header's width.
GROUPED = textwrap.dedent("""
<nav class="nav">
<div class="nav-left">
<button class="nav-hamburger">☰</button>
<a class="nav-brand" href="#/">MeshBay</a>
</div>
<div class="nav-right">
<div class="transfer-wrap">
<button class="nav-notif transfer-btn">↓</button>
<div class="transfer-panel">
<div class="transfer-head">
<span class="transfer-head-title">Transfers</span>
<span class="transfer-head-summary">2 running · 3 waiting</span>
<button class="btn-secondary">Clear finished</button>
</div>
<div class="transfer-group">
<div class="transfer-group-head">Running</div>
<div class="transfer-item transfer-running">
<div class="transfer-line">
<span class="transfer-kind">↓</span>
<span class="transfer-name">Some Saga S03E01 - A Long Enough Title.mp4</span>
<button class="transfer-cancel">✕</button>
</div>
<div class="dl-progress"><div class="dl-fill" style="width:42%"></div></div>
<div class="transfer-meta"><span>210 MB / 493 MB</span>
<span>3.1 MB/s · 4 min left</span></div>
</div>
</div>
<div class="transfer-group">
<div class="transfer-group-head">Waiting</div>
<div class="transfer-item transfer-queued">
<div class="transfer-line">
<span class="transfer-kind">↓</span>
<span class="transfer-name">Another File With A Long Name.mkv</span>
<button class="transfer-cancel">✕</button>
</div>
<div class="dl-progress dl-waiting"></div>
<div class="transfer-meta"><span>Waiting — your slots are busy</span>
<span>1.2 GB</span></div>
</div>
</div>
</div>
</div>
<a class="nav-notif" href="#/">🔔</a>
<div class="user-menu"><button class="nav-btn">someone</button></div>
</div>
</nav>
""")
GROUPED_SELECTORS = [".transfer-panel", ".transfer-head", ".transfer-head-summary",
".transfer-group-head", ".transfer-name",
".transfer-item.transfer-queued .dl-progress"]
@pytest.fixture(scope="module")
def grouped(tmp_path_factory):
fragment = tmp_path_factory.mktemp("grouped") / "fragment.html"
fragment.write_text(GROUPED)
proc = subprocess.run(
["python3", str(HARNESS), ",".join(str(w) for w in WIDTHS),
str(fragment), *GROUPED_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 test_the_grouped_panel_stays_on_a_phone_screen(grouped):
for width in WIDTHS:
box = grouped[str(width)]["boxes"][".transfer-panel"]
assert box["offLeft"] == 0, (
f"at {width} px the panel hangs {box['offLeft']} px off the left — "
"which is where the file names are")
assert box["offRight"] == 0, (
f"at {width} px the panel hangs {box['offRight']} px off the right")
def test_the_file_name_is_on_screen_in_every_group(grouped):
for width in WIDTHS:
box = grouped[str(width)]["boxes"][".transfer-name"]
assert box["offLeft"] == 0 and box["offRight"] == 0, (
f"at {width} px a file name is cut off: {box}")
assert box["width"] > 40, "the name column collapsed to nothing"
def test_the_header_summary_does_not_push_the_header_taller(grouped):
"""It is the one part of the header that grows with what is happening. If
it wraps, the header changes height as transfers come and go and every row
below it moves — on the narrowest screen, repeatedly."""
for width in WIDTHS:
head = grouped[str(width)]["boxes"][".transfer-head"]
summary = grouped[str(width)]["boxes"][".transfer-head-summary"]
assert head["height"] <= 48, (
f"at {width} px the header is {head['height']} px tall — it wrapped")
assert summary["height"] <= 24, (
f"at {width} px the summary wrapped to {summary['height']} px")
def test_the_waiting_bar_is_as_wide_as_a_progress_bar(grouped):
"""A waiting row has no inner fill element — the stripes are on the track
itself. Getting that wrong renders a zero-width bar, which reads as a
transfer stuck at 0% rather than one that has not started."""
for width in WIDTHS:
bar = grouped[str(width)]["boxes"][
".transfer-item.transfer-queued .dl-progress"]
assert bar["width"] > 100, (
f"at {width} px the waiting bar is {bar['width']} px wide")
assert bar["height"] >= 3, "the waiting bar has no height"
|