@gjsify/dom-elements 0.4.0 → 0.4.4

package/src/property-symbol.ts

@@ -1,23 +0,0 @@
-// Adapted from happy-dom (refs/happy-dom/packages/happy-dom/src/PropertySymbol.ts)
-// Copyright (c) David Ortner (capricorn86). MIT license.
-// Modifications: Minimal subset for gjsify — only symbols needed by Node/Element/HTMLElement
-
-// Node
-export const nodeType = Symbol('nodeType');
-export const parentNode = Symbol('parentNode');
-export const childNodesList = Symbol('childNodesList');
-export const elementChildren = Symbol('elementChildren');
-export const isConnected = Symbol('isConnected');
-
-// Element
-export const tagName = Symbol('tagName');
-export const localName = Symbol('localName');
-export const namespaceURI = Symbol('namespaceURI');
-export const prefix = Symbol('prefix');
-export const attributes = Symbol('attributes');
-export const propertyEventListeners = Symbol('propertyEventListeners');
-
-// Attr
-export const name = Symbol('name');
-export const value = Symbol('value');
-export const ownerElement = Symbol('ownerElement');

package/src/register/canvas.ts

@@ -1,23 +0,0 @@
-// Registers: HTMLCanvasElement, CanvasRenderingContext2D, DOMMatrix,
-// DOMMatrixReadOnly + the '2d' context factory.
-
-import { CanvasRenderingContext2D } from '@gjsify/canvas2d-core';
-
-import { HTMLCanvasElement } from '../html-canvas-element.js';
-import { DOMMatrix, DOMMatrixReadOnly } from '../dom-matrix.js';
-import { defineGlobal } from './helpers.js';
-
-defineGlobal('HTMLCanvasElement', HTMLCanvasElement);
-defineGlobal('CanvasRenderingContext2D', CanvasRenderingContext2D);
-defineGlobal('DOMMatrix', DOMMatrix);
-defineGlobal('DOMMatrixReadOnly', DOMMatrixReadOnly);
-
-// Register the '2d' context factory on HTMLCanvasElement.
-const CANVAS2D_KEY = Symbol.for('gjsify_canvas2d_context');
-HTMLCanvasElement.registerContextFactory('2d', (canvas, options) => {
-    const existing = (canvas as any)[CANVAS2D_KEY];
-    if (existing) return existing;
-    const ctx = new CanvasRenderingContext2D(canvas as any, options);
-    (canvas as any)[CANVAS2D_KEY] = ctx;
-    return ctx;
-});

package/src/register/document.ts

