MCP SERVERTest layout as geometry rather than as screenshots — bounding boxes, actual overlap, stacking context chains, contrast, and how positions change across viewports.
LABSCO SUMMARY
Stacking context is the most opaque part of CSS layout — an element's z-index is meaningless without knowing which ancestor established the context it sits in, and the chain is invisible in devtools without hunting. Returning it directly turns a debugging session into a lookup. The broader argument here is sound too: visual regression by screenshot tells you something changed and not what, while measured geometry tells you the nav moved eleven pixels and now overlaps the hero. That is an assertion you can write a test around, and it does not break when a font renders differently on CI.
A spatial layout assertion toolkit over Playwright: six tools that measure where elements actually are and how they relate, instead of comparing rendered images.
Playwright, and a page for it to measure.
One command — npx -y playwright-spatial-layout-mcp
USE CASES
Assert the spatial rules — this above that, this not overlapping that — as geometry rather than comparing rendered pixels.
Compute the intersection between the two elements rather than judging from a screenshot.
Read the full stacking context chain to see which ancestor established the context, since z-index alone does not explain it.
Measure how positions and sizes change across viewport widths, so a reflow problem is a number rather than an impression.
Measure the contrast between the text and what is behind it.
Counted once with only startup setup. Other versions, modes or optional credentials may expose a different list.
calculate_perceptual_contrastMeasures color contrast between a text element and its background using both WCAG 2.x and APCA (WCAG 3.0 draft) formulas simultaneously. Use to answer: does this text pass accessibility contrast requirements? Is it actually readable even if it technically passes the legacy formula?
compute_viewport_reflowMeasures how element positions and sizes change across multiple viewport sizes. Use to answer: does the layout break on mobile? Which elements shift most when resizing?
detect_visual_occlusionChecks if one element physically overlaps another by computing the intersection of their bounding boxes. Use to answer: is this button hidden under a sticky header? Does the cookie banner block the CTA?
extract_bounding_boxesReturns the geometric position, size, z-index, and viewport visibility for one or more DOM elements. Use to answer: where exactly on screen is this element? Is it visible? Is it off-screen?
verify_spatial_relationshipsValidates a set of spatial layout rules — e.g. 'nav must be above hero', 'sidebar must be left of content'. Returns pass/fail per rule with a human-readable reason. Use to answer: does the page layout match the design specification?
verify_stacking_contextReveals the full CSS stacking context chain for an element — which ancestors create new stacking contexts and why. Use to answer: why is my z-index:9999 element still behind a modal? Does this element create its own stacking context?
BEFORE YOU INSTALL
6 tools when we connected.
npx on PATH
CONTEXT COST
Rated by the size of the 6 tool definitions that ride along on every turn, not by how many there are
INSTALLATION
Add the block to your client, or run the command directly.
{
"mcpServers": {
"playwright-spatial-layout-mcp": {
"command": "npx",
"args": [
"-y",
"playwright-spatial-layout-mcp"
]
}
}
}npx -y playwright-spatial-layout-mcpMCP servers
currents-dev
segentic-lab
debugg-ai
agenticempire