Break test · 2026-10-06

before #menu

9 scenarios break4 hold1 to look at
As it isas it is

The component with its real content.

  • text cut off: h2.name
  • already broken before any scenario
Text 3× longerbreaks

Every text three times its length: a long name, a long title, a real review.

  • text cut off: h2.name (+7)
  • texts on top of each other: span.price × h2.name (+2)
A word that won't wrapbreaks

The longest word replaced by a 42-letter one. URLs, emails and German do this.

  • text cut off: h2.name (+7)
  • texts on top of each other: span.price × h2.name (+4)
No textholds

Every text empty: missing data, a field nobody filled.

Translated, 40% longerbreaks

Accents everywhere and 40% more words, like a German or Finnish translation.

  • text cut off: h2.name (+2)
  • texts on top of each other: span.price × h2.name (+2)
Huge numbersbreaks

Every number becomes 1,234,567.89.

  • text cut off: p.meta
  • texts on top of each other: span.price × h2.name (+2)
Accents and emojibreaks

Short texts get “Zoë Ñúñez-O'Brien 🎂”, the name your form will meet.

  • text cut off: h2.name (+7)
  • texts on top of each other: span.price × h2.name (+2)
Images faillook

Every image and background image broken, like a slow CDN or a deleted file.

Only one itemholds

The list inside the component with a single item.

25 itemsbreaks

The list inside the component with 25 items.

  • text cut off: h2.name (+7)
Right to leftbreaks

The page in RTL, as in Arabic or Hebrew.

  • texts on top of each other: span.price × h2.name (+2)
320px screenbreaks

The smallest phone, or a laptop at 400% zoom.

  • spills out of the component: article.card, 44px (+5)
  • page scrolls sideways, 660px
Text at 200%breaks

The browser font size doubled, as a user with low vision sets it. Text in px does not follow.

  • text ignores the font size setting (px): span.price (+14)
High contrastholds

Windows forced colors: backgrounds and shadows disappear, only borders and text stay.

Dark modeholds

The system in dark mode.

  • looks exactly like the default

Made by /coleoni-break · skills.coleoni.com