[Webkit-unassigned] [Bug 177612] New: :-webkit-full-screen fails when there are other fullscreen-selectors in the same rule

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=177612

            Bug ID: 177612
           Summary: :-webkit-full-screen fails when there are other
                    fullscreen-selectors in the same rule
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Macintosh
                OS: macOS 10.12
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: okuederle at yahoo.de

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;
}
---

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20170928/e8dcfb1f/attachment.html>