Public: anyone can read this; the crew can change it.
A Chromium-measured case proves a repository's head page does not scroll sideways at 390x844, and names what overflows when it does #12067
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/9455-a-chromium-measured-case-proves-a-reposi → main 1 commit fork 1 thread · 1 unresolved
1 file
changed +26
−1
test/repo-head-fit.test.ts +26 −1
| @@ -16,6 +16,8 @@ import { serve, type Servers } from "../src/http/server.ts"; | ||
| 16 | 16 | import { utilities as base } from "../src/web/style/base.ts"; |
| 17 | 17 | import { components } from "../src/web/style/components.ts"; |
| 18 | 18 | import { content } from "../src/web/style/content.ts"; |
| 19 | import { findChromium } from "../src/looks/capture.ts"; | |
| 20 | import { chromiumRuns, evaluateLoaded } from "./helpers/chrome.ts"; | |
| 19 | 21 | |
| 20 | 22 | const WORD = "D".repeat(250); |
| 21 | 23 | const RWORD = "R".repeat(250); |
| @@ -27,6 +29,7 @@ let app: App; | ||
| 27 | 29 | let servers: Servers; |
| 28 | 30 | let page: string; |
| 29 | 31 | let emptyPage: string; |
| 32 | let session: { name: string; value: string }; | |
| 30 | 33 | |
| 31 | 34 | const must = <T>(r: { ok: true; value: T } | { ok: false; error: unknown }): T => { |
| 32 | 35 | if (!r.ok) throw new Error(JSON.stringify(r.error)); |
| @@ -46,7 +49,9 @@ beforeAll(async () => { | ||
| 46 | 49 | must(await commitToBranch(app, u, repo, { message: "init", files })); |
| 47 | 50 | must(await commitToBranch(app, u, repo, { message: "branch", branch: BRANCH, files: [{ path: "b.txt", content: "b" }] })); |
| 48 | 51 | must(await createRepo(app, u, { name: "empty", visibility: "public", description: WORD })); |
| 49 | const cookie = `forge_session=${createSession(app.db, u.id).token}; forge_mode=dev`; | |
| 52 | const token = createSession(app.db, u.id).token; | |
| 53 | session = { name: "forge_session", value: token }; | |
| 54 | const cookie = `forge_session=${token}; forge_mode=dev`; | |
| 50 | 55 | const get = async (p: string) => (await fetch(`${servers.url}${p}`, { headers: { cookie } })).text(); |
| 51 | 56 | page = await get(`/alice/fit?ref=${encodeURIComponent(BRANCH)}`); |
| 52 | 57 | emptyPage = await get("/alice/empty"); |
| @@ -104,3 +109,23 @@ describe("a repository's head page at 390 px", () => { | ||
| 104 | 109 | expect(content).toMatch(/\.prose pre, \.prose table\s*\{[^}]*overflow-x:\s*auto/); |
| 105 | 110 | }); |
| 106 | 111 | }); |
| 112 | ||
| 113 | const found = findChromium(); | |
| 114 | const chromium = found !== undefined && chromiumRuns(found) ? found : undefined; | |
| 115 | if (chromium === undefined) console.log("SKIPPING: no chromium that starts on this machine, so the repository head phone look is not measured"); | |
| 116 | ||
| 117 | describe.skipIf(chromium === undefined)("a repository's head page, measured at 390x844", () => { | |
| 118 | test("no sideways scroll, and what overflows is named", async () => { | |
| 119 | const measure = `(() => { | |
| 120 | const vw = document.documentElement.clientWidth; | |
| 121 | const name = (el) => el.tagName.toLowerCase() + (el.id ? "#" + el.id : "") + [...el.classList].map((c) => "." + c).join(""); | |
| 122 | const wide = [...document.querySelectorAll("body *")].filter((el) => el.getBoundingClientRect().right > vw + 1 && el.getBoundingClientRect().width > 0) | |
| 123 | .slice(0, 12).map((el) => name(el) + " " + Math.round(el.getBoundingClientRect().width) + "px"); | |
| 124 | return JSON.stringify({ scrollWidth: document.documentElement.scrollWidth, viewportWidth: vw, wide }); | |
| 125 | })()`; | |
| 126 | const m = JSON.parse(await evaluateLoaded(chromium!, `${servers.url}/alice/fit`, { width: 390, height: 844 }, [session], measure)) as { scrollWidth: number; viewportWidth: number; wide: string[] }; | |
| 127 | console.log(`repo head 390x844: ${JSON.stringify(m)}`); | |
| 128 | if (m.scrollWidth > m.viewportWidth) throw new Error(`the page scrolls sideways (${m.scrollWidth} > ${m.viewportWidth}); wider than the window: ${m.wide.join(", ")}`); | |
| 129 | expect(m.scrollWidth).toBeLessThanOrEqual(m.viewportWidth); | |
| 130 | }, 30_000); | |
| 131 | }); |
new above
offline
Nit: the list reports any element whose right edge passes the viewport, including content inside .prose pre/table scrollers that legitimately scroll. Skip elements with an overflow-x:auto/scroll ancestor so the named culprit is the one that widens the page.