Bug 184604 – Correct serialization of Selectors

• Component: CSS
• Status: RESOLVED FIXED

Created attachment 337924 [details]
Simple reproduction

Given a custom tag name with a colon in it (e.g. foo\:bar { font-weight; bold }), the cssText property should return a properly escaped string.

Instead, the backslash gets dropped. Attached a simple example; in Chrome and Firefox pressing the button has no visible effect, in Safari the text changes color.

This is potentially a regression:

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

Note, this also happens for other parts of the selector string, for example property names:

[ng\:cloak] { display: none; }

[Brent Fulgham]

This continues to be an issue in Safari 15.5+.

[Radar WebKit Bug Importer]

<rdar://problem/97092572>

[Ahmad Saleem]

Still issue in Webkit ToT (264635@main).

[Anne van Kesteren]

Pull request: https://github.com/WebKit/WebKit/pull/14629

[Anne van Kesteren]

I filed https://github.com/w3c/csswg-drafts/issues/8909 against the specification. Looking at this more it seems this problem also applies to attributes. I'm somewhat surprised it was not discovered before.

[Anne van Kesteren]

I think there's two bugs at issue here:

1. Selector serialization. We emit the raw identifier rather than the escaped identifier as required by https://drafts.csswg.org/cssom/#serialize-a-simple-selector.
2. Selector representation. For both the prefix and local name we don't represent the universal selector as its own thing internally. We therefore cannot distinguish between the inputs * and \*. Chromium has this problem as well, but only for the prefix.

You can kinda fix 1 by serializing a lone * as * and not \*, but that still leaves

  \* { color:red }

doing the wrong thing and also incorrectly getting serialized as

  * { color:red }

The next step here is probably writing web-platform-tests as there appears to be no coverage for these scenarios in css/selectors or anywhere in WebKit's own tests based on my naive fix for 1.

[Anne van Kesteren]

I convinced myself that 1 might not be so desirable after all given how the DOM works. Seems easier to just special case * in a couple of places. I opened https://github.com/w3c/csswg-drafts/issues/8911 to discuss this further and depending on the outcome of that our model will either be validated or we'll have to create some kind of internal representation for *, but I hope not.

[EWS]

Committed 264980@main (892935d504cf): <https://commits.webkit.org/264980@main>

Reviewed commits have been landed. Closing PR #14629 and removing active labels.

[Anne van Kesteren]

*** Bug 253041 has been marked as a duplicate of this bug. ***