From ea43807f11ed6dc5eaf606a3a1d64805b1570959 Mon Sep 17 00:00:00 2001 From: Bramus Date: Fri, 5 Jun 2026 11:54:34 +0200 Subject: [PATCH 01/21] [css-navigation-1] Add examples (#14012) * Remove duplicate description * Add FIXME to disambigue wording * Change example to have the URL be different from the name * Add prose and example to clarify how `url-pattern()` patterns work * Add `url-pattern()` examples that have capture groups * Move <> section to the top * Extend :link-to() example to also include url() and named route variants * Move `:active-navigation()` example * Add simple :active-navigation() example * Add :active-navigation example with <> * Cater for `url()` including the querystring and the hash when matching --- css-navigation-1/Overview.bs | 419 +++++++++++++++++++++++++++-------- 1 file changed, 327 insertions(+), 92 deletions(-) diff --git a/css-navigation-1/Overview.bs b/css-navigation-1/Overview.bs index f6fed32a3a9..59edfa7eeb4 100644 --- a/css-navigation-1/Overview.bs +++ b/css-navigation-1/Overview.bs @@ -15,6 +15,7 @@ Abstract: This module contains conditional CSS rules for styling conditioned on 
 spec:css-values-5; type:function; text:if()
+spec:urlpattern; type:dfn; for:/; text:pattern string
@@ -41,10 +42,40 @@ url: https://drafts.csswg.org/css-view-transitions-1/#capture-the-image

Defining URL patterns in CSS

+

The <> value type

+ +
+<> = <> | <> | <>
+<> = <>
+
+ +A <> is defined to +match a [=/URL=]-or-null input if input is non-null, and: + +
+ +: the <> is a <> +:: [=URL pattern/match|match a URL pattern=] is non-null given + urlPattern as + the [=URL pattern=] represented by the ''@route'' rule referenced by the name and + input as input. + +: the <> is a <> +:: [=URL pattern/match|match a URL pattern=] is non-null given + urlPattern as + the [=URL pattern=] represented by the function (see + [=create a URL pattern for url-pattern()=]) and + input as input. + +: the <> is a <> +:: The given [=/URL=] [=url/equals=] input. + +
+

Declaring named URL patterns: the ''@route'' rule

The @route rule -is an at-rule that associates a name with a [=URL pattern=]. +is an at-rule that associates an author-defined name with a [=URL pattern=]. This name can be referenced in ''@navigation'' rules and in '':active-navigation()'' pseudo-classes. @@ -71,16 +102,13 @@ Any other descriptors are ignored. <> = base-url : stylesheet | document | <> + If two valid descriptors in a single rule have the same name, the last one is used and the others are ignored. If a rule has both a valid <> and a valid <> then it is ignored. -This rule associates an author-defined keyword with a URL pattern, -so that any URL that matches one of the URL patterns -matches the route named by the keyword. - The ''@route'' rule can be defined in one of two ways: : with the pattern descriptor @@ -126,18 +154,18 @@ but it could also be added back later if we need it. Either this rule: 
 @route --movie-list {
-  pattern: url-pattern("/movie-list");
+  pattern: url-pattern("/movies");
 }
or this rule: 
 @route --movie-list {
-  pathname: "/movie-list";
+  pathname: "/movies";
 }
define an ''@route'' rule that associates the name --movie-list -with the URL "/movie-list" resolved relative to the style sheet. +with the URL "/movies" resolved relative to the style sheet. NOTE: The bracing syntax also allows for future expansion if needed. @@ -166,6 +194,35 @@ which can be used to match URLs. This function represents the [=URL pattern=] resulting from invoking [=create a URL pattern for url-pattern()=] with its string argument. +The syntax used in the ''url-pattern()'' function follows that of [=URL Pattern=]. +It is a [=pattern string=] directly based on the syntax used by +the popular path-to-regexp JavaScript library. + +
+Pattern strings can contain capture groups, which by default match the shortest possible string, +up to a component-specific separator (/ in the pathname, . in the hostname). + +For example, the pathname pattern "/movies/:id" +will match "/movies/123" +but not "/movies/123/cast". + +A regular expression enclosed in parentheses can also be used instead, +so the pathname pattern "/blog/:id(\\d+)" +will match "/movies/123" +but not "/movies/css". + +You may also omit the name of the capture group by using only a regular expression, +for example "/blog/(\\d+)". + +A group can also be made optional by using the ? modifier or by wrapping it in braces. +For example, the patterns "/movies/:id?" and "/movies{/:id}" +will match both "/movies" and "/movies/123" (but not "/movies/"). + +A full wildcard * can also be used to match as much as possible, +as in the pattern "/*/movies". +This too can be given a name, for example "/*lang/movies". +
+ The steps of the create a URL pattern for url-pattern() algorithm, given a string arg and an optional baseURLSpecifier @@ -199,6 +256,58 @@ which can be ''document'', ''stylesheet'', or a URL, is: +
+This rule: +
+@route --movie-detail {
+  pattern: url-pattern("/movies/:id");
+}
+
+defines an ''@route'' rule that associates +the name --movie-detail +with any URL that matches the [=URL pattern=] /movies/:id. + +Any of the following URLs (relative to the style sheet) match: + +
    +
  • /movies/123
    • +
  • /movies/456
    • +
  • /movies/something
    • +
+ +These URLs will not match: + +
    +
  • /movies/123/ — The trailing slash is not matched by the pattern
    • +
  • /movies/456/extra — The /extra is not matched by the pattern
    • +
+
+ +
+To have the --movie-details route +match only numeric :id values, +define the route eiter as: + +
+@route --movie-detail {
+  pattern: url-pattern("/movies/:id(\\d+)");
+}
+
+ +or as: + +
+@route --movie-detail {
+  pattern: url-pattern("/movies/(\\d+)");
+}
+
+ +This way, /movies/something won’t be matched by the route. + +NOTE: Even though the capture groups are not currently exposed, +it is recommended to give the capture groups a name for future use. +
+
Should the default always be ''stylesheet''? For use of ''url-pattern()'' in ''@navigation'', @@ -221,36 +330,6 @@ to serialize f's contents. NOTE: This is defined this way because {{URLPattern}} intentionally does not provide a serialization. -

The <> value type

- -
-<> = <> | <> | <>
-<> = <>
-
- -A <> is defined to -match a [=/URL=]-or-null input if input is non-null, and: - -
- -: the <> is a <> -:: [=URL pattern/match|match a URL pattern=] is non-null given - urlPattern as - the [=URL pattern=] represented by the ''@route'' rule referenced by the name and - input as input. - -: the <> is a <> -:: [=URL pattern/match|match a URL pattern=] is non-null given - urlPattern as - the [=URL pattern=] represented by the function (see - [=create a URL pattern for url-pattern()=]) and - input as input. - -: the <> is a <> -:: The given [=/URL=] [=url/equals=] input. - -
- @@ -260,7 +339,6 @@ This specification defines a new that matches link elements that link to a certain URL.
- A simple example of a '':link-to()'' selector is this one, which matches any links that link to the site's homepage: @@ -270,6 +348,42 @@ which matches any links that link to the site's homepage: } +Passing in a named route is also possible: + +
+@route --homepage {
+  pattern: url-pattern("/");
+}
+
+:link-to(--homepage) {
+  font-weight: bold;
+}
+
+ +Because there is no dynamic part in the homepage URL, +you might be tempted to pass in a <> directly: + +
+:link-to(url("/")) {
+  font-weight: bold;
+}
+
+ +However, url("/") won't match URLs such as +/#scroll-to-here or /?utm_id=something +so it is recommended to use the <> +or <> variants, or use the following alternative: + +
+@route --homepage {
+  pathname: "/";
+  base-url: document;
+}
+
+:link-to(--homepage) {
+  font-weight: bold;
+}
+
The '':link-to()'' pseudo-class takes a single argument, a <>, @@ -285,6 +399,174 @@ functional pseudo-class that matches link elements that link to a certain URL that is related to a navigation that is currently active. +The '':active-navigation()'' pseudo-class takes a single argument, a <>, +and the pseudo-class matches any element where: +* the element matches '':any-link'' +* the target of the link matches the <>, as defined below. + +
+<> =
+  <>? [ <> | link-href ]?
+<> = at | with | from | to
+
+ +ISSUE: Should we use ''at''/''with''/''from''/''to'' or +''current''/''other''/''from''/''to''? + +An <> matches the target linkTarget of the link when +the following steps return true: +1. Let navigationURL be + the [=current navigation URL=] of the document given the <> in <> (default ''with''). + +1. If navigationURL is null, return false. +1. If ''link-href'' is present, or a <> is not provided: + 1. Return true if linkTarget [=url/equals=] navigationURL; Otherwise false. + +1. If a <> is present: + 1. Let targetMatchResult be the result of + [=URL pattern/match|matching a URL pattern=] + given urlPattern and linkTarget. + + 1. Let navigationMatchResult be the result of + [=URL pattern/match|matching a URL pattern=] given + urlPattern and navigationURL. + + 1. If navigationMatchResult or targetMatchResult is null, return false. + + 1. For each property prop of {{URLPatternResult}} that is a + {{URLPatternComponentResult}}: + + 1. If {{URLPatternComponentResult/groups}} of prop of + targetMatchResult is not equal to + {{URLPatternComponentResult/groups}} of prop of + navigationMatchResult, + then return false. + + ISSUE: Need to formally define equality of ordered maps. + + 1. Return true. + +
+ +The difference between '':link-to()'' and '':active-navigation()'' +is that the latter is only active while a navigation is in progress. + +Consider this example: + +
+@route --homepage {
+  pattern: url-pattern("/");
+}
+
+:link-to(--homepage) {
+  color: lime;
+}
+
+:active-navigation(--homepage) {
+  color: hotpink;
+}
+
+ +Links that link to the --homepage get a lime color. +When navigating to or from the --homepage, +their color changes to hotpink for as long as the animation is active. + +Once the navigation has completed, the '':active-navigation()'' +selector no longer applies, and those links revert back to lime. + +
+ +
+ +In the following examples, all links that link to the --movie-detail route, +get a lime color when a navigation is in progress. + +
+@route --movie-detail {
+  pattern: url-pattern("/movies/:id");
+}
+
+:active-navigation(--movie-detail) {
+  color: lime;
+}
+
+ +By adding the following selectors that use a <>, +the behavior changes a bit. + +
+:active-navigation(from --movie-detail) {
+  color: hotpink;
+}
+
+:active-navigation(to --movie-detail) {
+  color: yellow;
+}
+
+ +When navigating from /movies/1 to /movies/2: + +
    +
  • + Links that link to the --movie-detail route + with any :id + get a lime color + during the navigation. +
    • +
  • + Links that link to the --movie-detail route + whose target is /movies/1 + (the “from” page) + get a hotpink color + during the navigation. +
    • +
  • + Links that link to the --movie-detail route + whose target is /movies/2 + (the “to” page) + get a yellow color + during the navigation. +
    • +
