@gjsify/adwaita-web 0.64.12-next.279 → 0.64.12-next.281

package/src/gtksource/gtk-source-view.ts

@@ -168,12 +168,27 @@ export class GtkSourceView extends WidgetElement {
         });
         this.session = new EditorSession(this.driver, undefined, adwaitaColorScheme());
         this.session.bindGutters(this.gutters);
+        // A write to an adjustment's value scrolls the textarea, as on GTK; the sync below is
+        // guarded so the scroll it causes does not write the value back.
+        this.vadj.connect('value-changed', () => {
+            if (!this.syncing) this.area.scrollTop = this.vadj.value;
+        });
+        this.hadj.connect('value-changed', () => {
+            if (!this.syncing) this.area.scrollLeft = this.hadj.value;
+        });
     }
 
+    private syncing = false;
+
     private syncAdjustments(): void {
         const { area } = this;
-        this.vadj.configure(area.scrollTop, 0, area.scrollHeight, 20, area.clientHeight, area.clientHeight);
-        this.hadj.configure(area.scrollLeft, 0, area.scrollWidth, 20, area.clientWidth, area.clientWidth);
+        this.syncing = true;
+        try {
+            this.vadj.configure(area.scrollTop, 0, area.scrollHeight, 20, area.clientHeight, area.clientHeight);
+            this.hadj.configure(area.scrollLeft, 0, area.scrollWidth, 20, area.clientWidth, area.clientWidth);
+        } finally {
+            this.syncing = false;
+        }
     }
 
     private readonly onAreaScroll = (): void => this.syncAdjustments();
@@ -375,7 +390,7 @@ export class GtkSourceView extends WidgetElement {
     }
 
     /** GJS `connect(name, cb) → id`; the handler's first argument is this view. */