@@ -1,64 +0,0 @@
-// Registers: document, Text, Comment, DocumentFragment, DOMTokenList
-// + browser environment globals: self, window, Window, focus, blur, top,
-//   alert, devicePixelRatio, addEventListener/removeEventListener/dispatchEvent
-
-import { EventTarget as OurEventTarget } from '@gjsify/dom-events';
-
-import { Comment } from '../comment.js';
-import { document } from '../document.js';
-import { DocumentFragment } from '../document-fragment.js';
-import { DOMTokenList } from '../dom-token-list.js';
-import { Text } from '../text.js';
-import { defineGlobal, defineGlobalIfMissing } from './helpers.js';
-
-defineGlobal('Text', Text);
-defineGlobal('Comment', Comment);
-defineGlobal('DocumentFragment', DocumentFragment);
-defineGlobal('DOMTokenList', DOMTokenList);
-defineGlobal('document', document);
-
-// self — three.js checks `typeof self !== 'undefined'` for animation context
-defineGlobalIfMissing('self', globalThis);
-
-// window + Window — Excalibur's _applyDisplayMode uses `this.parent instanceof Window`
-class Window {}
-defineGlobalIfMissing('Window', Window);
-defineGlobalIfMissing('window', globalThis);
-
-// window.focus() / window.blur() stubs
-defineGlobalIfMissing('focus', () => {});
-defineGlobalIfMissing('blur', () => {});
-
-// globalThis.addEventListener / removeEventListener / dispatchEvent
-if (typeof (globalThis as any).addEventListener !== 'function') {
-    const _globalEventTarget = new OurEventTarget();
-    (globalThis as any).__gjsify_globalEventTarget = _globalEventTarget;
-    (globalThis as any).addEventListener = (type: string, listener: any, options?: any) =>
-        _globalEventTarget.addEventListener(type, listener, options);
-    (globalThis as any).removeEventListener = (type: string, listener: any, options?: any) =>
-        _globalEventTarget.removeEventListener(type, listener, options);
-    (globalThis as any).dispatchEvent = (event: Event) =>
-        _globalEventTarget.dispatchEvent(event as any);
-}
-
-// devicePixelRatio — defaults to 1 (no HiDPI scaling in GTK GL context)
-defineGlobalIfMissing('devicePixelRatio', 1);
-
-// scrollX/scrollY — always 0 in a GTK widget (no page scrolling). Excalibur's
-// getPosition() does `rect.x + window.scrollX`, producing NaN if scrollX is
-// undefined and breaking all pointer coordinates.
-defineGlobalIfMissing('scrollX', 0);
-defineGlobalIfMissing('scrollY', 0);
-defineGlobalIfMissing('pageXOffset', 0);
-defineGlobalIfMissing('pageYOffset', 0);
-
-// alert — stub redirecting to console.error
-defineGlobalIfMissing('alert', (...args: unknown[]) => console.error('alert:', ...args));
-
-// window.top — prevents Excalibur's iframe detection from crashing
-if (typeof (globalThis as any).top === 'undefined') {
-    Object.defineProperty(globalThis, 'top', {
-        get: () => globalThis,
-        configurable: true,
-    });
-}

package/src/register/font-face.ts

@@ -1,18 +0,0 @@
-// Registers: FontFace + patches document.fonts
-
-import { FontFace, FontFaceSet } from '../font-face.js';
-import { defineGlobalIfMissing } from './helpers.js';
-
-defineGlobalIfMissing('FontFace', FontFace);
-if (typeof (globalThis as any).FontFace === 'undefined') {
-    (globalThis as any).FontFace = FontFace;
-}
-// Patch document.fonts stub onto the existing document object
-const _doc = (globalThis as any).document;
-if (_doc && typeof _doc.fonts === 'undefined') {
-    Object.defineProperty(_doc, 'fonts', {
-        value: new FontFaceSet(),
-        configurable: true,
-        writable: true,
-    });
-}

package/src/register/helpers.ts

@@ -1,15 +0,0 @@
-/** Unconditionally expose a DOM class on `globalThis` (writable + configurable). */
-export function defineGlobal(name: string, value: unknown): void {
-    Object.defineProperty(globalThis, name, {
-        value,
-        writable: true,
-        configurable: true,
-    });
-}
-
-/** Only set the global if it hasn't already been defined. */
-export function defineGlobalIfMissing(name: string, value: unknown): void {
-    if (typeof (globalThis as any)[name] === 'undefined') {
-        defineGlobal(name, value);
-    }
-}

package/src/register/image.ts

@@ -1,8 +0,0 @@
-// Registers: Image, HTMLImageElement
-
-import { HTMLImageElement } from '../html-image-element.js';
-import { Image } from '../image.js';
-import { defineGlobal } from './helpers.js';
-
-defineGlobal('HTMLImageElement', HTMLImageElement);
-defineGlobal('Image', Image);

package/src/register/location.ts

@@ -1,6 +0,0 @@
-// Registers: location (file:// origin stub for GJS apps)
-
-import { location } from '../location-stub.js';
-import { defineGlobalIfMissing } from './helpers.js';
-
-defineGlobalIfMissing('location', location);

package/src/register/match-media.ts

@@ -1,6 +0,0 @@
-// Registers: matchMedia
-
-import { matchMedia } from '../match-media.js';
-import { defineGlobalIfMissing } from './helpers.js';
-
-defineGlobalIfMissing('matchMedia', matchMedia);

package/src/register/navigator.ts