+ +When navigating from /movies/2 to /: + +
    +
  • + Links that link to the --movie-detail route + with any :id + get a lime color + during the navigation. +
    • +
  • + Links that link to the --movie-detail route + whose target is /movies/3 + (the “from” page) + get a hotpink color + during the navigation. +
    • +
+ +When navigating from / to /movies/3: + +
    +
  • + Links that link to the --movie-detail route + with any :id + get a lime color + during the navigation. +
    • +
  • + Links that link to the --movie-detail route + whose target is /movies/3 + (the “to” page) + get a yellow color + during the navigation. +
    • +
+ +
+
A an example of the '':active-navigation()'' pseudo-class @@ -304,13 +586,13 @@ by matching the relevant parts of the navigation URL to the link URL. navigation: auto; } -@route --movie-details-with-id { - /* match URLs like /en/movie/123 which is the English page +@route --movie-detail { + /* match URLs like /en/movies/123 which is the English page about a movie with ID 123. Be careful to specify the language part with a "*" but the ID part with a named :id parameter so that matching will require equal IDs but allow differences of language. */ - pattern: url-pattern("/*/movie/:id"); + pattern: url-pattern("/*/movies/:id"); } /* capture the overall area representing the movie, and a @@ -321,19 +603,19 @@ by matching the relevant parts of the navigation URL to the link URL. movie we are currently navigating to or from. (lang can be different, though.) - This depends on the --movie-details-with-id route + This depends on the --movie-detail route declaring the ID but not the language with a named parameter, and the use of the 'with' keyword. This means that both the of the link and the other URL of the current navigation match the URL pattern defined by - the "@route --movie-details-with-id" rule, and that the + the "@route --movie-detail" rule, and that the id named group from both matches be the same. (However, the URLs can be different because the * part of the match, containing the language, can be different.) */ .movie-container:has( - > .movie-title:active-navigation(with --movie-details-with-id)) { + > .movie-title:active-navigation(with --movie-detail)) { view-transition-name: movie-container; @@ -348,53 +630,6 @@ by matching the relevant parts of the navigation URL to the link URL.
-The '':active-navigation()'' pseudo-class takes a single argument, a <>, -and the pseudo-class matches any element where: -* the element matches '':any-link'' -* the target of the link matches the <>, as defined below. - -
-<> =
-  <>? [ <> | link-href ]?
-<> = at | with | from | to
-
- -ISSUE: Should we use ''at''/''with''/''from''/''to'' or -''current''/''other''/''from''/''to''? - -An <> matches the target linkTarget of the link when -the following steps return true: -1. Let navigationURL be - the [=current navigation URL=] of the document given the <> in <> (default ''with''). - -1. If navigationURL is null, return false. -1. If ''link-href'' is present, or a <> is not provided: - 1. Return true if linkTarget [=url/equals=] navigationURL; Otherwise false. - -1. If a <> is present: - 1. Let targetMatchResult be the result of - [=URL pattern/match|matching a URL pattern=] - given urlPattern and linkTarget. - - 1. Let navigationMatchResult be the result of - [=URL pattern/match|matching a URL pattern=] given - urlPattern and navigationURL. - - 1. If navigationMatchResult or targetMatchResult is null, return false. - - 1. For each property prop of {{URLPatternResult}} that is a - {{URLPatternComponentResult}}: - - 1. If {{URLPatternComponentResult/groups}} of prop of - targetMatchResult is not equal to - {{URLPatternComponentResult/groups}} of prop of - navigationMatchResult, - then return false. - - ISSUE: Need to formally define equality of ordered maps. - - 1. Return true. - NOTE: Some of the design discussion for this feature has been in w3c/csswg-drafts#13163. From 120af9099b7c038d38efa262aa4cdae9e6fa8ad0 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Fri, 5 Jun 2026 11:37:53 -0400 Subject: [PATCH 02/21] [css-color-5] Guarded against division by zero in color-mix() algorithm #14013 --- css-color-5/Overview.bs | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs index c35f720c65b..d51a99f90bf 100644 --- a/css-color-5/Overview.bs +++ b/css-color-5/Overview.bs @@ -314,7 +314,10 @@ Otherwise, use the specified colorspace for mixing. Let |combined percentage| be the sum of |a| and |b|’s percentages. 2. Interpolate |a| and |b|’s colors as described in [[css-color-4#interpolation]], - with a progress percentage equal to (|b|’s percentage) / |combined percentage|). + with a progress percentage equal to + (|b|’s percentage) / |combined percentage|), + if |combined percentage| is greater than 0, + and 0.5 otherwise. If the specified color space is a [=cylindrical polar color=] space, then the <> controls the interpolation of hue, as described in From 28f72c10dcd73c0ccdf211bec27e139090c5feb5 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Fri, 5 Jun 2026 11:48:36 -0400 Subject: [PATCH 03/21] [css-color-5] Removed special casing of 100% from the color-mix() algorithm, thus avoiding a discontinuity near fully-transparent colors #14014 --- css-color-5/Overview.bs | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs index d51a99f90bf..ad55bd364e4 100644 --- a/css-color-5/Overview.bs +++ b/css-color-5/Overview.bs @@ -295,12 +295,14 @@ Otherwise, use the specified colorspace for mixing. 1. [=Normalize mix percentages=] from the list of [=mix items=] passed to the function, with the "forced normalization" flag set to true, letting |items| and |leftover| be the result. + + 2. Let |alpha mult| be 1 - |leftover|, interpreting |leftover| as a number between 0 and 1. - 4. If |items| is length 1, + 3. If |items| is length 1, set |color| to the color of that sole item, converted to the specified interpolation <>. @@ -328,8 +330,8 @@ Otherwise, use the specified colorspace for mixing. and a percentage of |combined percentage|, and [=stack/push=] it onto |item stack|. 3. Set |color| to the color of the sole remaining item in |item stack|. - 5. Multiply the alpha component of |color| by |alpha mult|. - 6. Return |color|. + 4. Multiply the alpha component of |color| by |alpha mult|. + 5. Return |color|. Note: In [=cylindrical polar color=] spaces, mixing is order-dependent, From c45f40aadccf4758ccd6e1f3686d15842f4982c2 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Fri, 5 Jun 2026 12:01:57 -0400 Subject: [PATCH 04/21] [css-color-5][editorial] Update changes --- css-color-5/Overview.bs | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs index ad55bd364e4..f0af149b8d9 100644 --- a/css-color-5/Overview.bs +++ b/css-color-5/Overview.bs @@ -3910,6 +3910,14 @@ This specification adds a way to ensure adequate contrast for text whose backgro
    +
  • Removed special casing of 100% from the color-mix() algorithm, + thus avoiding a discontinuity near fully-transparent colors + (Issue 14014) +
    • +
  • + Guarded against division by zero in the color-mix() algorithm + (Issue 14013) +
  • Added a backlink from Color Interpolation in this specification, to the same section in CSS Color 4 where most of this is defined (Issue 13788) From 4a2d33ef63e58de3f090c0efc69a038c5c4c1527 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Fri, 5 Jun 2026 12:32:00 -0400 Subject: [PATCH 05/21] [css-color-5][editorial] Add more issues to changes list --- css-color-5/Overview.bs | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs index f0af149b8d9..240843095d6 100644 --- a/css-color-5/Overview.bs +++ b/css-color-5/Overview.bs @@ -3912,11 +3912,13 @@ This specification adds a way to ensure adequate contrast for text whose backgro
    • Removed special casing of 100% from the color-mix() algorithm, thus avoiding a discontinuity near fully-transparent colors - (Issue 14014) + (Issue 14014), + (Issue 13996)
    • Guarded against division by zero in the color-mix() algorithm - (Issue 14013) + (Issue 14013), + (Issue 13996)
    • Added a backlink from Color Interpolation in this specification, to the same section in CSS Color 4 where most of this is defined From 327052f8f841cdcde1ee3bb24c3fd3c5091d4c16 Mon Sep 17 00:00:00 2001 From: Florian Rivoal Date: Mon, 8 Jun 2026 12:32:38 +0900 Subject: [PATCH 06/21] [css-text] Update previous version reference --- css-text-3/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-text-3/Overview.bs b/css-text-3/Overview.bs index b44ea64334c..a479db2ceaf 100644 --- a/css-text-3/Overview.bs +++ b/css-text-3/Overview.bs @@ -7,7 +7,7 @@ Work Status: Testing Group: csswg ED: https://drafts.csswg.org/css-text-3/ TR: https://www.w3.org/TR/css-text-3/ -Previous version: https://www.w3.org/TR/2023/CRD-css-text-3-20230903/ +Previous version: https://www.w3.org/TR/2024/CRD-css-text-3-20240930/ Test Suite: http://test.csswg.org/suites/css3-text/nightly-unstable/ !Test Coverage Analysis: https://drafts.csswg.org/css-text-3/test-coverage Implementation Report: https://test.csswg.org/harness/results/css-text-3_dev/grouped/ From 8153a8998851c02519acee65646ce232e3f6fda2 Mon Sep 17 00:00:00 2001 From: Florian Rivoal Date: Mon, 8 Jun 2026 12:37:10 +0900 Subject: [PATCH 07/21] [css-text-3] Post publication bump --- css-text-3/Overview.bs | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/css-text-3/Overview.bs b/css-text-3/Overview.bs index a479db2ceaf..6a53cc15e38 100644 --- a/css-text-3/Overview.bs +++ b/css-text-3/Overview.bs @@ -7,7 +7,7 @@ Work Status: Testing Group: csswg ED: https://drafts.csswg.org/css-text-3/ TR: https://www.w3.org/TR/css-text-3/ -Previous version: https://www.w3.org/TR/2024/CRD-css-text-3-20240930/ +Previous version: https://www.w3.org/TR/2026/CRD-css-text-3-20260608/ Test Suite: http://test.csswg.org/suites/css3-text/nightly-unstable/ !Test Coverage Analysis: https://drafts.csswg.org/css-text-3/test-coverage Implementation Report: https://test.csswg.org/harness/results/css-text-3_dev/grouped/ @@ -8405,6 +8405,10 @@ Changes

      Recent Changes

      + The following changes have been made since + the June 2026 Candidate Recommendation Draft: + * None yet + The following changes have been made since the September 2024 Candidate Recommendation Draft: * Disallowed breaks before small kana in ''line-break: normal''. From 1c690c08b06be13cce3eedcaf77ced58b5cb10b0 Mon Sep 17 00:00:00 2001 From: Florian Rivoal Date: Mon, 8 Jun 2026 12:44:16 +0900 Subject: [PATCH 08/21] [css-text-4] Tweak markup This is to work around https://github.com/speced/bikeshed/issues/3308 --- css-text-4/Overview.bs | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/css-text-4/Overview.bs b/css-text-4/Overview.bs index 5f6f2cf281b..e0cf96913e5 100644 --- a/css-text-4/Overview.bs +++ b/css-text-4/Overview.bs @@ -1279,9 +1279,7 @@ Expanding Between Words: the 'word-space-transform' property or marked with class p when they also delimit a phrase. 
      
-		<p>らいしゅう<wbr>の<wbr>じゅぎょう<wbr>に<wbr class=p
-		>たいこ<wbr>と<wbr>ばち<wbr>を<wbr class=p
-		>もって<wbr>きて<wbr>ください。
+		<p>らいしゅう<wbr>の<wbr>じゅぎょう<wbr>に<wbr class=p>たいこ<wbr>と<wbr>ばち<wbr>を<wbr class=p>もって<wbr>きて<wbr>ください。
      Using this, it is possible not only to enable the rather common phrase-based spacing, From 345e70a7eb4cc9df8494a4352120c77019fc4055 Mon Sep 17 00:00:00 2001 From: Florian Rivoal Date: Mon, 8 Jun 2026 12:59:08 +0900 Subject: [PATCH 09/21] [css-text-4] Post publication bump --- css-text-4/Overview.bs | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/css-text-4/Overview.bs b/css-text-4/Overview.bs index e0cf96913e5..7db47f01a0d 100644 --- a/css-text-4/Overview.bs +++ b/css-text-4/Overview.bs @@ -7,7 +7,7 @@ Work Status: Refining Group: csswg ED: https://drafts.csswg.org/css-text-4/ TR: https://www.w3.org/TR/css-text-4/ -Previous Version: https://www.w3.org/TR/2024/WD-css-text-4-20240529/ +Previous Version: https://www.w3.org/TR/2026/WD-css-text-4-20260608/ Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400 Editor: Koji Ishii, Invited Expert, kojiishi@gluesoft.co.jp, w3cid 45369 Editor: Alan Stearns, Adobe Systems, stearns@adobe.com, w3cid 46659 @@ -13303,6 +13303,9 @@ Changes This draft is kept in sync with [[CSS-TEXT-3]], see [[css-text-3#changes]].
      Changes specific to Level 4 are listed below. + Significant changes since the 8 June 2026 Working Draft include: + * None yet + Significant changes since the 29 May 2024 Working Draft include: * Added ''avoid-orphans'' to 'text-wrap-style'. (Issue 10837) From a9805fbdbe95110f3b19c5111d547fc6ff742430 Mon Sep 17 00:00:00 2001 From: Tab Atkins-Bittner Date: Wed, 10 Jun 2026 23:20:16 +0000 Subject: [PATCH 10/21] [various] Rename to #9473 --- css-gcpm-3/Overview.bs | 2 +- css-syntax-3/Overview.bs | 14 +++++++------- cssom-1/Overview.bs | 2 +- selectors-4/Overview.bs | 4 ++-- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/css-gcpm-3/Overview.bs b/css-gcpm-3/Overview.bs index 64663fe97bc..4351045089b 100644 --- a/css-gcpm-3/Overview.bs +++ b/css-gcpm-3/Overview.bs @@ -721,7 +721,7 @@ Page Selectors The '':nth()'' page pseudo-class allows the selection of arbitrary document pages. This pseudo-class takes an argument of the form An + B as defined in [[CSS3SYN]]. When applied to the default @page rule, '':nth()'' selects the document page whose index matches the argument. 
      -:nth() = :nth( <> [of <>]? )
+:nth() = :nth( <> [of <>]? )

      diff --git a/css-syntax-3/Overview.bs b/css-syntax-3/Overview.bs index 8dfe7f0144a..238e068faf5 100644 --- a/css-syntax-3/Overview.bs +++ b/css-syntax-3/Overview.bs @@ -3327,20 +3327,20 @@ Informal Syntax Description

      -The <an+b> type

      +The <a-n-plus-b> type The An+B notation was originally defined using a slightly different tokenizer than the rest of CSS, resulting in a somewhat odd definition when expressed in terms of CSS tokens. This section describes how to recognize the An+B notation in terms of CSS tokens - (thus defining the <an+b> type for CSS grammar purposes), + (thus defining the <a-n-plus-b> type for CSS grammar purposes), and how to interpret the CSS tokens to obtain values for A and B. - The <an+b> type is defined + The <a-n-plus-b> type is defined (using the Value Definition Syntax in the Values & Units spec) as: 
      -		<an+b> =
+		<a-n-plus-b> =
 		  odd | even |
 		  <integer> |
 
@@ -3814,10 +3814,10 @@ Serialization

-Serializing <an+b>

+Serializing <a-n-plus-b>
- To serialize an <> value, + To serialize an <> value, with integer values |A| and |B|: 1. If |A| is zero, @@ -3999,7 +3999,7 @@ Changes from the 20 February 2014 Candidate Recommendation As part of this, rearrange the ordering of the clauses in the "-" step of [=tokenizer/consume a token=] so that <>s are recognized as such instead of becoming a ''--'' <>. - * Don't serialize the digit in an <> when A is 1 or -1. + * Don't serialize the digit in an <> when A is 1 or -1. * Define all tokens to have a representation. diff --git a/cssom-1/Overview.bs b/cssom-1/Overview.bs index edfa480f8fc..e4663c21f0e 100644 --- a/cssom-1/Overview.bs +++ b/cssom-1/Overview.bs @@ -824,7 +824,7 @@ finally return s:
:nth-last-child()
:nth-of-type()
:nth-last-of-type() -
The result of serializing the value using the rules to serialize an <an+b> value. +
The result of serializing the value using the rules to serialize an <a-n-plus-b> value.
:not()
The result of serializing the value using the rules for diff --git a/selectors-4/Overview.bs b/selectors-4/Overview.bs index 8a56c7b924c..7f1cdfb8c3e 100644 --- a/selectors-4/Overview.bs +++ b/selectors-4/Overview.bs @@ -5323,7 +5323,7 @@ Changes since the 2 May 2013 Working Draft
  • Rewrote selectors grammar using the CSS Value Definition Syntax.
  • Split out relative selectors from scoped selectors, as these are different concepts that can be independently invoked. -
  • Moved definition of <> microsyntax to CSS Syntax. +
  • Moved definition of <> microsyntax to CSS Syntax. Issue: Semantic definition should probably move back here. @@ -5363,7 +5363,7 @@ Changes since the 23 August 2012 Working Draft
  • Defined fast and complete Selectors profiles (now called “live” and “snapshot”).
  • Improved definition of specificity to better handle :matches().
  • Updated grammar. -
  • Cleaned up definition of <> notation. +
  • Cleaned up definition of <> notation.
  • Added definition of scope-relative selectors, changed scope-constrained to scope-filtered for less confusion with scope-contained.
  • The '':local-link()'' pseudo-class now ignores trailing slashes. From 3eb53d5d206fe255c7aee067a3ba0d3281ab29e3 Mon Sep 17 00:00:00 2001 From: Tab Atkins-Bittner Date: Fri, 12 Jun 2026 00:13:31 +0000 Subject: [PATCH 11/21] [css-values-5] Specify random() corner-cases for custom functions and arb-sub functions. #13661 #13662 --- css-values-5/Overview.bs | 106 ++++++++++++++++++++++++++++++++++++--- 1 file changed, 100 insertions(+), 6 deletions(-) diff --git a/css-values-5/Overview.bs b/css-values-5/Overview.bs index 41707466fc0..eae3f10ae25 100644 --- a/css-values-5/Overview.bs +++ b/css-values-5/Overview.bs @@ -2658,10 +2658,8 @@ Sharing (Or Not) Random Values: the <> value It is a <> that must start with the prefix ua-, or else it is invalid. When generated automatically by the user agent, - it will always be ua-PROPERTY or ua-PROPERTY-INDEX, - with the PROPERTY and INDEX parts - replaced with a property name or integer index, - like ua-margin-3. + it follows certain specific patterns; + see [[#random-simplify]] for details. : fixed <> :: If ''fixed <>'' is specified, @@ -2873,8 +2871,9 @@ Sharing (Or Not) Random Values: the <> value the value of the <>, if specified/calculated; otherwise null. 4. A nullable /element identifier/ - uniquely identifying the {{Element}} or [=pseudo-element=] - the style is being applied to, + uniquely identifying the object the style is being applied to + (the {{Element}}, [=pseudo-element=], + or [=custom function=] evaluation's "hypothetical element"), if ''random()/element-scoped'' is specified; otherwise null. 5. A /document identifier/ identifying the {{Document}} the styles are from. @@ -2995,6 +2994,101 @@ Simplification of <> before any canonicalization/reordering might occur that could shuffle the values around. + In certain cases, + the <> is slightly more complex: + + * when evaluated inside of a [=custom function=] + (in a property with a type that causes evaluation, + such as a typed argument or a typed '@function/result'), + in addition to the PROPERTY and/or INDEX, + the function's name is captured in the ident: + ua-FUNCTIONNAME-PROPERTY or ua-FUNCTIONNAME-PROPERTY-INDEX. + + Note: This ensures that different functions + that just happen to use the same internal variable names + don't accidentally tie their random values together. + +
    + + For example, given the following custom function and usage: + + + @function --ex(--arg <length>) returns <length> { + --local: random(2px, 3px); + result: calc(var(--arg) + var(--local) + random(3px, 4px)); + } + .foo { + width: --ex(random(1px, 2px)); + } + + + The '--arg' is registered as a <>, + so it's value is evaluated within the ''--arg'' property, + getting a <> of ''ua---ex---arg-1''. + + The '--local' is not registered, + so it doesn't evaluate the ''random()'' at all; + it's left as-is until substitution. + + The 'result' is also registered as a <>. + Both the ''random(2px, 3px)'' (from '--local' substitution) + and ''random(3px, 4px)'' (written literally) + evaluate within 'result', + getting <>s of ''ua---ex-result-1'' and ''ua---ex-result-2''. +
    + +
    + On the other hand, in this example: + + + @function --no-types(--arg) { + result: calc(var(--arg) + random(2px, 3px)); + } + .foo { + width: --no-types(random(1px, 2px)); + } + + + Neither the '--arg' argument nor the 'result' are typed, + so their values aren't evaluated within the function. + The function call substitutes itself with the value ''calc(random(1px, 2px) + random(2px, 3px))'', + which is then evaluated within 'width', + getting <>s of ''ua-width-1'' and ''ua-width-2'' instead. +
    + * when evaluated inside of an [=arbitrary substitution function=] + as part of the substitution process, + the prefix is ''ua-early-'' rather than just ''ua-''. + The INDEX portion, as well, is tracked across all substitutions in the property. + +
    + For example, in this relatively complex value: + + + .foo { + width: calc( + if( + style(random(/*eA*/) == random(/*eB*/)): random(/*lA*/); + else: random(/*lB*/)) + ) + + if( + style(random(/*eC*/) > random(/*eD*/): random(/*lC*/); + else: random(/*lD*/)) + ) + ); + } + + + The four ''random()''s in the ''if/style()'' tests (''eA'' through ''eD'') + are all evaluated + (since using == or > provides a numeric context) + as part of substitution, + so their <>s are ''ua-early-width-1''/''-2''/''-3''/''-4''. + + Each ''if()'' will resolve to one of the "late" ''random()''s (''lA'' through ''lD''), + left unevaluated and substituted into the 'width', + giving "normal" <>s of ''ua-width-1'' and ''ua-width-2''. +
    + If the <> contains a <>, this must not be omitted in the serialization of the value, even if this would normally be valid per the From 7ac93499ba1b298723d7b51242c7c266984f2900 Mon Sep 17 00:00:00 2001 From: Florian Rivoal Date: Fri, 12 Jun 2026 15:33:37 +0900 Subject: [PATCH 12/21] [css-overflow-4] Insert a strut even in quriks mode for block-ellipsis Addresses https://github.com/w3c/csswg-drafts/issues/13708 --- css-overflow-4/Overview.bs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/css-overflow-4/Overview.bs b/css-overflow-4/Overview.bs index 26068389155..5c33ee70adb 100644 --- a/css-overflow-4/Overview.bs +++ b/css-overflow-4/Overview.bs @@ -24,6 +24,7 @@ spec:css-pseudo-4; type:selector; text:::first-letter spec:css-pseudo-4; type:selector; text:::first-line spec:css-writing-modes-4; type:dfn; text:start spec:css-writing-modes-4; type:dfn; text:end +spec:dom; type:dfn; for: Document; text:mode 
     url: https://drafts.csswg.org/selectors-3/#subject; type: dfn; text: subject;
