demo · v151

Inheritance Debugger

A live mini-DOM. Set window-drag on any node, then walk the cascade — each row shows the explicit value, the inherited value, and the effective getComputedStyle. Spot the common bug where a button inside a draggable header keeps inheriting "drag" and stops receiving clicks.

Inherited property. window-drag is inherited: set it once at .titlebar and every descendant becomes draggable unless explicitly overridden. The OS-level drag handler only kicks in inside an installed PWA — this page simulates the cascade.

legend

drag moves the window no-drag interactive auto default, no opinion dashed = inherited

DOM tree

generated CSS

why this matters

The most common Window Controls Overlay bug: a developer sets window-drag: drag on .titlebar and forgets that every descendant inherits. Clickable elements — search box, menu button, avatar — silently stop receiving pointer events because the OS hijacks the drag. The fix is always explicit: every interactive descendant needs window-drag: no-drag. This debugger highlights exactly which nodes pick up an inherited drag they probably didn't mean.

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