Choose the runtime primitive
Gameface is an embedded UI engine with a WoT host bridge. JavaScript syntax, DOM exposure, actual rendering and native input are separate capabilities. A constructor or successful property assignment does not establish a working browser service. Choose the smallest primitive that meets the required visible behavior.
Resolve resource loading and surface sizing before diagnosing a frontend failure. Check API availability, actual rendering and input behavior separately; browser-like syntax does not guarantee desktop-browser behavior.
Observed feature matrix
| Capability | Observed behavior | Limit or design consequence |
|---|---|---|
| ES modules, Promise, requestAnimationFrame | Initialized and recreated in the tested view. | Inspect emitted code and cancel pending frames. |
| Flex and transforms | Fixed flex rows and a 2D scale transform produced expected geometry. | Does not certify every percentage or nested layout. |
| CSS grid and :not(...) | Requested grid computed as block; :not logged unsupported and had no effect. | Use tested flex layouts and simple owned classes. DOM query support is a separate test. |
| CSS motion | One-second width keyframe and transition reached their target. Element.animate was undefined. | Use tested CSS properties; do not assume the Web Animations API. |
| Canvas 2D and SVG | Fill/drawImage, SVG gradient paths, clipping and text rendered in representative cases. | Canvas getImageData was absent; WebGL returned no context. Inspect actual pixels. |
| Modern DOM helpers | replaceChildren, createTreeWalker and document.createRange were undefined. | Inspect library dependencies and use supported element operations. |
| Observers | Model callbacks, MutationObserver and ResizeObserver delivered in tested documents. | Retain callback identities and disconnect observers. |
| Controls and scrolling | Text value readback and programmatic scroll worked; a requested checkbox became type text. Later manual wheel scrolling worked. | Build custom toggles with owned elements and commands. Replay keyboard routing has independent limits. |
| Fonts | PFDINMax, Warhelios and configured generic fallback rendered; the explicit Arial row did not. | Computed font-family is not proof of glyph output. Test the actual locale. |
Images and layout need visual checks
Explicit image dimensions, a sized non-repeating background with contain, and Canvas drawImage after load can scale packaged images. Check the painted pixels as well as element dimensions: geometry alone does not establish correct bitmap scaling.
image.complete and image.naturalWidth were undefined even after load. Use a retained load listener and supplied dimensions; guard callbacks against a disposed generation. The tested absolute marker stayed at explicit left/top while its flex parent's alignment changed, so an older flex-flow workaround is also not a universal restriction. Complex combinations still need their own test.
Native locale rules can select different fonts. Explicit mod-owned font declarations bypass inherited locale overrides. Verify glyphs, clipping and alignment rather than accepting a style readback as success.
Components and library boundaries
An open shadow tree can isolate component styles and keep internal nodes out of document-level queries. Keep custom-element constructors minimal: setting attributes during construction produced a native error even though JavaScript readbacks succeeded. Move attribute assignment after construction and verify connection, disconnection and attribute-change callbacks when recreating the view.
This does not establish slot behavior, focus delegation, adoption or arbitrary framework compatibility. Native React bundles do not certify a current npm release. Audit each dependency's DOM, layout, storage and transport requirements and emitted syntax before adopting it.
Verify operation, output and cleanup
- Identify the view/window owner and embedded version.
- Check API exposure without conflating missing and false values.
- Exercise one operation and measure its events and geometry.
- Inspect rendered pixels or native input for the actual acceptance criterion.
- Repeat after recreation and inspect native errors and cleanup.
Continue with media rendering, transport and storage, and workload measurement. A desktop browser preview validates the documentation or authoring layout, not embedded client compatibility.
Selectors and retained collections
Observed scope: WG 2.4.1.0 #977 / Cohtml 2.2.8.1. Selected class, attribute, child and sibling selectors worked in the DOM query APIs, but :not and :scope threw SyntaxError. Test stylesheet matching and JavaScript queries separately.
Grouped queries did not provide normal browser ordering or uniqueness: querySelectorAll('#c, #a') returned C then A, and overlapping selector arms could return a node twice. Use a shared owned class for a row collection, or explicitly deduplicate identities and establish order.
Retained query results and element.children kept their earlier node identities after tree changes in these tests. Reacquire them after reconciliation and release old collections, which can retain detached nodes. This result is collection-specific; it does not describe every engine collection. An element's closest() can also walk beyond the owned root, so check ownership after matching.
CSS fallback guards need behavior checks
In the same embedded build, CSS.supports was absent. Tested @supports rules logged parser errors yet still applied their inner width overrides, including a deliberately false condition. Do not use them to protect modern layout fallbacks here.
Choose the verified subset directly. When a feature needs a capability check, use a small owned positive/negative control and inspect settled geometry before selecting an explicit class. Accepted syntax or retained style text is insufficient: selected mixed-unit calculations and variable-fallback expressions remained readable while producing zero-width elements.
Publish native number text alongside raw values
The #977 frontend exposed no Intl.NumberFormat. Its Number.toLocaleString returned the same ungrouped decimal string for the tested locale requests. Method presence therefore did not establish localization.
For game-formatted text, publish a display string from Python beside the raw numeric value. Current gui.impl.backport helpers include getIntegralFormat, getFractionalFormat and getNiceNumberFormat. The integral helper converts through int; the fractional helper requests two digits. The nice format is not a promise of compact K/M notation. Render the supplied string directly and retain the raw number for calculations or sorting.
The recorded formatting output was checked in an English client; other locales and glyph rendering require their own verification. Keep these frontend results separate from model publication and layout measurement.