1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-06-09 09:34:57 +09:00

LibWeb/CSS: Bring :lang() matching closer to spec

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
parent e0e513e9fc
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>