@@ -1,6 +0,0 @@
-// Registers: navigator stub (base navigator object for GJS)
-// Gamepad support (navigator.getGamepads) is provided by @gjsify/gamepad/register
-
-if (typeof (globalThis as any).navigator === 'undefined') {
-    (globalThis as any).navigator = {};
-}

package/src/register/observers.ts

@@ -1,10 +0,0 @@
-// Registers: MutationObserver, ResizeObserver, IntersectionObserver
-
-import { IntersectionObserver } from '../intersection-observer.js';
-import { MutationObserver } from '../mutation-observer.js';
-import { ResizeObserver } from '../resize-observer.js';
-import { defineGlobal } from './helpers.js';
-
-defineGlobal('MutationObserver', MutationObserver);
-defineGlobal('ResizeObserver', ResizeObserver);
-defineGlobal('IntersectionObserver', IntersectionObserver);

package/src/register.spec.ts

@@ -1,136 +0,0 @@
-// GJS-only tests for dom-elements/register side effects.
-// Verifies that importing /register correctly wires browser globals onto globalThis:
-//   - FontFace, FontFaceSet, document.fonts (Excalibur FontSource.load() path)
-//   - FontFace.load() registers TTF in PangoCairo default FontMap (real font rendering)
-//   - globalThis.addEventListener/removeEventListener/dispatchEvent via __gjsify_globalEventTarget
-//     (Regression: Excalibur's Keyboard.init() calls window.addEventListener)
-//
-// These tests require /register to have run (GJS only — GTK/Gio present).
-// Cross-platform stub tests live in stubs.spec.ts.
-
-import { describe, it, expect, on } from '@gjsify/unit';
-import '@gjsify/dom-elements/register';
-import { KeyboardEvent as OurKeyboardEvent } from '@gjsify/dom-events';
-
-export default async () => {
-    await on('Gjs', async () => {
-
-        await describe('globalThis FontFace / document.fonts', async () => {
-            // Excalibur's FontSource.load() uses these via globalThis (no import).
-            await it('FontFace is available as a constructor on globalThis', async () => {
-                expect(typeof (globalThis as any).FontFace).toBe('function');
-            });
-
-            await it('document.fonts is a FontFaceSet with add() and ready', async () => {
-                const fonts = (globalThis as any).document?.fonts;
-                expect(fonts).toBeDefined();
-                expect(typeof fonts.add).toBe('function');
-                const ready = await fonts.ready;
-                expect(ready).toBe(fonts);
-            });
-
-            await it('FontFace.load() via globalThis resolves and sets status=loaded', async () => {
-                const FF = (globalThis as any).FontFace;
-                const face = new FF('Round9x13', 'url(/res/fonts/Round9x13.ttf)');
-                expect(face.status).toBe('unloaded');
-                await face.load();
-                expect(face.status).toBe('loaded');
-            });
-
-            await it('document.fonts.add() after load does not throw', async () => {
-                const FF = (globalThis as any).FontFace;
-                const face = new FF('Round9x13', 'url(/res/fonts/Round9x13.ttf)');
-                await face.load();
-                let threw = false;
-                try { (globalThis as any).document.fonts.add(face); } catch { threw = true; }
-                expect(threw).toBe(false);
-            });
-        });
-
-        await describe('FontFace real load via PangoCairo', async () => {
-            // Verifies that a file:// URL triggers add_font_file on the PangoCairo
-            // default FontMap, making the font available to Canvas2D fillText.
-            // Uses DejaVuSans which is present on Fedora and most Linux distros.
-            const TTF = '/usr/share/fonts/dejavu-sans-fonts/DejaVuSans.ttf';
-
-            await it('load() with file:// URL registers font and sets status=loaded', async () => {
-                const FF = (globalThis as any).FontFace;
-                const face = new FF('DejaVuTestFont', `url(file://${TTF})`);
-                expect(face.status).toBe('unloaded');
-                await face.load();
-                expect(face.status).toBe('loaded');
-            });
-
-            // Note: ink rendering test (fillText with registered font) lives in
-            // packages/dom/canvas2d-core or @gjsify/canvas2d tests — canvas2d
-            // depends on dom-elements so importing it here would be circular.
-        });
-
-        await describe('globalThis keyboard EventTarget wiring', async () => {
-            // Regression: Excalibur's Keyboard.init() calls window.addEventListener('keydown', ...)
-            // which must route through __gjsify_globalEventTarget (set in dom-elements/register.ts).
-            await it('addEventListener stores listener on __gjsify_globalEventTarget', async () => {
-                const received: string[] = [];
-                (globalThis as any).addEventListener('keydown', (e: OurKeyboardEvent) => {
-                    received.push(e.key);
-                });
-                const evt = new OurKeyboardEvent('keydown', {
-                    key: 'ArrowRight', code: 'ArrowRight', bubbles: true, cancelable: true,
-                });
-                (globalThis as any).__gjsify_globalEventTarget.dispatchEvent(evt);
-                expect(received).toContain('ArrowRight');
-            });
-
-            await it('removeEventListener deregisters listener', async () => {
-                const received: string[] = [];
-                const handler = (e: OurKeyboardEvent) => received.push(e.key);
-                (globalThis as any).addEventListener('keydown', handler);
-                (globalThis as any).removeEventListener('keydown', handler);
-                const evt = new OurKeyboardEvent('keydown', { key: 'a', bubbles: true, cancelable: true });
-                (globalThis as any).__gjsify_globalEventTarget.dispatchEvent(evt);
-                expect(received.length).toBe(0);
-            });
-
-            await it('__gjsify_globalEventTarget is exposed on globalThis', async () => {
-                expect((globalThis as any).__gjsify_globalEventTarget).toBeDefined();
-                expect(typeof (globalThis as any).__gjsify_globalEventTarget.addEventListener).toBe('function');
-            });
-
-            await it('multiple listeners for the same event type all fire', async () => {
-                const log: number[] = [];
-                const a = () => log.push(1);
-                const b = () => log.push(2);
-                (globalThis as any).addEventListener('keyup', a);
-                (globalThis as any).addEventListener('keyup', b);
-                const evt = new OurKeyboardEvent('keyup', { key: 'x', bubbles: true, cancelable: true });
-                (globalThis as any).__gjsify_globalEventTarget.dispatchEvent(evt);
-                expect(log).toContain(1);
-                expect(log).toContain(2);
-                (globalThis as any).removeEventListener('keyup', a);
-                (globalThis as any).removeEventListener('keyup', b);
-            });
-        });
-
-        await describe('window scroll globals', async () => {
-            // Excalibur's getPosition() computes `rect.x + window.scrollX`.
-            // Without these stubs scrollX is undefined → NaN coords → blank
-            // canvas on any drag/pan. Regression test for map-editor.
-            await it('scrollX and scrollY default to 0', async () => {
-                expect((globalThis as any).scrollX).toBe(0);
-                expect((globalThis as any).scrollY).toBe(0);
-            });
-
-            await it('legacy pageXOffset and pageYOffset default to 0', async () => {
-                expect((globalThis as any).pageXOffset).toBe(0);
-                expect((globalThis as any).pageYOffset).toBe(0);
-            });
-
-            await it('rect.x + window.scrollX is a number (no NaN)', async () => {
-                const rect = (globalThis as any).document.createElement('div').getBoundingClientRect();
-                const pageX = rect.x + (globalThis as any).scrollX;
-                expect(Number.isFinite(pageX)).toBe(true);
-            });
-        });
-
-    });
-};

