LibWeb/CSS: Bring :lang() matching closer to spec
Some checks are pending
CI / Lagom (arm64, Sanitizer_CI, false, macos-15, macOS, Clang) (push) Waiting to run
CI / Lagom (x86_64, Fuzzers_CI, false, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, false, ubuntu-24.04, Linux, GNU) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, true, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (arm64, macos-15, macOS, macOS-universal2) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (x86_64, ubuntu-24.04, Linux, Linux-x86_64) (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run

With this, we pass the 8 ref tests in css/selectors/selectors-4/ which
previously failed. This is not technically a full implementation, as we
are supposed to first canonicalize the language range and tag, but that
will require downloading and processing the IANA language subtag
registry:

https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry

That's significantly more work, and WPT doesn't seem to test any cases
that require that, so we can leave it for now.
This commit is contained in:
Sam Atkins 2025-05-15 14:47:05 +01:00 committed by Tim Ledbetter
commit 1fe29ac642
Notes: github-actions[bot] 2025-05-15 15:41:56 +00:00
28 changed files with 449 additions and 14 deletions

View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching reference</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div.test { color: green; }
</style>
<div class="test">This should be green</div>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
:lang(en-US) { color: green; }
</style>
<div class="test">This should be green</div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
:lang(fr) { color: green; }
</style>
<div class="test"><span lang="fr">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
:lang("FR") { color: green; }
</style>
<div class="test"><span lang="fr">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
:lang("Fr") { color: green; }
</style>
<div class="test"><span lang="fR">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
:lang("fr") { color: green; }
</style>
<div class="test"><span lang="fr-CH">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: green; }
:lang("fr-CH") { color: red; }
</style>
<div class="test"><span lang="fr">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: green; }
:lang("fr-CH") { color: red; }
</style>
<div class="test"><span lang="fr-FR">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
:lang("*-CH") { color: green; }
</style>
<div class="test"><span lang="fr-CH">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
:lang("*-Latn") { color: green; }
</style>
<div class="test"><span lang="fr-Latn-FR">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
:lang("fr-FR") { color: green; }
</style>
<div class="test"><span lang="fr-Latn-FR">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
:lang("*-FR") { color: green; }
</style>
<div class="test"><span lang="fr-Latn-FR">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
:lang("fr", "nl", "de") { color: green; }
</style>
<div class="test"><span lang="fr-Latn-FR">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
:lang(de, nl, fr) { color: green; }
</style>
<div class="test"><span lang="fr-Latn-FR">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: green; }
:lang(de, nl, 0, fr) { color: red; }
</style>
<div class="test"><span lang="fr">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: green; }
:lang(0) { color: red; }
</style>
<div class="test"><span lang="0">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
:lang(\*-FR) { color: green; }
</style>
<div class="test"><span lang="fr-Latn-FR">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
:lang(fr) { color: green; }
</style>
<div class="test"><span lang="fr-FR-x-foobar">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
:lang("fr-x-foobar") { color: green; }
</style>
<div class="test"><span lang="fr-Latn-FR-x-foobar">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
:lang("*-x-foobar") { color: green; }
</style>
<div class="test"><span lang="fr-Latn-FR-x-foobar">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: green; }
:lang("fr-x-foobar") { color: red; }
</style>
<div class="test"><span lang="fr">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
:lang("iw") { color: green; }
</style>
<div class="test"><span lang="iw-ase-jpan-basiceng">This should be green</span></div>

View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
span:lang("en-gb-oed") { color: magenta; }
span span:lang("*-gb") { color: green; }
</style>
<div class="test" lang="en-GB-oed"><span><span>This should be green</span></span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
:lang("i-navajo") { color: green; }
</style>
<div class="test"><span lang="i-navajo">This should be green</span></div>

View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
:lang("x") { color: green; } /* not a well-formed lang tag, but matches per
the Extended Filtering algorithm */
</style>
<div class="test"><span lang="x-lojban">This should be green</span></div>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
:lang("art") { color: green; }
</style>
<div class="test"><span lang="art-lojban">This should be green</span></div>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>CSS Selectors 4 - :lang matching</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-lang-pseudo">
<link rel="match" href="../../../../../expected/wpt-import/css/selectors/selectors-4/lang-000-ref.html">
<style>
div.test { color: red; }
:lang("art") { color: green; }
</style>
<!-- This can match :lang("art"), because "-x-lojban" is a private subtag,
so this is *not* the grandfathered "art-lojban" tag. -->
<div class="test"><span lang="art-x-lojban">This should be green</span></div>