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

package/src/test.browser.mts

@@ -83,6 +83,7 @@ import { GtkListViewTest } from './gtk-list-view.spec.js';
 import { GtkHeaderBarTest } from './gtk-header-bar.spec.js';
 import { GtkWindowControlsTest } from './gtk-window-controls.spec.js';
 import { GtkWindowTest } from './gtk-window.spec.js';
+import { WindowMaximizeTest } from './window-maximize.spec.js';
 import { GtkApplicationWindowTest } from './gtk-application-window.spec.js';
 import { GtkActionBarTest } from './gtk-action-bar.spec.js';
 import { GtkSeparatorTest } from './gtk-separator.spec.js';
@@ -93,6 +94,7 @@ import { GtkTreeExpanderTest } from './gtk-tree-expander.spec.js';
 import { GtkToggleButtonTest } from './gtk-toggle-button.spec.js';
 import { GtkExpanderTest } from './gtk-expander.spec.js';
 import { GtkOverlayTest } from './gtk-overlay.spec.js';
+import { ContainerFillTest } from './container-fill.spec.js';
 import { GtkPanedTest } from './gtk-paned.spec.js';
 import { GtkRevealerTest } from './gtk-revealer.spec.js';
 import { GtkScaleTest } from './gtk-scale.spec.js';
@@ -161,6 +163,9 @@ import { AdwValueListsTest } from './value-lists.spec.js';
 import { AdwBlueprintLayoutTest } from './blueprint-layout.spec.js';
 import { AdwWidgetSizeTest } from './widget-size.spec.js';
 import { AdwSharedTreeMountTest } from './shared-tree-mount.spec.js';
+import { AdwWidgetVisibleTest } from './widget-visible.spec.js';
+import { AdwChildSlotTest } from './child-slot.spec.js';
+import { AdwLearn6502WindowTest } from './learn6502-window.spec.js';
 import { AdwBlueprintMarkupTest } from './blueprint-markup.spec.js';
 import { AdwTagsTest } from './tags.spec.js';
 import { AdwFontStackTest } from './font-stack.spec.js';
