:-webkit-full-screen fails when there are other fullscreen-selectors in the same rule

[Oliver]

The :-webkit-full-screen pseudo-class only works when the rule that contains it has no other fullscreen-related selectors. Consider the following HTML code:

<div id="el">This should be green in fullscreen mode</div>
<button onclick="document.getElementById('el').webkitRequestFullScreen()">Switch to full screen</button>

along with the following CSS code:

div#el {
  background: red;
}

div#el:-webkit-full-screen {
  background: green;
}

This works just fine. When switching to fullscreen, the DIV turns green as expected. Now we add another selector:

div#el:-webkit-full-screen, div#el:fullscreen {
  background: green;
}

Upon entering fullscreen, the DIV will remain red, the rule has no effect anymore. The following, however, will work:

div#el:-webkit-full-screen {
  background: green;
}

div#el:fullscreen {
  background: green;
}

For further reference, I've added a list below of CSS rules that will fail and some more that will succeed. There is also a Codepen with this code: https://codepen.io/anon/pen/WZjYbR

Since browser support is not yet consistent (i.e. -webkit-full-screen for Webkit/Edge, -moz-full-screen for Gecko, -ms-fullscreen for IE/Edge, :fullscreen as the W3C standard), it is very common to have all selectors in one rule so as not to repeat code. I would suggest that this be fixed or, better even, that the W3C suggestion be implemented.

More failure modes:

---
div#el:-webkit-full-screen, div#el:-moz-full-screen {
  background: green;
}
---
div#el:-webkit-full-screen, div#el:-ms-fullscreen {
  background: green;
}
---
div#el:-webkit-full-screen, div#el:fullscreen, div#el:-ms-fullscreen {
  background: green;
}
---

But this works:

---
div#el:-webkit-full-screen, div#el:hover {
  background: green;
}
---
div#el:-webkit-full-screen, button {
  background: green;
}
---

[Brent Fulgham]

This doesn't work properly in Safari 15.5+.

[Radar WebKit Bug Importer]

<rdar://problem/97093881>