@@ -925,6 +926,7 @@ Indicating Block-Axis Overflow: the 'block-ellipsis' property
 
 		If this results in the entire contents of the line box being displaced,
 		the line box is considered to contain a [=strut=], as defined in [[CSS2/visudet#leading]].
+		This requirement applies regardless of the document's [=mode=].
 
 		
 			block-ellipsis-016.html

From 89133756a5064b1a7d7444cc78c97de8452df62a Mon Sep 17 00:00:00 2001
From: Florian Rivoal 
Date: Fri, 12 Jun 2026 15:58:57 +0900
Subject: [PATCH 13/21] [css-overflow-4] More details about how quriks mode
 don't apply

Part of https://github.com/w3c/csswg-drafts/issues/13708
---
 css-overflow-4/Overview.bs | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/css-overflow-4/Overview.bs b/css-overflow-4/Overview.bs
index 5c33ee70adb..56977866f2c 100644
--- a/css-overflow-4/Overview.bs
+++ b/css-overflow-4/Overview.bs
@@ -926,7 +926,17 @@ Indicating Block-Axis Overflow: the 'block-ellipsis' property
 
 		If this results in the entire contents of the line box being displaced,
 		the line box is considered to contain a [=strut=], as defined in [[CSS2/visudet#leading]].
-		This requirement applies regardless of the document's [=mode=].
+		
+		This requirement applies regardless of the document's [=mode=],
+		and is not affected by the [[quirks#the-blocks-ignore-line-height-quirk|line-height quirk]].
+		
+		
+
 
 		
 			block-ellipsis-016.html

From d48be93bc8cf3abcd5061b98e91d5bb86bd60941 Mon Sep 17 00:00:00 2001
From: Florian Rivoal 
Date: Fri, 12 Jun 2026 16:30:32 +0900
Subject: [PATCH 14/21] [css-overflow-4] Restrict float clipping to the
 block-end side

See https://github.com/w3c/csswg-drafts/issues/13668
---
 css-overflow-4/Overview.bs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css-overflow-4/Overview.bs b/css-overflow-4/Overview.bs
index 56977866f2c..1cb367da2e7 100644
--- a/css-overflow-4/Overview.bs
+++ b/css-overflow-4/Overview.bs
@@ -1780,7 +1780,7 @@ Handling of Excess Content: the 'continue' property
 
 	Within a [=line-clamp container=],
 	floats which have not been made into [=invisible boxes=]
-	must be visually clipped to the [=content edge=]
+	must be visually clipped to the [=block-end=] [=content edge=]
 	of the [=line-clamp container=].
 	They do not introduce any clearance
 	that would make the [=line-clamp container=] increase its height,

From 6ffdfdfba9a94ecc26d7de0b630d983c205dcde4 Mon Sep 17 00:00:00 2001
From: Bramus 
Date: Fri, 12 Jun 2026 12:07:58 +0200
Subject: [PATCH 15/21] [css-navigation-1] Fix abstract (#14042)

This spec no longer offers rules for styling conditioned on the current URL.
---
 css-navigation-1/Overview.bs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/css-navigation-1/Overview.bs b/css-navigation-1/Overview.bs
index 59edfa7eeb4..25f70faf9c6 100644
--- a/css-navigation-1/Overview.bs
+++ b/css-navigation-1/Overview.bs
@@ -9,8 +9,8 @@ ED: https://drafts.csswg.org/css-navigation-1/
 !Issue Tracking: w3c/csswg-drafts#12594
 Editor: L. David Baron, Google https://www.google.com/, https://dbaron.org/, w3cid 15393
 Editor: Noam Rosenthal, Google https://www.google.com/, w3cid 121539
-Abstract: This module contains conditional CSS rules for styling conditioned on the current URL
-        or conditioned on the status of navigating between particular URLs.
+Abstract: This module contains conditional CSS rules for styling
+        conditioned on the status of navigating between particular URLs.
 
    
From f79fdec1202f900232d2bcee3e4d0243843a3c3f Mon Sep 17 00:00:00 2001
From: Florian Rivoal 
Date: Fri, 12 Jun 2026 20:26:23 +0900
Subject: [PATCH 16/21] Update test coverage

---
 css-overflow-4/Overview.bs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/css-overflow-4/Overview.bs b/css-overflow-4/Overview.bs
index 1cb367da2e7..e269380de37 100644
--- a/css-overflow-4/Overview.bs
+++ b/css-overflow-4/Overview.bs
@@ -942,6 +942,7 @@ Indicating Block-Axis Overflow: the 'block-ellipsis' property
 			block-ellipsis-016.html
 			block-ellipsis-018.html
 			block-ellipsis-025.html
+			block-ellipsis-quirk-001.html
 		
 
 		Displacing content to make room for the [=block overflow ellipsis=]

From 3c803304a68b4e984b7bd82a3ba7867d5037fedc Mon Sep 17 00:00:00 2001
From: Florian Rivoal 
Date: Fri, 12 Jun 2026 21:03:08 +0900
Subject: [PATCH 17/21] [css-overflow] Update test coverage

---
 css-overflow-4/Overview.bs | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/css-overflow-4/Overview.bs b/css-overflow-4/Overview.bs
index e269380de37..bda42d7115c 100644
--- a/css-overflow-4/Overview.bs
+++ b/css-overflow-4/Overview.bs
@@ -1318,6 +1318,7 @@ Forcing a Break After a Set Number of Lines: the 'max-lines' property
 		webkit-line-clamp-013.html
 		webkit-line-clamp-027.html
 		webkit-line-clamp-029.html
+		line-clamp-with-floats-007.html
 	
 
 	Note: This implies that 'max-lines' has no effect when applied to [=multi-column containers=],
@@ -1709,6 +1710,8 @@ Handling of Excess Content: the 'continue' property
 			line-clamp-033.html
 			line-clamp-auto-033.html
 			line-clamp-auto-with-ruby-002.html
+			line-clamp-with-floats-003.html
+			line-clamp-with-floats-004.html
 		
 
 	- Any [=line boxes=] that follow the [=clamp point=]
@@ -1772,6 +1775,7 @@ Handling of Excess Content: the 'continue' property
 	is always counted as [=ink overflow=] rather than [=scrollable overflow=].
 
 	
+		line-clamp-with-floats-010.html
 		line-clamp-021.html
 		line-clamp-with-abspos-019.html
 	
@@ -1787,6 +1791,14 @@ Handling of Excess Content: the 'continue' property
 	that would make the [=line-clamp container=] increase its height,
 	and do not contribute to the [=scrollable overflow area=].
 
+	
+		line-clamp-with-floats-001.html
+		line-clamp-with-floats-002.html
+		line-clamp-with-floats-005.html
+		line-clamp-with-floats-006.html
+		line-clamp-with-floats-010.html
+	
+
 	If a [=block container=] contains a [=clamp point=],
 	within itself or in any of its descendants,
 	its [=automatic block size=] will not take into account any invisible boxes,

From e54f96826c766634294e9a93177d2edc0dd055b2 Mon Sep 17 00:00:00 2001
From: Tab Atkins-Bittner 
Date: Fri, 12 Jun 2026 10:55:35 -0700
Subject: [PATCH 18/21] [css-values-5][meta] Add WPTs. Closes #14017

---
 css-values-5/Overview.bs | 509 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 508 insertions(+), 1 deletion(-)

diff --git a/css-values-5/Overview.bs b/css-values-5/Overview.bs
index eae3f10ae25..0e2bd99a4af 100644
--- a/css-values-5/Overview.bs
+++ b/css-values-5/Overview.bs
@@ -17,6 +17,7 @@ Inline Github Issues: no
 Default Highlight: css
 Status Text: This spec is in the early exploration phase. Feedback is welcome, and and major breaking changes are expected.
 Include MDN Panels: yes
+WPT Path Prefix: css/css-values/
 
     spec:css-color-4; type:property; text:color
@@ -469,6 +470,15 @@ Resource Locators: the <> type
 
 	See [[css-values-4#urls]].
 
+
+urls/empty.html
+urls/fragment-only.html
+urls/resolve-relative-to-base.sub.html
+urls/resolve-relative-to-stylesheet.html
+inline-cache-base-uri-cssom.html
+inline-cache-base-uri.html
+
+
 
    
 Request URL Modifiers
    
 
@@ -519,6 +529,63 @@ Request URL Modifiers
 		given |req|.
    • + +urls/cross-origin/url-font-cross-origin-anonymous-negative.sub.html +urls/cross-origin/url-font-cross-origin-anonymous.sub.html +urls/cross-origin/url-font-cross-origin-use-credentials-negative.sub.html +urls/cross-origin/url-font-cross-origin-use-credentials.sub.html +urls/cross-origin/url-image-cross-origin-anonymous-negative.sub.html +urls/cross-origin/url-image-cross-origin-anonymous.sub.html +urls/cross-origin/url-image-cross-origin-use-credentials-negative.sub.html +urls/cross-origin/url-image-cross-origin-use-credentials.sub.html +urls/cross-origin/url-image-set-cross-origin-anonymous-negative.sub.html +urls/cross-origin/url-image-set-cross-origin-anonymous.sub.html +urls/cross-origin/url-import-cross-origin-anonymous-negative.sub.html +urls/cross-origin/url-import-cross-origin-anonymous.sub.html +urls/cross-origin/url-import-cross-origin-use-credentials-negative.sub.html +urls/cross-origin/url-import-cross-origin-use-credentials.sub.html +urls/cross-origin/url-svg-filter-cross-origin-anonymous-negative.sub.html +urls/cross-origin/url-svg-filter-cross-origin-anonymous.sub.html +urls/cross-origin/url-svg-filter-cross-origin-use-credentials-negative.sub.html +urls/cross-origin/url-svg-filter-cross-origin-use-credentials.sub.html +urls/integrity/url-font-integrity-negative.sub.html +urls/integrity/url-font-integrity.sub.html +urls/integrity/url-image-integrity-negative.sub.html +urls/integrity/url-image-integrity.sub.html +urls/integrity/url-import-integrity-negative.sub.html +urls/integrity/url-import-integrity.sub.html +urls/integrity/url-svg-filter-integrity-negative.sub.html +urls/integrity/url-svg-filter-integrity.sub.html +urls/referrer-policy/no-referrer-when-downgrade/url-image-referrer-policy-cross-origin.html +urls/referrer-policy/no-referrer-when-downgrade/url-image-referrer-policy-same-origin.html +urls/referrer-policy/no-referrer/url-font-referrer-policy.sub.html +urls/referrer-policy/no-referrer/url-image-referrer-policy-cross-origin.html +urls/referrer-policy/no-referrer/url-image-referrer-policy-external-stylesheet.html +urls/referrer-policy/no-referrer/url-image-referrer-policy-same-origin.html +urls/referrer-policy/no-referrer/url-image-set-referrer-policy.sub.html +urls/referrer-policy/no-referrer/url-import-referrer-policy.html +urls/referrer-policy/no-referrer/url-svg-filter-referrer-policy.sub.html +urls/referrer-policy/origin-when-cross-origin/url-image-referrer-policy-cross-origin.html +urls/referrer-policy/origin-when-cross-origin/url-image-referrer-policy-same-origin.html +urls/referrer-policy/origin/url-image-referrer-policy-cross-origin.html +urls/referrer-policy/origin/url-image-referrer-policy-external-stylesheet.html +urls/referrer-policy/origin/url-image-referrer-policy-same-origin.html +urls/referrer-policy/same-origin/url-image-referrer-policy-cross-origin.html +urls/referrer-policy/same-origin/url-image-referrer-policy-same-origin.html +urls/referrer-policy/strict-origin-when-cross-origin/url-image-referrer-policy-cross-origin.html +urls/referrer-policy/strict-origin-when-cross-origin/url-image-referrer-policy-same-origin.html +urls/referrer-policy/strict-origin/url-image-referrer-policy-cross-origin.html +urls/referrer-policy/strict-origin/url-image-referrer-policy-same-origin.html +urls/referrer-policy/unsafe-url/url-image-referrer-policy-cross-origin.html +urls/referrer-policy/unsafe-url/url-image-referrer-policy-external-stylesheet.html +urls/referrer-policy/unsafe-url/url-image-referrer-policy-same-origin.html +urls/url-request-modifiers-computed.sub.html +urls/url-request-modifiers-font-face-parsing.html +urls/url-request-modifiers-import-parsing.sub.html +urls/url-request-modifiers-invalid.sub.html +urls/url-request-modifiers-serialize.sub.html + + The ident() function represents an <>, @@ -2268,6 +2412,10 @@ Constructing <> values: the ''ident()'' function

    Generating Random Values

    + +random-in-keyframe.html + + It is often useful to incorporate some degree of "randomness" to a design, either to make repeated elements on a page feel less static and identical, or just to add a bit of "flair" to a page without being distracting. @@ -3156,6 +3304,29 @@ Simplification of <>

    Tree Counting Functions: the ''sibling-count()'' and ''sibling-index()'' notations

    + +tree-counting/calc-sibling-function-in-shadow-dom.html +tree-counting/calc-sibling-function-parsing.html +tree-counting/calc-sibling-function.html +tree-counting/sibling-function-container-query-invalidation.html +tree-counting/sibling-function-container-query.html +tree-counting/sibling-function-invalidation.html +tree-counting/sibling-index-keyframe-font-style-dynamic.html +tree-counting/sibling-index-keyframe-font-variation-settings-dynamic.html +tree-counting/sibling-index-keyframe-font-weight-dynamic.html +tree-counting/sibling-index-keyframe-length-value-dynamic.html +tree-counting/sibling-index-keyframe-palette-mix-dynamic.html +tree-counting/sibling-index-keyframe-percent-dynamic.html +tree-counting/sibling-index-keyframe-registered-properties-dynamic.html +tree-counting/sibling-index-keyframe-rotate-dynamic.html +tree-counting/sibling-index-keyframe-scale-dynamic.html +tree-counting/sibling-index-keyframe-transform-dynamic.html +tree-counting/sibling-index-keyframe-value-dynamic.html +tree-counting/sibling-index-linear-gradient-gcs.html +tree-counting/tree-scoped-sibling-function.html +tree-counting/trig-functions-with-runtime-angle-arguments.html + + The sibling-count() [=functional notation=] represents, as an <>, the total number of child [=elements=] @@ -3249,6 +3420,42 @@ Tree Counting Functions: the ''sibling-count()'' and ''sibling-index()'' notatio

    Calculating With Intrinsic Sizes: the ''calc-size()'' function

    + +calc-size/calc-size-aspect-ratio-001.html +calc-size/calc-size-aspect-ratio-002.html +calc-size/calc-size-aspect-ratio-003.html +calc-size/calc-size-aspect-ratio-004.html +calc-size/calc-size-aspect-ratio-005.html +calc-size/calc-size-flex-001.html +calc-size/calc-size-flex-002.html +calc-size/calc-size-flex-003.html +calc-size/calc-size-flex-004.html +calc-size/calc-size-flex-005.html +calc-size/calc-size-flex-006.html +calc-size/calc-size-flex-007.html +calc-size/calc-size-flex-008.html +calc-size/calc-size-flex-009.html +calc-size/calc-size-flex-basis-on-column.html +calc-size/calc-size-flex-basis-on-row.html +calc-size/calc-size-grid-repeat.html +calc-size/calc-size-height-box-sizing.html +calc-size/calc-size-height.html +calc-size/calc-size-min-max-sizes-001.html +calc-size/calc-size-min-max-sizes-002.html +calc-size/calc-size-min-max-sizes-003.html +calc-size/calc-size-min-max-sizes-004.html +calc-size/calc-size-min-max-sizes-005.html +calc-size/calc-size-min-max-sizes-006.html +calc-size/calc-size-no-body-height-quirk-001.html +calc-size/calc-size-parsing.html +calc-size/calc-size-svg-001-crash.html +calc-size/calc-size-typed-om.html +calc-size/calc-size-width-box-sizing.html +calc-size/calc-size-width.html +calc-size/interpolate-size-computed.html +calc-size/interpolate-size-parsing.html + + When transitioning between two [=definite=] sizes, or slightly adjusting an existing definite size, ''calc()'' works great: @@ -3548,6 +3755,27 @@ Resolving ''calc-size()''

    Interpolating ''calc-size()''

    + +calc-size/animation/calc-size-height-interpolation.html +calc-size/animation/calc-size-interpolation-expansion.html +calc-size/animation/calc-size-width-interpolation.html +calc-size/animation/interpolate-size-height-composition.html +calc-size/animation/interpolate-size-height-interpolation.html +calc-size/animation/interpolate-size-interpolation.html +calc-size/animation/interpolate-size-logical-properties-interpolation.html +calc-size/animation/interpolate-size-max-height-composition.html +calc-size/animation/interpolate-size-max-height-interpolation.html +calc-size/animation/interpolate-size-max-width-composition.html +calc-size/animation/interpolate-size-max-width-interpolation.html +calc-size/animation/interpolate-size-min-height-composition.html +calc-size/animation/interpolate-size-min-height-interpolation.html +calc-size/animation/interpolate-size-min-width-composition.html +calc-size/animation/interpolate-size-min-width-interpolation.html +calc-size/animation/interpolate-size-which-value.html +calc-size/animation/interpolate-size-width-composition.html +calc-size/animation/interpolate-size-width-interpolation.html + + Two ''calc-size()'' functions can be interpolated if (after being [=canonicalized for interpolation=]): @@ -4624,7 +4852,6 @@ Security Considerations potentially exposing sensitive information that was previously not accessible via CSS. See [[#attr-security]]. -

    Privacy Considerations

    @@ -4641,3 +4868,283 @@ Privacy Considerations potentially exposing sensitive information that was previously not accessible via CSS. See [[#attr-security]]. + + + \ No newline at end of file From a44eb8c76fe066d115b019895ee1c4fb90389384 Mon Sep 17 00:00:00 2001 From: Tab Atkins-Bittner Date: Fri, 12 Jun 2026 11:02:50 -0700 Subject: [PATCH 19/21] [css-values-5] Add no-clamp keyword to progress(). #11825 --- css-values-5/Overview.bs | 39 +++++++++++++++++++++++---------------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/css-values-5/Overview.bs b/css-values-5/Overview.bs index 0e2bd99a4af..b8d2ea21a6e 100644 --- a/css-values-5/Overview.bs +++ b/css-values-5/Overview.bs @@ -875,6 +875,24 @@ progress-serialize.html and can be input into other calculations such as a [=math function=] or a [=mix notation=]. + The syntax of ''progress()'' is: + + 
    +		<> = progress(no-clamp? <>, <>, <>)
+
    + + where the first, second, and third <> values represent + the [=progress value=], [=progress start value=], and [=progress end value=], + respectively. + + If no-clamp is present, + the ''progress()'' function can potentially resolve to any number; + if omitted (the default), + the return value is clamped to the range [0, 1]. + + The argument [=calculations=] can resolve to any <>, <>, or <>, + but must have a [=consistent type=] + or else the function is invalid.
    The result of ''progress()'' is a <> @@ -882,28 +900,17 @@ progress-serialize.html resolved by calculating a progress function as follows: : If the [=progress start value=] and [=progress end value=] are different values - :: ([=progress value=] - [=progress start value=]) / ([=progress end value=] - [=progress start value=]). + :: ([=progress value=] - [=progress start value=]) / ([=progress end value=] - [=progress start value=]), + clamped to the [0,1] range if ''no-clamp'' is not specified. : If the [=progress start value=] and [=progress end value=] are the same value - :: 0, -∞, or +∞, + :: 0 if ''no-clamp'' is not specified. + + Otherwise, 0, -∞, or +∞, depending on whether [=progress value=] is equal to, less than, or greater than the shared value.
    - The syntax of ''progress()'' is defined as follows: - - 
    -		<> = progress(<>, <>, <>)
-
    - - where the first, second, and third <> values represent - the [=progress value=], [=progress start value=], and [=progress end value=], - respectively. - - The argument [=calculations=] can resolve to any <>, <>, or <>, - but must have a [=consistent type=] - or else the function is invalid. - ISSUE: Do we need a ''percent-progress()'' notation, or do enough places auto-convert that it's not necessary? From 0100d7f9fd05f82c9b1a511b70d66707f34fd14f Mon Sep 17 00:00:00 2001 From: Tab Atkins-Bittner Date: Fri, 12 Jun 2026 11:12:45 -0700 Subject: [PATCH 20/21] [css-link-params] Format into FPWD --- css-link-params-1/Overview.bs | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/css-link-params-1/Overview.bs b/css-link-params-1/Overview.bs index 29f50f6cc14..fa28c4aac9e 100644 --- a/css-link-params-1/Overview.bs +++ b/css-link-params-1/Overview.bs @@ -2,10 +2,11 @@ Title: CSS Linked Parameters Module Level 1 Shortname: css-link-params Level: 1 -Status: ED +Status: FPWD Group: CSSWG -Work Status: exploring +Work Status: refining ED: https://drafts.csswg.org/css-link-params/ +TR: https://www.w3.org/TR/css-link-params-1/ Editor: Tab Atkins-Bittner, Google, http://xanthir.com/contact/ Editor: Daniel Holbert, Mozilla Editor: Jonathan Watt, Mozilla From c805adde4d400a094d4994ab526cb10dfaf415fc Mon Sep 17 00:00:00 2001 From: David Awogbemila Date: Wed, 10 Jun 2026 15:57:16 -0400 Subject: [PATCH 21/21] Add a few missing closing tags This adds missing and tags. --- web-animations-2/Overview.bs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/web-animations-2/Overview.bs b/web-animations-2/Overview.bs index 40e29fa1310..757a38cde2a 100644 --- a/web-animations-2/Overview.bs +++ b/web-animations-2/Overview.bs @@ -2190,7 +2190,7 @@ as follows: : replace :: Each successive iteration is calculated independently of previous iterations. -: accumulate +: accumulate :: Successive iterations of the animation are accumulated with the final value of the previous iteration. @@ -3405,6 +3405,8 @@ partial dictionary KeyframeEffectOptions { :: The iteration composite operation used to define the way animation values build from iteration to iteration. + +

    The IterationCompositeOperation enumeration

    The possible values of an animation effect's