@gjsify/adwaita-web 0.53.0 → 0.55.0

package/src/gtk-popover-role.spec.ts

@@ -0,0 +1,138 @@
+// The ROLE a `<gtk-popover>` announces, and what that role then obliges it to do.
+//
+// `menu` and `listbox` are list roles: their `.adw-popover-item` rows are what the arrow
+// keys walk. A popover that holds CONTENT instead — an info button's explanatory text,
+// the HIG pattern — was announced as a menu of commands no matter what it contained, and
+// the type had no spelling for the difference, so a consumer set `role="dialog"` as an
+// attribute the element kept but did not know: `popoverRole` answered `menu` about it.
+//
+// Every KEYBOARD assertion reads `document.activeElement`, never a class or a state object:
+// the half under test is where a key put the focus. A synthetic `keydown` is the event a
+// real key produces minus the browser's own default action, and the default action is
+// exactly what must NOT happen — `preventDefault()` on a walk that moves focus is
+// observable, and an arrow that leaves focus where it was is the defect.
+
+import { describe, it, expect } from '@gjsify/unit';
+
+import type { GtkPopover, GtkPopoverRole } from './elements/gtk-popover.js';
+
+function press(target: HTMLElement, key: string): KeyboardEvent {
+    const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true });
+    target.dispatchEvent(event);
+    return event;
+}
+
+/** An open surface holding `count` navigable rows, in the shape the LIST keys walk. */
+function openSurface(
+    role: GtkPopoverRole | null,
+    count = 2,
+): { popover: GtkPopover; rows: HTMLButtonElement[]; anchor: HTMLButtonElement; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const anchor = document.createElement('button') as HTMLButtonElement;
+    anchor.textContent = 'anchor';
+    const popover = document.createElement('gtk-popover') as GtkPopover;
+    if (role !== null) popover.setAttribute('role', role);
+    host.append(anchor, popover);
+    for (let i = 0; i < count; i++) {
+        const row = document.createElement('button') as HTMLButtonElement;
+        row.className = 'adw-popover-item';
+        row.textContent = `row ${i}`;
+        popover.appendChild(row);
+    }
+    popover.popup();
+    return { popover, rows: [...popover.querySelectorAll<HTMLButtonElement>('.adw-popover-item')], anchor, host };
+}
+
+export const GtkPopoverRoleTest = async () => {
+    await describe('<gtk-popover> surface role', async () => {
+        await it('reads a dialog role off the surface instead of answering menu', async () => {
+            const { popover, host } = openSurface('dialog');
+            expect(popover.popoverRole).toBe('dialog');
+            host.remove();
+        });
+
+        await it('keeps reading the two list roles, and defaults to menu', async () => {
+            for (const role of ['menu', 'listbox'] as const) {
+                const { popover, host } = openSurface(role);
+                expect(popover.popoverRole).toBe(role);
+                host.remove();
+            }
+            const { popover, host } = openSurface(null);
+            expect(popover.popoverRole).toBe('menu');
+            host.remove();
+        });
+
+        await it('falls back to the default on an unknown role, on a removed one too', async () => {
+            const { popover, host } = openSurface('dialog');
+            popover.setAttribute('role', 'teapot');
+            // Only the GETTER has a default: an author may spell a role outside this union
+            // (a `region`, a `tooltip`), and rewriting what they wrote would take the
+            // surface's own choice away from them.
+            expect(popover.popoverRole).toBe('menu');
+            // A REMOVED role is different — there is nothing left to honour, so it
+            // re-declares the default rather than leaving the surface unlabelled.
+            popover.setAttribute('role', 'dialog');
+            popover.removeAttribute('role');
+            expect(popover.getAttribute('role')).toBe('menu');
+            expect(popover.popoverRole).toBe('menu');
+            host.remove();
+        });
+
+        await it('keeps a role authored in markup across connect', async () => {
+            const host = document.createElement('div');
+            host.innerHTML = '<gtk-popover role="dialog" aria-label="About"><p>a sentence</p></gtk-popover>';
+            document.body.appendChild(host);
+            const popover = host.querySelector('gtk-popover') as GtkPopover;
+            expect(popover.popoverRole).toBe('dialog');
+            expect(popover.getAttribute('role')).toBe('dialog');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-popover> the LIST keys follow the role', async () => {
+        await it('an arrow walks the rows of a menu surface', async () => {
+            const { popover, rows, anchor, host } = openSurface('menu');
+            anchor.focus();
+            press(popover, 'ArrowDown');
+            // The control for the case below: focus that lands on a row is what a walk
+            // looks like, and focus that stays put is what its absence looks like.
+            expect(document.activeElement).toBe(rows[0]);
+            host.remove();
+        });
+
+        await it('an arrow leaves a dialog surface to its content', async () => {
+            const { popover, anchor, host } = openSurface('dialog');
+            anchor.focus();
+            const event = press(popover, 'ArrowDown');
+            // The keys are the CONTENT's here — the arrows scroll it — and taking them for
+            // a row walk would leave an explanatory popover on arrows that move nothing.
+            expect(document.activeElement).toBe(anchor);
+            expect(event.defaultPrevented).toBe(false);
+            host.remove();
+        });
+
+        await it('Enter does not activate a dialog surface as a menu row', async () => {
+            const { popover, rows, host } = openSurface('dialog');
+            let activated = -1;
+            popover.addEventListener('popover-item-activated', (event) => {
+                activated = (event as CustomEvent<{ index: number }>).detail.index;
+            });
+            rows[0].focus();
+            press(popover, 'Enter');
+            expect(activated).toBe(-1);
+            host.remove();
+        });
+
+        await it('Escape still dismisses a dialog surface, and returns focus to the anchor', async () => {
+            // Bound at the document in capture, so the list walk's early return above
+            // cannot take the escape hatch with it.
+            const { popover, anchor, host } = openSurface('dialog');
+            anchor.focus();
+            press(popover, 'Escape');
+            expect(popover.open).toBe(false);
+            expect(document.activeElement).toBe(anchor);
+            host.remove();
+        });
+    });
+};

package/src/gtk-popover.spec.ts

@@ -0,0 +1,264 @@
+// `<gtk-popover>` — the surface every other popover in this package is built on, and the
+// only one that had no spec of its own: `gtk-drop-down.spec.ts`, `gtk-menu-button.spec.ts`,
+// `split-button.spec.ts` and `keyboard-operable.spec.ts` all drive it THROUGH the widget
+// that owns one, so nothing here pins what it does on its own — which is why
+// `autohide` could be unimplemented while every surface around it was tested.
+//
+// The dismissal arithmetic lives in `@gjsify/adwaita-core` (`PopoverState`,
+// `resolvePopoverKey`, ADR 0004) and is ratcheted there; what these are about is the DOM
+// wiring that binds it: the document grab, the attribute reflection, the anchor, and the
+// row walk with its two skips.
+
+import { describe, expect, it } from '@gjsify/unit';
+
+import { PopoverState, resolvePopoverKey } from '@gjsify/adwaita-core';
+
+interface PopoverElement extends HTMLElement {
+    open: boolean;
+    autohide: boolean;
+    anchor: HTMLElement | null;
+    items: HTMLElement[];
+    popup(): void;
+    popdown(): void;
+}
+
+/** A button (the anchor) with a popover holding `labels` rows, mounted in the document. */
+function mount(labels: string[] = []): { anchor: HTMLButtonElement; popover: PopoverElement } {
+    const anchor = document.createElement('button');
+    anchor.textContent = 'anchor';
+    const popover = document.createElement('gtk-popover') as PopoverElement;
+    popover.setAttribute('menu', '');
+    for (const label of labels) {
+        const row = document.createElement('button');
+        row.className = 'adw-popover-item';
+        row.type = 'button';
+        row.textContent = label;
+        popover.appendChild(row);
+    }
+    anchor.appendChild(popover);
+    document.body.appendChild(anchor);
+    return { anchor, popover };
+}
+
+function unmountAll(): void {
+    for (const el of Array.from(document.querySelectorAll('button'))) {
+        if (el.querySelector('gtk-popover') !== null) el.remove();
+    }
+    for (const el of Array.from(document.querySelectorAll('gtk-popover'))) el.remove();
+}
+
+/** A keydown on the document, which is where both grab handlers are bound. */
+function press(key: string): void {
+    document.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }));
+}
+
+export const GtkPopoverTest = async () => {
+    await describe('<gtk-popover> open state', async () => {
+        await it('reflects the state onto `open` and back, idempotently', () => {
+            const { popover } = mount();
+            expect(popover.open).toBe(false);
+            popover.popup();
+            expect(popover.hasAttribute('open')).toBe(true);
+            expect(popover.hidden).toBe(false);
+            // The markup path: `open` is a GObject-shaped attribute, so setting it in markup
+            // has to open the popover rather than leave a stale attribute on a closed one.
+            popover.removeAttribute('open');
+            expect(popover.open).toBe(false);
+            popover.setAttribute('open', '');
+            expect(popover.open).toBe(true);
+            unmountAll();
+        });
+
+        await it('fires notify::open on a real change only', () => {
+            const { popover } = mount();
+            const seen: boolean[] = [];
+            popover.addEventListener('notify::open', (event) => {
+                seen.push((event as CustomEvent<{ open: boolean }>).detail.open);
+            });
+            popover.popup();
+            popover.popup(); // idempotent: `PopoverState._setOpen` returns early
+            popover.popdown();
+            expect(seen).toStrictEqual([true, false]);
+            unmountAll();
+        });
+
+        await it('an element rendered WITH `open` comes up already dismissed-on', () => {
+            const popover = document.createElement('gtk-popover') as PopoverElement;
+            popover.setAttribute('open', '');
+            document.body.appendChild(popover);
+            expect(popover.open).toBe(true);
+            // The document grab must be armed for a popover that was ALREADY open when it
+            // connected, or nothing can dismiss it: `connectedCallback` re-binds every time.
+            press('Escape');
+            expect(popover.open).toBe(false);
+            popover.remove();
+        });
+
+        await it('loses its grab when it is disconnected while open', () => {
+            const { anchor, popover } = mount();
+            popover.popup();
+            anchor.remove();
+            // `disconnectedCallback` released the listeners, so an Escape now falls through
+            // to the page. Reconnecting re-arms them.
+            press('Escape');
+            expect(popover.open).toBe(true);
+            anchor.appendChild(popover);
+            document.body.appendChild(anchor);
+            press('Escape');
+            expect(popover.open).toBe(false);
+            unmountAll();
+        });
+    });
+
+    await describe('<gtk-popover> autohide is GTK’s grab', async () => {
+        await it('defaults to TRUE, and an outside click then dismisses', () => {
+            const { popover } = mount();
+            // `priv->autohide = TRUE` (gtkpopover.c:1046), which is what `gtk_popover_map`
+            // takes the grab on (gtkpopover.c:1245-1247).
+            expect(popover.autohide).toBe(true);
+            popover.popup();
+            document.body.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
+            expect(popover.open).toBe(false);
+            unmountAll();
+        });
+
+        await it('with it off, neither an outside click nor Escape dismisses', () => {
+            const { popover } = mount();
+            popover.setAttribute('autohide', 'false');
+            popover.popup();
+            document.body.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
+            expect(popover.open).toBe(true);
+            // Same gate, same reason: without the grab GTK never routes the key here.
+            press('Escape');
+            expect(popover.open).toBe(true);
+            unmountAll();
+        });
+
+        await it('a bare `autohide` attribute is the DEFAULT-TRUE spelling, not "off"', () => {
+            const { popover } = mount();
+            popover.setAttribute('autohide', '');
+            // The property is default-TRUE, so only the string can say "off"; a bare
+            // attribute must read as the default or every opt-in would read as an opt-out.
+            expect(popover.autohide).toBe(true);
+            popover.autohide = false;
+            expect(popover.getAttribute('autohide')).toBe('false');
+            expect(popover.autohide).toBe(false);
+            unmountAll();
+        });
+
+        await it('a click on the ANCHOR does not dismiss — it is the anchor’s own toggle', () => {
+            const { anchor, popover } = mount();
+            popover.popup();
+            anchor.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
+            expect(popover.open).toBe(true);
+            unmountAll();
+        });
+    });
+
+    await describe('<gtk-popover> the row walk', async () => {
+        await it('skips hidden and disabled rows', () => {
+            const { popover } = mount(['New', 'Cut', 'Copy']);
+            const rows = [...popover.querySelectorAll<HTMLButtonElement>('.adw-popover-item')];
+            (rows[0] as HTMLButtonElement).disabled = true;
+            rows[2].hidden = true;
+            // A disabled `<button>` cannot take focus at all, so `focus()` on one is a
+            // silent no-op and the arrow key reads as dead; `gtk_widget_focus_move` skips
+            // insensitive widgets for the same reason.
+            expect(popover.items.map((item) => item.textContent)).toStrictEqual(['Cut']);
+            unmountAll();
+        });
+
+        await it('ArrowDown walks the rows and wraps, Enter activates the focused one', () => {
+            const { popover } = mount(['a', 'b', 'c']);
+            popover.popup();
+            const rows = [...popover.querySelectorAll<HTMLButtonElement>('.adw-popover-item')];
+            rows[0].focus();
+
+            const send = (key: string) =>
+                popover.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+            send('ArrowDown');
+            expect(document.activeElement).toBe(rows[1]);
+            send('End');
+            expect(document.activeElement).toBe(rows[2]);
+            // The wrap the naive modulo gets wrong: ArrowUp from no focus is `n - 1`.
+            rows[0].blur();
+            rows[0].focus();
+            send('ArrowUp');
+            expect(document.activeElement).toBe(rows[2]);
+
+            let activated = -1;
+            popover.addEventListener('popover-item-activated', (event) => {
+                activated = (event as CustomEvent<{ index: number }>).detail.index;
+            });
+            send('Enter');
+            expect(activated).toBe(2);
+            unmountAll();
+        });
+
+        await it('Escape dismisses through the grab, and activates nothing', () => {
+            const { popover } = mount(['a']);
+            popover.popup();
+            let activated = -1;
+            popover.addEventListener('popover-item-activated', (event) => {
+                activated = (event as CustomEvent<{ index: number }>).detail.index;
+            });
+            const row = popover.querySelector('.adw-popover-item') as HTMLButtonElement;
+            row.focus();
+
+            popover.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+            // `resolvePopoverKey` answers 'close' for Escape and the SURFACE's own handler
+            // ignores that answer: the document capture listener is what dismisses, and
+            // capture runs from `window` down through every ancestor — so the key closes the
+            // popover on the way IN, before the surface's own listener ever sees it.
+            expect(popover.open).toBe(false);
+            // …and `close` is not `activate`. A dismissal chooses nothing, which is the
+            // whole difference between it and Enter.
+            expect(activated).toBe(-1);
+            unmountAll();
+        });
+    });
+
+    await describe('<gtk-popover> core’s arithmetic is the one it resolves', async () => {
+        await it('answers the same moves the surface applies', () => {
+            // The pin that keeps the element from re-deriving the arithmetic: whatever this
+            // table says, `_onKeyDown` must do.
+            expect(resolvePopoverKey('ArrowDown', { itemCount: 3, currentIndex: -1 })).toStrictEqual({
+                action: 'focus',
+                index: 0,
+            });
+            expect(resolvePopoverKey('ArrowUp', { itemCount: 3, currentIndex: -1 })).toStrictEqual({
+                action: 'focus',
+                index: 2,
+            });
+            expect(resolvePopoverKey('ArrowDown', { itemCount: 3, currentIndex: 2 })).toStrictEqual({
+                action: 'focus',
+                index: 0,
+            });
+            expect(resolvePopoverKey(' ', { itemCount: 3, currentIndex: 1 })).toStrictEqual({
+                action: 'activate',
+                index: 1,
+            });
+            expect(resolvePopoverKey('Escape', { itemCount: 0, currentIndex: -1 })).toStrictEqual({
+                action: 'close',
+                index: -1,
+            });
+            // A search entry owns the caret keys while it has focus.
+            expect(resolvePopoverKey('Home', { itemCount: 3, currentIndex: -1, hasSearch: true })).toStrictEqual({
+                action: 'none',
+                index: -1,
+            });
+        });
+
+        await it('a state whose programmatic and interactive changes are distinguishable', () => {
+            // What a renderer re-emits `notify::*` for, and what makes a dismissal read as
+            // a gesture rather than a call.
+            const state = new PopoverState();
+            const seen: boolean[] = [];
+            state.subscribe((change) => seen.push(change.interactive));
+            state.popup();
+            state.toggle(); // the anchor was clicked: interactive
+            state.dismiss(); // already closed — IDEMPOTENT, so it notifies nobody
+            expect(seen).toStrictEqual([false, true]);
+        });
+    });
+};

