@gjsify/adwaita-web 0.30.0 → 0.32.0

package/src/adw-switch.spec.ts

@@ -0,0 +1,242 @@
+// DOM-level tests for <adw-switch>, plus the REGRESSION PROOF that lifting it
+// out of <adw-switch-row> and <adw-expander-row> left both rows working.
+//
+// What the extraction removed: `_expander_row.scss:73-121` was a
+// character-for-character copy of `_switch_row.scss:15-63` (same 44×24 box, same
+// hidden input, same 20px knob, same `translateX(20px)`, same focus ring),
+// because `_switch_row.scss:9` opened `adw-switch-row {` and nested `.adw-switch`
+// inside it — so the class did not exist anywhere else and the expander row could
+// not reuse it. Two consequences this suite pins down:
+//
+//   - the GEOMETRY now comes from ONE unscoped partial. `measure()` compares the
+//     computed box of the row's switch against the expander's; before the lift
+//     they were two independently-maintained blocks that happened to agree, and
+//     deleting either one silently unstyled its widget.
+//   - the EVENTS are unchanged. Both rows compose an element that emits its own
+//     `notify::active`, so each row stops it at the switch and publishes its own
+//     name — a row listener must still see exactly one event per toggle.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { AdwExpanderRow } from './elements/adw-expander-row.js';
+import type { AdwSwitch } from './elements/adw-switch.js';
+import type { AdwSwitchRow } from './elements/adw-switch-row.js';
+
+function mount<T extends HTMLElement>(tag: string): { el: T; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement(tag) as T;
+    host.appendChild(el);
+    return { el, host };
+}
+
+/** Collect the `detail` of every `event` dispatched on (or bubbling to) `el`. */
+function record(el: HTMLElement, event: string): unknown[] {
+    const details: unknown[] = [];
+    el.addEventListener(event, (e) => details.push((e as CustomEvent).detail));
+    return details;
+}
+
+/** The switch's own parts, by the markup contract the stylesheet selects on. */
+function parts(sw: AdwSwitch): { input: HTMLInputElement; slider: HTMLElement } {
+    return {
+        input: sw.querySelector('input[type="checkbox"]') as HTMLInputElement,
+        slider: sw.querySelector('.adw-switch-slider') as HTMLElement,
+    };
+}
+
+/** The rendered track box — the thing the two copies used to declare separately. */
+function measure(sw: HTMLElement): { width: string; height: string; radius: string } {
+    const box = getComputedStyle(sw);
+    const slider = getComputedStyle(sw.querySelector('.adw-switch-slider') as HTMLElement);
+    return { width: box.width, height: box.height, radius: slider.borderTopLeftRadius };
+}
+
+export const AdwSwitchTest = async () => {
+    await describe('<adw-switch> state', async () => {
+        await it('starts off and builds the input + slider markup', () => {
+            const { el, host } = mount<AdwSwitch>('adw-switch');
+            const { input, slider } = parts(el);
+            expect(el.active).toBe(false);
+            expect(input).toBeTruthy();
+            expect(input.checked).toBe(false);
+            // The focus ring is `input:focus-visible + .adw-switch-slider`, so the
+            // slider MUST be the input's immediate next sibling.
+            expect(input.nextElementSibling).toBe(slider);
+            expect(el.classList.contains('adw-switch')).toBe(true);
+            host.remove();
+        });
+
+        await it('adopts a declarative active attribute without emitting', () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const el = document.createElement('adw-switch') as AdwSwitch;
+            el.setAttribute('active', '');
+            const events = record(el, 'notify::active');
+            host.appendChild(el);
+            expect(el.active).toBe(true);
+            expect(parts(el).input.checked).toBe(true);
+            expect(events.length).toBe(0);
+            host.remove();
+        });
+
+        await it('a programmatic set notifies, and re-setting the same value does not', () => {
+            const { el, host } = mount<AdwSwitch>('adw-switch');
+            const events = record(el, 'notify::active');
+            el.active = true;
+            expect(events).toStrictEqual([{ active: true }]);
+            el.active = true;
+            expect(events.length).toBe(1);
+            el.active = false;
+            expect(events.length).toBe(2);
+            expect(parts(el).input.checked).toBe(false);
+            host.remove();
+        });
+
+        await it('a click on the track toggles exactly once', () => {
+            const { el, host } = mount<AdwSwitch>('adw-switch');
+            const events = record(el, 'notify::active');
+            parts(el).slider.click();
+            expect(el.active).toBe(true);
+            expect(el.hasAttribute('active')).toBe(true);
+            expect(events.length).toBe(1);
+            host.remove();
+        });
+
+        await it('a click on the hidden checkbox toggles exactly once', () => {
+            // The checkbox is 0×0, so a pointer never reaches it — but keyboard
+            // activation and `input.click()` do, and the track listener must not
+            // toggle a second time on the way out.
+            const { el, host } = mount<AdwSwitch>('adw-switch');
+            const events = record(el, 'notify::active');
+            parts(el).input.click();
+            expect(el.active).toBe(true);
+            expect(events.length).toBe(1);
+            host.remove();
+        });
+
+        await it('a disabled switch does not toggle', () => {
+            const { el, host } = mount<AdwSwitch>('adw-switch');
+            el.disabled = true;
+            const events = record(el, 'notify::active');
+            parts(el).slider.click();
+            expect(el.active).toBe(false);
+            expect(events.length).toBe(0);
+            expect(parts(el).input.disabled).toBe(true);
+            expect(el.classList.contains('disabled')).toBe(true);
+            // …but it is not frozen: a programmatic set still applies, matching
+            // GObject property semantics (sensitivity gates INPUT, not the value).
+            el.active = true;
+            expect(events).toStrictEqual([{ active: true }]);
+            host.remove();
+        });
+    });
+
+    await describe('<adw-switch-row> still toggles and emits through <adw-switch>', async () => {
+        await it('a programmatic row.active drives the switch and emits once', () => {
+            const { el: row, host } = mount<AdwSwitchRow>('adw-switch-row');
+            const events = record(row, 'notify::active');
+            const sw = row.querySelector('adw-switch') as AdwSwitch;
+            expect(sw).toBeTruthy();
+
+            row.active = true;
+
+            expect(sw.active).toBe(true);
+            expect(parts(sw).input.checked).toBe(true);
+            expect(row.getAttribute('aria-checked')).toBe('true');
+            // ONE event: the composed switch's identically-named notify is
+            // stopped at the switch so it cannot reach a row listener as a second.
+            expect(events).toStrictEqual([{ active: true }]);
+            host.remove();
+        });
+
+        await it('a click on the row toggles and emits once', () => {
+            const { el: row, host } = mount<AdwSwitchRow>('adw-switch-row');
+            const events = record(row, 'notify::active');
+            row.click();
+            expect(row.active).toBe(true);
+            expect((row.querySelector('adw-switch') as AdwSwitch).active).toBe(true);
+            expect(events.length).toBe(1);
+            host.remove();
+        });
+
+        await it('a click on the switch toggles the row once, not twice', () => {
+            const { el: row, host } = mount<AdwSwitchRow>('adw-switch-row');
+            const events = record(row, 'notify::active');
+            const sw = row.querySelector('adw-switch') as AdwSwitch;
+            parts(sw).slider.click();
+            expect(row.active).toBe(true);
+            expect(events.length).toBe(1);
+            host.remove();
+        });
+    });
+
+    await describe('<adw-expander-row> still toggles its enable switch', async () => {
+        await it('a user toggle flips enable-expansion and emits once', () => {
+            const { el: row, host } = mount<AdwExpanderRow>('adw-expander-row');
+            row.setAttribute('show-enable-switch', '');
+            const events = record(row, 'notify::enable-expansion');
+            const sw = row.querySelector('adw-switch') as AdwSwitch;
+            expect(sw.active).toBe(true); // enable-expansion defaults to true
+
+            parts(sw).slider.click();
+
+            expect(row.enableExpansion).toBe(false);
+            expect(row.getAttribute('enable-expansion')).toBe('false');
+            expect(events).toStrictEqual([{ enableExpansion: false }]);
+            host.remove();
+        });
+
+        await it('a programmatic enableExpansion re-syncs the switch silently', () => {
+            // The row's published event is for USER changes, as it always was —
+            // the composed switch notifies on every change, so the row has to
+            // know which writes are its own.
+            const { el: row, host } = mount<AdwExpanderRow>('adw-expander-row');
+            row.setAttribute('show-enable-switch', '');
+            const enableEvents = record(row, 'notify::enable-expansion');
+            const activeEvents = record(row, 'notify::active');
+
+            row.enableExpansion = false;
+
+            expect((row.querySelector('adw-switch') as AdwSwitch).active).toBe(false);
+            expect(enableEvents.length).toBe(0);
+            // The switch's own notify never escapes the row either.
+            expect(activeEvents.length).toBe(0);
+            host.remove();
+        });
+
+        await it('a click on the enable switch does not disclose the row', () => {
+            const { el: row, host } = mount<AdwExpanderRow>('adw-expander-row');
+            row.setAttribute('show-enable-switch', '');
+            const sw = row.querySelector('adw-switch') as AdwSwitch;
+
+            parts(sw).slider.click();
+            expect(row.expanded).toBe(false);
+
+            (row.querySelector('.adw-expander-row-header') as HTMLElement).click();
+            expect(row.expanded).toBe(true);
+            host.remove();
+        });
+    });
+
+    await describe('one switch stylesheet reaches both rows', async () => {
+        await it('the row and the expander render the SAME track box', () => {
+            const { el: row, host: rowHost } = mount<AdwSwitchRow>('adw-switch-row');
+            const { el: expander, host: expanderHost } = mount<AdwExpanderRow>('adw-expander-row');
+            expander.setAttribute('show-enable-switch', '');
+
+            const rowBox = measure(row.querySelector('adw-switch') as HTMLElement);
+            const expanderBox = measure(expander.querySelector('adw-switch') as HTMLElement);
+
+            expect(rowBox).toStrictEqual(expanderBox);
+            // Pin the actual numbers too, so "both unstyled" cannot pass as
+            // "both agree". This is refs/adwaita-web's geometry, NOT libadwaita's
+            // (which is a 3px-padded trough around a 20px slider) — see the
+            // fidelity note in scss/_switch.scss.
+            expect(rowBox.width).toBe('44px');
+            expect(rowBox.height).toBe('24px');
+
+            rowHost.remove();
+            expanderHost.remove();
+        });
+    });
+};

