← Back to Boxy

Test Case Catalog

Interactive layout bug scenarios. Toggle to break, click to interact, run Boxy to see real analysis output.

12 scenarios
0 clean
0 issues found

Clipping

CLIPPING Positioned elements cut off by parent overflow
Dropdown in table cell
Click “...” on the last row. Toggle breaks the table overflow.
CLIPPING LINT
WORKING
Alice Chen...
Bob Park...
Carol Wu...
Select inside modal
Click the select trigger. Toggle adds overflow:hidden to modal.
CLIPPING LINT
WORKING
Edit User
Role: Admin ↓
Admin
Editor
Viewer
Tooltip trapped by stacking context
Click “Show info”. Toggle adds opacity + overflow:hidden to parent.
CLIPPING LINT
WORKING
Helpful tooltip
Component card
Show info ↑
Other card (z:1)

Collapsed

COLLAPSED Elements with near-zero dimensions but visible content
Sidebar collapsed to 0px
Toggle collapses sidebar width to zero — nav items vanish.
SIZE BASELINE
WORKING
Dashboard
Projects
Settings
Users
Main content area
Flex item crushed
Toggle causes siblings to crush the “Submit” button to 3px.
SIZE BASELINE
WORKING
display: flex
Navigation
Search Bar
Submit
Profile

Off-Screen

OFF_SCREEN Positioned elements outside viewport bounds
Toast stuck off-screen
Toggle moves toast above viewport — animation stuck.
OFF_SCREEN LINT
WORKING
Page content here...
Saved successfully
Notification at wrong offset
Click bell to open. Toggle pushes dropdown off-screen.
OFF_SCREEN LINT
WORKING
New message...
Build passed
Deploy done

Stacking / Overlap

OVERLAP Z-index conflicts where elements are buried or clipped
Popover behind sticky header
Click content area to show popover. Toggle raises header z-index.
OVERLAP LINT
WORKING
Sticky Header (z-index)
Popover content

Scroll

SCROLL Content hidden because scroll was removed
Broken scroll container
Try scrolling the list. Toggle changes overflow:auto to hidden.
CLIPPING BASELINE
WORKING
1. Project Alpha
2. Project Beta
3. Project Gamma
4. Project Delta
5. Project Epsilon
6. Project Zeta
7. Project Eta
8. Project Theta
overflow: auto

Intent Suppression

NO ISSUE Intentional patterns Boxy correctly ignores
Text truncation with ellipsis
Static overflow:hidden + text-overflow:ellipsis. Intentional.
NO ISSUE LINT
This is a very long title that gets truncated at the edge
Another long description text that overflows its container element
user@really-long-email-address-example.com
Intentional
Avatar image crop
Circle overflow:hidden on static elements. Intentional.
NO ISSUE LINT
JD
AK
MR
Intentional
Screen-reader only element
Positioned at -9999px, 1x1px. Accessibility pattern, not a bug.
NO ISSUE LINT
Suppressed
Home About Contact
Skip to main content
<a class="sr-only"> Skip to content
position: absolute; left: -9999px;
width: 1px; height: 1px;