@gjsify/adwaita-web 0.53.0 → 0.55.0

package/src/gtk-graphics-offload.spec.ts

@@ -0,0 +1,119 @@
+// DOM-level tests for <gtk-graphics-offload>. The passthrough itself is the platform's
+// and cannot be observed from a test — what CAN be is everything the widget does around
+// it: the enum and its default, the early-return guard, the black rectangle, and the bin
+// layout the child is given.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkGraphicsOffload } from './elements/gtk-graphics-offload.js';
+
+function mount(attrs: Record<string, string> = {}, child?: string): { el: GtkGraphicsOffload; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-graphics-offload') as GtkGraphicsOffload;
+    if (child !== undefined) el.innerHTML = child;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    host.appendChild(el);
+    return { el, host };
+}
+
+export const GtkGraphicsOffloadTest = async () => {
+    await describe('<gtk-graphics-offload> properties', async () => {
+        await it('starts enabled, with no black background and no child', () => {
+            // gtkgraphicsoffload.c:107-109 (`self->enabled = GTK_GRAPHICS_OFFLOAD_ENABLED`),
+            // :279 (black-background defaults FALSE), and `child` is NULL until set.
+            const { el, host } = mount();
+            expect(el.enabled).toBe('enabled');
+            expect(el.blackBackground).toBe(false);
+            expect(el.child).toBe(null);
+            host.remove();
+        });
+
+        await it('notifies once per real change, and never for an echo', () => {
+            // :369 — `if (priv->enabled == enabled) return;` — the same for black-background
+            // at :424.
+            const { el, host } = mount();
+            const enabled: unknown[] = [];
+            const black: unknown[] = [];
+            el.addEventListener('notify::enabled', (event) => enabled.push((event as CustomEvent).detail['enabled']));
+            el.addEventListener('notify::black-background', (event) =>
+                black.push((event as CustomEvent).detail['black-background']),
+            );
+            el.enabled = 'enabled';
+            el.blackBackground = false;
+            expect(enabled).toStrictEqual([]);
+            expect(black).toStrictEqual([]);
+            el.enabled = 'disabled';
+            el.blackBackground = true;
+            expect(enabled).toStrictEqual(['disabled']);
+            expect(black).toStrictEqual([true]);
+            host.remove();
+        });
+
+        await it('reads both properties as attributes', () => {
+            const { el, host } = mount({ enabled: 'disabled', 'black-background': '' });
+            expect(el.enabled).toBe('disabled');
+            expect(el.blackBackground).toBe(true);
+            // Anything that is not `disabled` is the GIR default, as `enabled`'s setter is.
+            expect(el.getAttribute('enabled')).toBe('disabled');
+            host.remove();
+        });
+
+        await it('takes the black rectangle over the whole allocation', () => {
+            // :213-233 — `gtk_snapshot_append_color (… GDK_RGBA_BLACK …)` before the child.
+            const { el, host } = mount();
+            expect(el.style.backgroundColor).toBe('');
+            el.blackBackground = true;
+            expect(el.style.backgroundColor).toBe('rgb(0, 0, 0)');
+            el.blackBackground = false;
+            expect(el.style.backgroundColor).toBe('');
+            host.remove();
+        });
+
+        await it('drops the compositor hint when offload is disabled', () => {
+            // `sync_subsurface` clears the subsurface when `enabled == DISABLED` (:184-186).
+            const { el, host } = mount();
+            expect(el.style.willChange).toBe('transform');
+            el.enabled = 'disabled';
+            expect(el.style.willChange).toBe('');
+            el.enabled = 'enabled';
+            expect(el.style.willChange).toBe('transform');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-graphics-offload> the child', async () => {
+        await it('is the one slotted child, in the bin box', () => {
+            // `GTK_TYPE_BIN_LAYOUT` (gtkgraphicsoffload.c:290) and the one `child` slot.
+            const { el, host } = mount({}, '<gtk-label label="Offloaded"></gtk-label>');
+            const label = el.child;
+            expect(label?.tagName.toLowerCase()).toBe('gtk-label');
+            expect(label?.parentElement?.className).toBe('adw-graphics-offload-child');
+            host.remove();
+        });
+
+        await it('is still the child when it is appended after connect', async () => {
+            // The slot binding is live (src/slotted-children.ts), so a renderer that mounts
+            // after the element is connected lands in the same place a parse-time child
+            // does — on the microtask where the MutationObserver callback runs.
+            const { el, host } = mount();
+            const label = document.createElement('gtk-label');
+            host.appendChild(label);
+            label.remove();
+            el.appendChild(label);
+            await Promise.resolve();
+            expect(el.child).toBe(label);
+            host.remove();
+        });
+
+        await it('fills the wrapper, whatever the child asks for', () => {
+            const { el, host } = mount({}, '<gtk-label label="Offloaded"></gtk-label>');
+            // The child box is the bin layout's own node, and the partial is what gives it
+            // the whole allocation: `display: block` with `width`/`height` 100% is the CSS
+            // spelling of "the child is allocated the widget".
+            const box = el.querySelector('.adw-graphics-offload-child') as HTMLElement;
+            expect(box).not.toBe(null);
+            expect(getComputedStyle(box).display).toBe('block');
+            host.remove();
+        });
+    });
+};

package/src/gtk-grid-view.spec.ts

@@ -0,0 +1,106 @@
+// DOM-level tests for <gtk-grid-view>: it is a <gtk-list-view> with a column count, so
+// what is asserted here is the half that differs — the measured track count and the two
+// bounds — plus the proof that the inherited model/selection machinery still reaches it.
+import { describe, expect, it } from '@gjsify/unit';
+
+import { GRID_VIEW_COLUMN_VECTORS } from '@gjsify/adwaita-core/conformance';
+
+import type { GtkGridView } from './elements/gtk-grid-view.js';
+
+function mount(attrs: Record<string, string> = {}, width = '640px'): { el: GtkGridView; host: HTMLElement } {
+    const host = document.createElement('div');
+    host.style.width = width;
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-grid-view') as GtkGridView;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    host.appendChild(el);
+    return { el, host };
+}
+
+const cells = (el: GtkGridView): HTMLElement[] => [...el.querySelectorAll<HTMLElement>('.adw-grid-view-child')];
+
+/** The track COUNT the element wrote, read back off `repeat(<n>, 1fr)`. */
+const tracks = (el: GtkGridView): number => {
+    const template = el.querySelector<HTMLElement>('.adw-list-view-rows')?.style.gridTemplateColumns ?? '';
+    return Number.parseInt(/repeat\((\d+)/.exec(template)?.[1] ?? '', 10);
+};
+
+export const GtkGridViewTest = async () => {
+    await describe('<gtk-grid-view> items', async () => {
+        await it('draws one child per item, with the grid node name GTK gives them', () => {
+            const { el, host } = mount({ model: '["A","B","C"]' });
+            expect(cells(el).length).toBe(3);
+            expect(cells(el)[0]!.textContent).toBe('A');
+            host.remove();
+        });
+
+        await it('still selects and splices, because both belong to the list view', () => {
+            const { el, host } = mount({ model: '["A","B"]' });
+            const before = cells(el);
+            cells(el)[1]!.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+            expect(el.selected).toStrictEqual([1]);
+            el.model = ['A', 'B', 'C'];
+            expect(cells(el)[0]).toBe(before[0]);
+            expect(cells(el).length).toBe(3);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-grid-view> drives the column vectors against real boxes', async () => {
+        // The two numbers the arithmetic takes are the stylesheet's — a cell's `min-width`
+        // and the container's `column-gap` — so a vector is driven by declaring them and
+        // reading back the tracks the element wrote.
+        for (const vector of GRID_VIEW_COLUMN_VECTORS) {
+            await it(vector.rule, () => {
+                const { el, host } = mount({ model: '["A","B","C","D","E","F","G","H"]' }, `${vector.forSize}px`);
+                const container = el.querySelector<HTMLElement>('.adw-list-view-rows')!;
+                container.style.columnGap = `${vector.spacing}px`;
+                for (const cell of cells(el)) cell.style.minWidth = `${vector.itemSize}px`;
+                // Writing the bounds is also what re-measures: the ResizeObserver fires on
+                // a real layout change, and the style writes above are not one.
+                el.setAttribute('min-columns', String(vector.minColumns));
+                el.setAttribute('max-columns', String(vector.maxColumns));
+                expect(tracks(el)).toBe(vector.columns);
+                host.remove();
+            });
+        }
+    });
+
+    await describe('<gtk-grid-view> columns', async () => {
+        await it('defaults to the two bounds GtkGridView declares', () => {
+            const { el, host } = mount();
+            expect(el.minColumns).toBe(1);
+            expect(el.maxColumns).toBe(7);
+            host.remove();
+        });
+
+        await it('reads an attribute that is a positive integer, and ignores anything else', () => {
+            const { el, host } = mount({ 'max-columns': '3' });
+            expect(el.maxColumns).toBe(3);
+            el.setAttribute('max-columns', 'many');
+            expect(el.maxColumns).toBe(7);
+            el.setAttribute('min-columns', '0');
+            expect(el.minColumns).toBe(1);
+            host.remove();
+        });
+
+        await it('writes as many equal tracks as the width fits', () => {
+            // 640px of host, cells floored at 120px with a 6px gap: (640 + 6) / 126 = 5.
+            const { el, host } = mount({ model: '["A","B","C","D","E","F"]' });
+            expect(tracks(el)).toBe(5);
+            host.remove();
+        });
+
+        await it('clamps the measured count to max-columns', () => {
+            const { el, host } = mount({ model: '["A","B","C","D","E","F"]', 'max-columns': '2' });
+            expect(tracks(el)).toBe(2);
+            host.remove();
+        });
+
+        await it('clamps it up to min-columns in a view too narrow for them', () => {
+            const { el, host } = mount({ model: '["A","B","C"]', 'min-columns': '3' }, '140px');
+            expect(tracks(el)).toBe(3);
+            host.remove();
+        });
+    });
+};

package/src/gtk-grid.spec.ts

@@ -0,0 +1,122 @@
+// DOM-level tests for <gtk-grid>: the four numbers reach CSS Grid as the two spacings and
+// the two `1fr` track sizes, and placement is source order, which is what GtkBuilder does.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkGrid } from './elements/gtk-grid.js';
+
+function mount(attrs: Record<string, string> = {}, cells = 4): { el: GtkGrid; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-grid') as GtkGrid;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    for (let index = 0; index < cells; index += 1) {
+        const cell = document.createElement('gtk-label');
+        cell.setAttribute('label', `cell ${index}`);
+        el.append(cell);
+    }
+    host.appendChild(el);
+    return { el, host };
+}
+
+export const GtkGridTest = async () => {
+    await describe('<gtk-grid> properties', async () => {
+        await it('holds the pspec defaults: no spacing, nothing homogeneous, horizontal', () => {
+            const { el, host } = mount();
+            expect(el.rowSpacing).toBe(0);
+            expect(el.columnSpacing).toBe(0);
+            expect(el.rowHomogeneous).toBe(false);
+            expect(el.columnHomogeneous).toBe(false);
+            expect(el.orientation).toBe('horizontal');
+            host.remove();
+        });
+
+        await it('a negative spacing is the pspec minimum, and an unparseable one the default', () => {
+            const { el, host } = mount({ 'row-spacing': '-4' });
+            expect(el.rowSpacing).toBe(0);
+            el.setAttribute('column-spacing', 'lots');
+            expect(el.columnSpacing).toBe(0);
+            el.rowSpacing = 12;
+            expect(el.rowSpacing).toBe(12);
+            host.remove();
+        });
+
+        await it('writes the two spacings onto the two gap longhands', () => {
+            const { el, host } = mount({ 'row-spacing': '6', 'column-spacing': '18' });
+            expect(el.style.rowGap).toBe('6px');
+            expect(el.style.columnGap).toBe('18px');
+            host.remove();
+        });
+
+        await it('a homogeneous axis is one equal share of the space the grid is given', () => {
+            const { el, host } = mount({ 'column-homogeneous': '', 'row-homogeneous': '' });
+            expect(el.style.gridAutoColumns).toBe('1fr');
+            expect(el.style.gridAutoRows).toBe('1fr');
+            el.columnHomogeneous = false;
+            expect(el.style.gridAutoColumns).toBe('');
+            host.remove();
+        });
+
+        await it('a vertical grid attaches down the rows instead of across the columns', () => {
+            const { el, host } = mount();
+            // `column` first: the default orientation is HORIZONTAL, so an unpositioned
+            // child opens a new column rather than a new row (see the element's own note
+            // on `find_attach_position`), and `vertical` is the mirror.
+            expect(el.style.gridAutoFlow).toBe('column');
+            el.orientation = 'vertical';
+            expect(el.style.gridAutoFlow).toBe('row');
+            el.setAttribute('orientation', 'sideways');
+            expect(el.orientation).toBe('horizontal');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-grid> look', async () => {
+        await it('is a CSS grid, and a generic one', () => {
+            const { el, host } = mount();
+            expect(getComputedStyle(el).display).toBe('grid');
+            expect(el.getAttribute('role')).toBe('generic');
+            host.remove();
+        });
+
+        await it('appends every unpositioned child to row 0, at the next free column', () => {
+            const { el, host } = mount({}, 3);
+            const [first, second, third] = Array.from(el.children) as HTMLElement[];
+            const a = first.getBoundingClientRect();
+            const b = second.getBoundingClientRect();
+            const c = third.getBoundingClientRect();
+            // `find_attach_position` searches the cross range that starts at 0 and returns
+            // the MAXIMUM position along the orientation (gtkgrid.c:293-342), so the row
+            // stays 0 and only the column grows: all three share one row, left to right.
+            // They do NOT wrap into a second row — that would need an explicit track count.
+            expect(Math.round(a.top)).toBe(Math.round(b.top));
+            expect(Math.round(b.top)).toBe(Math.round(c.top));
+            expect(Math.round(a.left)).toBeLessThan(Math.round(b.left));
+            expect(Math.round(b.left)).toBeLessThan(Math.round(c.left));
+            host.remove();
+        });
+
+        await it('fills column 0 downward when the orientation is vertical', () => {
+            const { el, host } = mount({ orientation: 'vertical' }, 3);
+            const [first, second, third] = Array.from(el.children) as HTMLElement[];
+            const a = first.getBoundingClientRect();
+            const b = second.getBoundingClientRect();
+            const c = third.getBoundingClientRect();
+            // The mirror of the horizontal case: the column stays 0, the row grows.
+            expect(Math.round(a.left)).toBe(Math.round(b.left));
+            expect(Math.round(b.left)).toBe(Math.round(c.left));
+            expect(Math.round(a.top)).toBeLessThan(Math.round(b.top));
+            expect(Math.round(b.top)).toBeLessThan(Math.round(c.top));
+            host.remove();
+        });
+
+        await it('notifies on a real change and on none that did not happen', () => {
+            const { el, host } = mount();
+            const notified: unknown[] = [];
+            el.addEventListener('notify::row-spacing', (e) => notified.push((e as CustomEvent).detail));
+            el.rowSpacing = 8;
+            el.rowSpacing = 8;
+            expect(notified).toStrictEqual([{ 'row-spacing': 8 }]);
+            host.remove();
+        });
+    });
+};

package/src/gtk-header-bar.spec.ts

@@ -0,0 +1,202 @@
+// DOM-level tests for <gtk-header-bar>. The bar is three separable things: WHERE a child
+// lands (`start` appends, `end` prepends, an untyped child packs from the start —
+// gtkheaderbar.c:843-861), the two window controls `show-title-buttons` creates and destroys
+// (:198-249, :798-826), and the centre either/or between a `title-widget` and the derived
+// `GtkLabel` (:274-290, :313-341).
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkHeaderBar } from './elements/gtk-header-bar.js';
+import type { GtkWindow } from './elements/gtk-window.js';
+
+function bar(attrs: Record<string, string> = {}): { el: GtkHeaderBar; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-header-bar') as GtkHeaderBar;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    host.appendChild(el);
+    return { el, host };
+}
+
+function child(slot: string | undefined, text: string): HTMLElement {
+    const el = document.createElement('span');
+    if (slot !== undefined) el.setAttribute('slot', slot);
+    el.textContent = text;
+    return el;
+}
+
+function classesIn(box: HTMLElement | null): string[] {
+    return [...(box?.children ?? [])].map((node) => [...node.classList].sort().join('.'));
+}
+
+export const GtkHeaderBarTest = async () => {
+    await describe('<gtk-header-bar> structure', async () => {
+        await it('is the CSS tree of gtkheaderbar.c:99-116', () => {
+            const { el, host } = bar();
+            const handle = el.firstElementChild;
+            expect(handle?.className).toBe('adw-gtk-header-bar-handle');
+            const box = handle?.firstElementChild;
+            expect(box?.className).toBe('adw-gtk-header-bar-box');
+            expect(classesIn(box as HTMLElement)).toStrictEqual([
+                'adw-gtk-header-bar-start',
+                'adw-gtk-header-bar-end',
+                'adw-gtk-header-bar-title.title',
+            ]);
+            expect(el.getAttribute('role')).toBe('group');
+            host.remove();
+        });
+
+        await it('appends a `start` child and PREPENDS an `end` one', async () => {
+            // gtk_header_bar_pack (:843-861): gtk_box_append / gtk_box_prepend.
+            const { el, host } = bar();
+            const box = el.querySelector('.adw-gtk-header-bar-box') as HTMLElement;
+            const start = child('start', 'a');
+            const end = child('end', 'z');
+            el.append(start, end);
+            // Adoption is the MutationObserver's, so it lands on the next microtask
+            // (`src/slotted-children.ts`).
+            await Promise.resolve();
+            expect(start.parentElement?.className).toBe('adw-gtk-header-bar-start');
+            expect(end.parentElement?.className).toBe('adw-gtk-header-bar-end');
+            // The start box opens with the PREPENDED window controls (:243), which carry no
+            // text of their own — hence the leading ''.
+            el.append(child('start', 'b'));
+            await Promise.resolve();
+            expect(
+                [...box.querySelector('.adw-gtk-header-bar-start')!.children].map((n) => n.textContent),
+            ).toStrictEqual(['', 'a', 'b']);
+            el.append(child('end', 'y'));
+            await Promise.resolve();
+            // The end box closes with the APPENDED window controls (:245), and `y` PREPENDED
+            // in front of `z` — the order the two halves are packed by.
+            expect([...box.querySelector('.adw-gtk-header-bar-end')!.children].map((n) => n.textContent)).toStrictEqual(
+                ['y', 'z', ''],
+            );
+            host.remove();
+        });
+
+        await it('packs an untyped child from the start', async () => {
+            // gtkheaderbar.c:698 — `type == NULL` is pack_start.
+            const { el, host } = bar();
+            const loose = child(undefined, 'loose');
+            el.appendChild(loose);
+            await Promise.resolve();
+            expect(loose.parentElement?.className).toBe('adw-gtk-header-bar-start');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-header-bar> the title', async () => {
+        await it('derives it from the root window, and re-derives on notify::title', async () => {
+            // gtk_header_bar_root (gtkheaderbar.c:362-376) connects notify::title on the root.
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const win = document.createElement('gtk-window') as GtkWindow;
+            win.setAttribute('title', 'Documents');
+            const el = document.createElement('gtk-header-bar') as GtkHeaderBar;
+            win.appendChild(el);
+            host.appendChild(win);
+            const label = () => el.querySelector('.adw-gtk-header-bar-title');
+            expect(label()?.getAttribute('label')).toBe('Documents');
+            win.setAttribute('title', 'Documents — 12');
+            await Promise.resolve();
+            await Promise.resolve();
+            expect(label()?.getAttribute('label')).toBe('Documents — 12');
+            host.remove();
+        });
+
+        await it('falls back to the page title, which is the process name here', async () => {
+            // update_title (gtkheaderbar.c:250-271) ends at g_get_application_name(), which is
+            // the application's name — and a page's own <title> is that, one level up.
+            const { el, host } = bar();
+            expect(el.querySelector('.adw-gtk-header-bar-title')?.getAttribute('label')).toBe(document.title);
+            host.remove();
+        });
+
+        await it('a title-widget takes the centre and the derived label goes', async () => {
+            // gtk_header_bar_set_title_widget (:319-336): the bin is emptied first.
+            const { el, host } = bar();
+            const widget = child('title', 'My App');
+            el.appendChild(widget);
+            await Promise.resolve();
+            expect(el.querySelector('.adw-gtk-header-bar-title')).toBe(null);
+            expect(widget.parentElement?.className).toBe('adw-gtk-header-bar-box');
+            expect(el.titleWidget).toBe(widget);
+            host.remove();
+        });
+
+        await it('taking the widget away REBUILDS the derived label', async () => {
+            // :332-336 — the NULL branch constructs it again. `<adw-header-bar>` cannot do
+            // this; the asymmetry is what its own header records.
+            const { el, host } = bar();
+            const widget = child('title', 'My App');
+            el.appendChild(widget);
+            await Promise.resolve();
+            widget.remove();
+            await Promise.resolve();
+            await Promise.resolve();
+            expect(el.querySelector('.adw-gtk-header-bar-title')).not.toBe(null);
+            expect(el.titleWidget).toBe(null);
+            host.remove();
+        });
+
+        await it('accepts the deprecated `title-widget` spelling of the same slot', async () => {
+            // gtkheaderbar.c:683-686 — `gtk_buildable_child_deprecation_warning` on `"title"`,
+            // which the property-position spelling in a `.blp` is the replacement for.
+            const { el, host } = bar();
+            const widget = child('title-widget', 'My App');
+            el.appendChild(widget);
+            await Promise.resolve();
+            expect(el.querySelector('.adw-gtk-header-bar-title')).toBe(null);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-header-bar> show-title-buttons', async () => {
+        await it('creates one controls at each end, prepended and appended', async () => {
+            // create_window_controls (gtkheaderbar.c:198-249).
+            const { el, host } = bar();
+            const start = el.querySelector('.adw-gtk-header-bar-start') as HTMLElement;
+            const end = el.querySelector('.adw-gtk-header-bar-end') as HTMLElement;
+            expect(start.firstElementChild?.localName).toBe('gtk-window-controls');
+            expect(start.firstElementChild?.getAttribute('side')).toBe('start');
+            expect(end.lastElementChild?.localName).toBe('gtk-window-controls');
+            expect(end.lastElementChild?.getAttribute('side')).toBe('end');
+            host.remove();
+        });
+
+        await it('`show-title-buttons="false"` REMOVES them rather than hiding them', async () => {
+            // gtk_header_bar_set_show_title_buttons (:806-824) unparents both.
+            const { el, host } = bar();
+            el.showTitleButtons = false;
+            expect(el.querySelector('gtk-window-controls')).toBe(null);
+            el.showTitleButtons = true;
+            expect(el.querySelectorAll('gtk-window-controls').length).toBe(2);
+            host.remove();
+        });
+
+        await it('binds `decoration-layout` onto both controls', async () => {
+            // The two G_BINDING_SYNC_CREATE bindings of :229-247.
+            const { el, host } = bar();
+            el.decorationLayout = 'menu:close';
+            for (const controls of Array.from(el.querySelectorAll('gtk-window-controls'))) {
+                expect(controls.getAttribute('decoration-layout')).toBe('menu:close');
+            }
+            el.decorationLayout = null;
+            expect(el.querySelector('gtk-window-controls')?.hasAttribute('decoration-layout')).toBe(false);
+            host.remove();
+        });
+
+        await it('notifies only on a real change', async () => {
+            // From the GIR default (TRUE, :657) written out, so the first write below changes
+            // nothing — `gtk_header_bar_set_show_title_buttons` returns early (:802-803).
+            const { el, host } = bar({ 'show-title-buttons': 'true' });
+            const events: unknown[] = [];
+            el.addEventListener('notify::show-title-buttons', (e) => events.push((e as CustomEvent).detail));
+            el.showTitleButtons = true;
+            el.showTitleButtons = false;
+            el.showTitleButtons = false;
+            expect(events).toStrictEqual([{ 'show-title-buttons': false }]);
+            host.remove();
+        });
+    });
+};