WCO & window-drag Demo

Window Controls Overlay + window-drag

This demo shows how to use Window Controls Overlay (WCO) to render a custom titlebar in a PWA, and how to define draggable regions using the window-drag CSS property (the new standard name for app-region).

Note: WCO only activates when this page is installed as a PWA and launched in its own window. In a regular browser tab the titlebar above is still visible but window dragging will not function.

Test 1: `app-region: drag` checking…

This element uses the legacy -webkit-app-region: drag / app-region: drag properties. Try dragging the window from the region below.

☰ Drag here (app-region: drag)

Test 2: `window-drag: move` checking…

This element uses the new window-drag: move property. Try dragging the window from the region below.

☰ Drag here (window-drag: move)

Test 3: Inheritance — Child Within Parent Bounds

The parent div has app-region: drag. The child div does not set app-region and is fully contained within the parent. Without inheritance, clicking the child still drags because the child is within the parent's draggable layout region. With inheritance, the child would explicitly inherit app-region: drag.

Parent — app-region: drag

Child div (no app-region set) — fully within parent

getComputedStyle(child).appRegion: …

Test 4: Inheritance — Child Overflows Outside Parent

Same setup as Test 3, but the child div overflows outside the parent's bounds. Without inheritance, the overflowed portion of the child (outside the parent) should not be draggable. With inheritance enabled, the entire child — including the overflowed area — should be draggable because it inherits app-region: drag.

Parent — app-region: drag

Child div (no app-region set) — overflows outside parent

getComputedStyle(child).appRegion: …

Feature Detection Results

CSS property support detected in this browser:

Running detection…