Skip to content

Visor: test behavior without freezing the prototype's visual design #186

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lannbot merged 1 commit into from
Sep 8, 2026
Merged

Visor: test behavior without freezing the prototype's visual design #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
206 changes: 31 additions & 175 deletions e2e/run.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -760,11 +760,11 @@ function undersizedControls(page: Page): Promise<string[]> {
});
}

/** Is every long machine identifier still wholly readable — one line high,
* scrollable to its own end, and reachable by keyboard to do it? Chromium
* focuses overflowing scroll containers without a `tabindex`, which is what
* makes the local scroll usable at all; recent enough to be worth checking
* rather than assuming. */
/** Is every long machine identifier wholly reachable? Wrapping and local
* scrolling are both fine; what is not is content the user cannot get to —
* clipped, or scrollable but not to its end. A sideways-scrolling id must
* also take focus, since a keyboard has no other way to scroll it (Chromium
* focuses overflowing scroll containers without a `tabindex`). */
function unreadableIdentifiers(page: Page): Promise<string[]> {
return page.evaluate(() => {
const bad: string[] = [];
Expand All @@ -774,15 +774,10 @@ function unreadableIdentifiers(page: Page): Promise<string[]> {
)
) {
const where = `${el.id || "a member/peer id"}`;
const style = getComputedStyle(el);
if (style.overflowX !== "auto") {
bad.push(`${where}: overflow-x is ${style.overflowX}`);
if (el.scrollHeight > el.clientHeight + 1) {
bad.push(`${where} is clipped vertically`);
}
const lines = Math.round(
el.getBoundingClientRect().height / parseFloat(style.lineHeight),
);
if (lines !== 1) bad.push(`${where} is ${lines} lines high`);
if (el.scrollWidth <= el.clientWidth) continue; // nothing to scroll
if (el.scrollWidth <= el.clientWidth) continue; // wraps; nothing to scroll
el.scrollLeft = el.scrollWidth;
const end = el.scrollLeft + el.clientWidth;
if (end < el.scrollWidth - 1) {
Expand Down Expand Up @@ -1344,10 +1339,8 @@ const scenarios: Scenario[] = [
async run(ctx, origin) {
const page = await open(ctx, origin);
await visorReady(page);
const strip = page.locator("#visor-strip");
const box = await strip.boundingBox();
check(box !== null, "#visor-strip has no box");
eq(box!.height, 56, "#visor-strip height");
const box = await page.locator("#visor-strip").boundingBox();
check(box !== null && box.height > 0, "#visor-strip has no visible box");
// The strip says "waking" until `device.status` answers over the
// worker port; the placeholder is the first kernel-backed pixel, and
// it is the right half — the one that speaks for this device.
Expand Down Expand Up @@ -1996,8 +1989,7 @@ const scenarios: Scenario[] = [
});

const after = await strip(page).boundingBox();
check(after !== null, "#visor-strip lost its box");
eq(after!.height, 56, "#visor-strip height");
check(after !== null && after.height > 0, "#visor-strip lost its box");

// Framework voice for the reason, the app's own title plated: the
// publisher's text never enters the sentence unquoted.
Expand Down Expand Up @@ -2931,8 +2923,8 @@ const scenarios: Scenario[] = [
// Two handheld widths. The Devices section is long machine identifiers
// next to short framework-voice facts about them, which is the shape
// that used to lay one over the other. Nothing may be answered by
// hiding: the whole identifier stays readable, in its own local scroll,
// while neither the page nor the drawer scrolls sideways.
// hiding: the whole identifier stays reachable — wrapped or locally
// scrolled — while neither the page nor the drawer scrolls sideways.
name: "visor-narrow-layout",
async run(ctx, origin) {
const page = await open(ctx, origin);
Expand Down Expand Up @@ -2978,11 +2970,6 @@ const scenarios: Scenario[] = [

const shown = devicesSheet(page).locator("#visor-endpoint-id");
eq(await shown.textContent(), id, "the endpoint id was truncated");
check(
await shown.evaluate((el) => el.scrollWidth > el.clientWidth),
"at 320px the endpoint id fits, so this proves nothing about the " +
"local scroll it is supposed to have",
);
eq(
await devicesSheet(page).locator(".member-row .endpoint-id").count(),
1,
Expand Down Expand Up @@ -3013,76 +3000,8 @@ const scenarios: Scenario[] = [
await page.waitForFunction(
() => document.querySelector("#visor-circle")?.textContent === "A",
);
const circleStyle = await page.locator("#visor-circle").evaluate(
(el) => {
const s = getComputedStyle(el);
return {
w: s.width,
h: s.height,
fontSize: s.fontSize,
lineHeight: s.lineHeight,
fontWeight: s.fontWeight,
};
},
);
eq(
circleStyle,
{
w: "32px",
h: "32px",
fontSize: "20px",
lineHeight: "20px",
fontWeight: "600",
},
"the circle's fixed geometry drifted",
);
// Self is selected right now (the settings sheet is open): a marker
// along its bottom edge and no fill — unlike the app half's own
// pressed dress, and out of the way of the circle beside it.
const selfPressed = await page.locator("#visor-self").evaluate((el) => {
const s = getComputedStyle(el);
return { bg: s.backgroundColor, shadow: s.boxShadow };
});
check(
selfPressed.bg === "rgba(0, 0, 0, 0)" ||
selfPressed.bg === "transparent",
`self selected must have no fill, got ${selfPressed.bg}`,
);
// The offsets, not merely "some shadow": an outline on all four sides
// is what this replaced, and it reads as a box around the identity.
check(
selfPressed.shadow.includes("inset") &&
/(^|\s)0px -2px 0px(\s|$)/.test(
selfPressed.shadow.replace(" inset", ""),
),
`self selected must be marked along its bottom edge only, got ${selfPressed.shadow}`,
);
// The circle itself does not change with selection: same plate
// whether settings is open or not.
const circleSelected = await page.locator("#visor-circle").evaluate(
(el) => getComputedStyle(el).backgroundColor,
);
await openApps(page);
const circleUnselected = await page.locator("#visor-circle").evaluate(
(el) => getComputedStyle(el).backgroundColor,
);
eq(
circleSelected,
circleUnselected,
"the identity circle changed when settings opened",
);
// App selected keeps the existing light fill.
const appPressed = await page.locator("#visor-app").evaluate((el) =>
getComputedStyle(el).backgroundColor
);
check(
appPressed !== "rgba(0, 0, 0, 0)" && appPressed !== "transparent",
`app selected must keep its light fill, got ${appPressed}`,
);
await openSettingsSheet(page);
// Both halves of the strip are on screen at once, self selected: the
// ink above is unaffected by that, which is what the sweep below
// relies on to speak for both halves alike.
// The device's own colour, to put back after the sweep drives the
// sheet directly.
const painted = await page.locator("#visor-root").getAttribute("style");

const worst = new Map<string, number>();
Expand Down Expand Up @@ -3114,51 +3033,24 @@ const scenarios: Scenario[] = [
painted,
);

// The ring is drawn outside its control, so one colour works on the
// strip and in the drawer alike.
await page.keyboard.press("Tab");
const ring = await page.evaluate(() => {
const a = document.activeElement as HTMLElement;
const s = getComputedStyle(a);
return { style: s.outlineStyle, width: parseFloat(s.outlineWidth) };
});
check(
ring.style !== "none" && ring.width >= 2,
`the focus ring is ${JSON.stringify(ring)}`,
);

const small = await undersizedControls(page);
check(small.length === 0, `under the touch floor: ${small.join("; ")}`);
await shot(page, "mobile-390-settings-touch");

// Desktop: the same floor, and fields that stay a field's width
// rather than spanning the window.
// Desktop: the same floor.
await page.setViewportSize({ width: 1280, height: 800 });
await page.waitForTimeout(300);
const wide = await undersizedControls(page);
check(wide.length === 0, `under the touch floor: ${wide.join("; ")}`);
const stretched = await page.evaluate(() =>
[...document.querySelectorAll<HTMLInputElement>("#visor-root input")]
.filter((el) => el.getBoundingClientRect().width > 400)
.map((el) =>
`input[${el.type}] is ${
el.getBoundingClientRect().width.toFixed(0)
}px`
)
);
check(
stretched.length === 0,
`fields span the window: ${stretched.join("; ")}`,
);
await shot(page, "desktop-settings");
},
},

{
// The drawer sizes itself in `svh`, capped so the app zone keeps room
// below the strip on a handheld — see visor/src/style.rs #visor-drawer.
// Playwright's mobile emulation never collapses a toolbar, so the CSSOM
// check below is what this asserts about the *rule*, not the emulator.
// The strip must stay wholly inside the viewport, with room for the
// app below it, at handheld sizes. Emulated viewports only: Playwright
// never collapses or expands a physical browser toolbar, so this says
// nothing about that — only that the layout survives a small viewport.
name: "android-visor-band",
async run(_ctx, origin, browser) {
const ctx = await browser.newContext({
Expand All @@ -3171,44 +3063,6 @@ const scenarios: Scenario[] = [
await visorReady(page);
await paneSettled(page);

const rules = await page.evaluate(() => {
const out: string[] = [];
for (const sheet of Array.from(document.styleSheets)) {
for (const rule of Array.from(sheet.cssRules)) {
if (
rule instanceof CSSStyleRule &&
rule.selectorText === "#visor-drawer"
) out.push(rule.cssText);
if (
rule instanceof CSSMediaRule &&
rule.conditionText.includes("600px")
) {
for (const inner of Array.from(rule.cssRules)) {
out.push(inner.cssText);
}
}
}
}
return out;
});
check(
rules.length === 2,
`expected 2 drawer rules, found ${rules.length}: ${
rules.join(" | ")
}`,
);
for (const rule of rules) {
check(
rule.includes("svh") && !/(?<!s)vh\b/.test(rule),
`drawer rule does not size itself in svh: ${rule}`,
);
}
const paneOverflowY = await page.evaluate(() =>
getComputedStyle(document.querySelector("#visor-drawer .pane")!)
.overflowY
);
eq(paneOverflowY, "auto", "the pane does not scroll its own content");

await launchTodoMvc(page);

for (
Expand All @@ -3235,7 +3089,13 @@ const scenarios: Scenario[] = [

const strip = await page.locator("#visor-strip").boundingBox();
check(strip !== null, `${width}x${height}: #visor-strip has no box`);
eq(strip.height, 56, `${width}x${height}: #visor-strip height`);
check(
strip.y >= -0.5 && strip.y + strip.height <= height + 0.5 &&
strip.height > 0,
`${width}x${height}: the strip is not wholly on screen: ${
JSON.stringify(strip)
}`,
);

const zone = await page.locator("#app-zone").boundingBox();
check(zone !== null, `${width}x${height}: #app-zone has no box`);
Expand All @@ -3245,14 +3105,10 @@ const scenarios: Scenario[] = [
zone.y + zone.height
}, want ${height}`,
);
if (height >= 152) {
check(
zone.height >= 96,
`${width}x${height}: only ${
zone.height.toFixed(0)
}px below the strip`,
);
}
check(
zone.height > 0,
`${width}x${height}: no room at all below the strip`,
);

const overflowed = await page.evaluate(
() =>
Expand Down
Loading
Loading