@gjsify/adwaita-web 0.61.0 → 0.63.0

package/src/elements/gtk-window.ts

@@ -47,7 +47,7 @@
 // difference a reader of the DOM can see.
 //
 // NOT PORTED, and why — these are the KNOWN_GAPS of this element:
-//   `application`, `child`, `default-widget`, `display`, `focus-widget` — WIDGET- or
+//   `application`, `child`, `default-widget`, `display` — WIDGET- or
 //     DISPLAY-typed, so a slot or an id here rather than an attribute; `child` and
 //     `titlebar` ARE slots and `transient-for` only has to be PRESENT.
 //   `destroy-with-parent` — a DOM node has no destroy, and a page has no parent to destroy.
@@ -59,15 +59,32 @@
 //     business and needs the `Gio.MenuModel` it is built from (:1150).
 //   `startup-id` — write-only, and written by the launcher that started the application (:883).
 //
+// THE STATE MEMBERS, and what each is in a page (the shared rules — notify only on change, the
+// close sequence — live in `@gjsify/adwaita-core`'s `window-members.ts`):
+//   `is-active`    — the DOCUMENT has focus and this frame is connected and shown. A page has one
+//                    focus for all its windows, so every shown frame is active together; that is
+//                    the honest limit of a frame (`document.hasFocus()`, window focus/blur and
+//                    `visibilitychange` feed it). Read-only, as in GTK.
+//   `focus-widget` — the element inside the frame that holds `document.activeElement`, live.
+//                    `set_focus(el)` calls `el.focus()` and refuses an element outside the frame;
+//                    `set_focus(null)` blurs. `focusin`/`focusout` notify; focus that merely
+//                    leaves with the window (blur) keeps its widget, as GTK keeps it.
+//   `maximized`    — the FRAME's state (square corners), not the browser window's: a page cannot
+//                    maximize its browser window. `is_maximized()` reads it.
+//   `present()`    — un-hides the frame; a page cannot raise or focus a window it does not own.
+//
 // Events: `notify::<prop>` (CustomEvent, bubbles, detail `{ <prop>: value }`) on every real
-// change, and `close-request` (CustomEvent, bubbles, CANCELLED, no detail), which is
-// `Gtk.Window::close-request`.
+// change, and `close-request` (CustomEvent, bubbles, CANCELLABLE, no detail), which is
+// `Gtk.Window::close-request`: a listener that calls `preventDefault()` is a GTK handler that
+// returns true. `window.close()` runs it through `CloseRequestState`.
 //
 // Reference: refs/gtk/gtk/gtkwindow.c
 // Reference: refs/libadwaita/src/stylesheet/widgets/_window.scss (GtkWindow)
 // Copyright (c) The GTK Team. LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
+import { CloseRequestState, WindowMemberState, type WindowMemberProperty } from '@gjsify/adwaita-core';
+
 import { bindSlottedChildren, type AdwSlot } from '../slotted-children.js';
 
 // Registers <gtk-window-controls>: a frame with no titlebar of its own draws the two of them
