1865482 - Issues with CSS :lang() selector matching when the range is not a valid BCP47 tag

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[Jonathan Kew [:jfkthame]]

In bug 1857742, :lang() selector and lang attribute handling was improved by switching from parsing them as Unicode language identifiers to BCP47 language tags (which is what the spec says lang should be).

However, according to 747.neutron's analysis in bug 1857742 comment 17, the handling of the language range(s) in the :lang() selector is not entirely correct, in particular for cases where the range is not in itself a valid BCP47 tag, in which case the lang-tag parser rejects it and it will never match.

Comment 1

[Jonathan Kew [:jfkthame]]

Question (to be checked against specs & other browsers).... given this example:

data:text/html,<style>:lang("iw-jpan") { color:red }</style> <div lang="iw-ase-jpan">Is this text red?

should the :lang selector match or not?

Current release Firefox says no; but with the landing of bug 1857742 (i.e. upcoming Nightly) it says yes.

Chrome says no; but Safari says yes. (I think that following the RFC4647 algorithm would also say yes, so Chrome may be wrong here.)

Comment 2

[747.neutron]

As I tested a bit, Chrome seems only supporting Basic Filtering in RFC 4647, which is just a case-insensitive version of |=, instead of Extended Filtering that CSS spec stipulates. Anything which doesn't prefix match doesn't work, and it even doesn't support * wildcard.

Examples that work on Firefox 119 but not Chrome 119:

data:text/html,<style>:lang(iw-dk) { color:red }</style> <div lang="iw-jpan-dk">Is this text red?

data:text/html,<style>:lang(*-JP) { color:red }</style> <div lang="ja-jp">Is this text red?

I also found a quirk that Chrome refuses to accept quoted :lang() values:

data:text/html,<style>:lang("iw") { color:red }</style> <div lang="iw-jp">Is this text red?

does not work on Chrome but

data:text/html,<style>:lang(iw) { color:red }</style> <div lang="iw-jp">Is this text red?

does.

Comment 3

[747.neutron]

Sorry, the second example should be:

data:text/html,<style>:lang(\*-JP) { color:red }</style> <div lang="ja-jp">Is this text red?

Comment 4

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1865482 - Make CSS :lang() matching more correctly follow the BCP4647 Extended Filtering algorithm. r=#layout

The matching behavior implemented in bug 1857742 did not quite follow the spec,
particularly with regard to language ranges (as used in the :lang() pseudo)
that are not themselves valid language tags.

This updates the LangTagCompare function to more correctly follow the BCP4647
"Extended Filtering" algorithm, and adjusts the relevant WPT tests (originally
from bug 1857742) to reflect the corrected behavior.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0b9eff3819bc
Make CSS :lang() matching more correctly follow the BCP4647 Extended Filtering algorithm. r=layout-reviewers,emilio

Comment 6

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/0b9eff3819bc

Comment 7

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/43290 for changes under testing/web-platform/tests

Comment 8

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 9

[Jonathan Kew [:jfkthame]]

Comment on attachment 9364436 [details]
Bug 1865482 - Make CSS :lang() matching more correctly follow the BCP4647 Extended Filtering algorithm. r=#layout

ESR Uplift Approval Request

• If this is not a sec:{high,crit} bug, please state case for ESR consideration: Incorrect language tag processing prevents some lang attributes matching as expected, which may result in wrong display of content (e.g. using a Japanese font in place of Chinese).
• User impact if declined: Bad display of some content, resulting in culturally wrong presentation and sometimes impacting readability/usability.
• Fix Landed on Version: 122
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Change is purely within the lang-tag matching function, no wider impact.

Comment 10

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9364436 [details]
Bug 1865482 - Make CSS :lang() matching more correctly follow the BCP4647 Extended Filtering algorithm. r=#layout

Approved for 121.0rc1 and 115.6esr.

Comment 11

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-esr115/rev/b7218284895a

Comment 12

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-beta/rev/6a9e312a9316