@@ -183,6 +188,9 @@ run({
     AdwBlueprintLayoutTest,
     AdwWidgetSizeTest,
     AdwSharedTreeMountTest,
+    AdwWidgetVisibleTest,
+    AdwChildSlotTest,
+    AdwLearn6502WindowTest,
     AdwBlueprintMarkupTest,
     AdwTagsTest,
     AdwKeyboardOperableTest,
@@ -219,6 +227,7 @@ run({
     GtkHeaderBarTest,
     GtkWindowControlsTest,
     GtkWindowTest,
+    WindowMaximizeTest,
     GtkApplicationWindowTest,
     GtkActionBarTest,
     GtkSeparatorTest,
@@ -234,6 +243,7 @@ run({
     GtkToggleButtonTest,
     GtkExpanderTest,
     GtkOverlayTest,
+    ContainerFillTest,
     GtkPanedTest,
     GtkRevealerTest,
     GtkScaleTest,

package/src/value-lists.spec.ts

@@ -63,9 +63,9 @@ export const AdwValueListsTest = async () => {
                         const dialog = root as unknown as AdwAlertDialog;
                         const read = vector.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),
                         }));
                         expect(JSON.stringify(read)).toBe(JSON.stringify(vector.responses));
                         // The buttons the dialog paints, in the order the source wrote them.

package/src/widget-visible.spec.ts

@@ -0,0 +1,104 @@
+// `Gtk.Widget:visible` on a built element: an authored `visible: false`, `get_visible()` /
+// `set_visible()`, the property, and a breakpoint setter that writes it and restores it.
+import { describe, expect, it } from '@gjsify/unit';
+import type { SharedTreeNode } from '@gjsify/adwaita-core/conformance';
+
+import { mountSharedTree } from './shared-tree-builder.js';
+
+function settle(): Promise<void> {
+    return new Promise((resolve) => {
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+    });
+}
+
+type Widget = HTMLElement & { visible: boolean; get_visible(): boolean; set_visible(value: boolean): void };
+
+const tree = (width: number, authored: boolean): SharedTreeNode => ({
+    tag: 'AdwApplicationWindow',
+    props: { 'default-width': width, 'default-height': 400 },
+    breakpoints: [
+        {
+            condition: 'max-width: 599sp',
+            setters: [{ object: 'target', property: 'visible', value: false }],
+        },
+    ],
+    children: [
+        {
+            tag: 'GtkBox',
+            slot: 'content',
+            children: [{ tag: 'GtkButton', id: 'target', props: authored ? {} : { visible: false } }],
+        },
+    ],
+});
+
+export const AdwWidgetVisibleTest = async () => {
+    await describe('adwaita-web: Gtk.Widget:visible on a built element', async () => {
+        await it('an authored `visible: false` hides the widget', () => {
+            const { root, unmount } = mountSharedTree({
+                tag: 'GtkBox',
+                children: [{ tag: 'GtkButton', id: 'b', props: { visible: false } }],
+            });
+            const button = root.querySelector('#b') as Widget;
+            expect(button.hidden).toBe(true);
+            expect(button.visible).toBe(false);
+            expect(button.get_visible()).toBe(false);
+            unmount();
+        });
+
+        await it('is visible by default, and an authored `true` shows it', () => {
+            const { root, unmount } = mountSharedTree({
+                tag: 'GtkBox',
+                children: [
+                    { tag: 'GtkButton', id: 'a' },
+                    { tag: 'GtkButton', id: 'b', props: { visible: true } },
+                ],
+            });
+            expect((root.querySelector('#a') as Widget).get_visible()).toBe(true);
+            expect((root.querySelector('#b') as Widget).hidden).toBe(false);
+            unmount();
+        });
+
+        await it('set_visible() and the property round-trip', () => {
+            const { root, unmount } = mountSharedTree({
+                tag: 'GtkBox',
+                children: [{ tag: 'GtkButton', id: 'b' }],
+            });
+            const button = root.querySelector('#b') as Widget;
+            button.set_visible(false);
+            expect(button.hidden).toBe(true);
+            button.visible = true;
+            expect(button.hidden).toBe(false);
+            expect(button.get_visible()).toBe(true);
+            unmount();
+        });
+
+        await it('a breakpoint setter hides the widget and unapplying restores it', async () => {
+            const narrow = mountSharedTree(tree(400, true));
+            await settle();
+            expect((narrow.root.querySelector('#target') as Widget).visible).toBe(false);
+            narrow.unmount();
+
+            const wide = mountSharedTree(tree(1000, true));
+            await settle();
+            expect((wide.root.querySelector('#target') as Widget).visible).toBe(true);
+            wide.unmount();
+        });
+
+        await it('unapplying a breakpoint restores an authored `false`', async () => {
+            const { root, unmount } = mountSharedTree(tree(1000, false));
+            await settle();
+            expect((root.querySelector('#target') as Widget).visible).toBe(false);
+            unmount();
+        });
+
+        await it('<gtk-stack-page> and <adw-sidebar> keep their own `visible`', () => {
+            const page = document.createElement('gtk-stack-page') as Widget;
+            page.visible = false;
+            expect(page.hasAttribute('hidden')).toBe(true);
+            const item = document.createElement('adw-sidebar-item') as Widget;
+            item.visible = false;
+            expect(item.getAttribute('visible')).toBe('false');
+            expect(item.hasAttribute('hidden')).toBe(true);
+        });
+    });
+};

package/src/window-maximize.spec.ts

@@ -0,0 +1,93 @@
+// A maximized or fullscreen `Gtk.Window` ignores its default size and fills the work area
+// (gtkwindow.c); on a page that is the frame's containing block. Driven through layout, because
+// the claim is about the box, not about a class name. One body for the three window elements.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkWindow } from './elements/gtk-window.js';
+
+const TAGS = ['gtk-window', 'adw-window', 'adw-application-window'] as const;
+
+function mount(tag: string, attrs: Record<string, string> = {}): { el: GtkWindow; host: HTMLElement } {
+    const host = document.createElement('div');
+    host.style.cssText = 'position:relative;width:500px;height:400px';
+    document.body.appendChild(host);
+    const el = document.createElement(tag) as GtkWindow;
+    el.setAttribute('default-width', '360');
+    el.setAttribute('default-height', '240');
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    host.appendChild(el);
+    return { el, host };
+}
+
+function size(el: HTMLElement): string {
+    const rect = el.getBoundingClientRect();
+    return `${Math.round(rect.width)}x${Math.round(rect.height)}`;
+}
+
+export const WindowMaximizeTest = async () => {
+    for (const tag of TAGS) {
+        await describe(`<${tag}> maximized fills its containing block`, async () => {
+            await it('opens at the default size, fills the box maximized, and restores on unmaximize', async () => {
+                const { el, host } = mount(tag);
+                expect(size(el)).toBe('360x240');
+                el.maximize();
+                expect(size(el)).toBe('500x400');
+                expect(el.style.width).toBe('');
+                el.unmaximize();
+                expect(size(el)).toBe('360x240');
+                host.remove();
+            });
+
+            await it('fills the box through the `maximized` property and `toggle-maximized`', async () => {
+                const { el, host } = mount(tag);
+                el.maximized = true;
+                expect(size(el)).toBe('500x400');
+                el.maximized = false;
+                expect(size(el)).toBe('360x240');
+                el.dispatchEvent(new CustomEvent('window-action', { detail: { action: 'toggle-maximized' } }));
+                expect(size(el)).toBe('500x400');
+                el.dispatchEvent(new CustomEvent('window-action', { detail: { action: 'toggle-maximized' } }));
+                expect(size(el)).toBe('360x240');
+                host.remove();
+            });
+
+            await it('fills the box fullscreened and restores on unfullscreen', async () => {
+                const { el, host } = mount(tag);
+                el.fullscreen();
+                expect(el.is_fullscreen()).toBe(true);
+                expect(size(el)).toBe('500x400');
+                el.unfullscreen();
+                expect(size(el)).toBe('360x240');
+                host.remove();
+            });
+
+            await it('stays filled until both states are gone', async () => {
+                const { el, host } = mount(tag);
+                el.maximize();
+                el.fullscreen();
+                el.unmaximize();
+                expect(size(el)).toBe('500x400');
+                el.unfullscreen();
+                expect(size(el)).toBe('360x240');
+                host.remove();
+            });
+
+            await it('fills the box already maximized when it is connected', async () => {
+                const { el, host } = mount(tag, { maximized: 'true' });
+                expect(size(el)).toBe('500x400');
+                host.remove();
+            });
+        });
+    }
+
+    await describe('<adw-window> maximized keeps its size request as a minimum', async () => {
+        await it('does not shrink below width-request/height-request', async () => {
+            const { el, host } = mount('adw-window', { 'width-request': '600', 'height-request': '450' });
+            el.maximize();
+            const [width, height] = size(el).split('x').map(Number);
+            expect(width >= 600).toBe(true);
+            expect(height >= 450).toBe(true);
+            host.remove();
+        });
+    });
+};