Make the :window-inactive pseudo class apply to everything (or atleast the body/root element)

[Timothy Hatcher]

Right now scrollbars and selection work with window-inactive. But it would be useful for other things, at least the body/root element.


From CSSStyleSelector.cpp:

    // FIXME: This is a temporary hack for resizers and scrollbar corners.  Eventually :window-inactive should become a real
    // pseudo class and just apply to everything.

[Joseph Pecoraro]

Created attachment 236642 [details]
[TEST] Reduction

Hey! It seems like this selector now works for any element because of:
http://trac.webkit.org/changeset/172220

However it seems that querySelector identifies the elements, but the elements do not recalculate style and repaint. For example (attached test):

    <style>
    div { width: 200px; height: 200px; background: blue; }
    div:window-inactive { background: red; }
    </style>

    <div></div>

Note when inspector is focused that querySelector("div:window-inactive") finds the div. But the div is not red =(

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.6 on macOS 12.5 using attached test case and it shows "Red" square / box while all other browsers (Chrome Canary 106 & Firefox Nightly 105) show "Blue" square / box. Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/97693996>

[Ahmad Saleem]

Seems to be fixed in Safari 17 and Safari Technology Preview 180 and show 'Blue' square.

Marking this as 'RESOLVED CONFIGURATION CHANGED'. It might be fixed by Anne's selector serialization bug.

Although happy if some can do triage and add related commits detail, where this get fixed.

[Timothy Hatcher]

Not fixed. The div should be blue when the window is focused, and red when it is in the background.

[Tim Nguyen (:ntim)]

I don't think we should pursue this, we should instead look into standardizing a media query https://github.com/w3c/csswg-drafts/issues/5828