Re: [whatwg/fullscreen] How :fullscreen CSS pseudo class works in shadow dom? (#149)

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:

```html
<!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.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/fullscreen/issues/149#issuecomment-1361483842

You are receiving this because you are subscribed to this thread.

Message ID: <whatwg/fullscreen/issues/149/1361483842@github.com>

Received on Wednesday, 21 December 2022 15:26:03 UTC