Real-device checks

First pass: iPhone Safari

1. Record the phone model, iOS version, date and page build. Note Low Power Mode and accessibility preferences.
2. Use your usual preferences first. Run N1–N5, G1–G3 and E1–E3 in portrait; repeat in landscape.
3. For the animation comparison, briefly test with Reduce Motion off if comfortable. Then run P1 with it on. Restore your usual settings afterward.
4. Record each result as pass, fail or not tested. Capture an eight-second video for a movement failure; use screenshots for clipping or placement.

If you prefer to keep motion reduced, E1 is not tested rather than failed. Review keyboard and screen-reader interactions separately from touch interactions.

Navigation

Use these three instances as well as the documentation menu at the top. In the narrow layout, start with Menu → Explore → Materials → Surfaces. In the wide layout, start with Explore.

1. N1 — Open and position. Open each level. The active panel stays within the viewport, its labels remain visible, and it appears below its top-level opener on wide screens. On narrow screens it uses the mobile panel placement.
2. N2 — Dismiss outside. With Surfaces open, tap the outside target or another area outside the panel. All open panels close. Reopen and repeat from Explore.
3. N3 — Back and close. Use Back to return one level at a time, then Close menu. The expected parent appears and hidden panels do not receive taps.
4. N4 — Navigate. Follow Glass guide. The destination loads; return with Safari Back and note whether a restored page retains an open panel. In-page links are not used for this dismissal check.
5. N5 — Rotate and switch theme. Rotate with a panel open; close it, use the documentation Theme menu to switch Light/Dark, and reopen a documentation submenu. Record clipping, stale paint or unreadable text. The fixed-theme fixtures below deliberately keep their own theme.

Desktop or hardware-keyboard follow-up: Tab/Shift+Tab through the visible controls; use Enter/Space, Back and Escape at every depth. Record where focus lands after each close. Native opener restoration is a known limitation requiring review.

Glass transmission, corners and native controls

The broad colour bands are a test backdrop. Compare the glass card with its solid exception. The glass should transmit a softened tint; the solid card should conceal the pattern.

1. G1 — Material. Compare both themes: the colour bands are softened through glass, while solid exceptions remain opaque. If blur is unsupported or a transparency preference is exposed, an opaque fallback is acceptable; record that condition.
2. G2 — Shape and paint. No square patches protrude from rounded corners, borders join cleanly, and the gap between cards shows the backdrop. Labels and primary actions remain readable.
3. G3 — Interaction and scroll. Open and dismiss the glass response, edit the input and use the native select. Scroll with the keyboard shown and hidden. Controls stay reachable; note visible stutter or flashing while scrolling.

Static and animated edges

These four cases explicitly use the Mono palette. Compare Animated with Plain for at least eight seconds. Movement belongs to the rim; the label and interior should stay steady.

1. E1 — Visible movement. With motion allowed, the card and Animated rim visibly move in all four cases. Plain stays undecorated and Disabled does not animate. Pay particular attention to dark Mono.
2. E2 — Geometry. No filled centre, square corner patch, clipped rim or layout shift appears. Animated and Plain have the same control size and text treatment.
3. E3 — Tap through decoration. Both enabled buttons open the response. Close or tap outside to dismiss it. Disabled cannot open it.

Preference checks

P1 — Reduce Motion. On iPhone, use Settings → Accessibility → Motion → Reduce Motion. Return to Safari and reload. Decorative edge movement and popover/glide transitions should stop; navigation and controls must still work. Apple’s Reduce Motion instructions.

P2 — Reduce Transparency / Increase Contrast. In Settings → Accessibility → Display & Text Size, test these settings separately. When Safari exposes the corresponding CSS preference, glass falls back to opaque surfaces and increased contrast removes decorative edges. If the setting is not exposed, record unsupported rather than claiming the fallback was tested. Apple’s display accessibility instructions.

These indicators use CSS feature and preference queries. They report what this browser exposes, not its model/version or a physical-device pass.

Report the result

Copy this template and report any failed IDs with reproduction steps. An eight-second recording is more useful than a still image for an animation failure. The page does not store or submit results.

Device model:
OS version / browser version:
Page build revision:
Date / tester:
Orientation: portrait / landscape
Reduce Motion / Reduce Transparency / Increase Contrast:
Low Power Mode:
N1–N5: pass / fail / not tested
G1–G3: pass / fail / not tested
E1–E3: pass / fail / not tested
P1–P2: pass / fail / unsupported / not tested
Failure IDs, steps and screenshots/video:
Keyboard / VoiceOver: not tested unless separately reviewed

For a new release or regression report, provide fresh results with the build revision and device details. Existing release acceptance is recorded separately in the validation record above.