HTML Test Patterns

A collection of animations adapted for video keying, CEF overlays, and streaming layouts. Everything runs fullscreen with suppressed interactions, and — the reference test card aside — a transparent background.

Test Card

SMPTE RP 219 bars and PLUGE, drawn as SVG at the viewport's exact device-pixel resolution. colorimetry follows the resolution; ?sync swaps the stereo ident for an A/V sync flash. Opaque by design.
  • flags
Custom / SVG RP 219 · BT.1729
Sync Grid

A configurable grid of color-coded cells, each showing the same frame counter at 90% of its own height — any drift or misalignment between regions of a downstream mapping shows up instantly. Opaque by design.
  • flags
Custom / DOM rows & cols
Passthrough

The one pattern whose picture comes from outside: a capture device, full frame, with its own audio. The strip names the device, the format it negotiated, the frame rate actually arriving and the per-channel peaks. Opaque by design.
  • flags
Custom / Capture getUserMedia
Dark City Ambience

Rain and reflections on a glass screen, drawing a glowing cityscape at night.
  • key
CodePen / WebGL by atzedent
Chromophilic

Organic, morphing chromatic shapes blending across dynamic palettes.
  • key
CodePen / WebGL by atzedent
Untitled (Sakura?)

High-quality falling cherry blossom petals rendering with depth-of-field blur.
  • key
CodePen / WebGL by at80
Birds of a Feather

Swarming light particles floating fluidly in an organic flocking pattern.
  • key
CodePen / Canvas 2D by tmrDevelops
Seascape

Raymarched 3D ocean waves under a transparent sky, rendering procedurally.
  • key
Shadertoy / WebGL by Alexander Alekseev
Mystify

Recreation of the classic Windows screensaver with bouncing glowing wireframes on a transparent background.
  • key
Custom / Canvas 2D by Shadertoy
Marching Cubes

3D blobs morphing dynamically via WebGL marching cubes on a transparent context.
  • key
Three.js / WebGL by three.js
Physical Clearcoat

3D spheres rendering physical clearcoat reflective materials floating dynamically.
  • key
Three.js / WebGL by three.js

Test Card options

Bare query-string flags, order-independent, and freely combined — for example ?2020&sync&legal. Everything else is chosen automatically from the resolution of the viewport.

FlagEffect
601 601-625 ebu 709 2020 Force the colorimetry. By default it follows the resolution: up to 1024×576 uses BT.601, from 3840×2160 uses BT.2020, and anything between uses BT.709. 601 is SMPTE 170M (525-line); 601-625 and ebu are both EBU 3213.
sync EBU 3325 sync-flash variant. A bar sweeps the frame every two seconds and the strip flashes white for exactly one frame as it passes the centre, coincident with a 40 ms 1 kHz blip. Replaces the stereo ident.
legal Map 0–100% video onto codes 16–235, which makes the sub-black PLUGE bar representable. Without it the −2% bar clips to black — the identification strip says which mode is live.
noosd Drop every burned-in caption: the identification strip, the detail-band labels, the aspect-ratio labels and the sync caption. The strip's twelfth returns to the color bars and the gratings grow to fill their cells. Marker lines and all measurement elements stay.
nomarkers Omit the safe-area boxes, centre-cut lines, centre cross and geometry circle.
srgb Force sRGB output even on a wide-gamut display, instead of emitting the bars as color(rec2020 …).
mute Build the picture only, with no audio.

Audio runs at −18 dBFS and starts on its own where autoplay permits; otherwise any click or keypress starts it, and the identification strip reports the audio state. The default ident is a continuous 1 kHz tone on the left channel against a 1 kHz tone on the right interrupted once a second.

Sync Grid options

Query-string values, freely combined — for example ?rows=3&cols=4. With nothing specified it lays out a 2×2 grid.

FlagEffect
rows= cols= Number of grid rows / columns (1–32 each). Defaults to 2 and 2.

Every cell shows the same frame counter, 00–99 wrapping, incrementing once per rendered frame, sized to 90% of its own cell's height. Background color is chosen by cell index modulo 9, cycling red, green, blue, cyan, magenta, yellow, black, grey, orange. If two regions of a downstream mapping ever show different numbers at the same instant, or the digits sit at different heights, the mapping has drifted.

Passthrough options

Bare flags as above, plus four that take a value — for example ?video=capture&mute. With nothing specified it opens the first video input at 1920×1080@60 and takes the audio belonging to that same device.

FlagEffect
video= audio= Choose an input: a case-insensitive part of its label, an exact deviceId, or a 0-based index. Prefer the label — a deviceId is salted per browser profile and changes whenever the profile does, which for a kiosk is every launch.
size= fps= Demand an exact capture format, e.g. size=1920x1080, fps=60. Without them the format is an ideal of 1920×1080@60, so a device that cannot manage that still opens at its nearest.
novideo noaudio Leave that half unopened. novideo gives meters with no picture; noaudio captures no sound at all.
mute Capture the audio and meter it, but do not play it out — the flag to reach for when the capture and the speakers share a room.
fill cover Stretch to the viewport, or crop to it. The default fits the whole frame inside, pillar- or letter-boxed in black.
noosd Drop the identification strip, leaving nothing over the picture.
list Enumerate the inputs and stop, so a label can be read off before it is used to select one.

getUserMedia exists only in a secure context, so this page needs https://, localhost, or Chromium's --unsafely-treat-insecure-origin-as-secure. Note also that the two flags which wave a capture prompt through — --auto-accept-camera-and-microphone-capture and --use-fake-ui-for-media-stream — never persist a grant, and without a persisted grant every device label and deviceId reads back blank, leaving video= and audio= nothing to match on. The VideoCaptureAllowedUrls and AudioCaptureAllowedUrls policies do persist, and are the better choice for an unattended machine.