@gjsify/adwaita-web 0.64.1 → 0.64.2-next.254

package/src/compute-expand.spec.ts

@@ -0,0 +1,186 @@
+// `gtk_widget_compute_expand` in a box (gtkwidget.c:8387-8423, gtkboxlayout.c:793): a widget
+// that authored no `hexpand` grows when a descendant does, an explicit value stops the walk, and
+// the answer follows the tree as it changes. Plus the two size facts the same app layout broke
+// on: a scrolled window requests 0 on a scrolling axis (gtkscrolledwindow.c:1821-1960), and a
+// page leaving a view stack takes none of the stack's marks with it (adw-view-stack.c:1184-1205).
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { AdwViewStack } from './elements/adw-view-stack.js';
+
+function mount(html: string, width = 600, height = 600): { host: HTMLElement; box: (sel: string) => DOMRect } {
+    const host = document.createElement('div');
+    host.style.cssText = `width:${width}px;height:${height}px;display:flex;flex-direction:column`;
+    host.innerHTML = html;
+    document.body.appendChild(host);
+    const box = (sel: string) => (host.querySelector(sel) as HTMLElement).getBoundingClientRect();
+    return { host, box };
+}
+
+/** The box writes its computed values from a MutationObserver: one microtask, then a frame. */
+const settle = () => new Promise((resolve) => requestAnimationFrame(resolve));
+
+export const ComputeExpandTest = async () => {
+    await describe('computed expand in a <gtk-box>', async () => {
+        await it('a bin with an hexpand descendant fills a horizontal box', async () => {
+            const { host, box } = mount(
+                `<gtk-box id="row" style="width:600px">
+                   <div id="fixed" style="width:100px"></div>
+                   <adw-bin id="bin"><gtk-box><div id="leaf" hexpand></div></gtk-box></adw-bin>
+                 </gtk-box>`,
+            );
+            await settle();
+            expect(host.querySelector('#bin')!.hasAttribute('data-computed-hexpand')).toBe(true);
+            expect(box('#bin').width).toBe(500);
+            host.remove();
+        });
+
+        await it('an explicit hexpand=false on an intermediate stops propagation', async () => {
+            const { host, box } = mount(
+                `<gtk-box style="width:600px">
+                   <adw-bin id="bin"><gtk-box hexpand="false"><div style="width:10px" hexpand></div></gtk-box></adw-bin>
+                 </gtk-box>`,
+            );
+            await settle();
+            expect(host.querySelector('#bin')!.hasAttribute('data-computed-hexpand')).toBe(false);
+            expect(box('#bin').width).toBe(10);
+            host.remove();
+        });
+
+        await it('a leaf widget does not propagate, and a hidden one never expands', async () => {
+            const { host } = mount(
+                `<gtk-box>
+                   <gtk-label id="label"><div hexpand></div></gtk-label>
+                   <adw-bin id="bin"><gtk-box hidden><div hexpand></div></gtk-box></adw-bin>
+                 </gtk-box>`,
+            );
+            await settle();
+            expect(host.querySelector('#label')!.hasAttribute('data-computed-hexpand')).toBe(false);
+            expect(host.querySelector('#bin')!.hasAttribute('data-computed-hexpand')).toBe(false);
+            host.remove();
+        });
+
+        await it('propagation updates after a runtime reparent', async () => {
+            const { host, box } = mount(
+                `<gtk-box style="width:600px">
+                   <div style="width:100px"></div>
+                   <adw-bin id="bin"><div style="width:20px"></div></adw-bin>
+                 </gtk-box>
+                 <div id="parking"><div id="editor" hexpand></div></div>`,
+            );
+            await settle();
+            expect(box('#bin').width).toBe(20);
+            const bin = host.querySelector('#bin')!;
+            bin.replaceChildren(host.querySelector('#editor')!);
+            await settle();
+            expect(bin.hasAttribute('data-computed-hexpand')).toBe(true);
+            expect(box('#bin').width).toBe(500);
+            host.querySelector('#parking')!.append(host.querySelector('#editor')!);
+            await settle();
+            expect(bin.hasAttribute('data-computed-hexpand')).toBe(false);
+            host.remove();
+        });
+
+        await it('rewriting a label text does not recompute, adding a widget does', async () => {
+            const { host } = mount(
+                `<gtk-box>
+                   <adw-bin id="bin"><gtk-box id="inner"><gtk-label id="label">0000</gtk-label><div hexpand></div></gtk-box></adw-bin>
+                 </gtk-box>`,
+            );
+            await settle();
+            const bin = host.querySelector('#bin')!;
+            expect(bin.hasAttribute('data-computed-hexpand')).toBe(true);
+            // Drop the mark by hand: only a recompute would write it back.
+            bin.removeAttribute('data-computed-hexpand');
+            host.querySelector('#label')!.textContent = 'FFFF';
+            await settle();
+            expect(bin.hasAttribute('data-computed-hexpand')).toBe(false);
+            host.querySelector('#inner')!.append(document.createElement('gtk-label'));
+            await settle();
+            expect(bin.hasAttribute('data-computed-hexpand')).toBe(true);
+            host.remove();
+        });
+
+        await it('a registered subclass of a bin propagates as its base does', async () => {
+            const Bin = customElements.get('adw-bin')!;
+            const tag = 'compute-expand-test-bin';
+            if (!customElements.get(tag)) customElements.define(tag, class extends Bin {});
+            const { host, box } = mount(
+                `<gtk-box style="width:600px">
+                   <div style="width:100px"></div>
+                   <${tag} id="sub"><div hexpand></div></${tag}>
+                 </gtk-box>`,
+            );
+            await settle();
+            expect(box('#sub').width).toBe(500);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-scrolled-window> requests no content size on a scrolling axis', async () => {
+        await it('in a horizontal box inside a 600px-high box it stays 600 and scrolls', async () => {
+            const { host, box } = mount(
+                `<gtk-box orientation="vertical" style="height:600px">
+                   <gtk-box id="row" vexpand>
+                     <gtk-scrolled-window id="sw" hexpand>
+                       <div style="height:2000px;width:50px"></div>
+                     </gtk-scrolled-window>
+                   </gtk-box>
+                 </gtk-box>`,
+            );
+            await settle();
+            expect(box('#row').height).toBe(600);
+            expect(box('#sw').height).toBe(600);
+            const viewport = host.querySelector('#sw gtk-viewport') as HTMLElement;
+            expect(viewport.getBoundingClientRect().height).toBe(600);
+            expect(viewport.scrollHeight > 600).toBe(true);
+            host.remove();
+        });
+
+        await it('sizes the measured chain: split-view content fills, the editor bin gets width', async () => {
+            const { host, box } = mount(
+                `<adw-overlay-split-view id="osv" style="height:600px">
+                   <div slot="sidebar" style="width:100px"></div>
+                   <gtk-box id="centerRight">
+                     <adw-bin id="editor"><div hexpand style="height:10px"></div></adw-bin>
+                     <gtk-scrolled-window id="right" hscrollbar-policy="never" style="flex:0 1 auto">
+                       <div style="width:150px;height:3000px"></div>
+                     </gtk-scrolled-window>
+                   </gtk-box>
+                 </adw-overlay-split-view>`,
+                800,
+                600,
+            );
+            await settle();
+            expect(box('#centerRight').height).toBe(box('#osv').height);
+            expect(box('#editor').width > 0).toBe(true);
+            expect(box('#right').height).toBe(box('#centerRight').height);
+            host.remove();
+        });
+    });
+
+    await describe('<adw-view-stack> page removal', async () => {
+        await it('a child removed from a view stack loses the stack classes', async () => {
+            const { host } = mount('<adw-view-stack id="s"></adw-view-stack><div id="elsewhere"></div>');
+            const stack = host.querySelector('#s') as AdwViewStack;
+            const a = document.createElement('div');
+            const b = document.createElement('div');
+            stack.add(a, 'a');
+            stack.add(b, 'b');
+            expect(a.classList.contains('active-view')).toBe(true);
+            expect(b.hidden).toBe(true);
+
+            stack.removePage('a');
+            expect(a.classList.contains('adw-view-stack-child')).toBe(false);
+            expect(a.classList.contains('active-view')).toBe(false);
+            expect(a.dataset.name).toBe(undefined);
+
+            // A plain DOM reparent is `gtk_widget_unparent` reaching the stack too.
+            host.querySelector('#elsewhere')!.append(b);
+            await settle();
+            expect(b.classList.contains('adw-view-stack-child')).toBe(false);
+            expect(b.hidden).toBe(false);
+            expect(stack.pages.length).toBe(0);
+            host.remove();
+        });
+    });
+};

package/src/compute-expand.ts

@@ -0,0 +1,134 @@
+// compute-expand.ts — `gtk_widget_compute_expand`: does a widget tree rooted here want spare space?
+//
+// GTK does not only read a widget's OWN `hexpand`: a widget that set none expands when one of
+// its children does (gtkwidget.c:8387-8423, `gtk_widget_update_computed_expand`). An AdwBin
+// whose child is an hexpand editor therefore grows in a horizontal box, where the `[hexpand]`
+// rules in `_widget.scss` gave it nothing and the editor came out 0px wide.
+//
+// THREE RULES, all in the C:
+//
+//   · a widget that is not visible never expands (gtkwidget.c:8508-8509);
+//   · an EXPLICIT value wins and stops the walk — `hexpand_set` is checked before the vfunc
+//     runs, so an intermediate `hexpand: false` hides every expanding descendant;
+//   · otherwise only a class with a `compute_expand` vfunc looks at its children at all. The
+//     base GtkWidget has none, so a leaf (a label, a button's icon) never propagates.
+//
+// WHY JS AND NOT `:has()`: a selector cannot say "and no widget between here and there set
+// hexpand" at arbitrary depth, it cannot tell a container with the vfunc from a leaf without
+// one, and a registered subclass (`GObject.registerClass` over AdwBin) is a NEW tag that only
+// the prototype chain links back to its base. So the value is computed here, and the box that
+// needs it writes it as `data-computed-hexpand` / `data-computed-vexpand` on its children
+// (gtk-box.ts) — internal state, never an authored attribute.
+//
+// The DOM has wrapper elements GTK has no widget for (`.adw-overlay-child`, a view stack's
+// page `div`): those are transparent, the walk goes through them to the widgets inside.
+//
+// Reference: refs/gtk/gtk/gtkwidget.c (gtk_widget_compute_expand, update_computed_expand)
+// Reference: refs/gtk/gtk/gtkbox.c:181-194 (every child, OR-ed)
+// Reference: refs/gtk/gtk/gtkstack.c:2342-2373 (every page, visible or not)
+// Reference: refs/gtk/gtk/gtkoverlay.c:292-301 (the main child only)
+// Reference: refs/gtk/gtk/gtkscrolledwindow.c:544-554, gtkviewport.c:211-220 (the child only)
+// Reference: refs/libadwaita/src/adw-widget-utils.c:501-536 (adw_widget_compute_expand)
+// Copyright (c) The GTK Team. LGPLv2.1+. Copyright (c) The libadwaita authors. LGPLv2.1+.
+
+export type ExpandOrientation = 'horizontal' | 'vertical';
+
+/**
+ * Per tag that has a `compute_expand` vfunc: the subtrees of its own that are NOT the children
+ * the vfunc reads, and whether it answers on one axis only. A tag missing here behaves as the
+ * base GtkWidget — it does not propagate.
+ */
+interface ExpandVfunc {
+    readonly skip?: string;
+    readonly horizontalOnly?: boolean;
+}
+
+/** `adw_widget_compute_expand` (adw-widget-utils.c:501), by the class_init that installs it. */
+const ADW_WIDGET: ExpandVfunc = {};
+
+const VFUNCS: ReadonlyMap<string, ExpandVfunc> = new Map<string, ExpandVfunc>([
+    ['gtk-box', {}],
+    ['gtk-stack', {}],
+    // The overlay children are its children too, but `gtk_overlay_compute_expand` reads only `child`.
+    ['gtk-overlay', { skip: '.adw-overlay-layer' }],
+    // The scrollbars are children the vfunc skips; they are leaves, so skipping them is exact.
+    ['gtk-scrolled-window', { skip: 'gtk-scrollbar' }],
+    ['gtk-viewport', {}],
+    ['adw-bin', ADW_WIDGET], // adw-bin.c:108
+    ['adw-bottom-sheet', ADW_WIDGET], // adw-bottom-sheet.c:795
+    ['adw-breakpoint-bin', ADW_WIDGET], // adw-breakpoint-bin.c:623
+    ['adw-clamp', ADW_WIDGET], // adw-clamp.c:174
+    ['adw-clamp-scrollable', ADW_WIDGET], // adw-clamp-scrollable.c:244
+    ['adw-layout-slot', ADW_WIDGET], // adw-layout-slot.c:128
+    ['adw-multi-layout-view', ADW_WIDGET], // adw-multi-layout-view.c:354
+    ['adw-navigation-view', ADW_WIDGET], // adw-navigation-view.c:1900
+    ['adw-overlay-split-view', ADW_WIDGET], // adw-overlay-split-view.c:909
+    ['adw-status-page', ADW_WIDGET], // adw-status-page.c:213
+    ['adw-toast-overlay', ADW_WIDGET], // adw-toast-overlay.c:543
+    ['adw-toolbar-view', ADW_WIDGET], // adw-toolbar-view.c:525
+    ['adw-view-stack', ADW_WIDGET], // adw-view-stack.c:1520
+    ['adw-header-bar', { horizontalOnly: true }], // adw-header-bar.c:853
+]);
+
+const ATTRIBUTE: Record<ExpandOrientation, string> = { horizontal: 'hexpand', vertical: 'vexpand' };
+
+/** The base tag whose vfunc `el` inherits — its own tag, or the one a registered subclass extends. */
+function vfuncOf(el: Element): ExpandVfunc | undefined {
+    const own = VFUNCS.get(el.localName);
+    if (own !== undefined) return own;
+    if (typeof customElements.getName !== 'function') return undefined;
+    for (let proto = Object.getPrototypeOf(el); proto && proto !== HTMLElement.prototype;) {
+        const tag = customElements.getName(proto.constructor as CustomElementConstructor);
+        const found = tag === null ? undefined : VFUNCS.get(tag);
+        if (found !== undefined) return found;
+        proto = Object.getPrototypeOf(proto);
+    }
+    return undefined;
+}
+
+/**
+ * A GTK widget, as opposed to a wrapper this renderer added: every element is a custom element,
+ * and a plain element an author gave an expand value stands in for one.
+ */
+function isWidget(el: Element): boolean {
+    return el.localName.includes('-') || el.hasAttribute('hexpand') || el.hasAttribute('vexpand');
+}
+
+/**
+ * A view stack writes `hidden` on every page but the selected one. That is
+ * `gtk_widget_set_child_visible` (adw-view-stack.c:1016-1023), not `GtkWidget:visible`, and
+ * `gtk_widget_compute_expand` reads only the latter — so a background page still counts.
+ */
+function isStackPage(el: Element): boolean {
+    return el.classList.contains('adw-view-stack-child') && el.parentElement?.localName === 'adw-view-stack';
+}
+
+/** The value of an authored `hexpand` / `vexpand`: `""` is true, `"false"` false, absent unset. */
+export function explicitExpand(el: Element, orientation: ExpandOrientation): boolean | undefined {
+    const raw = el.getAttribute(ATTRIBUTE[orientation]);
+    return raw === null ? undefined : raw !== 'false';
+}
+
+/** `gtk_widget_compute_expand (el, orientation)`. */
+export function computeExpand(el: Element, orientation: ExpandOrientation): boolean {
+    if (el.hasAttribute('hidden') && !isStackPage(el)) return false;
+    const explicit = explicitExpand(el, orientation);
+    if (explicit !== undefined) return explicit;
+    const vfunc = vfuncOf(el);
+    if (vfunc === undefined) return false;
+    if (vfunc.horizontalOnly && orientation === 'vertical') return false;
+    return anyChildExpands(el, orientation, vfunc.skip);
+}
+
+/** The OR over the widget children of `parent`, reached through any wrapper that is not one. */
+function anyChildExpands(parent: Element, orientation: ExpandOrientation, skip: string | undefined): boolean {
+    for (const child of parent.children) {
+        if (skip !== undefined && child.matches(skip)) continue;
+        if (isWidget(child)) {
+            if (computeExpand(child, orientation)) return true;
+        } else if (anyChildExpands(child, orientation, undefined)) {
+            return true;
+        }
+    }
+    return false;
+}

package/src/construct-vectors.spec.ts

@@ -13,7 +13,7 @@ import { describe, expect, it } from '@gjsify/unit';
 
 import type { AdwAlertDialog } from './elements/adw-alert-dialog.js';
 import { capabilities } from './capabilities.mjs';
-import { buildSharedTree, mountSharedTree } from './shared-tree-builder.js';
+import { buildSharedTree, buildWithSiblings, mountSharedTree } from './shared-tree-builder.js';
 import { registerTemplateClass } from './template-classes.js';
 
 const vector = (kind: string) => CONSTRUCT_VECTORS.find((each) => each.kind === kind)!.tree;
@@ -24,8 +24,21 @@ registerTemplateClass(EXTERN_VECTOR_CLASS, 'corpus-extern');
 
 function observe(vector: ConstructVector): unknown {
     if (vector.kind === 'sibling-object') {
-        buildSharedTree(vector.tree);
-        return undefined;
+        let feed: ((size: { width: number; height: number }) => void) | undefined;
+        const { root, siblings } = buildWithSiblings(vector.tree, {
+            observeSize: (_element, onSize) => {
+                feed = onSize;
+                return () => {};
+            },
+        });
+        const beside = siblings.get('beside')!;
+        return {
+            insideRoot: root.contains(beside) || beside.parentElement !== null,
+            label: BREAKPOINT_VECTOR_SIZES.map((size) => {
+                feed!(size);
+                return beside.getAttribute('label');
+            }),
+        };
     }
     if (vector.kind === 'layout') {
         // CSS Grid lines count from 1, GTK cells from 0: `2 / span 2` is column 1, columnSpan 2.
@@ -93,15 +106,22 @@ function observe(vector: ConstructVector): unknown {
     }
     const { root, unmount } = mountSharedTree(vector.tree);
     try {
+        if (vector.kind === 'accessibility') {
+            // Read off the inner `<button>`, the one that carries the role and is announced.
+            const control = (root.querySelector('#described') as unknown as { button: HTMLButtonElement }).button;
+            return [
+                { label: control.getAttribute('aria-label'), description: control.getAttribute('aria-description') },
+            ];
+        }
         if (vector.kind === 'strings') {
             return [...root.querySelectorAll('option, .adw-drop-down-item-label')].map((node) => node.textContent);
         }
         const dialog = root as unknown as AdwAlertDialog;
         return (vector.tree.extensions?.responses ?? []).map(({ id }) => ({
             id,
-            label: dialog.getResponseLabel(id),
-            appearance: dialog.getResponseAppearance(id),
-            enabled: dialog.getResponseEnabled(id),
+            label: dialog.get_response_label(id),
+            appearance: dialog.get_response_appearance(id),
+            enabled: dialog.get_response_enabled(id),
         }));
     } finally {
         unmount();
@@ -139,7 +159,9 @@ export const AdwConstructVectorsTest = async () => {
                 children: [{ tag: 'GtkButton', signals: [signal] }],
             });
             const scope = { onX: () => {} };
-            expect(() => mountSharedTree(on({ name: 'map', handler: 'onX' }), { scope })).toThrow("no signal 'map'");
+            expect(() => mountSharedTree(on({ name: 'toggled', handler: 'onX' }), { scope })).toThrow(
+                "no signal 'toggled'",
+            );
             expect(() => mountSharedTree(on({ name: 'clicked', handler: 'onX', flags: ['after'] }), { scope })).toThrow(
                 'plain handlers only',
             );
@@ -331,6 +353,74 @@ export const AdwConstructVectorsTest = async () => {
             expect(() => mountSharedTree(withBreakpoint('template'))).toThrow("id 'template'");
             expect(() => mountSharedTree(withBreakpoint('caption', 'wide please'))).toThrow('breakpoint condition');
         });
+        await it('hands a sibling back by id, a dialog included, and builds none of them into the root', () => {
+            const tree: SharedTreeNode = {
+                tag: 'GtkBox',
+                children: [{ tag: 'GtkLabel', id: 'inside' }],
+                siblings: [
+                    { tag: 'AdwAlertDialog', id: 'confirm', props: { heading: 'Save?' } },
+                    { tag: EXTERN_VECTOR_CLASS, extern: true, id: 'screen' },
+                ],
+            };
+            const { root, siblings, objects } = buildWithSiblings(tree);
+            expect([...siblings.keys()].join()).toBe('confirm,screen');
+            expect(siblings.get('screen') instanceof CorpusExtern).toBe(true);
+            expect(siblings.get('confirm')!.localName).toBe('adw-alert-dialog');
+            expect(siblings.get('confirm')!.getAttribute('heading')).toBe('Save?');
+            expect(root.querySelector('#screen')).toBe(null);
+            expect([...objects.keys()].sort().join()).toBe('confirm,inside,screen');
+        });
+        await it('refuses siblings through every one-root door, a sibling without an id, and a duplicate id', () => {
+            const withSiblings = (siblings: SharedTreeNode[]): SharedTreeNode => ({
+                tag: 'GtkBox',
+                children: [{ tag: 'GtkLabel', id: 'taken' }],
+                siblings,
+            });
+            const labelled = withSiblings([{ tag: 'GtkLabel', id: 'beside' }]);
+            expect(() => buildSharedTree(labelled)).toThrow('buildWithSiblings');
+            expect(() => mountSharedTree(labelled)).toThrow('buildWithSiblings');
+            expect(() => buildWithSiblings(withSiblings([{ tag: 'GtkLabel' }]))).toThrow('has no id');
+            expect(() => buildWithSiblings(withSiblings([{ tag: 'GtkLabel', id: 'taken' }]))).toThrow("id 'taken'");
+        });
+        await it('refuses a breakpoint setter that names a sibling the tree does not carry', () => {
+            expect(() => buildWithSiblings({ ...vector('sibling-object'), siblings: [] })).toThrow("id 'beside'");
+        });
+        await it('names a check button on its input, and lets an authored name beat the icon fallback', () => {
+            const { root, unmount } = mountSharedTree({
+                tag: 'GtkBox',
+                children: [
+                    { tag: 'GtkCheckButton', id: 'check', accessibility: { label: { value: 'Dark' } } },
+                    {
+                        tag: 'GtkButton',
+                        id: 'icon',
+                        props: { 'icon-name': 'edit-copy-symbolic', 'tooltip-text': 'Copy' },
+                        accessibility: { label: { value: 'Copy the link' } },
+                    },
+                ],
+            });
+            try {
+                const check = root.querySelector('#check')!;
+                const input = check.querySelector('.adw-check-input')!;
+                expect(input.getAttribute('aria-label')).toBe('Dark');
+                expect(input.hasAttribute('aria-description')).toBe(false);
+                check.removeAttribute('aria-label');
+                expect(input.hasAttribute('aria-label')).toBe(false);
+                const icon = root.querySelector('#icon') as unknown as HTMLElement & { button: HTMLButtonElement };
+                expect(icon.button.getAttribute('aria-label')).toBe('Copy the link');
+                icon.removeAttribute('aria-label');
+                expect(icon.button.getAttribute('aria-label')).toBe('Copy');
+            } finally {
+                unmount();
+            }
+        });
+        await it('refuses an accessibility name it has no door for, naming it', () => {
+            const tree: SharedTreeNode = {
+                tag: 'GtkBox',
+                children: [{ tag: 'GtkCheckButton', accessibility: { checked: { value: true } } }],
+            };
+            expect(() => buildSharedTree(tree)).toThrow("'checked'");
+            expect(() => mountSharedTree(tree)).toThrow('cannot be rendered by adwaita-web');
+        });
         await it('does not read a registered name for a node that is not extern', () => {
             const el = buildSharedTree({ tag: 'GtkBox', children: [{ tag: 'GtkLabel' }] });
             expect(el.children[0]!.localName).toBe('gtk-label');

package/src/container-fill.spec.ts

@@ -0,0 +1,70 @@
+// Single-child containers hand their child the WHOLE allocation, on both axes: GtkOverlay's main
+// child (gtkoverlay.c size_allocate), AdwToastOverlay's child, GtkStack's visible page
+// (gtkstack.c:2778-2831) and AdwBin's child (gtkbinlayout.c:81). A block box gives a child only
+// its content height, and a percentage resolves against an indefinite one — these specs pin the
+// chain a real window builds: overlay > toast-overlay > stack > bin > view-stack.
+import { describe, expect, it } from '@gjsify/unit';
+
+function mount(html: string, width = 400, height = 300): { host: HTMLElement; box: (sel: string) => DOMRect } {
+    const host = document.createElement('div');
+    host.style.cssText = `width:${width}px;height:${height}px;display:flex;flex-direction:column`;
+    host.innerHTML = html;
+    document.body.appendChild(host);
+    const box = (sel: string) => (host.querySelector(sel) as HTMLElement).getBoundingClientRect();
+    return { host, box };
+}
+
+export const ContainerFillTest = async () => {
+    await describe('single-child containers fill', async () => {
+        await it('<gtk-overlay> gives its main child the whole sized overlay', () => {
+            const { host, box } = mount('<gtk-overlay style="flex:1"><div id="main"></div></gtk-overlay>');
+            expect(box('#main').width).toBe(400);
+            expect(box('#main').height).toBe(300);
+            host.remove();
+        });
+
+        await it('<gtk-overlay> still measures as its main child when unsized', () => {
+            const { host, box } = mount('<gtk-overlay id="o"><div style="height:70px"></div></gtk-overlay>');
+            expect(box('#o').height).toBe(70);
+            host.remove();
+        });
+
+        await it('<adw-toast-overlay> gives its child the whole overlay', () => {
+            const { host, box } = mount('<adw-toast-overlay style="flex:1"><div id="c"></div></adw-toast-overlay>');
+            expect(box('#c').width).toBe(400);
+            expect(box('#c').height).toBe(300);
+            host.remove();
+        });
+
+        await it('a default <gtk-stack> page fills both axes, even with a zero-intrinsic child', () => {
+            const { host, box } = mount(
+                '<gtk-stack style="flex:1"><div id="p" name="a"><div id="z"></div></div></gtk-stack>',
+            );
+            expect(box('#p').width).toBe(400);
+            expect(box('#p').height).toBe(300);
+            host.remove();
+        });
+
+        await it('hhomogeneous="false" sizes a page to max-content', () => {
+            const { host, box } = mount(
+                '<gtk-stack hhomogeneous="false" style="flex:1"><div id="p" name="a" style="width:max-content"><span>hi</span></div></gtk-stack>',
+            );
+            expect(box('#p').width < 400).toBe(true);
+            host.remove();
+        });
+
+        await it('overlay > toast-overlay > stack > bin > view-stack fills the box', async () => {
+            const { host, box } = mount(
+                `<gtk-overlay style="flex:1"><adw-toast-overlay><gtk-stack>
+                   <adw-bin id="b" name="a"><adw-view-stack id="v" style="flex:1"></adw-view-stack></adw-bin>
+                 </gtk-stack></adw-toast-overlay></gtk-overlay>`,
+            );
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            for (const sel of ['adw-toast-overlay', 'gtk-stack', '#b', '#v']) {
+                expect(box(sel).width).toBe(400);
+                expect(box(sel).height).toBe(300);
+            }
+            host.remove();
+        });
+    });
+};