package/src/register.ts

@@ -1,13 +0,0 @@
-// Catch-all side-effect module: registers ALL DOM globals on GJS.
-// Prefer granular imports (e.g. '@gjsify/dom-elements/register/navigator')
-// when only specific globals are needed — the --globals auto mode does this
-// automatically.
-
-import './register/document.js';
-import './register/canvas.js';
-import './register/image.js';
-import './register/observers.js';
-import './register/font-face.js';
-import './register/match-media.js';
-import './register/location.js';
-import './register/navigator.js';

package/src/resize-observer.ts

@@ -1,28 +0,0 @@
-// ResizeObserver stub for GJS — original implementation
-// Reference: refs/happy-dom/packages/happy-dom/src/resize-observer/ResizeObserver.ts
-// Copyright (c) David Ortner (capricorn86). MIT license.
-// Modifications: Stub implementation — no actual resize tracking
-
-import type { Element } from './element.js';
-
-/**
- * ResizeObserver stub.
- * Many libraries check for ResizeObserver existence; this prevents crashes.
- *
- * Reference: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
- */
-export class ResizeObserver {
-	constructor(_callback: (...args: unknown[]) => void) {}
-
-	observe(_target: Element): void {
-		// Stub
-	}
-
-	unobserve(_target: Element): void {
-		// Stub
-	}
-
-	disconnect(): void {
-		// Stub
-	}
-}

