@gjsify/adwaita-web 0.53.0 → 0.55.0

package/src/gtk-overlay.spec.ts

@@ -0,0 +1,141 @@
+// DOM-level tests for <gtk-overlay>. It has no scalar GIR property of its own — `child` is
+// a widget — so what matters here is the SLOT ROUTING that stands in for
+// `set_child` / `add_overlay`, and the `get_child_position` alignment the stylesheet's
+// flex layer reproduces: a child with no `halign` FILLS, one that names an alignment is
+// placed by the generic auto-margin rules, and the `.left` / `.right` / `.top` / `.bottom`
+// classes say which edge each one ended up pinned to.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkOverlay } from './elements/gtk-overlay.js';
+
+function mount(children: { tag?: string; attrs?: Record<string, string>; slot?: string }[]): {
+    el: GtkOverlay;
+    host: HTMLElement;
+} {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    host.style.width = '200px';
+    host.style.height = '120px';
+    const el = document.createElement('gtk-overlay') as GtkOverlay;
+    for (const child of children) {
+        const node = document.createElement(child.tag ?? 'div');
+        for (const [name, value] of Object.entries(child.attrs ?? {})) {
+            node.setAttribute(name, value);
+        }
+        if (child.slot !== undefined) node.setAttribute('slot', child.slot);
+        node.style.width = '40px';
+        node.style.height = '20px';
+        el.appendChild(node);
+    }
+    host.appendChild(el);
+    return { el, host };
+}
+
+export const GtkOverlayTest = async () => {
+    await describe('<gtk-overlay> placement', async () => {
+        await it('routes the bare child to the main slot and slot="overlay" above it', () => {
+            const { el, host } = mount([
+                { tag: 'div', attrs: { id: 'main' } },
+                { tag: 'div', attrs: { id: 'badge' }, slot: 'overlay' },
+            ]);
+            expect(el.child?.id).toBe('main');
+            expect(el.overlayLayer.children.length).toBe(1);
+            expect(el.overlayLayer.firstElementChild?.id).toBe('badge');
+            // The layer is the `graphene_rect_init (0, 0, width, height)` of
+            // `gtk_overlay_snapshot_child`, so it covers the whole overlay.
+            const overlay = el.getBoundingClientRect();
+            const layer = el.overlayLayer.getBoundingClientRect();
+            expect(layer.width).toBe(overlay.width);
+            expect(layer.height).toBe(overlay.height);
+            host.remove();
+        });
+
+        await it('takes its size from the main child, which is laid out in the host flow', async () => {
+            const { el, host } = mount([{ tag: 'div', attrs: { id: 'main' } }]);
+            const main = el.child as HTMLElement;
+            main.style.height = '70px';
+            // `display: contents` is what keeps the child a DIRECT child of the host, so
+            // the overlay's own size is the child's.
+            expect(getComputedStyle(el.querySelector('.adw-overlay-child') as Element).display).toBe('contents');
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            expect(el.getBoundingClientRect().height).toBe(70);
+            host.remove();
+        });
+
+        await it('a child that names no alignment FILLS the overlay, as GTK_ALIGN_FILL does', () => {
+            const { el, host } = mount([{ tag: 'div' }, { tag: 'div', slot: 'overlay' }]);
+            const layer = el.overlayLayer.getBoundingClientRect();
+            const badge = el.overlayLayer.firstElementChild as HTMLElement;
+            const box = badge.getBoundingClientRect();
+            expect(box.width).toBe(layer.width);
+            expect(box.height).toBe(layer.height);
+            host.remove();
+        });
+
+        await it('an halign/valign places the overlay child and cancels the fill', () => {
+            const { el, host } = mount([
+                { tag: 'div' },
+                { tag: 'div', slot: 'overlay', attrs: { halign: 'end', valign: 'end' } },
+            ]);
+            const layer = el.overlayLayer.getBoundingClientRect();
+            const badge = el.overlayLayer.firstElementChild as HTMLElement;
+            const box = badge.getBoundingClientRect();
+            expect(box.width).toBe(40);
+            expect(box.height).toBe(20);
+            // `halign="end"` puts the child's right edge on the layer's right edge — the
+            // whole of `alloc->x += width - alloc->width`.
+            expect(Math.round(layer.right - box.right)).toBe(0);
+            expect(Math.round(layer.bottom - box.bottom)).toBe(0);
+            host.remove();
+        });
+
+        await it('the layer does not take input meant for the main child', () => {
+            const { el, host } = mount([{ tag: 'div' }, { tag: 'div', slot: 'overlay', attrs: { halign: 'start' } }]);
+            expect(getComputedStyle(el.overlayLayer).pointerEvents).toBe('none');
+            expect(getComputedStyle(el.overlayLayer.firstElementChild as Element).pointerEvents).toBe('auto');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-overlay> edge classes', async () => {
+        await it('marks the edges the alignment actually pinned the child to', async () => {
+            const { el, host } = mount([
+                { tag: 'div' },
+                { tag: 'div', slot: 'overlay', attrs: { id: 'tr', halign: 'end', valign: 'end' } },
+            ]);
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            const badge = el.overlayLayer.firstElementChild as HTMLElement;
+            // `gtk_overlay_child_update_style_classes` only marks START and END; FILL and
+            // CENTER are pinned to no edge at all.
+            expect(badge.classList.contains('right')).toBe(true);
+            expect(badge.classList.contains('bottom')).toBe(true);
+            expect(badge.classList.contains('left')).toBe(false);
+            expect(badge.classList.contains('top')).toBe(false);
+            host.remove();
+        });
+
+        await it('follows an alignment rewritten after connect', async () => {
+            const { el, host } = mount([{ tag: 'div' }, { tag: 'div', slot: 'overlay', attrs: { halign: 'start' } }]);
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            const badge = el.overlayLayer.firstElementChild as HTMLElement;
+            expect(badge.classList.contains('left')).toBe(true);
+            badge.setAttribute('halign', 'center');
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            expect(badge.classList.contains('left')).toBe(false);
+            expect(badge.classList.contains('right')).toBe(false);
+            host.remove();
+        });
+
+        await it('a child adopted after connect gets its classes too', async () => {
+            const { el, host } = mount([{ tag: 'div' }]);
+            const late = document.createElement('div');
+            late.setAttribute('slot', 'overlay');
+            late.setAttribute('valign', 'end');
+            el.appendChild(late);
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            expect(late.classList.contains('bottom')).toBe(true);
+            expect(late.classList.contains('top')).toBe(false);
+            host.remove();
+        });
+    });
+};

package/src/gtk-paned.spec.ts

@@ -0,0 +1,267 @@
+// DOM-level tests for <gtk-paned>. Two halves, and the split is the point:
+//
+//   the ARITHMETIC — `gtk_paned_compute_position` (gtkpaned.c:1092-1146) as a pure function
+//   over its inputs, including the `last_allocation` branch that a flex layout cannot reach
+//   on its own, so it is pinned here rather than left to the browser;
+//
+//   the PLACEMENT — the two slots, GTK's "no separator is drawn if one of the children is
+//   missing", the handle's ARIA window-splitter values, `move-handle`'s keys, and the
+//   `position` / `position-set` pairing where a write raises a flag the C declares
+//   read-only and a write of -1 lowers it again.
+import { describe, expect, it } from '@gjsify/unit';
+
+import { computePanedPosition, type GtkPaned, type PanedPositionInput } from './elements/gtk-paned.js';
+
+/** The two children every fixture mounts: 100px and 300px of request, as GTK would measure. */
+function input(over: Partial<PanedPositionInput> = {}): PanedPositionInput {
+    return {
+        allocation: 400,
+        startRequest: 100,
+        endRequest: 300,
+        resizeStart: true,
+        resizeEnd: true,
+        shrinkStart: true,
+        shrinkEnd: true,
+        positionSet: false,
+        startChildSize: 0,
+        lastAllocation: 0,
+        ...over,
+    };
+}
+
+function mount(attrs: Record<string, string> = {}): { el: GtkPaned; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    host.style.width = '400px';
+    host.style.height = '120px';
+    const el = document.createElement('gtk-paned') as GtkPaned;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    const start = document.createElement('div');
+    start.id = 'start';
+    start.style.width = '100px';
+    start.style.height = '40px';
+    const end = document.createElement('div');
+    end.setAttribute('slot', 'end');
+    end.id = 'end';
+    end.style.width = '300px';
+    end.style.height = '40px';
+    el.append(start, end);
+    host.appendChild(el);
+    return { el, host };
+}
+
+/** Collect the `detail` of every `event` dispatched on `el`. */
+function record(el: HTMLElement, event: string): unknown[] {
+    const details: unknown[] = [];
+    el.addEventListener(event, (e) => details.push((e as CustomEvent).detail));
+    return details;
+}
+
+export const GtkPanedTest = async () => {
+    await describe('gtk_paned_compute_position', async () => {
+        await it('divides in proportion to the two size requests when both resize', () => {
+            // `pos = allocation * ((double)start_child_req / (start_child_req +
+            // end_child_req)) + 0.5` — 400 * 100/400 is an exact 100, and the +0.5 floors.
+            expect(computePanedPosition(input())).toStrictEqual({ min: 0, max: 400, position: 100 });
+            expect(computePanedPosition(input({ startRequest: 300, endRequest: 100 }))).toStrictEqual({
+                min: 0,
+                max: 400,
+                position: 300,
+            });
+        });
+
+        await it('halves when neither child has a request, rather than dividing by zero', () => {
+            expect(computePanedPosition(input({ startRequest: 0, endRequest: 0 }))).toStrictEqual({
+                min: 0,
+                max: 400,
+                position: 200,
+            });
+        });
+
+        await it('gives a non-resizing start child its own request, and a non-resizing end the rest', () => {
+            expect(computePanedPosition(input({ resizeStart: false, resizeEnd: true })).position).toBe(100);
+            expect(computePanedPosition(input({ resizeStart: true, resizeEnd: false })).position).toBe(100); // MAX (0, 400 - 300)
+        });
+
+        await it('clamps against the shrink flags, and GLib tests the high bound first', () => {
+            // `min = shrink_start_child ? 0 : start_child_req` — a start child that may not
+            // shrink has a floor of its own request, and `max = MAX (min, max)` inverts
+            // whenever the two disagree, which is why this is GLib's CLAMP and not
+            // Math.min/Math.max.
+            expect(computePanedPosition(input({ shrinkStart: false })).min).toBe(100);
+            expect(computePanedPosition(input({ shrinkEnd: false })).max).toBe(100);
+            expect(computePanedPosition(input({ shrinkStart: false, shrinkEnd: false }))).toStrictEqual({
+                min: 100,
+                max: 100,
+                position: 100,
+            });
+        });
+
+        await it('scales an existing position when the paned grows, and holds it before that', () => {
+            // "If the position was set before the initial allocation … just clamp it and
+            // leave it": `last_allocation > 0` is false, so the position is taken as it is.
+            expect(computePanedPosition(input({ positionSet: true, startChildSize: 220 })).position).toBe(220);
+            // Once there IS a previous allocation, the divider keeps its share of it.
+            expect(
+                computePanedPosition(input({ positionSet: true, startChildSize: 100, lastAllocation: 400 })).position,
+            ).toBe(100);
+            expect(
+                computePanedPosition(
+                    input({ positionSet: true, startChildSize: 100, lastAllocation: 400, allocation: 800 }),
+                ).position,
+            ).toBe(200);
+            // A non-resizing start child instead takes the whole growth.
+            expect(
+                computePanedPosition(
+                    input({
+                        positionSet: true,
+                        startChildSize: 100,
+                        lastAllocation: 400,
+                        allocation: 800,
+                        resizeEnd: false,
+                    }),
+                ).position,
+            ).toBe(500);
+        });
+    });
+
+    await describe('<gtk-paned> placement', async () => {
+        await it('routes the bare child to the start pane and slot="end" to the other', () => {
+            const { el, host } = mount();
+            expect(el.startChild?.id).toBe('start');
+            expect(el.endChild?.id).toBe('end');
+            expect(el.getAttribute('role')).toBe('group');
+            host.remove();
+        });
+
+        await it('draws the divider as the separator node a GtkPanedHandle carries', () => {
+            const { el, host } = mount();
+            const handle = el.querySelector('.adw-paned-handle') as HTMLElement;
+            // `separator` is the handle's CSS NAME (gtkpanedhandle.c:88) and `role` is the
+            // ARIA reading of that node; `wide` is what `gtk_paned_set_wide_handle` adds.
+            expect(handle.classList.contains('separator')).toBe(true);
+            expect(handle.getAttribute('role')).toBe('separator');
+            expect(handle.tabIndex).toBe(0);
+            expect(handle.classList.contains('wide')).toBe(false);
+            expect(getComputedStyle(handle).backgroundColor).toBe('rgba(0, 0, 0, 0)');
+            el.wideHandle = true;
+            expect(handle.classList.contains('wide')).toBe(true);
+            expect(getComputedStyle(handle).minWidth).toBe('5px');
+            host.remove();
+        });
+
+        await it('the handle reports the divider as its accessible value', async () => {
+            const { el, host } = mount();
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            const handle = el.querySelector('.adw-paned-handle') as HTMLElement;
+            expect(handle.getAttribute('aria-orientation')).toBe('horizontal');
+            expect(handle.getAttribute('aria-valuemin')).toBe('0');
+            // GTK's VALUE_MAX is the paned's own width, handle included.
+            expect(Number(handle.getAttribute('aria-valuemax'))).toBeGreaterThan(el.position);
+            host.remove();
+        });
+
+        await it('draws no separator when one of the children is missing', async () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            host.style.width = '200px';
+            host.style.height = '60px';
+            const el = document.createElement('gtk-paned') as GtkPaned;
+            const lone = document.createElement('div');
+            lone.style.width = '50px';
+            lone.style.height = '20px';
+            el.appendChild(lone);
+            host.appendChild(el);
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            // "No separator is drawn if one of the children is missing" (gtkpaned.c:70).
+            expect((el.querySelector('.adw-paned-handle') as HTMLElement).hidden).toBe(true);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-paned> position', async () => {
+        await it('an authored position raises position-set, as a setter would', async () => {
+            const { el, host } = mount({ position: '150' });
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            expect(el.position).toBe(150);
+            expect(el.positionSet).toBe(true);
+            host.remove();
+        });
+
+        await it('a write notifies position and position-set once each, a rewrite neither', () => {
+            const { el, host } = mount();
+            const position = record(el, 'notify::position');
+            const positionSet = record(el, 'notify::position-set');
+            el.position = 150;
+            el.position = 150;
+            expect(position.length).toBe(1);
+            expect(positionSet).toStrictEqual([{ positionSet: true }]);
+            host.remove();
+        });
+
+        await it('a write of -1 puts the divider back to being derived', () => {
+            const { el, host } = mount();
+            const positionSet = record(el, 'notify::position-set');
+            el.position = 150;
+            el.position = -1;
+            expect(el.positionSet).toBe(false);
+            expect(positionSet).toStrictEqual([{ positionSet: true }, { positionSet: false }]);
+            host.remove();
+        });
+
+        await it('an unparseable position attribute is not a position at all', async () => {
+            const { el, host } = mount({ position: 'halfway' });
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            expect(Number.isNaN(el.position)).toBe(false);
+            expect(el.positionSet).toBe(false);
+            host.remove();
+        });
+
+        await it("writes the divider as the start pane's basis, with no growth", async () => {
+            const { el, host } = mount({ position: '150' });
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            const start = el.querySelector('.adw-paned-child') as HTMLElement;
+            // `start_child_allocation.width = MAX (1, start_child_size)`.
+            expect(start.style.flexBasis).toBe('150px');
+            expect(start.style.flexGrow).toBe('0');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-paned> keyboard', async () => {
+        await it("move-handle steps by one and pages by 75, the C's two constants", async () => {
+            const { el, host } = mount({ position: '150' });
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            const handle = el.querySelector('.adw-paned-handle') as HTMLElement;
+            handle.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+            expect(el.position).toBe(151);
+            handle.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageDown', bubbles: true }));
+            expect(el.position).toBe(226);
+            host.remove();
+        });
+
+        await it('Home and End are GTK_SCROLL_START and GTK_SCROLL_END, so the two bounds', async () => {
+            const { el, host } = mount({ position: '150' });
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            const handle = el.querySelector('.adw-paned-handle') as HTMLElement;
+            handle.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
+            expect(el.position).toBe(el.minPosition);
+            handle.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
+            expect(el.position).toBe(el.maxPosition);
+            host.remove();
+        });
+
+        await it('Return and Escape are accept-position and cancel-position, dispatched not swallowed', async () => {
+            const { el, host } = mount({ position: '150' });
+            const accepted = record(el, 'accept-position');
+            const cancelled = record(el, 'cancel-position');
+            const handle = el.querySelector('.adw-paned-handle') as HTMLElement;
+            handle.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            handle.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+            expect(accepted.length).toBe(1);
+            expect(cancelled.length).toBe(1);
+            expect(el.position).toBe(150);
+            host.remove();
+        });
+    });
+};

package/src/gtk-password-entry.spec.ts

@@ -0,0 +1,150 @@
+// DOM-level tests for <gtk-password-entry>. It composes `<gtk-entry>`'s input, so what is
+// under test is the half C adds: masked by default, the peek button off unless
+// `show-peek-icon` is asked for, and the Caps Lock warning shown only while the field has
+// focus AND the text is still masked — the two rules `PasswordEntryRowState` derives.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkPasswordEntry } from './elements/gtk-password-entry.js';
+
+function mount(attrs: Record<string, string> = {}): { el: GtkPasswordEntry; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-password-entry') as GtkPasswordEntry;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    host.appendChild(el);
+    return { el, host };
+}
+
+function inner(el: GtkPasswordEntry): HTMLInputElement {
+    return el.querySelector('input') as HTMLInputElement;
+}
+
+function peek(el: GtkPasswordEntry): HTMLButtonElement {
+    return el.querySelector('.adw-password-entry-peek') as HTMLButtonElement;
+}
+
+function indicator(el: GtkPasswordEntry): HTMLElement {
+    return el.querySelector('.adw-password-entry-caps-lock') as HTMLElement;
+}
+
+export const GtkPasswordEntryTest = async () => {
+    await describe('<gtk-password-entry> masking', async () => {
+        await it('starts masked, with the password input purpose a password field asks for', () => {
+            const { el, host } = mount();
+            expect(inner(el).type).toBe('password');
+            // Read the ATTRIBUTE, not the IDL property: Firefox's form autofill owns the
+            // reflected `autocomplete` IDL attribute and answers '' for a field it manages.
+            expect(inner(el).getAttribute('autocomplete')).toBe('new-password');
+            expect(el.revealed).toBe(false);
+            expect(el.hasAttribute('revealed')).toBe(false);
+            host.remove();
+        });
+
+        await it('show-peek-icon is off by default and the toggle appears with it', () => {
+            const { el, host } = mount();
+            expect(peek(el).hidden).toBe(true);
+            el.setAttribute('show-peek-icon', '');
+            expect(peek(el).hidden).toBe(false);
+            host.remove();
+        });
+
+        await it('the peek button reveals, then conceals again, and notifies once each', async () => {
+            const { el, host } = mount({ 'show-peek-icon': '' });
+            const notified: unknown[] = [];
+            el.addEventListener('notify::revealed', (e) => notified.push((e as CustomEvent).detail));
+            peek(el).click();
+            expect(el.revealed).toBe(true);
+            expect(inner(el).type).toBe('text');
+            expect(el.hasAttribute('revealed')).toBe(true);
+            expect(peek(el).getAttribute('aria-pressed')).toBe('true');
+            peek(el).click();
+            expect(inner(el).type).toBe('password');
+            expect(notified).toStrictEqual([{ revealed: true }, { revealed: false }]);
+            host.remove();
+        });
+
+        await it('the peek glyph swaps between reveal and conceal, carrying the libadwaita name', () => {
+            const { el, host } = mount({ 'show-peek-icon': '' });
+            const icon = peek(el).querySelector('gtk-image') as HTMLElement;
+            expect(icon.dataset.iconName).toBe('view-reveal-symbolic');
+            expect(icon.classList.contains('adw-icon--view-reveal')).toBe(true);
+            el.revealed = true;
+            expect(icon.dataset.iconName).toBe('view-conceal-symbolic');
+            expect(icon.classList.contains('adw-icon--view-conceal')).toBe(true);
+            host.remove();
+        });
+
+        await it('re-setting the same revealed state notifies nothing', () => {
+            const { el, host } = mount({ 'show-peek-icon': '' });
+            const notified: unknown[] = [];
+            el.addEventListener('notify::revealed', (e) => notified.push((e as CustomEvent).detail));
+            el.revealed = false;
+            el.revealed = false;
+            expect(notified.length).toBe(0);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-password-entry> caps lock', async () => {
+        await it('is off until the keyboard reports it, and never on while unfocused', () => {
+            const { el, host } = mount();
+            expect(el.capsLockOn).toBe(false);
+            expect(indicator(el).hidden).toBe(true);
+            el.setCapsLockOn(true);
+            expect(el.capsLockOn).toBe(true);
+            // `editing && show_indicator` — the focus condition GTK's own
+            // `caps_lock_state_changed` has and the core derives.
+            expect(indicator(el).hidden).toBe(true);
+            inner(el).focus();
+            expect(indicator(el).hidden).toBe(false);
+            expect(indicator(el).dataset.iconName).toBe('caps-lock-symbolic');
+            expect(indicator(el).title).toBe('Caps Lock is on');
+            host.remove();
+        });
+
+        await it('peeking retracts the warning in the same turn, as C does', () => {
+            const { el, host } = mount({ 'show-peek-icon': '' });
+            inner(el).focus();
+            el.setCapsLockOn(true);
+            expect(indicator(el).hidden).toBe(false);
+            el.revealed = true;
+            expect(indicator(el).hidden).toBe(true);
+            el.revealed = false;
+            expect(indicator(el).hidden).toBe(false);
+            host.remove();
+        });
+
+        await it('a keyboard event with Caps Lock engaged feeds the derivation', () => {
+            const { el, host } = mount();
+            // `modifierCapsLock` is a Firefox extension to `KeyboardEventInit` and the only
+            // way a dispatched event can report Caps Lock; `getModifierState` is not an init
+            // member, so passing it as one is silently dropped.
+            inner(el).dispatchEvent(
+                new KeyboardEvent('keydown', { key: 'A', bubbles: true, modifierCapsLock: true } as KeyboardEventInit),
+            );
+            expect(el.capsLockOn).toBe(true);
+            inner(el).dispatchEvent(new KeyboardEvent('keyup', { key: 'A', bubbles: true }));
+            expect(el.capsLockOn).toBe(false);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-password-entry> as an entry', async () => {
+        await it('keeps the value, placeholder and disabled behaviour it inherits', () => {
+            const { el, host } = mount({ value: 'hunter2', placeholder: 'Password', disabled: '' });
+            expect(el.value).toBe('hunter2');
+            expect(inner(el).placeholder).toBe('Password');
+            expect(inner(el).disabled).toBe(true);
+            host.remove();
+        });
+
+        await it('Enter activates, which Gtk.PasswordEntry signals on all forms of Enter', () => {
+            const { el, host } = mount();
+            let count = 0;
+            el.addEventListener('activate', () => (count += 1));
+            inner(el).dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }));
+            expect(count).toBe(1);
+            host.remove();
+        });
+    });
+};