Playground
The components from demo/docs/assets/ia.css under the conditions they fail in:
mismatched heights, every state at once, labels far longer than anyone designed for,
right-to-left scripts, dark chrome and touch. Each case checks itself where it can
and says pass or fail; the rest are for looking at.
Anything that overflows its box, clips its text, misaligns or points the wrong way is
a bug in the component, not in the content.
Control alignment
Every control sets its height from a --ia-size-control-* token with
border-box sizing, so same-size controls line up whatever their font, border or
content. Each control below is measured; a height that isn't the row's token fails.
Small — --ia-size-control-sm
Medium — --ia-size-control-md
Control states
Every interactive control in each of its states, side by side. Focus shows only under keyboard focus — Tab through the grid rather than clicking.
Density
A realistic results toolbar and facet group together, the way a search page uses them. The compact controls have to stay usable side by side, not just alone.
Long content
Labels far longer than anyone assumed: long translations, unbroken strings, CJK and a title that is one URL — the metadata archive.org actually receives. Each stage is 20rem wide; a case fails if anything inside it overflows that width.
Right-to-left
The same components under dir="rtl", carrying Arabic, Hebrew and Persian
metadata. Anything laid out with logical properties mirrors on its own; an icon,
chevron or close button left on the wrong side, text that still aligns left, or a
Latin name or number scrambled inside an Arabic title is a bug. Titles carry
dir="auto", so a Latin title in an Arabic page keeps its own order.
Dark chrome
Everything inside .ia-inverse — text, borders, focus, hover and the soft
selected look re-point themselves. Tab through for the inverse focus ring.
Coarse pointer
The same controls with the stylesheet's own @media (pointer: coarse)
rules applied, as a touch screen gets them. Each target is measured; anything under
44×44 fails. Text links in running prose are exempt and are not in this grid.
Metadata extremes
Tiles at the edges of what the data allows: no views and 230 million, no creator, no thumbnail, a title that is one URL, a creator list that runs on.