Overflow and Focus QA Playground

Responsive QA playground

A big page built to break sideways—and lose focus.

This page intentionally contains horizontal overflow defects and broken keyboard focus states. Test it at 1440, 1024, 768, 390 and 375 pixels, then run the focus audit to validate issue detection.

Explore test blocks

Block 01 · Services

Fixed-width service cards

This row is deliberately 980px wide and will escape smaller viewports without using an overflow container.

Intentional overflow #1

Strategy

Planning, discovery and product direction for complex digital services.

Design

Accessible interfaces, scalable design systems and rapid prototyping.

Engineering

Reliable, responsive frontends built for real users and real devices.

Quality

Automated checks that catch layout, content and interaction regressions.

Block 02 · Data

An oversized comparison table

The table has a minimum width of 1120px. Its wrapper does not contain overflow, making this a classic mobile layout defect.

Intentional overflow #2

Platform	Availability	Transactions	Markets	Latency	Status
Atlas Core	99.99%	18.4 million	42 countries	84 ms	Operational
Orbit Pay	99.97%	12.8 million	31 countries	102 ms	Operational
Nova Ledger	99.95%	8.7 million	26 countries	117 ms	Monitoring
Pulse Connect	99.98%	16.2 million	38 countries	91 ms	Operational

Block 03 · Announcement

A 100vw child inside a container

The banner starts at the container edge but is as wide as the viewport, so it exceeds the viewport on the right.

Intentional overflow #3

216+markets supported

99.99%service availability

24/7global operations

Block 04 · Integration

An unbreakable API token

Long URLs, filenames and generated IDs often bypass otherwise responsive layouts.

Intentional overflow #4

Generated request identifier

production_checkout_authorization_transaction_reference_01J4NX7Z9XQ8R6P2W5K3M8V1B4C7D0E9F2G5H8J1K4L7N0P3Q6R9S2T5U8V

Integration notes

Tokens should wrap, truncate, or sit inside a deliberate scrolling region. This example does none of those things.

Automated checks should identify the exact element, its bounds and how many pixels it exceeds the viewport.

Block 05 · Case study

Fixed-width visual content

This gradient media panel represents an image with a hard-coded 1380px width and max-width disabled.

Intentional overflow #5

1380px fixed-width media placeholder

Challenge

A distributed product ecosystem created inconsistent customer journeys and slow releases across regions.

Outcome

A unified component system reduced delivery time while improving accessibility and responsive behavior.

Block 06 · Feature

Offset content beyond the right edge

A relative left offset combined with extra width makes this card visually and geometrically exceed the document.

Intentional overflow #6

“Responsive quality is not a final polish. It is part of the product architecture.”

— QA Engineering Team

Block 07 · Capabilities

A no-wrap pill collection

Every pill has a fixed basis and the flex row is prohibited from wrapping.

Intentional overflow #7

Digital banking

Payment processing

Fraud protection

Card issuing

Data intelligence

Global support

Built for scale

Modular infrastructure adapts to growing portfolios and new markets.

Designed for trust

Security and observability are considered throughout each workflow.

Ready to evolve

Composable features make experimentation and iteration easier.

Block 09 · Focus accessibility

Deliberately broken keyboard focus states

Use this section to validate whether the Playwright focus audit detects missing, thin, low-contrast, clipped, obscured and non-focusable controls.

Focus issue #1

No visible focus indicator

The button receives keyboard focus, but outline, shadow and visual state changes are removed.

Focus issue #2

Indicator is only 1px thick

A visible outline exists, but it is thinner than the audit’s configured 2px minimum.

Thin focus outline

Focus issue #3

Low-contrast focus indicator

The white outline has very little contrast against the nearly white surrounding surface.

Focus issue #4

Focus outline clipped by overflow

The parent uses overflow:hidden, while the indicator is rendered outside the button.

Focus issue #5

Focused control is obscured

A separate high-z-index layer covers the middle of this button and its focus state.

Focus issue #6

Fake button cannot receive focus

This element has role=”button” but no tabindex, so Playwright should fail to focus it.

Non-focusable button

Focus issue #7

Background-only focus change

The focused background changes only slightly, with no outline, shadow or border thickness.

Focus issue #8

Underline-only focus treatment

This link removes its outline and adds only a thin underline, exposing a limitation in the current detector.

Underline-only focus

Block 08 · Contact

Negative-margin call to action

The final block expands 260px beyond its parent and shifts left, overflowing both sides at several viewport sizes.

Intentional overflow #8

Ready to test your layout script?

Resize the browser, run the built-in scanner and compare its results with your Playwright CSV report.