package/src/gtk-print-dialogs.spec.ts

@@ -0,0 +1,251 @@
+// DOM-level tests for the two Unix print dialogs. What they hold is the SENSITIVITY
+// derivation — `update_dialog_from_capabilities` and the three small setters around it —
+// because that is the part of a print dialog a reader cannot check by looking at it, and
+// the part that decides whether the dialog is honest about a printer that is not there.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkPrintUnixDialog } from './elements/gtk-print-unix-dialog.js';
+import type { GtkPageSetupUnixDialog } from './elements/gtk-page-setup-unix-dialog.js';
+import { COMMON_PAPER_SIZES, defaultPageSetup } from './page-setup.js';
+
+function mountPrint(attrs: Record<string, string> = {}): { el: GtkPrintUnixDialog; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-print-unix-dialog') as GtkPrintUnixDialog;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    host.appendChild(el);
+    return { el, host };
+}
+
+function mountSetup(attrs: Record<string, string> = {}): {
+    el: GtkPageSetupUnixDialog;
+    host: HTMLElement;
+} {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-page-setup-unix-dialog') as GtkPageSetupUnixDialog;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    host.appendChild(el);
+    return { el, host };
+}
+
+/** The state of a control the way the C asks for it: `gtk_widget_get_sensitive`. */
+function insensitive(el: Element | null): boolean {
+    return el?.hasAttribute('disabled') ?? true;
+}
+
+export const GtkPrintDialogsTest = async () => {
+    await describe('<gtk-print-unix-dialog> defaults', async () => {
+        await it('is titled "Print" and prints nothing', async () => {
+            // gtk_print_unix_dialog_new (gtkprintunixdialog.c:2961-2972) — a NULL title means
+            // "Print". The replica is a dialog and nothing more: there is no print backend
+            // here to hand a job to.
+            const { el, host } = mountPrint();
+            expect(el.title).toBe('Print');
+            expect(el.querySelectorAll('*').length).toBeGreaterThan(0);
+            host.remove();
+        });
+
+        await it('starts with no printer, so Print is insensitive and Preview is hidden', async () => {
+            // init (:875-905) sets the OK response INSENSITIVE up front, and
+            // update_dialog_from_capabilities (:1587-1588) HIDES Preview without PREVIEW.
+            const { el, host } = mountPrint();
+            expect(el.selectedPrinter).toBe(null);
+            expect(insensitive(el.querySelector('.adw-print-print'))).toBe(true);
+            expect(el.querySelector('.adw-print-preview')?.hasAttribute('hidden')).toBe(true);
+            host.remove();
+        });
+
+        await it('all seven notebook pages are there, General first', () => {
+            const { el, host } = mountPrint();
+            const tabs = [...el.querySelectorAll('.adw-print-switcher-item')].map((t) => t.textContent);
+            expect(tabs).toStrictEqual([
+                'General',
+                'Page Setup',
+                'Job',
+                'Image Quality',
+                'Color',
+                'Finishing',
+                'Advanced',
+            ]);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-print-unix-dialog> capabilities', async () => {
+        await it('an empty capability set switches every control off', async () => {
+            // update_dialog_from_capabilities (:1563-1592) — every line reads the same mask.
+            const { el, host } = mountPrint();
+            expect(insensitive(el.querySelector('.adw-print-copies'))).toBe(true);
+            expect(insensitive(el.querySelector('.adw-print-scale'))).toBe(true);
+            expect(insensitive(el.querySelector('.adw-print-collate'))).toBe(true);
+            expect(insensitive(el.querySelector('.adw-print-reverse'))).toBe(true);
+            host.remove();
+        });
+
+        await it('manual-capabilities is a nick set, and it is half the mask', async () => {
+            const { el, host } = mountPrint({ 'manual-capabilities': 'copies|scale' });
+            expect(el.manualCapabilities).toStrictEqual(['copies', 'scale']);
+            expect(insensitive(el.querySelector('.adw-print-copies'))).toBe(false);
+            expect(insensitive(el.querySelector('.adw-print-scale'))).toBe(false);
+            // …and the half it does NOT name stays off.
+            expect(insensitive(el.querySelector('.adw-print-reverse'))).toBe(true);
+            host.remove();
+        });
+
+        await it('Collate needs a copies count above one as well as the capability', async () => {
+            // :1570-1571 — `can_collate` is `*copies != '\0' && atoi (copies) > 1`, and it is
+            // ANDed with the COLLATE capability, not either alone.
+            const { el, host } = mountPrint({ 'manual-capabilities': 'copies|collate' });
+            const copies = el.querySelector<HTMLInputElement>('.adw-print-copies')!;
+            const collate = el.querySelector('.adw-print-collate')!;
+            expect(insensitive(collate)).toBe(true);
+            copies.value = '1';
+            copies.dispatchEvent(new Event('input', { bubbles: true }));
+            expect(insensitive(collate)).toBe(true);
+            copies.value = '2';
+            copies.dispatchEvent(new Event('input', { bubbles: true }));
+            expect(insensitive(collate)).toBe(false);
+            host.remove();
+        });
+
+        await it('Preview appears with the PREVIEW capability and Print with a printer', async () => {
+            // Preview is VISIBLE, not merely enabled (:1587-1588); Print follows
+            // `gtk_printer_is_accepting_jobs` (:1842-1876).
+            const { el, host } = mountPrint({ 'manual-capabilities': 'preview' });
+            expect(el.querySelector('.adw-print-preview')?.hasAttribute('hidden')).toBe(false);
+            el.printers = [
+                { name: 'Office Laser', location: 'Building A', acceptsJobs: true },
+                { name: 'Broken', acceptsJobs: false },
+            ];
+            expect(insensitive(el.querySelector('.adw-print-print'))).toBe(true);
+            el.querySelectorAll<HTMLButtonElement>('.adw-print-printer-row')[0]!.click();
+            expect(el.selectedPrinter?.name).toBe('Office Laser');
+            expect(insensitive(el.querySelector('.adw-print-print'))).toBe(false);
+            el.querySelectorAll<HTMLButtonElement>('.adw-print-printer-row')[1]!.click();
+            expect(insensitive(el.querySelector('.adw-print-print'))).toBe(true);
+            host.remove();
+        });
+
+        await it("a printer's capabilities join the manual ones", async () => {
+            // selected_printer_changed (:1874) replaces the previous printer's half with the
+            // new one's, and the mask is `manual | printer` (:1581).
+            const { el, host } = mountPrint({ 'manual-capabilities': 'copies' });
+            el.printers = [{ name: 'Office Laser', capabilities: ['reverse'] }];
+            el.querySelector<HTMLButtonElement>('.adw-print-printer-row')!.click();
+            expect(insensitive(el.querySelector('.adw-print-copies'))).toBe(false);
+            expect(insensitive(el.querySelector('.adw-print-reverse'))).toBe(false);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-print-unix-dialog> selection properties', async () => {
+        await it('the Selection radio appears with support and works with a selection', async () => {
+            // set_support_selection (:3325-3343) then set_has_selection (:3369-3389) — the
+            // second runs last, so "support but nothing to select" ends up INSENSITIVE.
+            const { el, host } = mountPrint();
+            const radio = el.querySelector('.adw-print-range-selection')!;
+            expect(radio.hasAttribute('hidden')).toBe(true);
+            el.supportSelection = true;
+            expect(radio.hasAttribute('hidden')).toBe(false);
+            expect(radio.classList.contains('insensitive')).toBe(true);
+            el.hasSelection = true;
+            expect(radio.classList.contains('insensitive')).toBe(false);
+            host.remove();
+        });
+
+        await it('Current Page needs a page that is not -1', async () => {
+            // set_current_page (:3059-3073).
+            const { el, host } = mountPrint();
+            const radio = el.querySelector('.adw-print-range-current')!;
+            expect(radio.classList.contains('insensitive')).toBe(true);
+            el.currentPage = 4;
+            expect(radio.classList.contains('insensitive')).toBe(false);
+            host.remove();
+        });
+
+        await it('the page setup controls are insensitive until the setup is embedded', async () => {
+            // set_embed_page_setup (:3415-3427) is the only thing that makes the paper size
+            // and orientation drop downs sensitive — and it is also what connects their
+            // `notify::selected` handlers.
+            const { el, host } = mountPrint();
+            el.querySelector<HTMLButtonElement>('.adw-print-switcher-item:nth-child(2)')!.click();
+            const preview = el.querySelector('.adw-print-sheet-preview')!;
+            const paperDrop = el.querySelector('[aria-label="Paper size"]')!;
+            const orientationDrop = el.querySelector('[aria-label="Orientation"]')!;
+            el.pageSetup = { ...defaultPageSetup(), paperSize: COMMON_PAPER_SIZES[0]!.name };
+            // Not embedded: the drop downs are insensitive, so a selection cannot reach them.
+            expect(insensitive(paperDrop)).toBe(true);
+            expect(insensitive(orientationDrop)).toBe(true);
+            expect(preview.getAttribute('aria-label')).toBe('Page layout preview');
+            el.embedPageSetup = true;
+            expect(insensitive(paperDrop)).toBe(false);
+            expect(insensitive(orientationDrop)).toBe(false);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-page-setup-unix-dialog> paper and orientation', async () => {
+        await it('is titled "Page Setup" and offers the twelve common sizes', () => {
+            // gtk_page_setup_unix_dialog_new (gtkpagesetupunixdialog.c:771-786) and
+            // common_paper_sizes (:121-134) — the list is NOT sorted upstream.
+            const { el, host } = mountSetup();
+            expect(el.title).toBe('Page Setup');
+            const model = JSON.parse(el.querySelector('.adw-page-setup-paper')!.getAttribute('model')!);
+            expect(model).toHaveLength(COMMON_PAPER_SIZES.length + 1);
+            expect(model[0]).toBe(COMMON_PAPER_SIZES[0]!.displayName);
+            // The last row is the custom-paper manager, which opens the backends' dialog.
+            expect(model[model.length - 1]).toBe('Manage Custom Sizes…');
+            host.remove();
+        });
+
+        await it('reports the chosen sheet in its user unit', () => {
+            // paper_size_changed (gtkpagesetupunixdialog.c:711-728) — the label is
+            // `W × H unit` through double_to_string, which prints no decimal point at all
+            // on a whole millimetre.
+            const { el, host } = mountSetup();
+            const label = el.querySelector('.adw-page-setup-size-label')!;
+            expect(label.textContent).toBe('210 × 297 mm');
+            expect((label as HTMLElement).title).toContain('Margins:');
+            expect((label as HTMLElement).title).toContain('Bottom: 14.2 mm');
+            host.remove();
+        });
+
+        await it('the orientation radios are one group and drive the setup', () => {
+            // get_orientation / set_orientation (:788-838) — four check buttons in one group.
+            const { el, host } = mountSetup();
+            expect(el.pageSetup.orientation).toBe('portrait');
+            const landscape = [...el.querySelectorAll('adw-radio')].find(
+                (radio) => radio.getAttribute('value') === 'landscape',
+            )!;
+            (landscape as HTMLElement & { checked: boolean }).checked = true;
+            expect(el.pageSetup.orientation).toBe('landscape');
+            host.remove();
+        });
+
+        await it('a setup with margins no row has is APPENDED, as set_paper_size does', () => {
+            // set_page_setup (:823-833) — the model is searched with `page_setup_is_equal`
+            // and a miss appends the setup, because `add_item` is TRUE here.
+            const { el, host } = mountSetup();
+            const custom = {
+                paperSize: 'iso_a4',
+                orientation: 'portrait' as const,
+                margins: { top: 1, bottom: 2, left: 3, right: 4 },
+            };
+            el.pageSetup = custom;
+            expect(el.pageSetup).toStrictEqual(custom);
+            host.remove();
+        });
+
+        await it('print-settings select the printer they name', () => {
+            // set_print_settings (gtkpagesetupunixdialog.c:897-931) — the ONE key it reads
+            // is `format-for-printer`, and it selects that printer when the list has it.
+            const { el, host } = mountSetup();
+            el.printers = [{ name: 'Office Laser', location: 'Building A' }];
+            el.printSettings = { 'format-for-printer': 'Office Laser' };
+            const dropdown = el.querySelector('.adw-page-setup-printer') as HTMLElement & { selected: number };
+            expect(dropdown.selected).toBe(1);
+            host.remove();
+        });
+    });
+};