-    connect(name: string, callback: (self: GtkSourceView, ...args: never[]) => unknown): number {
+    connect(name: string, callback: (self: this, ...args: never[]) => unknown): number {
         return this.session.connect(name, ((_session: unknown, ...args: never[]) => callback(this, ...args)) as never);
     }
 

package/src/index.ts

@@ -120,6 +120,8 @@ export * as Gio from './namespace/gio.js';
 
 // Gdk's clipboard (`Display`, `Clipboard`, `ContentProvider`): `./namespace/gdk.ts` says what is absent.
 export * as Gdk from './namespace/gdk.js';
+// Graphene's `Point`, what `Gtk.Widget.compute_point` takes and returns: `./namespace/graphene.ts`.
+export * as Graphene from './namespace/graphene.js';
 // GLib's timers (`idle_add`, `timeout_add`, `source_remove`): `./namespace/glib.ts` says what is absent.
 export * as GLib from './namespace/glib.js';
 

package/src/namespace/adw.ts

@@ -111,4 +111,4 @@ export { AdwWindowTitle as WindowTitle } from '../elements/adw-window-title.js';
 export { AdwWrapBox as WrapBox } from '../elements/adw-wrap-box.js';
 export { AdwApplication as Application } from '../application.js';
 export { AdwStyleManager as StyleManager } from '../style-manager.js';
-export { ColorScheme, Toast, ToastPriority } from '@gjsify/adwaita-core';
+export { AccentColor, ColorScheme, Toast, ToastPriority } from '@gjsify/adwaita-core';

package/src/namespace/gdk.ts

@@ -9,6 +9,8 @@ import { CURRENT_TIME as GDK_PLATFORM_CURRENT_TIME, GDK_KEYS, createGdk } from '
 
 import { webClipboardHost } from '../clipboard-host.js';
 
+export { RGBA } from '@gjsify/adwaita-core';
+
 export const gdk = createGdk(webClipboardHost);
 
 export const Display = gdk.Display;

package/src/namespace/gio.ts

@@ -29,6 +29,9 @@ import { createAppInfo } from '@gjsify/adwaita-core';
 import { webPlatformHost } from '../platform-host.js';
 
 export { GioMenu as Menu, GioMenuItem as MenuItem } from '@gjsify/adwaita-core';
+// ADR 0122 § 2: the interface a `Gtk.StringList` implements and an `Implements: [Gio.ListModel]`
+// names. It is a token, not a class — the whole of the subset's interface support.
+export { ListModel } from '@gjsify/adwaita-core';
 export {
     GioFile as File,
     GioListStore as ListStore,

package/src/namespace/graphene.ts

@@ -0,0 +1,26 @@
+// The Graphene half of `@gjsify/adwaita-web`'s vocabulary: `Graphene.Point`, the type
+// `Gtk.Widget.compute_point` takes and returns. The behaviour lives once in `@gjsify/adwaita-core`
+// (`graphene.ts`).
+//
+// `compute_point` is installed on `WidgetElement` HERE rather than in `widget-element.ts`: that file
+// is the helper every element sits one hop below, and a value import of core there would mark every
+// element core-backed. Loading this namespace is what puts the method on a built-in.
+//
+// A TRUE SUBSET: everything else in Graphene is absent, and the `gi://Graphene` arm refuses it by name.
+
+import { computePoint, Point } from '@gjsify/adwaita-core';
+
+import { WidgetElement } from '../widget-element.js';
+
+declare module '../widget-element.js' {
+    interface WidgetElement {
+        /** `gtk_widget_compute_point`: `[false, (0, 0)]` when the two share no tree. */
+        compute_point(target: WidgetElement, point: Point): [boolean, Point];
+    }
+}
+
+WidgetElement.prototype.compute_point = function (this: WidgetElement, target, point) {
+    return computePoint(this, target, point);
+};
+
+export { Point };

package/src/namespace/gtk.ts

@@ -11,14 +11,18 @@
 // which is what `<adw-radio>`'s own `why` in the ledger says. So the plain form takes the
 // GIR name and the grouped one keeps its flat export in `src/index.ts`.
 //
-// TWO MEMBERS HERE ARE NOT WIDGETS — `Gtk.Adjustment` and `Gtk.StringList`, the values an
-// `adjustment` and a `model` property take. ADR 0034 § Amendment 19 is what lets a
-// clause-2 namespace carry them, `CONSTRUCTIBLE_VALUES` in `scripts/value-types.mjs` is
-// where each one is declared, and the GIR answers for both in gtk-host's committed
-// `generated/value-types.mts`. They are re-exported from `@gjsify/adwaita-core`, which is
-// where the portable list and adjustment already live: the class IS that value wearing the
-// GIR spelling, so `model: ['a','b']` and `model: new Gtk.StringList({ strings: ['a','b'] })`
-// are the same write and nothing in this package had to learn a second input shape.
+// THREE MEMBERS HERE ARE NOT WIDGETS — `Gtk.Adjustment`, `Gtk.StringList` and the
+// `Gtk.StringObject` the list holds, the values an `adjustment` and a `model` property take.
+// ADR 0034 § Amendment 19 is what lets a clause-2 namespace carry them,
+// `CONSTRUCTIBLE_VALUES` in `scripts/value-types.mjs` is where each one is declared, and the
+// GIR answers for all three in gtk-host's committed `generated/value-types.mts`. They are
+// re-exported from `@gjsify/adwaita-core`, which is where the portable list and adjustment
+// already live.
+//
+// `Gtk.StringList` IS A LIST MODEL, NOT AN ARRAY (ADR 0122). The first version of it was an
+// `Array` subclass, which made `model: ['a','b']` and `model: new Gtk.StringList(…)` the same
+// write; it is now what GTK ships — `Implements: [Gio.ListModel]`, items that are
+// `Gtk.StringObject`s, read by `get_n_items` / `get_item` and never by `length` or `[0]`.
 
 export { GtkAdjustment as Adjustment } from '@gjsify/adwaita-core';
 // ADR 0100: the file dialog is no element either — `present`-less, it asks the driver
@@ -89,7 +93,7 @@ export { GtkStack as Stack } from '../elements/gtk-stack.js';
 export { GtkStackPage as StackPage } from '../elements/gtk-stack-page.js';
 export { GtkStackSidebar as StackSidebar } from '../elements/gtk-stack-sidebar.js';
 export { GtkStackSwitcher as StackSwitcher } from '../elements/gtk-stack-switcher.js';
-export { GtkStringList as StringList } from '@gjsify/adwaita-core';
+export { GtkStringList as StringList, GtkStringObject as StringObject } from '@gjsify/adwaita-core';
 export { GtkSwitch as Switch } from '../elements/gtk-switch.js';
 export { GtkText as Text } from '../elements/gtk-text.js';
 export { GtkTextView as TextView } from '../elements/gtk-text-view.js';

package/src/shared-tree-builder.ts

@@ -101,6 +101,8 @@ interface BuildRecord {
     menus?: SharedTreeNode['menus'];
     /** Present when the tree is the template of a registered class (ADR 0096): handlers and binds go through it. */
     template?: TemplateScope;
+    /** A template's handler connections, made once every id exists: `object=` may name a node built later. */
+    connects?: (() => void)[];
 }
 
 /** Calls `onSize` with the host's measured size, now and on every change; returns its disposer. */
@@ -229,13 +231,8 @@ function refuseSiblings(node: SharedTreeNode, door: string): void {
     );
 }
 
-/** Every node, its siblings in the same id scope, then the binds and breakpoints that name them. */
-function buildTree(node: SharedTreeNode, record: BuildRecord): BuiltTree {
-    // ADR 0093 § 2: the whole tree is checked against the capability table before an element is
-    // created. A refused `layout` is named with its node and the reason the table gives.
-    assertTreeConstructs('adwaita-web', capabilities, node, Object.keys(ARIA_OF));
-    if (node.menus !== undefined) record.menus = node.menus;
-    const root = buildNode(node, record);
+/** The sibling objects of `node` built in `record`'s id scope, by id; each has to have one, or nothing could ask for it. */
+function buildSiblings(node: SharedTreeNode, record: BuildRecord): Map<string, HTMLElement> {
     const siblings = new Map<string, HTMLElement>();
     for (const sibling of node.siblings ?? []) {
         if (sibling.id === undefined) {
@@ -245,6 +242,17 @@ function buildTree(node: SharedTreeNode, record: BuildRecord): BuiltTree {
         }
         siblings.set(sibling.id, buildNode(sibling, record));
     }
+    return siblings;
+}
+
+/** Every node, its siblings in the same id scope, then the binds and breakpoints that name them. */
+function buildTree(node: SharedTreeNode, record: BuildRecord): BuiltTree {
+    // ADR 0093 § 2: the whole tree is checked against the capability table before an element is
+    // created. A refused `layout` is named with its node and the reason the table gives.
+    assertTreeConstructs('adwaita-web', capabilities, node, Object.keys(ARIA_OF));
+    if (node.menus !== undefined) record.menus = node.menus;
+    const root = buildNode(node, record);
+    const siblings = buildSiblings(node, record);
     for (const bind of record.binds) bindProperty(bind, record);
     for (const host of record.breakpointHosts) bindBreakpoints(host.el, host.node, record);
     return { root, siblings, objects: new Map(record.ids) };
@@ -265,7 +273,7 @@ function newRecord(
         disposers: [],
         ...(scope === undefined ? {} : { scope }),
         ...(observeSize === undefined ? {} : { observeSize }),
-        ...(template === undefined ? {} : { template }),
+        ...(template === undefined ? {} : { template, connects: [] }),
     };
 }
 
@@ -606,9 +614,13 @@ export interface BuiltTemplateTree {
  * to their handlers and binds through `scope`, none appended and nothing written to `host`'s
  * attributes, because `host` is still inside its constructor. `finish` and the caller's own append
  * belong to the first `connectedCallback`.
+ *
+ * Objects written beside the template (`Adw.AlertDialog dialog { }`, `$Learn learn { }`) are built in
+ * the same id scope and named in `objects`, which is what `InternalChildren` and `Children` read —
+ * `gtk_widget_class_bind_template_child` reaches any object id of the template's builder. They are
+ * not in `children`: a sibling is an independent object, placed by the class or not at all.
  */
 export function buildTemplateTree(tree: SharedTreeNode, scope: TemplateScope, host: HTMLElement): BuiltTemplateTree {
-    refuseSiblings(tree, 'buildTemplateTree');
     assertTreeConstructs('adwaita-web', capabilities, tree, Object.keys(ARIA_OF));
     const record = newRecord(undefined, undefined, scope);
     record.menus = tree.menus;
@@ -616,6 +628,8 @@ export function buildTemplateTree(tree: SharedTreeNode, scope: TemplateScope, ho
     collectNode(host, tree, record);
     bindSignals(host, tree, record);
     const children = buildChildren(host, tree, record);
+    buildSiblings(tree, record);
+    for (const connect of record.connects ?? []) connect();
     for (const bind of record.binds) bindProperty(bind, record);
     for (const breakpointHost of record.breakpointHosts) {
         bindBreakpoints(breakpointHost.el, breakpointHost.node, record);
@@ -648,21 +662,26 @@ function bindSignals(el: HTMLElement, node: SharedTreeNode, record: BuildRecord)
                     `the handler '${signal.handler}' for '${name}' uses after, which is not in the GObject subset.`,
                 );
             }
-            const object =
-                signal.object === undefined
-                    ? undefined
-                    : signal.object === 'template'
-                      ? record.template.instance
-                      : record.ids.get(signal.object);
-            if (signal.object !== undefined && object === undefined) {
-                throw new Error(
-                    `the handler '${signal.handler}' for '${name}' names the object '${signal.object}', which nothing in this tree has.`,
+            const template = record.template;
+            // `object=` is resolved when the whole tree exists, as `gtk_builder_connect_signals` does: it may
+            // name a node built after this one, or a sibling object written beside the template.
+            record.connects!.push(() => {
+                const object =
+                    signal.object === undefined
+                        ? undefined
+                        : signal.object === 'template'
+                          ? template.instance
+                          : record.ids.get(signal.object);
+                if (signal.object !== undefined && object === undefined) {
+                    throw new Error(
+                        `the handler '${signal.handler}' for '${name}' names the object '${signal.object}', which nothing in this tree has.`,
+                    );
+                }
+                (el as unknown as GObjectInstance).connect(
+                    name,
+                    template.handler(signal.handler, { object, flags: signal.flags }),
                 );
-            }
-            (el as unknown as GObjectInstance).connect(
-                name,
-                record.template.handler(signal.handler, { object, flags: signal.flags }),
-            );
+            });
             continue;
         }
         if (signal.object !== undefined || (signal.flags?.length ?? 0) > 0) {

package/src/split-views.spec.ts

@@ -110,6 +110,17 @@ export const AdwSplitViewsTest = async () => {
             host.remove();
         });
 
+        await it('show_sidebar / get_show_sidebar / set_show_sidebar mirror showSidebar', () => {
+            const { view, host } = mount();
+            expect(view.get_show_sidebar()).toBe(true);
+            view.set_show_sidebar(false);
+            expect(view.showSidebar).toBe(false);
+            expect(view.show_sidebar).toBe(false);
+            view.show_sidebar = true;
+            expect(view.showSidebar).toBe(true);
+            host.remove();
+        });
+
         await it('round-trips the property setter through the attribute', () => {
             const { view, host } = mount();
             view.showSidebar = false;

package/src/style-manager.spec.ts

@@ -39,6 +39,20 @@ export const StyleManagerTest = async () => {
                     globalThis.matchMedia = real;
                 }
             });
+            await it('high_contrast follows prefers-contrast: more', () => {
+                const real = globalThis.matchMedia;
+                try {
+                    globalThis.matchMedia = ((query: string) => ({
+                        matches: query.includes('prefers-contrast'),
+                        media: query,
+                    })) as never;
+                    expect(webStyleSource.highContrast?.()).toBe(true);
+                    globalThis.matchMedia = ((query: string) => ({ matches: false, media: query })) as never;
+                    expect(webStyleSource.highContrast?.()).toBe(false);
+                } finally {
+                    globalThis.matchMedia = real;
+                }
+            });
             await it('has a vector row for every vector', () => {
                 expect(STYLE_MANAGER_VECTORS.length > 0).toBe(true);
             });

package/src/style-manager.ts

@@ -14,14 +14,19 @@ export const webStyleSource: StyleSource = {
     subscribe(changed) {
         if (typeof document === 'undefined') return () => {};
         const media = globalThis.matchMedia?.('(prefers-color-scheme: dark)');
+        const contrast = globalThis.matchMedia?.('(prefers-contrast: more)');
         media?.addEventListener('change', changed);
+        contrast?.addEventListener('change', changed);
         const observer = new MutationObserver(changed);
         observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
         return () => {
             media?.removeEventListener('change', changed);
+            contrast?.removeEventListener('change', changed);
             observer.disconnect();
         };
     },
+    highContrast: () => globalThis.matchMedia?.('(prefers-contrast: more)').matches === true,
+    // A page cannot read the desktop's accent (CSS `AccentColor` is uneven, see ADR 0078): no system accent.
     supportsColorSchemes() {
         const matches = (query: string) => globalThis.matchMedia?.(query).matches === true;
         return matches('(prefers-color-scheme: dark)') || matches('(prefers-color-scheme: light)');

package/src/view-stack.spec.ts

@@ -260,4 +260,45 @@ export const AdwViewStackTest = async () => {
             host.remove();
         });
     });
+
+    await describe('<adw-view-stack> GIR method names', async () => {
+        await it('add_titled_with_icon, add_titled and add_named add pages in order', () => {
+            const { stack, host } = mountStack([]);
+            const [a, b, c] = [1, 2, 3].map(() => document.createElement('div'));
+            stack.add_titled_with_icon(a!, 'a', 'A', 'folder-symbolic');
+            stack.add_titled(b!, 'b', 'B');
+            stack.add_named(c!, 'c');
+            expect(stack.pages.map((page) => page.name)).toStrictEqual(['a', 'b', 'c']);
+            expect(stack.pages[0]!.icon).toBe('folder');
+            expect(stack.pages[1]!.title).toBe('B');
+            expect(stack.get_visible_child_name()).toBe('a');
+            host.remove();
+        });
+
+        await it('remove(child) takes the CHILD, and no argument is still ChildNode.remove()', () => {
+            const { stack, host } = mountStack([]);
+            const [a, b] = [1, 2].map(() => document.createElement('div'));
+            stack.add_titled(a!, 'a', 'A');
+            stack.add_titled(b!, 'b', 'B');
+            stack.remove(b!);
+            expect(stack.pages.map((page) => page.name)).toStrictEqual(['a']);
+            expect(b!.parentElement).toBe(null);
+            stack.remove();
+            expect(stack.parentElement).toBe(null);
+            host.remove();
+        });
+
+        await it('get/set_visible_child(_name) select, and get_visible_child_name is null for none', () => {
+            const { stack, host } = mountStack([]);
+            expect(stack.get_visible_child_name()).toBe(null);
+            const [a, b] = [1, 2].map(() => document.createElement('div'));
+            stack.add_titled(a!, 'a', 'A');
+            stack.add_titled(b!, 'b', 'B');
+            stack.set_visible_child_name('b');
+            expect(stack.get_visible_child()).toBe(b!);
+            stack.set_visible_child(a!);
+            expect(stack.get_visible_child_name()).toBe('a');
+            host.remove();
+        });
+    });
 };

package/src/widget-element.ts

@@ -16,7 +16,7 @@
 // Reference: GTK gtk/gtkwidget.c (gtk_widget_set_visible, gtk_widget_set_tooltip_text)
 // Copyright (c) GNOME contributors (GTK). LGPLv2.1+.
 
-import { WIDGET_VISIBLE_GETTERS, notifyElement } from './gobject-elements.js';
+import { WIDGET_VISIBLE_GETTERS, installElementApi, markLazyElementApi, notifyElement } from './gobject-elements.js';
 import { dispatchedSignalsOf, type DispatchedSignals } from './signals.js';
 import { isMapped } from './widget-mapping.js';
 
@@ -41,12 +41,64 @@ export class WidgetElement extends HTMLElement {
     set_visible(visible: boolean): void {
         this.visible = visible;
     }
+    /** `gtk_widget_get_first_child`: the first child element, `null` for a leaf. */
+    get_first_child(): Element | null {
+        return this.firstElementChild;
+    }
+    /** `gtk_widget_get_last_child`. */
+    get_last_child(): Element | null {
+        return this.lastElementChild;
+    }
+    /** `gtk_widget_get_next_sibling`. */
+    get_next_sibling(): Element | null {
+        return this.nextElementSibling;
+    }
+    /** `gtk_widget_get_prev_sibling`. */
+    get_prev_sibling(): Element | null {
+        return this.previousElementSibling;
+    }
+    /** `gtk_widget_get_parent`. */
+    get_parent(): Element | null {
+        return this.parentElement;
+    }
+    /** `gtk_widget_get_width`: the layout box in CSS px; 0 until the widget is rendered. */
+    get_width(): number {
+        return this.offsetWidth;
+    }
+    /** `gtk_widget_get_height`: the layout box in CSS px; 0 until the widget is rendered. */
+    get_height(): number {
+        return this.offsetHeight;
+    }
+    /**
+     * The GObject signal API (ADR 0096 § 3), over the events the element declares in `static signals`:
+     * `connect` refuses a signal it does not declare, `disconnect` throws for an id that is not
+     * connected. Each of the four installs the real ones on the instance and repeats itself there
+     * (`installElementApi`), so a bare `document.createElement()` answers like a template's child
+     * and an element nobody connects to pays nothing.
+     */
+    connect(signal: string, handler: (emitter: this, ...args: any[]) => unknown): number {
+        installElementApi(this);
+        return this.connect(signal, handler);
+    }
+    disconnect(id: number): void {
+        installElementApi(this);
+        this.disconnect(id);
+    }
+    emit(signal: string, ...args: unknown[]): void {
+        installElementApi(this);
+        this.emit(signal, ...args);
+    }
+    notify(name: string): void {
+        installElementApi(this);
+        this.notify(name);
+    }
     /** `gtk_widget_get_mapped`: on screen, which is in the document and rendered. */
     get_mapped(): boolean {
         return isMapped(this);
     }
 }
 
+markLazyElementApi(WidgetElement.prototype);
 WIDGET_VISIBLE_GETTERS.add(Object.getOwnPropertyDescriptor(WidgetElement.prototype, 'visible')!.get!);
 
 export class TooltipElement extends WidgetElement {

package/src/widget-members.spec.ts

@@ -3,6 +3,8 @@
 
 import { describe, expect, it } from '@gjsify/unit';
 
+import * as Graphene from './namespace/graphene.js';
+import * as Gtk from './namespace/gtk.js';
 import * as GObject from './namespace/gobject.js';
 import * as Gio from './namespace/gio.js';
 import { writeProp } from './shared-tree-builder.js';
@@ -16,6 +18,9 @@ interface WidgetLike extends HTMLElement {
     get_next_sibling(): Element | null;
     get_prev_sibling(): Element | null;
     get_parent(): Element | null;
+    get_width(): number;
+    get_height(): number;
+    compute_point(target: Element, point: Graphene.Point): [boolean, Graphene.Point];
     insert_action_group(name: string, group: unknown): void;
 }
 
@@ -68,6 +73,21 @@ export const WidgetMembersTest = async () => {
             expect(parent.get_parent()).toBe(null);
         });
 
+        await it('walks the element tree of a built-in widget with the GTK link names', () => {
+            const box = new Gtk.Box() as unknown as WidgetLike;
+            const a = new Gtk.Label() as unknown as WidgetLike;
+            const b = new Gtk.Label() as unknown as WidgetLike;
+            expect(box.get_first_child()).toBe(null);
+            box.append(a, b);
+            expect(box.get_first_child()).toBe(a);
+            expect(box.get_last_child()).toBe(b);
+            expect(a.get_next_sibling()).toBe(b);
+            expect(b.get_prev_sibling()).toBe(a);
+            expect(b.get_next_sibling()).toBe(null);
+            expect(a.get_parent()).toBe(box);
+            expect(box.get_parent()).toBe(null);
+        });
+
         await it('adds, tests and removes a CSS class with the GTK names', () => {
             const widget = make('WidgetMembersCss') as unknown as {
                 add_css_class(c: string): void;
@@ -80,6 +100,81 @@ export const WidgetMembersTest = async () => {
             expect(widget.has_css_class('dim-label')).toBe(false);
         });
 
+        await it('computes a point from the bounding boxes, on a registered class and a built-in element', () => {
+            const placed = <T extends Element>(element: T, left: number, top: number): T => {
+                element.getBoundingClientRect = () => ({ left, top }) as DOMRect;
+                return element;
+            };
+            const scrolled = placed(new Gtk.ScrolledWindow(), 10, 100);
+            const registered = placed(make('WidgetMembersPoint'), 14, 130);
+            const builtIn = placed(new Gtk.Label(), 11, 105);
+            scrolled.append(registered, builtIn);
+            document.body.append(scrolled);
+
+            const [ok, point] = registered.compute_point(scrolled, Graphene.Point.zero());
+            expect(ok).toBe(true);
+            expect(point.x).toBe(4);
+            expect(point.y).toBe(30);
+            const [okBuiltIn, shifted] = builtIn.compute_point(scrolled, new Graphene.Point({ x: 2, y: 3 }));
+            expect(okBuiltIn).toBe(true);
+            expect(shifted.x).toBe(3);
+            expect(shifted.y).toBe(8);
+            scrolled.remove();
+        });
+
+        await it('measures a real layout: size, offset inside a scrolled window, and the offset after scrolling', async () => {
+            const host = document.createElement('div');
+            host.style.width = '200px';
+            host.style.height = '100px';
+            document.body.append(host);
+            const scrolled = new Gtk.ScrolledWindow();
+            scrolled.style.height = '100px';
+            host.append(scrolled);
+            const labels: Gtk.Label[] = [];
+            for (let i = 0; i < 10; i++) {
+                const label = new Gtk.Label();
+                // An empty label has no content for the viewport to overflow, so Firefox does not scroll it.
+                label.setAttribute('label', `Row ${i}`);
+                label.style.height = '40px';
+                scrolled.append(label);
+                labels.push(label);
+            }
+            await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+
+            expect(scrolled.get_height()).toBe(100);
+            expect(scrolled.get_width()).toBe(200);
+            expect(labels[0].get_height()).toBe(40);
+
+            const label = labels[5];
+            const [ok, before] = label.compute_point(scrolled, Graphene.Point.zero());
+            expect(ok).toBe(true);
+            scrolled.viewport.scrollAxis('vertical', 80);
+            const [okAfter, after] = label.compute_point(scrolled, Graphene.Point.zero());
+            expect(okAfter).toBe(true);
+            expect(before.y - after.y).toBe(80);
+            host.remove();
+        });
+
+        await it('reports 0 for width and height while a widget is not rendered', () => {
+            const loose = new Gtk.Label();
+            expect(loose.get_width()).toBe(0);
+            expect(loose.get_height()).toBe(0);
+            const registered = make('WidgetMembersSize');
+            expect(registered.get_width()).toBe(0);
+            expect(registered.get_height()).toBe(0);
+        });
+
+        await it('computes no point between widgets that share no tree', () => {
+            const attached = make('WidgetMembersPointAttached');
+            const loose = make('WidgetMembersPointLoose');
+            document.body.append(attached);
+            const [ok, point] = loose.compute_point(attached, new Graphene.Point({ x: 5, y: 5 }));
+            expect(ok).toBe(false);
+            expect(point.x).toBe(0);
+            expect(point.y).toBe(0);
+            attached.remove();
+        });
+
         await it('takes an action group and drops it again with null', () => {
             const widget = make('WidgetMembersActions');
             const group = new Gio.SimpleActionGroup();