package/src/stubs.spec.ts

@@ -1,284 +0,0 @@
-// Tests for DOM/browser stubs added for Excalibur.js and other game engines:
-//   - DOMMatrix (2D math, Canvas 2D compatibility)
-//   - CSSStyleDeclaration.setProperty / getPropertyValue
-//   - FontFace / FontFaceSet (font loading no-op)
-//   - MediaQueryList / matchMedia (responsive checks)
-//   - location (file:// stub)
-//
-// Cross-platform: runs on both Node.js and GJS without /register side effects.
-// GJS-specific globalThis tests (FontFace on globalThis, keyboard EventTarget) live in register.spec.ts.
-//
-// Locks in the fixes made to ship the excalibur-jelly-jumper showcase on GJS.
-
-import { describe, it, expect } from '@gjsify/unit';
-
-import {
-    DOMMatrix,
-    CSSStyleDeclaration,
-    FontFace,
-    FontFaceSet,
-    MediaQueryList,
-    matchMedia,
-    location,
-} from '@gjsify/dom-elements';
-
-export default async () => {
-
-    await describe('DOMMatrix', async () => {
-
-        await describe('constructor', async () => {
-            await it('creates an identity matrix by default', async () => {
-                const m = new DOMMatrix();
-                expect(m.a).toBe(1);
-                expect(m.b).toBe(0);
-                expect(m.c).toBe(0);
-                expect(m.d).toBe(1);
-                expect(m.e).toBe(0);
-                expect(m.f).toBe(0);
-                expect(m.is2D).toBe(true);
-                expect(m.isIdentity).toBe(true);
-            });
-
-            await it('accepts a 6-element 2D affine array', async () => {
-                const m = new DOMMatrix([1, 2, 3, 4, 5, 6]);
-                expect(m.a).toBe(1);
-                expect(m.b).toBe(2);
-                expect(m.c).toBe(3);
-                expect(m.d).toBe(4);
-                expect(m.e).toBe(5);
-                expect(m.f).toBe(6);
-                expect(m.is2D).toBe(true);
-            });
-
-            await it('mirrors 2D components into m11-m42 3D fields', async () => {
-                const m = new DOMMatrix([1, 2, 3, 4, 5, 6]);
-                expect(m.m11).toBe(1); // a
-                expect(m.m12).toBe(2); // b
-                expect(m.m21).toBe(3); // c
-                expect(m.m22).toBe(4); // d
-                expect(m.m41).toBe(5); // e
-                expect(m.m42).toBe(6); // f
-            });
-
-            await it('accepts a 16-element 3D array and sets is2D=false', async () => {
-                const m = new DOMMatrix([
-                    1, 2, 3, 4,
-                    5, 6, 7, 8,
-                    9, 10, 11, 12,
-                    13, 14, 15, 16,
-                ]);
-                expect(m.m11).toBe(1);
-                expect(m.m44).toBe(16);
-                expect(m.is2D).toBe(false);
-            });
-
-            await it('isIdentity is false for non-identity matrices', async () => {
-                const m = new DOMMatrix([2, 0, 0, 2, 0, 0]);
-                expect(m.isIdentity).toBe(false);
-            });
-        });
-
-        await describe('multiply', async () => {
-            await it('multiplying by identity yields the original matrix', async () => {
-                const a = new DOMMatrix([2, 0, 0, 3, 10, 20]);
-                const i = new DOMMatrix();
-                const r = a.multiply(i);
-                expect(r.a).toBe(2);
-                expect(r.d).toBe(3);
-                expect(r.e).toBe(10);
-                expect(r.f).toBe(20);
-            });
-
-            await it('composes two scale matrices correctly', async () => {
-                const a = new DOMMatrix([2, 0, 0, 3, 0, 0]);
-                const b = new DOMMatrix([4, 0, 0, 5, 0, 0]);
-                const r = a.multiply(b);
-                // Scale(2,3) * Scale(4,5) = Scale(8, 15)
-                expect(r.a).toBe(8);
-                expect(r.d).toBe(15);
-                expect(r.e).toBe(0);
-                expect(r.f).toBe(0);
-            });
-
-            await it('composes a translate after a scale', async () => {
-                // scale(2,2) then translate(10,20): the translate is multiplied
-                // by the current scale, so the result translates by (20,40).
-                const scale = new DOMMatrix([2, 0, 0, 2, 0, 0]);
-                const translate = new DOMMatrix([1, 0, 0, 1, 10, 20]);
-                const r = scale.multiply(translate);
-                expect(r.a).toBe(2);
-                expect(r.d).toBe(2);
-                expect(r.e).toBe(20);
-                expect(r.f).toBe(40);
-            });
-
-            await it('returns a new matrix without mutating the receiver', async () => {
-                const a = new DOMMatrix([2, 0, 0, 2, 0, 0]);
-                const b = new DOMMatrix([3, 0, 0, 3, 0, 0]);
-                a.multiply(b);
-                expect(a.a).toBe(2); // unchanged
-            });
-        });
-
-        await describe('inverse', async () => {
-            await it('identity inverse is identity', async () => {
-                const m = new DOMMatrix().inverse();
-                expect(m.a).toBe(1);
-                expect(m.d).toBe(1);
-                expect(m.e).toBe(0);
-                expect(m.f).toBe(0);
-            });
-
-            await it('scale(2,2) inverse is scale(0.5, 0.5)', async () => {
-                const m = new DOMMatrix([2, 0, 0, 2, 0, 0]).inverse();
-                expect(m.a).toBe(0.5);
-                expect(m.d).toBe(0.5);
-            });
-
-            await it('translate(10,20) inverse is translate(-10,-20)', async () => {
-                const m = new DOMMatrix([1, 0, 0, 1, 10, 20]).inverse();
-                expect(m.e).toBe(-10);
-                expect(m.f).toBe(-20);
-            });
-
-            await it('inverse of non-invertible matrix returns identity (graceful)', async () => {
-                // det = 0 (both rows proportional)
-                const m = new DOMMatrix([1, 2, 2, 4, 0, 0]).inverse();
-                expect(m.a).toBe(1);
-                expect(m.d).toBe(1);
-            });
-        });
-
-        await describe('translate / scale helpers', async () => {
-            await it('translate returns a new matrix with the composed translation', async () => {
-                const m = new DOMMatrix().translate(5, 7);
-                expect(m.e).toBe(5);
-                expect(m.f).toBe(7);
-            });
-
-            await it('scale returns a new matrix with the composed scale', async () => {
-                const m = new DOMMatrix().scale(3, 4);
-                expect(m.a).toBe(3);
-                expect(m.d).toBe(4);
-            });
-
-            await it('scale with a single argument uses uniform scale', async () => {
-                const m = new DOMMatrix().scale(2);
-                expect(m.a).toBe(2);
-                expect(m.d).toBe(2);
-            });
-        });
-    });
-
-    await describe('CSSStyleDeclaration', async () => {
-        await it('stores properties via setProperty and reads them via getPropertyValue', async () => {
-            const style = new CSSStyleDeclaration();
-            style.setProperty('--ex-pixel-ratio', '2');
-            expect(style.getPropertyValue('--ex-pixel-ratio')).toBe('2');
-        });
-
-        await it('removeProperty returns and clears the value', async () => {
-            const style = new CSSStyleDeclaration();
-            style.setProperty('color', 'red');
-            const removed = style.removeProperty('color');
-            expect(removed).toBe('red');
-            expect(style.getPropertyValue('color')).toBe('');
-        });
-
-        await it('getPropertyValue returns empty string for unknown properties', async () => {
-            const style = new CSSStyleDeclaration();
-            expect(style.getPropertyValue('nonexistent')).toBe('');
-        });
-
-        await it('getPropertyPriority is always empty (stub)', async () => {
-            const style = new CSSStyleDeclaration();
-            style.setProperty('color', 'red');
-            expect(style.getPropertyPriority('color')).toBe('');
-        });
-
-        await it('cssText setter parses declarations into camelCase properties', async () => {
-            const style = new CSSStyleDeclaration();
-            style.cssText = 'background-color: rgba(0,0,0,0); color: red';
-            expect((style as any).backgroundColor).toBe('rgba(0,0,0,0)');
-            expect((style as any).color).toBe('red');
-        });
-
-        await it('cssText getter returns the last assigned value', async () => {
-            const style = new CSSStyleDeclaration();
-            style.cssText = 'color: blue';
-            expect(style.cssText).toBe('color: blue');
-        });
-
-        await it('cssText setter handles single-property strings (Excalibur rgbaSupport check)', async () => {
-            // Excalibur does: el.style.cssText = 'background-color:rgba(135,100,100,.5)'
-            // then reads el.style.backgroundColor to detect rgba support.
-            const style = new CSSStyleDeclaration();
-            style.cssText = 'background-color:rgba(135,100,100,.5)';
-            const bg = (style as any).backgroundColor as string;
-            expect(typeof bg).toBe('string');
-            expect(bg.length).toBeGreaterThan(0);
-        });
-    });
-
-    await describe('FontFace / FontFaceSet stubs', async () => {
-        await it('FontFace constructor accepts family and source', async () => {
-            const face = new FontFace('MyFont', 'url(font.ttf)');
-            expect(face.family).toBe('MyFont');
-            expect(face.source).toBe('url(font.ttf)');
-            expect(face.status).toBe('unloaded');
-        });
-
-        await it('FontFace.load resolves with the face and marks it loaded', async () => {
-            const face = new FontFace('MyFont', 'url(font.ttf)');
-            const loaded = await face.load();
-            expect(loaded).toBe(face);
-            expect(face.status).toBe('loaded');
-        });
-
-        await it('FontFaceSet add/has/size track added faces', async () => {
-            const set = new FontFaceSet();
-            const face = new FontFace('A', 'url(a.ttf)');
-            expect(set.has(face)).toBe(false);
-            expect(set.size).toBe(0);
-            set.add(face);
-            expect(set.has(face)).toBe(true);
-            expect(set.size).toBe(1);
-        });
-
-        await it('FontFaceSet.ready resolves with the set', async () => {
-            const set = new FontFaceSet();
-            const ready = await set.ready;
-            expect(ready).toBe(set);
-        });
-
-        await it('FontFaceSet does NOT inherit from EventTarget', async () => {
-            // This is critical: dom-elements/register runs BEFORE dom-events/
-            // register, so EventTarget would be undefined at class load time.
-            // The stub provides its own no-op addEventListener instead.
-            const set = new FontFaceSet();
-            expect(typeof set.addEventListener).toBe('function');
-            expect(typeof set.removeEventListener).toBe('function');
-        });
-    });
-
-    await describe('MediaQueryList / matchMedia', async () => {
-        await it('matchMedia returns a MediaQueryList with matches=false', async () => {
-            const mq = matchMedia('(min-width: 800px)');
-            expect(mq instanceof MediaQueryList).toBe(true);
-            expect(mq.media).toBe('(min-width: 800px)');
-            expect(mq.matches).toBe(false);
-        });
-    });
-
-    await describe('location stub', async () => {
-        await it('exposes file:// origin and protocol', async () => {
-            expect(location.origin).toBe('file://');
-            expect(location.protocol).toBe('file:');
-        });
-
-        await it('toString returns href', async () => {
-            expect(location.toString()).toBe(location.href);
-        });
-    });
-
-};