fullscreen
fullscreen copied to clipboard
whatwg
How :fullscreen CSS pseudo class works in shadow dom?
After reading the spec, I'm still not sure how CSS pseudo-class :fullscreen works in the context of shadow dom. See example below:
<style>
:fullscreen { color: blue }
</style>
<my-web-component>
#shadow-root
<style>
:fullscreen { color: green }
</style>
<video></video>
</my-web-component>
What happens after await video.requestFullscreen()?
- Is
<video>element color green? - Is
<my-web-component>element color blue?
Note that I wasn't able to find web platform tests for this.
Per "element is a shadow host and the result of retargeting its node document’s fullscreen element against element is element" in https://fullscreen.spec.whatwg.org/#:fullscreen-pseudo-class both the video element and the my-web-component element should match the :fullscreen pseudo class.
However, this isn't implemented in Chromium. Which behavior are you actually seeing?
I only see video element matching the :fullscreen pseudo class in Chromium hence my question.
OK, that's not too surprising. It's probably not too difficult to match the spec here, but it might require an extra flag on all elements. Haven't tried to implement it myself thought, could be trivial.
Following discussions at https://groups.google.com/a/chromium.org/d/msg/blink-dev/X-qPSmdSR_g/mRKxdlVICgAJ and https://github.com/w3c/webcomponents/issues/804, I believe the fullscreen API spec should removes retargeting for the :fullscreen CSS pseudo class.
@beaufortfrancois that would follow https://github.com/WICG/picture-in-picture/pull/126, right? There's also retargeting in https://fullscreen.spec.whatwg.org/#dom-document-fullscreenelement, what should happen to that?
@foolip @beaufortfrancois Has any progress been made on this issue? Removing retargeting would simplify implementations.
Picture-in-Picture spec has removed retargeting. I didn't follow up with the current state of Fullscreen API.
Based on what @rniwa just wrote in https://github.com/WICG/webcomponents/issues/804#issuecomment-1361017701 it seems like that change to picutre-in-picture was wrong and we shouldn't be changing :fullscreen either.
I wrote this test to see if anyone has implemented the second condition (element is a shadow host and the result of retargeting its node document’s fullscreen element against element is element) of https://fullscreen.spec.whatwg.org/#:fullscreen-pseudo-class yet:
<!DOCTYPE html>
<div id="host"></div>
<button onclick="test()">button to go fullscreen</button>
<script>
var root = host.attachShadow({mode: 'open'});
root.innerHTML = '<div>div that will go fullscreen</div>';
function test() {
var el = root.firstChild;
console.log(el)
if (el.requestFullscreen) {
el.requestFullscreen();
document.addEventListener('fullscreenchange', () => {
const hostMatches = host.matches(':fullscreen');
console.log('host matches: ' + hostMatches);
document.exitFullscreen();
}, { once: true });
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
document.addEventListener('webkitfullscreenchange', () => {
var hostMatches = host.matches(':-webkit-full-screen');
console.log('host matches: ' + hostMatches);
document.webkitExitFullscreen();
}, { once: true });
}
};
</script>
Chrome, Firefox and Safari all log "host matches: false".
I suspected WebKit might have an implementation, and it does:
https://github.com/WebKit/WebKit/blob/35db0b62befe4e0457c8adb56d156ed47c712621/Source/WebCore/css/SelectorCheckerTestFunctions.h#L409-L416
But this isn't shipping yet.
:fullscreen should follow whatever behavior :focus has. The current spec does make sense, but I'm worried about changing implementations, that might break sites. Has webkit shipped the change to its behavior?
It looks like the WebKit change is on its way to Safari stable. I've tested https://github.com/whatwg/fullscreen/issues/149#issuecomment-1361483842 in Safari 16.3 which logs "host matches: false", but in STP 164 I get "host matches: true".