v150 · Window Management
display-state Media Feature
A live read-out of matchMedia("(display-state: …)") for all four values. A MediaQueryList change listener updates the table the instant the window's state flips — the mechanism a custom titlebar uses to swap its maximize and restore buttons in pure CSS.
Observed display-state result
checking…
| Media query | .matches |
|---|
app window
checking
This mock window restyles via
@media (display-state: maximized). Trigger the separate Fullscreen API to verify :fullscreen feedback without changing any result row.
Fullscreen exercises the separate Fullscreen API and :fullscreen pseudo-class, not display-state. Re-test the rows in an implementing installed-app window; enabling a flag alone is not conformance evidence.
// Watch the window's display state in CSS — no permission needed:
@media (display-state: maximized) {
#restore-button { display: flex; }
#maximize-button { display: none; }
}
// …and in JS, reacting to every change:
const mql = window.matchMedia('(display-state: maximized)');
mql.addEventListener('change', (e) => {
updateTitlebar(e.matches ? 'maximized' : 'restored');
});
console.log('maximized right now?', mql.matches);