@@ -88,6 +105,20 @@ export class GtkWindow extends HTMLElement {
     private _titleLabel: HTMLElement | null = null;
     /** Watches the strip for an author's titlebar arriving after the build. */
     private _titlebarObserver: MutationObserver | null = null;
+    /** `is-active` and `focus-widget`; `maximized` stays the attribute above. */
+    private readonly _members = new WindowMemberState<Element>((property) => this._notifyMember(property));
+    private readonly _closing = new CloseRequestState();
+    private readonly _syncActive = (): void => void this._members.reportActive(this._documentIsActive());
+    private readonly _onFocusIn = (event: FocusEvent): void => {
+        if (event.target instanceof Element) this._members.reportFocus(event.target);
+    };
+    private readonly _onFocusOut = (event: FocusEvent): void => {
+        const next = event.relatedTarget;
+        if (next instanceof Node && this.contains(next)) return;
+        // Focus leaving WITH the window (tab switch, another app) keeps the widget; GTK does too.
+        if (next === null && !document.hasFocus()) return;
+        this._members.reportFocus(null);
+    };
 
     static get observedAttributes() {
         return [
@@ -103,6 +134,8 @@ export class GtkWindow extends HTMLElement {
             'resizable',
             'title',
             'transient-for',
+            // Not a window property: `is-active` depends on it, so it is watched but never notified.
+            'hidden',
         ];
     }
 
@@ -186,11 +219,13 @@ export class GtkWindow extends HTMLElement {
 
     connectedCallback() {
         if (this._initialized) {
+            this._watchActivity();
             this._watchTitlebar();
             this._render();
             return;
         }
         this._initialized = true;
+        this._watchActivity();
 
         this._titlebar = document.createElement('div');
         this._titlebar.className = 'adw-gtk-window-titlebar';
@@ -216,6 +251,37 @@ export class GtkWindow extends HTMLElement {
     disconnectedCallback() {
         this._titlebarObserver?.disconnect();
         this._titlebarObserver = null;
+        window.removeEventListener('focus', this._syncActive);
+        window.removeEventListener('blur', this._syncActive);
+        document.removeEventListener('visibilitychange', this._syncActive);
+        this.removeEventListener('focusin', this._onFocusIn);
+        this.removeEventListener('focusout', this._onFocusOut);
+        // An unmapped window is neither active nor holding focus.
+        this._members.reportActive(false);
+        this._members.reportFocus(null);
+    }
+
+    private _watchActivity(): void {
+        window.addEventListener('focus', this._syncActive);
+        window.addEventListener('blur', this._syncActive);
+        document.addEventListener('visibilitychange', this._syncActive);
+        this.addEventListener('focusin', this._onFocusIn);
+        this.addEventListener('focusout', this._onFocusOut);
+        this._syncActive();
+    }
+
+    private _documentIsActive(): boolean {
+        return this.isConnected && !this.hidden && document.visibilityState !== 'hidden' && document.hasFocus();
+    }
+
+    private _notifyMember(property: WindowMemberProperty): void {
+        const detail =
+            property === 'is-active'
+                ? this._members.active
+                : property === 'focus-widget'
+                  ? this._members.focus
+                  : this.maximized;
+        this.dispatchEvent(new CustomEvent(`notify::${property}`, { bubbles: true, detail: { [property]: detail } }));
     }
 
     /**
@@ -248,8 +314,13 @@ export class GtkWindow extends HTMLElement {
     }
 
     attributeChangedCallback(name: string) {
-        if (!this._initialized) return;
-        this._render();
+        if (name === 'hidden') {
+            this._syncActive();
+            return;
+        }
+        // Before the first connect there is nothing to draw, but the property still moved: GTK
+        // notifies a window that was never mapped, and a listener on a detached frame hears it.
+        if (this._initialized) this._render();
         this.dispatchEvent(
             new CustomEvent(`notify::${name}`, { bubbles: true, detail: { [name]: this._property(name) } }),
         );
@@ -344,14 +415,78 @@ export class GtkWindow extends HTMLElement {
      * it, hide the window when `hide-on-close` is set and DESTROY it otherwise. "Destroy" is
      * the one word this port cannot mean — a page has no unref — so the default detaches the
      * frame, which is the same observable outcome for everything above it.
+     *
+     * A frame that is not in the page is not realized, so there is nothing to close; a listener
+     * that calls `close()` again is ignored, as GTK ignores it. Answers whether the window went
+     * away (hidden or detached), `false` when a listener took the request over or it was ignored.
      */
     close(): boolean {
-        const request = new CustomEvent('close-request', { bubbles: true, cancelable: true });
-        this.dispatchEvent(request);
-        if (request.defaultPrevented) return false;
-        if (this._offByDefault('hide-on-close')) this.hidden = true;
-        else this.remove();
-        return true;
+        const outcome = this._closing.close({
+            realized: this.isConnected,
+            hideOnClose: this._offByDefault('hide-on-close'),
+            emit: () => {
+                const request = new CustomEvent('close-request', { bubbles: true, cancelable: true });
+                this.dispatchEvent(request);
+                return request.defaultPrevented;
+            },
+            hide: () => void (this.hidden = true),
+            destroy: () => this.remove(),
+        });
+        return outcome === 'hidden' || outcome === 'destroyed';
+    }
+
+    /**
+     * `gtk_window_present`: show the frame. GTK also raises and focuses the toplevel, which is
+     * the window manager's to grant; a page owns no such surface, so this is only the first half.
+     */
+    present(): void {
+        this.hidden = false;
+    }
+
+    /** `Gtk.Window:is-active` — see the header: the document's focus, while this frame is shown. */
+    get isActive(): boolean {
+        return this._members.active;
+    }
+
+    /** `gtk_window_is_active`. */
+    is_active(): boolean {
+        return this._members.active;
+    }
+
+    /** `Gtk.Window:focus-widget`, read live from the document. */
+    get focusWidget(): Element | null {
+        return this.get_focus();
+    }
+
+    /** `gtk_window_get_focus`: the element inside the frame that has focus, or `null`. */
+    get_focus(): Element | null {
+        const active = document.activeElement;
+        return active !== null && active !== this && this.contains(active) ? active : null;
+    }
+
+    /**
+     * `gtk_window_set_focus`. `null` clears the focus. An element outside the frame is refused:
+     * GTK's window only focuses its own descendants.
+     */
+    set_focus(widget: Element | null): void {
+        if (widget === null) {
+            const current = this.get_focus();
+            if (current instanceof HTMLElement || current instanceof SVGElement) current.blur();
+            this._members.reportFocus(null);
+            return;
+        }
+        if (widget === this || !this.contains(widget)) {
+            throw new Error('<gtk-window>.set_focus: the widget is not inside this window');
+        }
+        if (widget instanceof HTMLElement || widget instanceof SVGElement) widget.focus();
+        // `focus()` fires no focusin while the document itself is unfocused, so report what the
+        // document now says; an equal write is dropped by the state.
+        this._members.reportFocus(this.get_focus());
+    }
+
+    /** `gtk_window_is_maximized`: the FRAME's state, not the browser window's. */
+    is_maximized(): boolean {
+        return this.maximized;
     }
 
     /**

package/src/gtk-window.spec.ts

@@ -5,6 +5,8 @@
 // (gtkwindow.c:1274-1287).
 import { describe, expect, it } from '@gjsify/unit';
 
+import { driveWindowVectors, WINDOW_VECTORS, type WindowSubject } from '@gjsify/adwaita-core/conformance';
+
 import type { GtkWindow } from './elements/gtk-window.js';
 
 function mount(attrs: Record<string, string> = {}): { el: GtkWindow; host: HTMLElement } {
@@ -199,4 +201,124 @@ export const GtkWindowTest = async () => {
             host.remove();
         });
     });
+
+    // The element's native close contract is `preventDefault()`; a GTK handler "returns true". The
+    // adapter below is that mapping, and it also stops later listeners, which is what the handled
+    // accumulator does. So the "third never runs" row exercises the adapter plus the element's
+    // sequence, not DOM dispatch alone.
+    const windows = new Map<object, HTMLElement>();
+    const webSubject: WindowSubject = {
+        name: '<gtk-window>',
+        isOracle: false,
+        capabilities: { maximizable: true, observesFocus: true, hideOnClose: true },
+        create({ hideOnClose }) {
+            // Never in a page: not realized, which is GTK's state for a window before `present()`.
+            const el = document.createElement('gtk-window') as GtkWindow;
+            if (hideOnClose) el.setAttribute('hide-on-close', 'true');
+            el.append(document.createElement('button'), document.createElement('button'));
+            return el;
+        },
+        show(w) {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            host.appendChild(w as GtkWindow);
+            windows.set(w, host);
+            (w as GtkWindow).present();
+        },
+        connect(w, signal, handler) {
+            (w as GtkWindow).addEventListener(signal, (event) => {
+                if (signal === 'close-request') {
+                    if (event.defaultPrevented) return;
+                    if (handler()) {
+                        event.preventDefault();
+                        event.stopImmediatePropagation();
+                    }
+                    return;
+                }
+                handler();
+            });
+            return 1;
+        },
+        close: (w) => void (w as GtkWindow).close(),
+        maximize: (w) => (w as GtkWindow).maximize(),
+        unmaximize: (w) => (w as GtkWindow).unmaximize(),
+        isMaximized: (w) => (w as GtkWindow).is_maximized(),
+        isVisible: (w) => (w as GtkWindow).isConnected && !(w as GtkWindow).hidden,
+        focusables: (w) => [...(w as GtkWindow).querySelectorAll('button')] as unknown as [Element, Element],
+        setFocus: (w, widget) => (w as GtkWindow).set_focus(widget as Element | null),
+        getFocus: (w) => (w as GtkWindow).get_focus(),
+    };
+    await driveWindowVectors(webSubject, { describe, it, expect }, WINDOW_VECTORS);
+    for (const host of windows.values()) host.remove();
+
+    await describe('<gtk-window> state members', async () => {
+        await it('a frame that was never connected is not realized: close() does nothing', async () => {
+            const el = document.createElement('gtk-window') as GtkWindow;
+            let seen = 0;
+            el.addEventListener('close-request', () => void seen++);
+            expect(el.close()).toBe(false);
+            expect(seen).toBe(0);
+        });
+
+        await it('is-active follows the document focus and notifies only on change', async () => {
+            const { el, host } = mount();
+            const seen: boolean[] = [];
+            el.addEventListener('notify::is-active', (e) => seen.push((e as CustomEvent).detail['is-active']));
+            const before = el.isActive;
+            expect(before).toBe(document.hasFocus());
+            el.hidden = true;
+            expect(el.is_active()).toBe(false);
+            el.present();
+            expect(el.isActive).toBe(document.hasFocus());
+            // Every transition above is one notification at most, and none repeats a value.
+            for (let i = 1; i < seen.length; i++) expect(seen[i]).not.toBe(seen[i - 1]);
+            host.remove();
+            expect(el.isActive).toBe(false);
+        });
+
+        await it('is-active has no setter: GTK declares it read-only', async () => {
+            const { el, host } = mount();
+            const descriptor =
+                Object.getOwnPropertyDescriptor(Object.getPrototypeOf(el.constructor.prototype), 'isActive') ??
+                Object.getOwnPropertyDescriptor(el.constructor.prototype, 'isActive');
+            expect(descriptor?.set).toBe(undefined);
+            host.remove();
+        });
+
+        await it('set_focus refuses an element outside the frame, by name', async () => {
+            const { el, host } = mount();
+            const outside = document.createElement('button');
+            document.body.append(outside);
+            let message = '';
+            try {
+                el.set_focus(outside);
+            } catch (error) {
+                message = (error as Error).message;
+            }
+            expect(message.includes('set_focus')).toBe(true);
+            outside.remove();
+            host.remove();
+        });
+
+        await it('focus-widget notifies with the widget in its detail', async () => {
+            const { el, host } = mount();
+            const button = document.createElement('button');
+            el.append(button);
+            await Promise.resolve();
+            let detail: unknown;
+            el.addEventListener('notify::focus-widget', (e) => (detail = (e as CustomEvent).detail['focus-widget']));
+            el.set_focus(button);
+            expect(detail).toBe(button);
+            expect(el.focusWidget).toBe(button);
+            host.remove();
+        });
+
+        await it('is_maximized() reads the frame state', async () => {
+            const { el, host } = mount();
+            expect(el.is_maximized()).toBe(false);
+            el.maximize();
+            expect(el.is_maximized()).toBe(true);
+            host.remove();
+        });
+    });
 };

package/src/pango-markup.spec.ts

@@ -0,0 +1,257 @@
+// `renderPangoMarkup` — markup becomes NODES, and a string the browser never parses.
+//
+// The rows that matter here are the ones that used to be `innerHTML`: a `<b>` has to come
+// out as an ELEMENT (that is the whole feature — the reviewer who flagged the innerHTML
+// was right about the sink and wrong that the only alternative is plain text), and an
+// `<img src=x onerror=…>` or a `<script>` has to come out as NOTHING an element could
+// carry. Both run through the real elements where they can, because a helper tested alone
+// only proves the helper.
+
+import { describe, expect, it } from '@gjsify/unit';
+
+import { renderPangoMarkup } from './pango-markup.js';
+import type { AdwAlertDialog } from './elements/adw-alert-dialog.js';
+import type { AdwBanner } from './elements/adw-banner.js';
+
+/** Render markup into a detached target and hand both back. */
+function render(markup: string): { target: HTMLElement; text: string } {
+    const target = document.createElement('span');
+    document.body.appendChild(target);
+    renderPangoMarkup(target, markup);
+    return { target, text: target.textContent ?? '' };
+}
+
+/** Computed `font-weight`, which is `bold` or `700` depending on the engine. */
+function isBold(el: Element): boolean {
+    const weight = getComputedStyle(el).fontWeight;
+    return weight === 'bold' || Number.parseInt(weight, 10) >= 600;
+}
+
+function mount<T extends HTMLElement>(tag: string, attributes: Record<string, string>): { el: T; host: HTMLElement } {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const el = document.createElement(tag) as T;
+    for (const [name, value] of Object.entries(attributes)) el.setAttribute(name, value);
+    host.appendChild(el);
+    return { el, host };
+}
+
+const bannerTitle = (el: AdwBanner): HTMLElement => el.querySelector('.adw-banner-title') as HTMLElement;
+const alertHeading = (el: AdwAlertDialog): HTMLElement => el.querySelector('.adw-alert-dialog-heading') as HTMLElement;
+const alertBody = (el: AdwAlertDialog): HTMLElement => el.querySelector('.adw-alert-dialog-body') as HTMLElement;
+
+export const PangoMarkupTest = async () => {
+    await describe('renderPangoMarkup — <b> is drawn bold, because the tree says so', async () => {
+        await it('<b>x</b> becomes a <b> ELEMENT, and it computes bold', () => {
+            const { target } = render('<b>x</b>');
+            const bold = target.querySelector('b');
+            expect(bold).not.toBe(null);
+            expect(bold?.textContent).toBe('x');
+            expect(isBold(bold!)).toBe(true);
+            target.remove();
+        });
+
+        // The four tags with no presentational UA rule, each spelled out as a style — the
+        // rows a "map the tag name to the same HTML element" port silently gets wrong,
+        // because <tt>, <big> and <small> exist in the HTML namespace and mean nothing.
+        await it('tt, big and small draw through styles, not through obsolete elements', () => {
+            const { target } = render('<tt>code</tt><big>big</big><small>small</small>');
+            const tt = target.querySelector('span')!;
+            expect(getComputedStyle(tt).fontFamily.toLowerCase()).toContain('monospace');
+            const big = target.children[1] as HTMLElement;
+            const small = target.children[2] as HTMLElement;
+            expect(Number.parseFloat(getComputedStyle(big).fontSize)).toBeGreaterThan(
+                Number.parseFloat(getComputedStyle(small).fontSize),
+            );
+            expect(big.tagName).toBe('SPAN');
+            expect(small.tagName).toBe('SPAN');
+        });
+
+        await it('the remaining tags become their own elements, nested as written', () => {
+            const { target } = render('<i>a<u>b</u></i><s>c</s><sub>d</sub><sup>e</sup>');
+            expect([...target.children].map((el) => el.tagName)).toStrictEqual(['I', 'S', 'SUB', 'SUP']);
+            expect(target.querySelector('i > u')?.textContent).toBe('b');
+        });
+
+        await it("<markup> draws its children — it is pango's implicit root, not a box", async () => {
+            const { target } = render('<markup><b>x</b></markup>');
+            expect(target.querySelector('b')?.textContent).toBe('x');
+        });
+    });
+
+    await describe('renderPangoMarkup — the rows that were the injection sink', async () => {
+        // Each of these was reachable as `banner.innerHTML = title` / `heading.innerHTML
+        // = heading`. There is no branch in the renderer that creates an element for a
+        // tag pango does not know, and no branch that sets an HTML attribute from a
+        // `<span>` attribute — so none of them can produce an element at all.
+        for (const markup of [
+            '<img src=x onerror="alert(1)">',
+            '<script>alert(1)</script>',
+            '<div onclick="alert(1)">x</div>',
+            '<iframe src="javascript:alert(1)"></iframe>',
+            '<a href="javascript:alert(1)">x</a>',
+            '<b onclick="alert(1)">x</b>',
+        ]) {
+            await it(`${JSON.stringify(markup)} → no element, the raw string as text`, () => {
+                const { target, text } = render(markup);
+                expect(text).toBe(markup);
+                expect(target.children.length).toBe(0);
+                expect(target.querySelector('img, script, div, iframe, a, b, span')).toBe(null);
+                expect(target.getAttribute('onerror')).toBe(null);
+                expect(target.getAttribute('onclick')).toBe(null);
+            });
+        }
+
+        // The one shape that DOES parse and could still carry an `on*`: `<span>` takes
+        // attributes, so an unknown one reaches the tree. It is dropped there and here —
+        // the run renders as plain text with no attribute on it, which is what makes the
+        // whitelist load-bearing rather than decoration.
+        await it('an unknown <span> attribute is dropped, never set on the element', () => {
+            const { target } = render('<span onmouseover="alert(1)">x</span>');
+            const span = target.querySelector('span')!;
+            expect(span.textContent).toBe('x');
+            expect(span.attributes.length).toBe(0);
+            expect((span as HTMLElement).style.cssText).toBe('');
+        });
+
+        await it('unparseable markup keeps the raw string, which is the C fallback', () => {
+            for (const markup of ['a < b', 'Tom & Jerry', '<b>unclosed', '<b>wrong</i>']) {
+                const { target, text } = render(markup);
+                expect(text).toBe(markup);
+                expect(target.children.length).toBe(0);
+            }
+        });
+
+        await it('no element carries an attribute derived from a <span> attribute', () => {
+            const { target } = render('<span weight="bold" font_family="Serif">x</span>');
+            const span = target.querySelector('span')!;
+            // `style` and nothing else: CSSOM reflects the declarations it holds, but a
+            // MARKUP attribute must never reach the DOM as one.
+            expect([...span.attributes].map((attribute) => attribute.name)).toStrictEqual(['style']);
+            expect(span.style.fontWeight).toBe('bold');
+        });
+    });
+
+    await describe('renderPangoMarkup — a <span> attribute reaches CSS, or nothing', async () => {
+        await it("weight and style take pango's NAMED values", () => {
+            const { target } = render('<span weight="bold" style="italic">x</span>');
+            const span = target.querySelector('span')!;
+            expect(span.style.fontWeight).toBe('bold');
+            expect(span.style.fontStyle).toBe('italic');
+        });
+
+        await it('an unmapped weight is DROPPED, never passed through to CSS', () => {
+            const { target } = render('<span weight="expression(alert(1))">x</span>');
+            expect(target.querySelector('span')!.style.fontWeight).toBe('');
+        });
+
+        await it('underline and strikethrough ADD, so a span carrying both keeps both', () => {
+            const { target } = render('<span underline="single" strikethrough="true">x</span>');
+            const decoration = target.querySelector('span')!.style.textDecorationLine;
+            expect(decoration).toContain('underline');
+            expect(decoration).toContain('line-through');
+        });
+
+        await it('underline="none" and strikethrough="false" draw neither', () => {
+            const { target } = render('<span underline="none" strikethrough="false">x</span>');
+            expect(target.querySelector('span')!.style.textDecorationLine).toBe('');
+        });
+
+        await it('a font family list keeps its order; an unparseable one is refused whole', () => {
+            const ok = render('<span font_family="Cantarell, sans-serif">x</span>');
+            expect(ok.target.querySelector('span')!.style.fontFamily).toContain('Cantarell');
+            const refused = render('<span font_family="a&quot;; color: red">x</span>');
+            expect(refused.target.querySelector('span')!.style.fontFamily).toBe('');
+            expect(refused.target.querySelector('span')!.style.color).toBe('');
+        });
+
+        await it('a size travels with its unit — a bare pango number is 1024ths of a point', () => {
+            const units = render('<span size="12288">x</span>');
+            expect(units.target.querySelector('span')!.style.fontSize).toBe('12pt');
+            const points = render('<span size="12.5pt">x</span>');
+            expect(points.target.querySelector('span')!.style.fontSize).toBe('12.5pt');
+            const relative = render('<span font_size="larger">x</span>');
+            expect(relative.target.querySelector('span')!.style.fontSize).toBe('larger');
+            const percent = render('<span size="150%">x</span>');
+            expect(percent.target.querySelector('span')!.style.fontSize).toBe('150%');
+            const named = render('<span size="x-small">x</span>');
+            expect(named.target.querySelector('span')!.style.fontSize).toBe('x-small');
+        });
+
+        await it("reads pango's aliases and a numeric weight", () => {
+            const { target } = render('<span font_weight="600" font_style="italic" face="monospace">x</span>');
+            const span = target.querySelector('span')!;
+            expect(span.style.fontWeight).toBe('600');
+            expect(span.style.fontStyle).toBe('italic');
+            expect(span.style.fontFamily).toBe('monospace');
+        });
+
+        await it('an attribute pango accepts but CSS cannot express is dropped', () => {
+            // `rise` and `letter_spacing` are pango attributes with no equivalent here.
+            const { target } = render('<span rise="4" letter_spacing="2">x</span>');
+            expect(target.querySelector('span')!.getAttribute('style')).toBe(null);
+        });
+    });
+
+    await describe('the elements render the same way', async () => {
+        await it('<adw-banner> draws its <b> bold when use-markup is set', () => {
+            const { el, host } = mount<AdwBanner>('adw-banner', {
+                title: '<b>Metered</b> connection',
+                revealed: '',
+                'use-markup': '',
+            });
+            const bold = bannerTitle(el).querySelector('b');
+            expect(bold?.textContent).toBe('Metered');
+            expect(isBold(bold!)).toBe(true);
+            host.remove();
+        });
+
+        await it('<adw-banner> shows an unknown tag as text, never as an element', () => {
+            const { el, host } = mount<AdwBanner>('adw-banner', {
+                title: '<img src=x onerror="alert(1)">',
+                revealed: '',
+                'use-markup': '',
+            });
+            expect(bannerTitle(el).querySelector('img')).toBe(null);
+            expect(bannerTitle(el).textContent).toBe('<img src=x onerror="alert(1)">');
+            host.remove();
+        });
+
+        await it('<adw-alert-dialog> draws heading AND body markup bold/italic', () => {
+            const { el, host } = mount<AdwAlertDialog>('adw-alert-dialog', {
+                heading: '<b>Delete</b> file?',
+                'heading-use-markup': '',
+                body: 'Really delete <i>notes.txt</i>?',
+                'body-use-markup': '',
+            });
+            expect(isBold(alertHeading(el).querySelector('b')!)).toBe(true);
+            expect(getComputedStyle(alertBody(el).querySelector('i')!).fontStyle).toBe('italic');
+            host.remove();
+        });
+
+        await it('<adw-alert-dialog> shows an unknown tag in either slot as text', () => {
+            const { el, host } = mount<AdwAlertDialog>('adw-alert-dialog', {
+                heading: '<script>alert(1)</script>',
+                'heading-use-markup': '',
+                body: '<img src=x onerror="alert(1)">',
+                'body-use-markup': '',
+            });
+            expect(alertHeading(el).querySelector('script')).toBe(null);
+            expect(alertHeading(el).textContent).toBe('<script>alert(1)</script>');
+            expect(alertBody(el).querySelector('img')).toBe(null);
+            expect(alertBody(el).textContent).toBe('<img src=x onerror="alert(1)">');
+            host.remove();
+        });
+
+        await it('without use-markup both slots stay literal text', () => {
+            const { el, host } = mount<AdwAlertDialog>('adw-alert-dialog', {
+                heading: '<b>Delete</b> file?',
+                body: '<i>notes.txt</i>',
+            });
+            expect(alertHeading(el).textContent).toBe('<b>Delete</b> file?');
+            expect(alertHeading(el).querySelector('b')).toBe(null);
+            expect(alertBody(el).querySelector('i')).toBe(null);
+            host.remove();
+        });
+    });
+};