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.
- extract_bounding_boxes returns position, size, z-index and viewport visibility for elements.
- detect_visual_occlusion computes the intersection to determine whether one element physically covers another — a real geometric answer rather than an eyeball judgement.
- verify_spatial_relationships validates a set of stated rules, such as one element being above another.
- compute_viewport_reflow measures how positions and sizes change across several viewport sizes, which is the responsive question stated as data.
- calculate_perceptual_contrast measures contrast between text and its background.
- verify_stacking_context reveals the full CSS stacking chain for an element — which ancestor is responsible for where it sits.
Playwright, and a page for it to measure.
One command — npx -y playwright-spatial-layout-mcp