@gjsify/adwaita-web 0.53.0 → 0.55.0

package/src/gtk-revealer.spec.ts

@@ -0,0 +1,164 @@
+// DOM-level tests for <gtk-revealer>. The animation is driven from a frame clock the C
+// reads from GdkFrameClock, so every assertion here drives it the way a browser can be
+// driven deterministically: `transition-duration="0"`, which is the C's own
+// "no animation" branch, plus the geometry the position produces — the clip box sized to
+// `ceil (natural × scale)` and the child's transform chain — which is the part of
+// `gtk_revealer_size_allocate` a reader of the element can actually see.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkRevealer } from './elements/gtk-revealer.js';
+
+function mount(attrs: Record<string, string> = {}): { el: GtkRevealer; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-revealer') as GtkRevealer;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    const child = document.createElement('div');
+    child.id = 'body';
+    child.style.height = '80px';
+    child.style.width = '120px';
+    el.appendChild(child);
+    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 GtkRevealerTest = async () => {
+    await describe('<gtk-revealer> state', async () => {
+        await it('starts closed, unrevealed, and named for assistive technology', () => {
+            const { el, host } = mount();
+            expect(el.revealChild).toBe(false);
+            expect(el.childRevealed).toBe(false);
+            expect(el.getAttribute('role')).toBe('group');
+            expect(el.classList.contains('revealed')).toBe(false);
+            host.remove();
+        });
+
+        await it('an unknown transition-type leaves the pspec default in place', () => {
+            const { el, host } = mount({ 'transition-type': 'slide-sideways' });
+            // `slide-down` is `GTK_REVEALER_TRANSITION_TYPE_SLIDE_DOWN`, the pspec default
+            // (gtkrevealer.c:120-128) and the answer GtkBuilder gives an unknown nick.
+            expect(el.transitionType).toBe('slide-down');
+            host.remove();
+        });
+
+        await it('duration 0 is a real duration, and a negative one is not one at all', () => {
+            const { el, host } = mount();
+            expect(el.transitionDuration).toBe(250);
+            el.transitionDuration = 0;
+            expect(el.transitionDuration).toBe(0);
+            // The pspec is a `guint`, so a negative value is not a duration — the default is
+            // what a property set of one leaves behind.
+            el.transitionDuration = -5;
+            expect(el.transitionDuration).toBe(250);
+            host.remove();
+        });
+
+        await it('a declarative reveal-child attribute lands before the first frame', async () => {
+            const { el, host } = mount({ 'reveal-child': '', 'transition-duration': '0' });
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            expect(el.revealChild).toBe(true);
+            expect(el.childRevealed).toBe(true);
+            expect(el.classList.contains('revealed')).toBe(true);
+            host.remove();
+        });
+
+        await it('re-setting the same value notifies nothing', () => {
+            const { el, host } = mount({ 'transition-duration': '0' });
+            const revealed = record(el, 'notify::reveal-child');
+            el.revealChild = true;
+            el.revealChild = true;
+            expect(revealed.length).toBe(1);
+            host.remove();
+        });
+
+        await it('notifies child-revealed when the position lands, and only then', () => {
+            const { el, host } = mount({ 'transition-duration': '0' });
+            const landed = record(el, 'notify::child-revealed');
+            el.revealChild = true;
+            expect(landed).toStrictEqual([{ childRevealed: true }]);
+            el.revealChild = false;
+            expect(landed).toStrictEqual([{ childRevealed: true }, { childRevealed: false }]);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-revealer> geometry', async () => {
+        await it("a crossfade scales neither axis, so the box is the child's own", async () => {
+            const { el, host } = mount({ 'transition-duration': '0', 'transition-type': 'crossfade' });
+            el.revealChild = true;
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            const clip = el.querySelector('.adw-revealer-clip') as HTMLElement;
+            // `get_child_size_scale` returns 1.0 for CROSSFADE on both axes, so nothing is
+            // written and the box measures the child.
+            expect(clip.style.height).toBe('');
+            expect(clip.style.width).toBe('');
+            expect(clip.getBoundingClientRect().height).toBe(80);
+            host.remove();
+        });
+
+        await it('a slide-down scales the height by the position and holds the child full size', async () => {
+            const { el, host } = mount({ 'transition-duration': '0' });
+            // Halfway through, which is the only position a duration-0 run passes through
+            // if the target is set before the first frame.
+            const clip = el.querySelector('.adw-revealer-clip') as HTMLElement;
+            const child = clip.firstElementChild as HTMLElement;
+            expect(clip.getBoundingClientRect().height).toBe(0);
+            expect(child.getBoundingClientRect().height).toBe(80);
+            // The child's transform is `translate (0, height - child_height)`, which at a
+            // closed revealer is the whole child — the C's `overflow: hidden` is what hides
+            // it, not a scaled paint.
+            expect(child.style.transform).toBe('translateY(-80px)');
+            el.revealChild = true;
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            expect(clip.getBoundingClientRect().height).toBe(80);
+            expect(child.style.transform).toBe('translateY(0px)');
+            host.remove();
+        });
+
+        await it('slide-left pins the child at its own origin and scales the width', async () => {
+            const { el, host } = mount({ 'transition-duration': '0', 'transition-type': 'slide-left' });
+            el.revealChild = true;
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            const clip = el.querySelector('.adw-revealer-clip') as HTMLElement;
+            const child = clip.firstElementChild as HTMLElement;
+            // The C's switch has no case for SLIDE_LEFT, so the chain is empty — and its
+            // scale still takes the width.
+            expect(child.style.transform).toBe('');
+            expect(clip.getBoundingClientRect().width).toBe(120);
+            host.remove();
+        });
+
+        await it('a fading type writes the position as the opacity', async () => {
+            const { el, host } = mount({ 'transition-duration': '0', 'transition-type': 'crossfade' });
+            const child = el.querySelector('.adw-revealer-clip')?.firstElementChild as HTMLElement;
+            expect(child.style.opacity).toBe('0');
+            el.revealChild = true;
+            expect(child.style.opacity).toBe('1');
+            // `none` is not a fading type at all, so the property is left unset rather than
+            // pinned to 1 — `gtk_revealer_snapshot` pushes no opacity for it.
+            el.transitionType = 'slide-down';
+            el.revealChild = false;
+            expect(child.style.opacity).toBe('');
+            host.remove();
+        });
+
+        await it('clips, so the child stays in the accessibility tree while closed', () => {
+            const { el, host } = mount();
+            // gtkrevealer.c:61-63 — "always available in the accessibility tree, regardless of
+            // the state of the revealer widget", which rules out `display: none` and
+            // `visibility: hidden` on the child.
+            expect(getComputedStyle(el).overflow).toBe('hidden');
+            const child = el.querySelector('.adw-revealer-clip')?.firstElementChild as HTMLElement;
+            expect(child.style.display).toBe('');
+            expect(child.hasAttribute('hidden')).toBe(false);
+            host.remove();
+        });
+    });
+};

package/src/gtk-scale-button.spec.ts

@@ -0,0 +1,218 @@
+// DOM-level tests for <gtk-scale-button>. Three things are ported from the C and none of
+// them is obvious: the icon FOLLOWS THE VALUE (one name for every value, two split the
+// range in half, three or more put the first at the bottom and the second at the top), the
+// steppers move by the PAGE increment and go insensitive at the ends, and `active` is
+// read-only — the dock follows it, not the other way round.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkScaleButton } from './elements/gtk-scale-button.js';
+
+function mount(attrs: Record<string, string> = {}): { el: GtkScaleButton; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-scale-button') as GtkScaleButton;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    host.appendChild(el);
+    return { el, host };
+}
+
+/** The three children of the dock, in DOM order: the minus stepper, the range, the plus. */
+function parts(el: GtkScaleButton): { minus: HTMLButtonElement; range: HTMLInputElement; plus: HTMLButtonElement } {
+    const box = el.querySelector('.scale-button-box') as HTMLElement;
+    const [minus, range, plus] = [...box.children] as [HTMLButtonElement, HTMLInputElement, HTMLButtonElement];
+    return { minus, range, plus };
+}
+
+/** The icon the button currently shows — `image-missing` when the list is empty. */
+function iconOf(el: GtkScaleButton): string | null {
+    return el.querySelector('.scale-button-glyph')?.getAttribute('icon-name') ?? null;
+}
+
+const VOLUME_ICONS = '["audio-volume-muted-symbolic","audio-volume-low-symbolic","audio-volume-high-symbolic"]';
+
+export const GtkScaleButtonTest = async () => {
+    await describe('<gtk-scale-button> defaults', async () => {
+        await it('opens at the bottom of GTK’s own 0…100 by 2 range, with a page of 20', () => {
+            const { el, host } = mount();
+            const { range } = parts(el);
+            expect(el.value).toBe(0);
+            expect(range.min).toBe('0');
+            expect(range.max).toBe('100');
+            expect(range.step).toBe('2');
+            host.remove();
+        });
+
+        await it('is vertical by default, because Gtk.ScaleButton is', () => {
+            const { el, host } = mount();
+            expect(el.orientation).toBe('vertical');
+            expect(el.classList.contains('vertical')).toBe(true);
+            el.orientation = 'horizontal';
+            expect(el.getAttribute('orientation')).toBe('horizontal');
+            expect(el.classList.contains('horizontal')).toBe(true);
+            expect(el.classList.contains('vertical')).toBe(false);
+            host.remove();
+        });
+
+        await it('has no frame, so the icon button is flat', () => {
+            const { el, host } = mount();
+            const icon = el.querySelector('.scale-button-icon') as HTMLButtonElement;
+            expect(el.hasFrame).toBe(false);
+            expect(icon.classList.contains('flat')).toBe(true);
+            el.hasFrame = true;
+            expect(icon.classList.contains('flat')).toBe(false);
+            host.remove();
+        });
+
+        await it('shows image-missing with no icon list at all', () => {
+            const { el, host } = mount();
+            expect(iconOf(el)).toBe('image-missing');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-scale-button> icon selection', async () => {
+        await it('one icon is used for every value', () => {
+            const { el, host } = mount({ icons: '["only-symbolic"]' });
+            el.value = 100;
+            expect(iconOf(el)).toBe('only-symbolic');
+            el.value = 0;
+            expect(iconOf(el)).toBe('only-symbolic');
+            host.remove();
+        });
+
+        await it('two icons split the range in half', () => {
+            const { el, host } = mount({ icons: '["low-symbolic","high-symbolic"]' });
+            expect(iconOf(el)).toBe('low-symbolic');
+            el.value = 50;
+            expect(iconOf(el)).toBe('high-symbolic');
+            host.remove();
+        });
+
+        await it('three icons put the first at the bottom and the SECOND at the top', () => {
+            const { el, host } = mount({ icons: VOLUME_ICONS, value: '50' });
+            // Two arithmetic facts of the C, both visible, neither a reading of the prose:
+            // with three names the step is the whole range, so the interior shares ONE icon
+            // (the third); and `value == upper` takes icon_list[1] — the SECOND name, which
+            // for this volume list is `audio-volume-low-symbolic`. The property doc calls it
+            // "the second item for the highest value" (:250-252), which is the same rule.
+            expect(iconOf(el)).toBe('audio-volume-high-symbolic');
+            el.value = 100;
+            expect(iconOf(el)).toBe('audio-volume-low-symbolic');
+            el.value = 0;
+            expect(iconOf(el)).toBe('audio-volume-muted-symbolic');
+            host.remove();
+        });
+
+        await it('five icons spread the interior evenly over the three that are left', () => {
+            const { el, host } = mount({
+                icons: '["a-symbolic","b-symbolic","c-symbolic","d-symbolic","e-symbolic"]',
+                value: '90',
+            });
+            // step = 100 / 3, and the index is `2 + floor((value - lower) / step)`:
+            // 90 → 4 (the fifth), 40 → 3 (the fourth), 20 → 2 (the third).
+            expect(iconOf(el)).toBe('e-symbolic');
+            el.value = 40;
+            expect(iconOf(el)).toBe('d-symbolic');
+            el.value = 20;
+            expect(iconOf(el)).toBe('c-symbolic');
+            host.remove();
+        });
+
+        await it('a malformed icons attribute is no list, and image-missing is that answer', () => {
+            const { el, host } = mount({ icons: 'audio-volume-high-symbolic' });
+            expect(el.icons).toStrictEqual([]);
+            expect(iconOf(el)).toBe('image-missing');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-scale-button> value', async () => {
+        await it('clamps into the adjustment, and notifies once per real change', () => {
+            const { el, host } = mount();
+            const changed: unknown[] = [];
+            const notified: unknown[] = [];
+            el.addEventListener('value-changed', (e) => changed.push((e as CustomEvent).detail));
+            el.addEventListener('notify::value', (e) => notified.push((e as CustomEvent).detail));
+            el.value = 500;
+            expect(el.value).toBe(100);
+            expect(el.getAttribute('value')).toBe('100');
+            el.value = 100;
+            expect(changed).toStrictEqual([{ value: 100 }]);
+            expect(notified).toStrictEqual([{ value: 100 }]);
+            host.remove();
+        });
+
+        await it('an authored adjustment replaces the range, and the value is clamped into it', () => {
+            const { el, host } = mount({
+                adjustment: '{"lower":10,"upper":30,"stepIncrement":5}',
+                value: '100',
+            });
+            const { range } = parts(el);
+            expect(range.min).toBe('10');
+            expect(range.max).toBe('30');
+            expect(range.step).toBe('5');
+            expect(el.value).toBe(30);
+            host.remove();
+        });
+
+        await it('a stepper moves by the PAGE increment, not the step', () => {
+            const { el, host } = mount();
+            const { plus, minus } = parts(el);
+            plus.click();
+            expect(el.value).toBe(20);
+            minus.click();
+            expect(el.value).toBe(0);
+            host.remove();
+        });
+
+        await it('each stepper goes insensitive at its end of the range', () => {
+            const { el, host } = mount();
+            const { plus, minus } = parts(el);
+            expect(plus.disabled).toBe(false);
+            expect(minus.disabled).toBe(true);
+            el.value = 100;
+            expect(plus.disabled).toBe(true);
+            expect(minus.disabled).toBe(false);
+            host.remove();
+        });
+
+        await it('carries the value as an ARIA range on the control that owns it', () => {
+            const { el, host } = mount({ value: '42' });
+            const { range } = parts(el);
+            expect(range.getAttribute('aria-valuenow')).toBe('42');
+            expect(range.getAttribute('aria-valuemin')).toBe('0');
+            expect(range.getAttribute('aria-valuemax')).toBe('100');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-scale-button> dock', async () => {
+        await it('pressing the icon button pops the scale up and marks the button pressed', () => {
+            const { el, host } = mount();
+            const icon = el.querySelector('.scale-button-icon') as HTMLButtonElement;
+            const dock = el.querySelector('gtk-popover') as HTMLElement;
+            const popped: string[] = [];
+            el.addEventListener('popup', () => popped.push('popup'));
+            el.addEventListener('popdown', () => popped.push('popdown'));
+            icon.click();
+            expect(el.active).toBe(true);
+            expect(icon.classList.contains('checked')).toBe(true);
+            expect(dock.hasAttribute('open')).toBe(true);
+            expect(popped).toStrictEqual(['popup']);
+            icon.click();
+            expect(el.active).toBe(false);
+            expect(dock.hasAttribute('open')).toBe(false);
+            expect(popped).toStrictEqual(['popup', 'popdown']);
+            host.remove();
+        });
+
+        await it('a value written while the dock is up does not close it', () => {
+            const { el, host } = mount();
+            const icon = el.querySelector('.scale-button-icon') as HTMLButtonElement;
+            icon.click();
+            el.value = 30;
+            expect(el.active).toBe(true);
+            host.remove();
+        });
+    });
+};

package/src/gtk-scale.spec.ts

@@ -0,0 +1,213 @@
+// DOM-level tests for <gtk-scale>. `Gtk.Scale` extends the abstract `Gtk.Range`, so the
+// surface under test is a range's plus four: the pointer mapping is `coord_to_value`, the
+// keys are `GtkScale`'s own bindings, and the value text is `gtk_scale_format_value`.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { GtkScale } from './elements/gtk-scale.js';
+
+function mount(attrs: Record<string, string> = {}): { el: GtkScale; host: HTMLElement } {
+    const host = document.createElement('div');
+    host.style.width = '300px';
+    document.body.appendChild(host);
+    const el = document.createElement('gtk-scale') as GtkScale;
+    for (const [name, value] of Object.entries(attrs)) el.setAttribute(name, value);
+    host.appendChild(el);
+    return { el, host };
+}
+
+function record(el: HTMLElement, event: string): unknown[] {
+    const details: unknown[] = [];
+    el.addEventListener(event, (e) => details.push((e as CustomEvent).detail));
+    return details;
+}
+
+/** A real press on the trough, which is what `coord_to_value` is written against. */
+function pressAt(el: GtkScale, fraction: number): void {
+    const trough = el.querySelector('.adw-scale-trough') as HTMLElement;
+    const rect = trough.getBoundingClientRect();
+    const event = new PointerEvent('pointerdown', {
+        bubbles: true,
+        cancelable: true,
+        pointerId: 1,
+        button: 0,
+        clientX: rect.left + rect.width * fraction,
+    });
+    trough.dispatchEvent(event);
+}
+
+export const GtkScaleTest = async () => {
+    await describe('<gtk-scale> range', async () => {
+        await it('is a horizontal slider over 0…100 with a step of 1', () => {
+            const { el, host } = mount();
+            expect(el.orientation).toBe('horizontal');
+            expect(el.adjustment).toStrictEqual({
+                value: 0,
+                lower: 0,
+                upper: 100,
+                stepIncrement: 1,
+                pageIncrement: 1,
+                pageSize: 0,
+            });
+            expect(el.getAttribute('role')).toBe('slider');
+            expect(el.getAttribute('aria-orientation')).toBe('horizontal');
+            expect(el.getAttribute('aria-valuemin')).toBe('0');
+            expect(el.getAttribute('aria-valuemax')).toBe('100');
+            expect(el.getAttribute('aria-valuenow')).toBe('0');
+            host.remove();
+        });
+
+        await it('takes the adjustment as the portable value, and a bound move re-clamps', () => {
+            const { el, host } = mount({ adjustment: '{"lower":10,"upper":40,"stepIncrement":5}', value: '30' });
+            expect(el.adjustment.lower).toBe(10);
+            expect(el.adjustment.upper).toBe(40);
+            expect(el.value).toBe(30);
+            el.adjustment = { upper: 20 };
+            expect(el.value).toBe(20);
+            host.remove();
+        });
+
+        await it('a declarative value emits nothing until it changes', () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const el = document.createElement('gtk-scale') as GtkScale;
+            el.setAttribute('value', '60');
+            const changed = record(el, 'value-changed');
+            host.appendChild(el);
+            expect(el.value).toBe(60);
+            expect(changed.length).toBe(0);
+            el.value = 70;
+            expect(changed).toStrictEqual([{ value: 70 }]);
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-scale> pointer and keys', async () => {
+        await it('a press on the trough moves the value to that fraction', () => {
+            const { el, host } = mount();
+            pressAt(el, 0.25);
+            expect(el.value).toBe(25);
+            pressAt(el, 0.5);
+            expect(el.value).toBe(50);
+            host.remove();
+        });
+
+        await it('an inverted horizontal scale answers the press the other way round', () => {
+            const { el, host } = mount({ inverted: '' });
+            pressAt(el, 0.25);
+            expect(el.value).toBe(75);
+            host.remove();
+        });
+
+        await it('an arrow steps and Ctrl+arrow pages, in either orientation', () => {
+            const { el, host } = mount({ adjustment: '{"lower":0,"upper":100,"stepIncrement":2,"pageIncrement":20}' });
+            const press = (key: string, ctrlKey = false) =>
+                el.dispatchEvent(new KeyboardEvent('keydown', { key, ctrlKey, bubbles: true, cancelable: true }));
+            press('ArrowRight');
+            expect(el.value).toBe(2);
+            press('ArrowLeft');
+            expect(el.value).toBe(0);
+            press('ArrowRight', true);
+            expect(el.value).toBe(20);
+            press('Home');
+            expect(el.value).toBe(0);
+            press('End');
+            expect(el.value).toBe(100);
+            host.remove();
+        });
+
+        await it('a disabled scale takes neither a press nor a key', () => {
+            const { el, host } = mount({ disabled: '' });
+            pressAt(el, 0.75);
+            el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true }));
+            expect(el.value).toBe(0);
+            expect(el.getAttribute('aria-disabled')).toBe('true');
+            host.remove();
+        });
+    });
+
+    await describe('<gtk-scale> rendering', async () => {
+        await it('positions the knob by its centre and the highlight by the same fraction', () => {
+            const { el, host } = mount({ value: '40', 'draw-value': '' });
+            const knob = el.querySelector('.adw-scale-slider') as HTMLElement;
+            const highlight = el.querySelector('.adw-scale-highlight') as HTMLElement;
+            expect(knob.style.left).toBe('40%');
+            expect(highlight.style.width).toBe('40%');
+            expect((el.querySelector('.adw-scale-value') as HTMLElement).hidden).toBe(false);
+            expect(el.getAttribute('aria-valuetext')).toBe('40.0');
+            host.remove();
+        });
+
+        await it('digits is the number of decimal places, default 1', () => {
+            const { el, host } = mount({ value: '0.5', 'draw-value': '' });
+            expect(el.digits).toBe(1);
+            expect((el.querySelector('.adw-scale-value') as HTMLElement).textContent).toBe('0.5');
+            el.setAttribute('digits', '2');
+            expect((el.querySelector('.adw-scale-value') as HTMLElement).textContent).toBe('0.50');
+            host.remove();
+        });
+
+        await it('has-origin false withdraws the highlight, show-fill-level draws the second bar', () => {
+            const { el, host } = mount({ 'has-origin': 'false', 'show-fill-level': '', 'fill-level': '60' });
+            expect((el.querySelector('.adw-scale-highlight') as HTMLElement).hidden).toBe(true);
+            expect((el.querySelector('.adw-scale-fill') as HTMLElement).hidden).toBe(false);
+            expect((el.querySelector('.adw-scale-fill') as HTMLElement).style.width).toBe('60%');
+            host.remove();
+        });
+
+        await it('round-digits rounds a dragged value half up, and -1 leaves it alone', () => {
+            const { el, host } = mount({ 'round-digits': '0' });
+            el.value = 42.5;
+            expect(el.value).toBe(43);
+            el.setAttribute('round-digits', '-1');
+            el.value = 42.5;
+            expect(el.value).toBe(42.5);
+            host.remove();
+        });
+
+        await it('a vertical scale positions the knob from the bottom', () => {
+            const { el, host } = mount({ orientation: 'vertical', value: '30' });
+            expect((el.querySelector('.adw-scale-slider') as HTMLElement).style.bottom).toBe('30%');
+            expect(el.classList.contains('vertical')).toBe(true);
+            host.remove();
+        });
+
+        await it('draw-value false hides the value text but keeps the a11y value', () => {
+            const { el, host } = mount({ value: '10' });
+            expect((el.querySelector('.adw-scale-value') as HTMLElement).hidden).toBe(true);
+            expect(el.getAttribute('aria-valuenow')).toBe('10');
+            host.remove();
+        });
+
+        // `gtk_scale_allocate` (gtkscale.c:373-421) puts the value at one EDGE of the widget,
+        // which is what the host's four `value-*` classes name — a class the element has to
+        // write, because upstream's own `update_value_position` (gtkscale.c:1042-1073) only
+        // ever puts the position on the value NODE.
+        await it('value-pos names the edge on the host and on the value node', () => {
+            const { el, host } = mount({ 'draw-value': '', 'value-pos': 'left' });
+            const value = el.querySelector('.adw-scale-value') as HTMLElement;
+            expect(el.classList.contains('value-left')).toBe(true);
+            expect(el.classList.contains('value-top')).toBe(false);
+            expect(value.classList.contains('left')).toBe(true);
+            expect(value.classList.contains('top')).toBe(false);
+            host.remove();
+        });
+
+        await it('value-pos defaults to top, follows a runtime change, and falls back to it', () => {
+            const { el, host } = mount({ 'draw-value': '' });
+            const value = el.querySelector('.adw-scale-value') as HTMLElement;
+            expect(el.valuePos).toBe('top');
+            expect(el.classList.contains('value-top')).toBe(true);
+            expect(value.classList.contains('top')).toBe(true);
+            el.setAttribute('value-pos', 'bottom');
+            expect(el.classList.contains('value-bottom')).toBe(true);
+            expect(el.classList.contains('value-top')).toBe(false);
+            expect(value.classList.contains('bottom')).toBe(true);
+            // Not one of the four nicks, so the pspec default stands.
+            el.setAttribute('value-pos', 'middle');
+            expect(el.valuePos).toBe('top');
+            expect(el.classList.contains('value-top')).toBe(true);
+            expect(el.classList.contains('value-bottom')).toBe(false);
+            host.remove();
+        });
+    });
+};