package/src/adw-tab-view.spec.ts

@@ -2,7 +2,11 @@
 // @gjsify/adwaita-web browser test axis (the entry self-applies the compiled
 // stylesheet, so computed-style assertions are valid). Asserts page building,
 // selected↔click sync, notify/close events, and the expand-tabs / no-close
-// attributes.
+// attributes — i.e. the DOM/CSS surface.
+//
+// The MODEL is asserted in `tab-view.spec.ts`, against the shared libadwaita
+// conformance vectors. Keep the split: this file is about markup and computed
+// style, that one is about behaviour both renderers must agree on.
 import { describe, expect, it } from '@gjsify/unit';
 
 import type { AdwTabView } from './elements/adw-tab-view.js';
@@ -51,7 +55,7 @@ export const AdwTabViewTest = async () => {
             view.parentElement?.remove();
         });
 
-        await it('emits close-page from the close affordance', async () => {
+        await it('emits close-page from the close affordance AND removes the page', async () => {
             const view = makeTabView();
             let closed = -1;
             view.addEventListener('close-page', (event) => {
@@ -59,7 +63,12 @@ export const AdwTabViewTest = async () => {
             });
             (view.querySelectorAll('.adw-tab-close')[1] as HTMLButtonElement).click();
             expect(closed).toBe(1);
-            // Closing must not also select the tab.
+            // The element used to emit and remove NOTHING, so every close was
+            // permanently denied; the default handler now confirms a non-pinned
+            // page (close_page_cb, adw-tab-view.c:1990-1991).
+            expect(view.querySelectorAll('.adw-tab').length).toBe(2);
+            // Closing a page BEFORE the selection must not also select the tab,
+            // and must leave the selected PAGE selected (adw-tab-view.c:1864-1865).
             expect(view.selected).toBe(0);
             view.parentElement?.remove();
         });

package/src/adw-view-switcher-bar.spec.ts

@@ -1,31 +1,79 @@
 // adw-view-switcher-bar visibility regression (browser axis). Guards that the
-// `revealed` flag actually shows/hides the bar. The bar's base scss sets
+// derived reveal state actually shows/hides the bar. The bar's base scss sets
 // `display: block`, an AUTHOR rule that would defeat the UA `[hidden]{display:none}`
 // the component relies on (cascade origin beats specificity) — so an unrevealed
 // bar rendered visible until scss/_view_switcher_bar.scss re-asserted
 // `&[hidden] { display: none }`. This test pins that fix.
+//
+// It now stages the bar against a real two-page <adw-view-stack>, because the
+// request alone is no longer enough: `update_bar_revealed` reveals the bar only
+// when `reveal` is set AND MORE THAN ONE page is visible
+// (refs/libadwaita/src/adw-view-switcher-bar.c:104-126), a rule the port used to
+// skip entirely. The one-page case is asserted here too — it is the state the old
+// bar rendered as an empty strip. The full derivation is driven from the shared
+// conformance vectors in `view-switcher.spec.ts`.
 import { describe, expect, it } from '@gjsify/unit';
 
+import type { AdwViewStack } from './elements/adw-view-stack.js';
+import type { AdwViewSwitcherBar } from './elements/adw-view-switcher-bar.js';
+
+/** A bar bound to a stack of `count` visible pages, both mounted. */
+function mountBar(count: number): { bar: AdwViewSwitcherBar; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+
+    const stack = document.createElement('adw-view-stack') as AdwViewStack;
+    for (let index = 0; index < count; index++) {
+        const page = document.createElement('adw-view-stack-page');
+        page.setAttribute('name', `p${index}`);
+        page.setAttribute('title', `P${index}`);
+        stack.appendChild(page);
+    }
+    host.appendChild(stack);
+
+    const bar = document.createElement('adw-view-switcher-bar') as AdwViewSwitcherBar;
+    host.appendChild(bar);
+    bar.setStack(stack);
+    return { bar, host };
+}
+
 export const AdwViewSwitcherBarTest = async () => {
-    await describe('adw-view-switcher-bar revealed → visibility', async () => {
-        await it('is display:none by default (not revealed) and block once revealed', async () => {
-            const bar = document.createElement('adw-view-switcher-bar');
-            document.body.appendChild(bar);
-
-            // Default: `revealed` absent → the component sets `hidden`, and the
-            // scss `[hidden]` author rule must win over the base `display: block`.
-            expect(bar.hasAttribute('revealed')).toBe(false);
+    await describe('adw-view-switcher-bar reveal → visibility', async () => {
+        await it('is display:none by default and block once revealed', () => {
+            const { bar, host } = mountBar(2);
+
+            // Default: `reveal` off → the component sets `hidden`, and the scss
+            // `[hidden]` author rule must win over the base `display: block`.
+            expect(bar.reveal).toBe(false);
             expect(getComputedStyle(bar).display).toBe('none');
 
-            // Reveal it → shown.
-            bar.setAttribute('revealed', '');
+            bar.setAttribute('reveal', '');
             expect(getComputedStyle(bar).display).toBe('block');
 
             // Hide it again → back to none (the round-trip, not a one-way latch).
-            bar.removeAttribute('revealed');
+            bar.removeAttribute('reveal');
             expect(getComputedStyle(bar).display).toBe('none');
 
-            bar.remove();
+            host.remove();
+        });
+
+        await it('still accepts the legacy `revealed` attribute as the request', () => {
+            const { bar, host } = mountBar(2);
+            bar.setAttribute('revealed', '');
+            expect(bar.reveal).toBe(true);
+            expect(getComputedStyle(bar).display).toBe('block');
+            host.remove();
+        });
+
+        await it('stays collapsed for a ONE-page stack, however loudly the layout asks', () => {
+            // `count > 1` (adw-view-switcher-bar.c:125). The old bar showed an
+            // empty strip here because it never consulted the page count.
+            const { bar, host } = mountBar(1);
+            bar.reveal = true;
+            expect(bar.reveal).toBe(true);
+            expect(bar.revealed).toBe(false);
+            expect(getComputedStyle(bar).display).toBe('none');
+            host.remove();
         });
     });
 };

package/src/adw-wrap-box.spec.ts

@@ -0,0 +1,194 @@
+// DOM-level conformance tests for <adw-wrap-box>, driven by the SAME tables the
+// NativeScript renderer asserts against (`@gjsify/adwaita-core/conformance`).
+//
+// There were no wrap-box specs at all, which is how sixteen divergences from
+// `Adw.WrapBox` sat untouched (issue #1048). Three of them were wrong answers to
+// the one question that IS portable — where a line's leftover space goes:
+//
+//   - `align` was written to `align-items`, the CROSS axis, where libadwaita
+//     applies it as a MAIN-axis offset of the whole line block
+//     (adw-wrap-layout.c:717-725), so `align="1"` pushed children DOWN;
+//   - `JUSTIFY_MAP` mapped `fill` and `spread` to the same `space-between`,
+//     where C grows the CHILDREN for one and the GAPS for the other
+//     (adw-wrap-layout.c:317-341);
+//   - `justify-last-line` was observed and never read, so the final line was
+//     always justified — the opposite of the C default (adw-wrap-box.c:379-381).
+//
+// The element publishes its resolved decision as `data-line-justify` (what
+// governs a complete line) and `data-last-line-justify` (what governs the final
+// one), which is both what the stylesheet keys off and what these vectors read:
+// the rendered `justify-content` / `flex-grow` are asserted alongside, so a
+// correct data attribute with a stylesheet that ignores it still fails.
+
+import { describe, expect, it } from '@gjsify/unit';
+
+import {
+    WRAP_BOX_LINE_VECTORS,
+    WRAP_BOX_SPACING_NOTIFY_VECTORS,
+    WRAP_BOX_SPACING_VECTORS,
+} from '@gjsify/adwaita-core/conformance';
+
+/** Mount a wrap box with `n` block children and the given attributes. */
+function mountWrapBox(attrs: Record<string, string>, n = 3): { box: HTMLElement; children: HTMLElement[] } {
+    const box = document.createElement('adw-wrap-box');
+    for (const [name, value] of Object.entries(attrs)) box.setAttribute(name, value);
+    const children: HTMLElement[] = [];
+    for (let i = 0; i < n; i++) {
+        const child = document.createElement('div');
+        child.textContent = `item ${i}`;
+        box.appendChild(child);
+        children.push(child);
+    }
+    document.body.appendChild(box);
+    return { box, children };
+}
+
+/** Remove every wrap box a test mounted. */
+function unmountAll(): void {
+    for (const box of Array.from(document.querySelectorAll('adw-wrap-box'))) box.remove();
+}
+
+/** A vector value as it reads in a test name (`JSON.stringify` flattens NaN to null). */
+function label(value: number | string | null): string {
+    return typeof value === 'string' ? JSON.stringify(value) : String(value);
+}
+
+/**
+ * `justify-content` for an un-justified line at `align`.
+ *
+ * C offsets the line block by `roundf (length_delta * align)`, a continuum;
+ * flexbox has three positions, so the port takes the nearest one. That
+ * approximation lives here rather than in the vectors because it is the browser
+ * renderer's, not libadwaita's.
+ */
+function expectedJustifyContent(align: number): string {
+    if (align < 0.25) return 'flex-start';
+    if (align < 0.75) return 'center';
+    return 'flex-end';
+}
+
+export const AdwWrapBoxTest = async () => {
+    await describe('<adw-wrap-box> line layout (Adw.WrapBox justify / align / justify-last-line)', async () => {
+        for (const vector of WRAP_BOX_LINE_VECTORS) {
+            const title =
+                `justify=${vector.justify} last-line=${vector.justifyLastLine} align=${vector.align} ` +
+                `${vector.lastLine ? 'final' : 'complete'} line of ${vector.childrenInLine}`;
+
+            await it(`${title}: ${vector.rule}`, () => {
+                const attrs: Record<string, string> = { justify: vector.justify, align: String(vector.align) };
+                if (vector.justifyLastLine) attrs['justify-last-line'] = '';
+                // A box with ONE child has exactly one line, and that line is the
+                // final one — the only line membership CSS can know without a
+                // layout pass, and the reason the stylesheet has an `:only-child`
+                // rule at all.
+                const childCount = vector.childrenInLine === 1 ? 1 : 3;
+                const { box, children } = mountWrapBox(attrs, childCount);
+
+                const resolved = vector.lastLine ? box.dataset.lastLineJustify : box.dataset.lineJustify;
+                expect(resolved).toBe(vector.layout.justify);
+
+                if (!vector.lastLine && vector.childrenInLine > 1) {
+                    // `justify-content` is the container knob, and a flex
+                    // container applies it to every line — so it carries the
+                    // COMPLETE-line rule.
+                    expect(getComputedStyle(box).justifyContent).toBe(
+                        vector.layout.growGaps ? 'space-between' : expectedJustifyContent(vector.layout.align),
+                    );
+                }
+
+                if (vector.lastLine && vector.childrenInLine === 1) {
+                    expect(getComputedStyle(children[0]).flexGrow).toBe(vector.layout.growChildren ? '1' : '0');
+                }
+
+                unmountAll();
+            });
+        }
+
+        await it('align is a MAIN-axis offset, never a cross-axis one', () => {
+            const { box } = mountWrapBox({ align: '1' });
+            const style = getComputedStyle(box);
+            expect(style.justifyContent).toBe('flex-end');
+            // The cross axis is libadwaita's `h = line_size` — every child takes
+            // the full line extent (adw-wrap-layout.c:746-751).
+            expect(style.alignItems).toBe('stretch');
+            unmountAll();
+        });
+
+        await it('fill grows the children and keeps the gaps; spread does the opposite', () => {
+            const filled = mountWrapBox({ justify: 'fill', 'justify-last-line': '', 'child-spacing': '10' });
+            expect(getComputedStyle(filled.children[0]).flexGrow).toBe('1');
+            expect(getComputedStyle(filled.box).justifyContent).toBe('flex-start');
+            expect(getComputedStyle(filled.box).columnGap).toBe('10px');
+            unmountAll();
+
+            const spread = mountWrapBox({ justify: 'spread', 'justify-last-line': '', 'child-spacing': '10' });
+            expect(getComputedStyle(spread.children[0]).flexGrow).toBe('0');
+            expect(getComputedStyle(spread.box).justifyContent).toBe('space-between');
+            unmountAll();
+        });
+
+        await it('a spread box whose last line is not justified gets the filler that packs it', () => {
+            const { box } = mountWrapBox({ justify: 'spread' });
+            // The only per-line hook flexbox offers: a generated flex item on the
+            // final line that absorbs its leftover, so the line packs at the start
+            // the way an un-justified line does.
+            expect(getComputedStyle(box, '::after').flexGrow).toBe('1');
+            unmountAll();
+
+            const justified = mountWrapBox({ justify: 'spread', 'justify-last-line': '' });
+            expect(getComputedStyle(justified.box, '::after').flexGrow).toBe('0');
+            unmountAll();
+        });
+
+        await it('an unknown justify value falls back to the default, as an invalid enum does', () => {
+            const { box } = mountWrapBox({ justify: 'stretch-everything' });
+            expect(box.dataset.lineJustify).toBe('none');
+            unmountAll();
+        });
+    });
+
+    await describe('<adw-wrap-box> spacing (adw_wrap_box_set_child_spacing)', async () => {
+        for (const vector of WRAP_BOX_SPACING_VECTORS) {
+            await it(`child-spacing ${label(vector.value)} → ${vector.spacing}: ${vector.rule}`, () => {
+                const attrs: Record<string, string> = {};
+                if (vector.value !== null) attrs['child-spacing'] = String(vector.value);
+                const { box } = mountWrapBox(attrs);
+
+                expect((box as HTMLElement & { childSpacing: number }).childSpacing).toBe(vector.spacing);
+                expect(getComputedStyle(box).columnGap).toBe(`${vector.spacing}px`);
+                unmountAll();
+            });
+
+            await it(`line-spacing ${label(vector.value)} → ${vector.spacing}: ${vector.rule}`, () => {
+                const attrs: Record<string, string> = {};
+                if (vector.value !== null) attrs['line-spacing'] = String(vector.value);
+                const { box } = mountWrapBox(attrs);
+
+                expect((box as HTMLElement & { lineSpacing: number }).lineSpacing).toBe(vector.spacing);
+                expect(getComputedStyle(box).rowGap).toBe(`${vector.spacing}px`);
+                unmountAll();
+            });
+        }
+
+        await it('a vertical box swaps which gap the two spacings drive', () => {
+            const { box } = mountWrapBox({ orientation: 'vertical', 'child-spacing': '8', 'line-spacing': '4' });
+            const style = getComputedStyle(box);
+            expect(style.rowGap).toBe('8px');
+            expect(style.columnGap).toBe('4px');
+            unmountAll();
+        });
+
+        for (const vector of WRAP_BOX_SPACING_NOTIFY_VECTORS) {
+            await it(`notify::child-spacing ${vector.from} → ${label(vector.value)} = ${vector.notifies}: ${vector.rule}`, () => {
+                const { box } = mountWrapBox({ 'child-spacing': String(vector.from) });
+                let notified = 0;
+                box.addEventListener('notify::child-spacing', () => {
+                    notified++;
+                });
+                box.setAttribute('child-spacing', String(vector.value));
+                expect(notified).toBe(vector.notifies ? 1 : 0);
+                unmountAll();
+            });
+        }
+    });
+};