codepen.io - Red background appears instead of green background

[trusktr]

URL: https://codepen.io/romainmenke/pen/poBZzjd

Browser / Version: Edge 123.0.0 Operating System: Mac OS X 10.15.7 Tested Another Browser: Yes Firefox

Problem type: Something else Description: CSS Nesting not working the same in Safari/Chrome as in Firefox Steps to Reproduce: When visiting https://codepen.io/romainmenke/pen/poBZzjd, we can see that the background is red in Chrome (unexpected) and green in Firefox (expected).

View the screenshot

Chrome: Firefox:

Browser Configuration

• None

Discovered here under the context of "syntax not working as expected":

• https://github.com/w3c/csswg-drafts/issues/9492

From webcompat.com with ❤️

[ailioaie]

Thank you for reporting this issue, I was able to reproduce it. The background is red on Chrome and should be green.

Tested on: • Browser / Version: Firefox Nightly 127.0a1 (2024-04-15) / Chrome 123.0.6312.124 / EDGE 123.0.2420.97 • Operating System: MacOS Ventura 13.6.1

Notes:

1. Reproducible on Chrome and Edge
2. Not reproducible on Firefox

Moving to Needsdiagnosis.

[qa_16/2024]

[trusktr]

Diagnosis:

The title of that pen, written by @romainmenke, mentions "Next rule is discarded after double pseudo in nesting".

If we remove the double-pseudo, the issue goes away, for example:

https://codepen.io/trusktr/pen/vYMzzqv/5974019dacac7d5af1c0110b821e83e5

Looks like the presence of the double-pseudo breaks the other parts of the nesting.