@gjsify/adwaita-web 0.53.0 → 0.55.0

package/src/gtk-stack.spec.ts

@@ -0,0 +1,432 @@
+// DOM-level tests for <gtk-stack>. The widget is four separable things and each gets
+// its own describe: WHICH CHILD is visible (the guards in `set_visible_child`, where
+// most of the surprising behaviour lives), the PAGE DESCRIPTOR (a GtkStackPage is a
+// GObject, so its properties are attributes on the child), the TRANSITION TYPE
+// (reduced motion, RTL, and the two-way types resolving to one-directional ones) and
+// the NOTIFICATION contract.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkStack } from './elements/gtk-stack.js';
+
+interface Page {
+    name: string;
+    title?: string;
+    icon?: string;
+    hidden?: boolean;
+    attention?: boolean;
+    underline?: boolean;
+    body?: string;
+}
+
+/** A stack with its pages, `<gtk-stack>` already upgraded and rendered. */
+function mount(pages: Page[] = [], attrs: Record<string, string> = {}): { el: GtkStack; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-stack') as GtkStack;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    for (const page of pages) {
+        const child = document.createElement('div');
+        if (page.title !== undefined) child.setAttribute('title', page.title);
+        if (page.icon !== undefined) child.setAttribute('icon-name', page.icon);
+        if (page.attention) child.setAttribute('needs-attention', '');
+        if (page.underline) child.setAttribute('use-underline', '');
+        if (page.hidden) child.setAttribute('hidden', '');
+        child.textContent = page.body ?? page.name;
+        el.appendChild(child);
+        child.setAttribute('name', page.name);
+    }
+    host.appendChild(el);
+    return { el, host };
+}
+
+/**
+ * A turn of the event loop.
+ *
+ * A page's own change reaches the stack through a MutationObserver — `add_page` connects
+ * the stack to the page's `notify::visible` (gtkstack.c:1771), and the browser's equivalent
+ * of a `notify` on someone else's attribute is the observer, which delivers in a
+ * microtask. GObject's notify is synchronous; this await is the one place the two differ,
+ * and it is why the three page-mutation tests below wait where the C test would not.
+ */
+function settle(): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+/** The children in DOM order, with `visible-page` marked, as the render pass sees them. */
+function marks(el: GtkStack): string[] {
+    return (Array.from(el.children) as HTMLElement[]).map(
+        (child) => `${child.getAttribute('name')}${child.classList.contains('visible-page') ? ':visible' : ''}`,
+    );
+}
+
+export const GtkStackTest = async () => {
+    await describe('<gtk-stack> defaults', async () => {
+        await it('shows the first visible page and hides every other one', () => {
+            // gtkstack.c:1773-1775 — the first page added while nothing is visible becomes
+            // the visible one, and `:2947` the role.
+            const { el, host } = mount([
+                { name: 'a', title: 'Alpha' },
+                { name: 'b', title: 'Beta' },
+            ]);
+            expect(marks(el)).toStrictEqual(['a:visible', 'b']);
+            expect(el.visibleChildName).toBe('a');
+            expect(el.getAttribute('role')).toBe('group');
+            expect(el.transitionDuration).toBe(200);
+            expect(el.transitionType).toBe('none');
+            host.remove();
+        });
+
+        await it('is homogeneous on both axes by default and anisotropic on request', () => {
+            // gtkstack.c:981-995 — both specs default TRUE.
+            const { el, host } = mount([{ name: 'a' }]);
+            expect(el.hhomogeneous).toBe(true);
+            expect(el.vhomogeneous).toBe(true);
+            el.hhomogeneous = false;
+            expect(el.hhomogeneous).toBe(false);
+            // An absent attribute is C's TRUE, so it has to read back as true after removal.
+            el.hhomogeneous = true;
+            expect(el.getAttribute('hhomogeneous')).toBe('');
+            expect(el.hhomogeneous).toBe(true);
+            host.remove();
+        });
+
+        await it('an unknown transition-type nick reads as none, the GIR default', () => {
+            // gtkstack.c:1038-1044 — the enum's default member is NONE.
+            const { el, host } = mount([{ name: 'a' }], { 'transition-type': 'cube' });
+            expect(el.transitionType).toBe('none');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-stack> which child is visible', async () => {
+        await it('setting the name of a visible page makes it visible', () => {
+            const { el, host } = mount([
+                { name: 'a', title: 'Alpha' },
+                { name: 'b', title: 'Beta' },
+            ]);
+            el.setVisibleChildName('b');
+            expect(marks(el)).toStrictEqual(['a', 'b:visible']);
+            expect(el.visibleChildName).toBe('b');
+            host.remove();
+        });
+
+        await it('an unknown name changes nothing', () => {
+            // gtkstack.c:2323-2327 — `g_warning`, then return.
+            const { el, host } = mount([
+                { name: 'a', title: 'Alpha' },
+                { name: 'b', title: 'Beta' },
+            ]);
+            expect(el.setVisibleChildName('nope')).toBe(false);
+            expect(el.visibleChildName).toBe('a');
+            host.remove();
+        });
+
+        await it('naming a page that is not visible is a no-op, not a blank stack', () => {
+            // gtkstack.c:1591-1594 / :2329-2332 — the widget must be visible itself.
+            const { el, host } = mount([
+                { name: 'a', title: 'Alpha' },
+                { name: 'b', title: 'Beta', hidden: true },
+            ]);
+            expect(el.setVisibleChildName('b')).toBe(false);
+            expect(el.visibleChildName).toBe('a');
+            host.remove();
+        });
+
+        await it('hiding the visible page falls back to the first visible one', async () => {
+            // `set_visible_child (stack, NULL)` — the first-visible scan, gtkstack.c:1437.
+            const { el, host } = mount([
+                { name: 'a', title: 'Alpha' },
+                { name: 'b', title: 'Beta' },
+            ]);
+            (el.children[0] as HTMLElement).setAttribute('hidden', '');
+            await settle();
+            expect(el.visibleChildName).toBe('b');
+            host.remove();
+        });
+
+        await it('re-selecting the visible page is not a change', () => {
+            // gtkstack.c:1452-1453 — no notify, no transition.
+            const { el, host } = mount([
+                { name: 'a', title: 'Alpha' },
+                { name: 'b', title: 'Beta' },
+            ]);
+            const events: string[] = [];
+            el.addEventListener('notify::visible-child', () => events.push('child'));
+            expect(el.setVisibleChildName('a')).toBe(false);
+            expect(events).toStrictEqual([]);
+            host.remove();
+        });
+
+        await it('a page with no name is never matched, and reads as a NULL name', () => {
+            // gtkstack.c:2314 — `info->name != NULL &&`, and get_visible_child_name
+            // returns NULL for an unnamed visible page (gtkstack.c:2220-2223).
+            const { el, host } = mount([{ name: '', title: 'Nameless' }]);
+            expect(el.visibleChildName).toBe(null);
+            expect(el.pages[0].name).toBe('');
+            expect(el.setVisibleChildName('')).toBe(false);
+            host.remove();
+        });
+
+        await it('setVisibleChild refuses a child that is not in the stack', () => {
+            // gtkstack.c:2258-2266 — `g_warning` for a child of the wrong type.
+            const { el, host } = mount([{ name: 'a', title: 'Alpha' }]);
+            const stranger = document.createElement('div');
+            expect(el.setVisibleChild(stranger)).toBe(false);
+            expect(el.visibleChildName).toBe('a');
+            host.remove();
+        });
+
+        await it('addTitled names and titles the child, and addChild appends a bare one', () => {
+            // gtkstack.c:1644-1663, :1665-1685.
+            const { el, host } = mount();
+            const child = el.addTitled(document.createElement('div'), 'later', 'Later');
+            expect(child.getAttribute('name')).toBe('later');
+            expect(child.getAttribute('title')).toBe('Later');
+            // The first visible page added to an empty stack becomes visible (:1773).
+            expect(el.visibleChildName).toBe('later');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-stack> the page descriptor', async () => {
+        await it('reads the six GtkStackPage properties off the child', () => {
+            // gtkstack.c:499-573 — the GObject's properties are the child's attributes.
+            const { el, host } = mount([
+                { name: 'a', title: 'Alpha', icon: 'go-next-symbolic', attention: true, underline: true },
+            ]);
+            expect(el.pages).toStrictEqual([
+                {
+                    name: 'a',
+                    title: 'Alpha',
+                    iconName: 'go-next-symbolic',
+                    needsAttention: true,
+                    useUnderline: true,
+                    visible: true,
+                    child: el.children[0],
+                },
+            ]);
+            host.remove();
+        });
+
+        await it('an absent title is null, never a fallback to the name', () => {
+            // rebuild_child builds no label at all when title AND icon-name are NULL
+            // (gtkstackswitcher.c:158-176) — so "no title" has to stay expressible.
+            const { el, host } = mount([{ name: 'a' }]);
+            expect(el.pages[0].title).toBe(null);
+            expect(el.pages[0].iconName).toBe(null);
+            host.remove();
+        });
+
+        await it('hidden is the page flag: the descriptor follows it', () => {
+            const { el, host } = mount([
+                { name: 'a', title: 'Alpha' },
+                { name: 'b', title: 'Beta', hidden: true },
+            ]);
+            expect(el.pages[1].visible).toBe(false);
+            host.remove();
+        });
+
+        await it('getChildByName and getPage answer in child order, null when absent', () => {
+            const { el, host } = mount([
+                { name: 'a', title: 'Alpha' },
+                { name: 'b', title: 'Beta' },
+            ]);
+            expect(el.getChildByName('b')).toBe(el.children[1]);
+            expect(el.getChildByName('nope')).toBe(null);
+            expect(el.getPage(el.children[0] as HTMLElement)?.name).toBe('a');
+            expect(el.getPage(document.createElement('div'))).toBe(null);
+            expect(el.isSelected(el.children[0] as HTMLElement)).toBe(true);
+            host.remove();
+        });
+
+        await it('renaming the visible page moves visible-child-name with it', async () => {
+            // gtkstack.c:3169-3171 — set_name re-notifies visible-child-name when the
+            // renamed page IS the visible one, because the selection did not move but the
+            // name it is addressed by did.
+            const { el, host } = mount([
+                { name: 'a', title: 'Alpha' },
+                { name: 'b', title: 'Beta' },
+            ]);
+            (el.children[0] as HTMLElement).setAttribute('name', 'renamed');
+            await settle();
+            expect(el.visibleChildName).toBe('renamed');
+            host.remove();
+        });
+
+        await it('a title change fires page-updated for the switcher to hear', async () => {
+            // `on_page_updated` binds the page's own `notify` (gtkstackswitcher.c:311-321).
+            const { el, host } = mount([{ name: 'a', title: 'Alpha' }]);
+            const updated: unknown[] = [];
+            el.addEventListener('page-updated', (e) => updated.push((e as CustomEvent).detail));
+            (el.children[0] as HTMLElement).setAttribute('title', 'Changed');
+            await settle();
+            expect(updated).toStrictEqual([{ child: el.children[0] }]);
+            expect(el.pages[0].title).toBe('Changed');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-stack> transitions', async () => {
+        await it('runs the transition and clears it when the duration is up', async () => {
+            const { el, host } = mount(
+                [
+                    { name: 'a', title: 'Alpha' },
+                    { name: 'b', title: 'Beta' },
+                ],
+                { 'transition-type': 'crossfade', 'transition-duration': '10' },
+            );
+            const events: string[] = [];
+            el.addEventListener('transition-start', () => events.push('start'));
+            el.addEventListener('transition-end', () => events.push('end'));
+            el.setVisibleChildName('b');
+            expect(el.transitionRunning).toBe(true);
+            expect(el.dataset.transitionType).toBe('crossfade');
+            expect((el.children[0] as HTMLElement).classList.contains('transitioning-out')).toBe(true);
+            expect((el.children[1] as HTMLElement).classList.contains('transitioning-in')).toBe(true);
+            await new Promise((resolve) => setTimeout(resolve, 40));
+            expect(el.transitionRunning).toBe(false);
+            expect(el.dataset.transitionType).toBe(undefined);
+            expect(events).toStrictEqual(['start', 'end']);
+            host.remove();
+        });
+
+        await it('transition-type none starts no transition at all', () => {
+            // gtkstack.c:1400-1403 — an effective type of NONE skips the tracker.
+            const { el, host } = mount([
+                { name: 'a', title: 'Alpha' },
+                { name: 'b', title: 'Beta' },
+            ]);
+            el.setVisibleChildName('b');
+            expect(el.transitionRunning).toBe(false);
+            expect(el.dataset.transitionType).toBe(undefined);
+            host.remove();
+        });
+
+        await it('a zero duration starts no transition, though the type is set', () => {
+            // gtkstack.c:1402 — `transition_duration != 0` gates the whole branch.
+            const { el, host } = mount(
+                [
+                    { name: 'a', title: 'Alpha' },
+                    { name: 'b', title: 'Beta' },
+                ],
+                { 'transition-type': 'slide-left', 'transition-duration': '0' },
+            );
+            el.setVisibleChildName('b');
+            expect(el.transitionRunning).toBe(false);
+            host.remove();
+        });
+
+        await it('a two-way type resolves to a one-directional one, by page order', () => {
+            // get_simple_transition_type (gtkstack.c:1162-1200): slide-left-right becomes
+            // slide-left when the new page was added LATER (`i_first` false) and
+            // slide-right when it was added EARLIER (`i_first` true).
+            const forward = mount(
+                [
+                    { name: 'a', title: 'Alpha' },
+                    { name: 'b', title: 'Beta' },
+                ],
+                { 'transition-type': 'slide-left-right', 'transition-duration': '50' },
+            );
+            forward.el.setVisibleChildName('b');
+            expect(forward.el.dataset.transitionType).toBe('slide-left');
+            forward.host.remove();
+
+            const backward = mount(
+                [
+                    { name: 'a', title: 'Alpha' },
+                    { name: 'b', title: 'Beta' },
+                ],
+                { 'transition-type': 'slide-left-right', 'transition-duration': '50' },
+            );
+            // Go out to `b` first, so the switch BACK to `a` is the one under test and
+            // `a` — the earlier page — is the incoming one.
+            backward.el.setVisibleChildName('b');
+            backward.el.setVisibleChildName('a');
+            expect(backward.el.dataset.transitionType).toBe('slide-right');
+            backward.host.remove();
+        });
+
+        await it('a two-way type with nothing to slide away from collapses to none', () => {
+            // gtkstack.c:1541-1545 — `child_info == NULL || last_visible_child == NULL`.
+            const { el, host } = mount(
+                [
+                    { name: 'a', title: 'Alpha', hidden: true },
+                    { name: 'b', title: 'Beta', hidden: true },
+                    { name: 'c', title: 'Gamma' },
+                ],
+                { 'transition-type': 'slide-left-right', 'transition-duration': '50' },
+            );
+            // Nothing was visible, so the first page shown has no outgoing sibling.
+            el.setVisibleChildName('c');
+            expect(el.visibleChildName).toBe('c');
+            expect(el.transitionRunning).toBe(false);
+            host.remove();
+        });
+
+        await it('interpolate-size is an attribute, and does not change the type', () => {
+            const { el, host } = mount([
+                { name: 'a', title: 'Alpha' },
+                { name: 'b', title: 'Beta' },
+            ]);
+            expect(el.interpolateSize).toBe(false);
+            el.interpolateSize = true;
+            expect(el.hasAttribute('interpolate-size')).toBe(true);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-stack> notification', async () => {
+        await it('notifies both child properties on a real change, child first', async () => {
+            // gtkstack.c:1568-1570 — the order is the two g_object_notify calls.
+            const { el, host } = mount(
+                [
+                    { name: 'a', title: 'Alpha' },
+                    { name: 'b', title: 'Beta' },
+                ],
+                { 'transition-duration': '5' },
+            );
+            const events: string[] = [];
+            el.addEventListener('notify::visible-child', () => events.push('child'));
+            el.addEventListener('notify::visible-child-name', () => events.push('name'));
+            el.setVisibleChildName('b');
+            expect(events).toStrictEqual(['child', 'name']);
+            await new Promise((resolve) => setTimeout(resolve, 20));
+            host.remove();
+        });
+
+        await it('reports the parsed property, not the raw attribute', () => {
+            const { el, host } = mount([{ name: 'a', title: 'Alpha' }]);
+            const details: unknown[] = [];
+            el.addEventListener('notify::transition-duration', (e) => details.push((e as CustomEvent).detail));
+            el.transitionDuration = 320;
+            expect(details).toStrictEqual([{ 'transition-duration': 320 }]);
+            host.remove();
+        });
+
+        await it('an added page reports items-changed, a removed one too', async () => {
+            const { el, host } = mount([
+                { name: 'a', title: 'Alpha' },
+                { name: 'b', title: 'Beta' },
+            ]);
+            const events: unknown[] = [];
+            el.addEventListener('items-changed', (e) => events.push((e as CustomEvent).detail));
+            const third = document.createElement('div');
+            third.setAttribute('name', 'c');
+            el.appendChild(third);
+            await new Promise((resolve) => setTimeout(resolve, 0));
+            expect(events).toStrictEqual([{ position: 2, removed: 0, added: 1 }]);
+            host.remove();
+        });
+
+        await it('the visible page carries no aria-hidden and the others do', async () => {
+            // gtkstack.c:1610-1613 — GTK_ACCESSIBLE_STATE_HIDDEN on the PAGE.
+            const { el, host } = mount([
+                { name: 'a', title: 'Alpha' },
+                { name: 'b', title: 'Beta' },
+            ]);
+            expect((el.children[0] as HTMLElement).hasAttribute('aria-hidden')).toBe(false);
+            expect((el.children[1] as HTMLElement).getAttribute('aria-hidden')).toBe('true');
+            host.remove();
+        });
+    });
+};

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

@@ -0,0 +1,189 @@
+// DOM-level tests for `<gtk-text-view>`: the buffer's text, the Pango properties that reach
+// a CSS mechanism (`wrap-mode`, `justification`, `monospace`, the four margins,
+// `cursor-visible`) and `accepts-tab`, whose GTK default is the OPPOSITE of a browser's.
+//
+// The paragraph sppacings are not here: they are Pango's paragraph model, which a textarea
+// has no counterpart for, and they are declared in `check-adwaita-element-properties.mjs`.
+
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkTextView } from './elements/gtk-text-view.js';
+
+function mount(text = ''): GtkTextView {
+    const el = document.createElement('gtk-text-view') as GtkTextView;
+    el.textContent = text;
+    document.body.appendChild(el);
+    return el;
+}
+
+function unmountAll(): void {
+    for (const el of Array.from(document.querySelectorAll('gtk-text-view'))) el.remove();
+}
+
+/**
+ * A Tab the element has to intercept: a synthetic keydown is all a test can produce. The
+ * caret is placed explicitly, because where a fresh control leaves it is the engine's
+ * choice and the row is about the INSERTION.
+ */
+function pressTab(textarea: HTMLTextAreaElement, at = 0): KeyboardEvent {
+    textarea.setSelectionRange(at, at);
+    const event = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true });
+    textarea.dispatchEvent(event);
+    return event;
+}
+
+export const GtkTextViewTest = async () => {
+    await describe('<gtk-text-view> the buffer', async () => {
+        await it('takes its text from the light DOM, which is where a buffer goes', () => {
+            const el = mount('one\ntwo');
+            expect(el.text).toBe('one\ntwo');
+            expect(el.textarea.value).toBe('one\ntwo');
+            unmountAll();
+        });
+
+        await it('lets an explicit `text` attribute win over it', () => {
+            const el = mount('light dom');
+            el.setAttribute('text', 'from the attribute');
+            unmountAll();
+            const second = document.createElement('gtk-text-view') as GtkTextView;
+            second.textContent = 'light dom';
+            second.setAttribute('text', 'from the attribute');
+            document.body.appendChild(second);
+            expect(second.text).toBe('from the attribute');
+            second.remove();
+        });
+
+        await it("re-emits the buffer's `changed` on an edit", () => {
+            const el = mount('a');
+            const seen: unknown[] = [];
+            el.addEventListener('changed', (event) => seen.push((event as CustomEvent).detail));
+            el.textarea.value = 'ab';
+            el.textarea.dispatchEvent(new Event('input', { bubbles: true }));
+            expect(seen).toStrictEqual([{ text: 'ab' }]);
+            unmountAll();
+        });
+    });
+
+    await describe('<gtk-text-view> wrap mode', async () => {
+        await it("defaults to Pango's `none`, so lines do not wrap", () => {
+            const el = mount();
+            expect(el.wrapMode).toBe('none');
+            expect(getComputedStyle(el.textarea).whiteSpace).toBe('pre');
+            unmountAll();
+        });
+
+        await it('maps each Pango nick onto the CSS that breaks lines the same way', () => {
+            const el = mount();
+            el.wrapMode = 'word';
+            expect(getComputedStyle(el.textarea).whiteSpace).toBe('pre-wrap');
+            expect(getComputedStyle(el.textarea).wordBreak).toBe('normal');
+            el.wrapMode = 'char';
+            expect(getComputedStyle(el.textarea).wordBreak).toBe('break-all');
+            el.wrapMode = 'word-char';
+            expect(getComputedStyle(el.textarea).overflowWrap).toBe('anywhere');
+            unmountAll();
+        });
+
+        await it('reads an unknown nick as the pspec default, `none`', () => {
+            const el = mount();
+            el.setAttribute('wrap-mode', 'diagonal');
+            expect(el.wrapMode).toBe('none');
+            unmountAll();
+        });
+    });
+
+    await describe('<gtk-text-view> justification and margins', async () => {
+        await it("reads Pango's justification as `text-align`, `fill` included", () => {
+            const el = mount();
+            expect(el.justification).toBe('left');
+            expect(getComputedStyle(el.textarea).textAlign).toBe('start');
+            el.justification = 'fill';
+            expect(getComputedStyle(el.textarea).textAlign).toBe('justify');
+            el.justification = 'center';
+            expect(getComputedStyle(el.textarea).textAlign).toBe('center');
+            unmountAll();
+        });
+
+        await it('turns the four margins into padding the theme ADDS to, as GTK says', () => {
+            const el = mount();
+            expect(getComputedStyle(el.textarea).paddingTop).toBe('6px');
+            el.topMargin = 12;
+            el.rightMargin = 4;
+            el.bottomMargin = 2;
+            el.leftMargin = 8;
+            const style = getComputedStyle(el.textarea);
+            expect(style.paddingTop).toBe('18px');
+            expect(style.paddingRight).toBe('10px');
+            expect(style.paddingBottom).toBe('8px');
+            expect(style.paddingLeft).toBe('14px');
+            unmountAll();
+        });
+
+        await it("floors a margin at zero, like the pspec's own minimum", () => {
+            const el = mount();
+            el.topMargin = -20;
+            expect(el.topMargin).toBe(0);
+            unmountAll();
+        });
+    });
+
+    await describe('<gtk-text-view> monospace', async () => {
+        await it("is libadwaita's own `.monospace` class, reaching the inner control", () => {
+            const el = mount();
+            const plain = getComputedStyle(el.textarea).fontFamily;
+            el.monospace = true;
+            expect(el.classList.contains('monospace')).toBe(true);
+            expect(getComputedStyle(el.textarea).fontFamily).not.toBe(plain);
+            unmountAll();
+        });
+    });
+
+    await describe('<gtk-text-view> editable and the cursor', async () => {
+        await it('is editable with a visible cursor by default', () => {
+            const el = mount();
+            expect(el.editable).toBe(true);
+            expect(el.cursorVisible).toBe(true);
+            expect(el.textarea.readOnly).toBe(false);
+            expect(getComputedStyle(el.textarea).caretColor).not.toBe('transparent');
+            unmountAll();
+        });
+
+        await it('takes both from a VALUE, because both pspecs default TRUE', () => {
+            const el = mount();
+            el.setAttribute('editable', 'false');
+            el.setAttribute('cursor-visible', 'false');
+            expect(el.editable).toBe(false);
+            expect(el.cursorVisible).toBe(false);
+            expect(el.textarea.readOnly).toBe(true);
+            // `caret-color: transparent` computes to `rgba(0, 0, 0, 0)` on some engines and
+            // to the keyword on others, so the row compares against a probe carrying the same
+            // declaration rather than naming either spelling.
+            const probe = document.createElement('textarea');
+            probe.style.caretColor = 'transparent';
+            document.body.appendChild(probe);
+            expect(getComputedStyle(el.textarea).caretColor).toBe(getComputedStyle(probe).caretColor);
+            probe.remove();
+            unmountAll();
+        });
+    });
+
+    await describe('<gtk-text-view> accepts tab', async () => {
+        await it('defaults TRUE, so Tab inserts a tab character and focus stays', () => {
+            const el = mount('ab');
+            expect(el.acceptsTab).toBe(true);
+            const event = pressTab(el.textarea, 1);
+            expect(event.defaultPrevented).toBe(true);
+            expect(el.text).toBe('a\tb');
+            unmountAll();
+        });
+
+        await it('gives the browser its own Tab back when it is FALSE', () => {
+            const el = mount('ab');
+            el.acceptsTab = false;
+            const event = pressTab(el.textarea);
+            expect(event.defaultPrevented).toBe(false);
+            expect(el.text).toBe('ab');
+            unmountAll();
+        });
+    });
+};