>
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.
-
-
-
Pseudo-classes for links
The '':link-to()'' pseudo-class
@@ -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;
+}
+
+<> =
+ <>? [ <> | 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.
diff --git a/css-overflow-4/Overview.bs b/css-overflow-4/Overview.bs
index 260683891551..bda42d7115cd 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,11 +926,23 @@ 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=],
+ and is not affected by the [[quirks#the-blocks-ignore-line-height-quirk|line-height quirk]].
+
+
+
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=]
@@ -1305,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=],
@@ -1696,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=]
@@ -1759,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
@@ -1768,12 +1785,20 @@ 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,
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,
diff --git a/css-syntax-3/Overview.bs b/css-syntax-3/Overview.bs
index 8dfe7f0144a0..238e068faf59 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/css-text-3/Overview.bs b/css-text-3/Overview.bs
index b44ea64334c5..6a53cc15e38d 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/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''.
diff --git a/css-text-4/Overview.bs b/css-text-4/Overview.bs
index 5f6f2cf281b6..7db47f01a0d4 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
@@ -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,
@@ -13305,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)
diff --git a/css-values-5/Overview.bs b/css-values-5/Overview.bs
index 41707466fc03..b8d2ea21a6e0 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|.
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.
@@ -2658,10 +2813,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 +3026,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 +3149,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:
+
+
<![CDATA[
+ @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:
+
+
<![CDATA[
+ @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:
+
+
<![CDATA[
+ .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
@@ -3062,6 +3311,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=]
@@ -3155,6 +3427,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:
@@ -3454,6 +3762,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=]):
@@ -4530,7 +4859,6 @@ Security Considerations
potentially exposing sensitive information
that was previously not accessible via CSS.
See [[#attr-security]].
-
Privacy Considerations
@@ -4547,3 +4875,283 @@ Privacy Considerations
potentially exposing sensitive information
that was previously not accessible via CSS.
See [[#attr-security]].
+
+
+
+absolute-length-units-001.html
+absolute-length-units-manual.html
+acos-asin-atan-atan2-computed.html
+acos-asin-atan-atan2-invalid.html
+acos-asin-atan-atan2-serialize.html
+angle-units-001.html
+angle-units-002.html
+angle-units-003.html
+angle-units-004.html
+angle-units-005.html
+animations/calc-interpolation.html
+animations/line-height-lh-transition.html
+animations/scale-interpolation-crash.html
+calc-angle-values.html
+calc-background-image-gradient-1.html
+calc-background-linear-gradient-1.html
+calc-background-position-002.html
+calc-background-position-003.html
+calc-background-position-1.html
+calc-background-size-1.html
+calc-border-radius-1.html
+calc-catch-divide-by-0.html
+calc-ch-ex-lang.html
+calc-complex-sign-function-crash.html
+calc-complex-unresolved-serialize.html
+calc-height-block-1.html
+calc-height-table-1.html
+calc-in-calc.html
+calc-in-color-001.html
+calc-in-counter-001.xhtml
+calc-in-font-feature-settings.html
+calc-in-max.html
+calc-in-media-queries-001.html
+calc-in-media-queries-002.html
+calc-in-media-queries-with-mixed-units.html
+calc-infinity-nan-computed.html
+calc-infinity-nan-serialize-angle.html
+calc-infinity-nan-serialize-length.html
+calc-infinity-nan-serialize-number.html
+calc-infinity-nan-serialize-resolution.html
+calc-infinity-nan-serialize-time.html
+calc-integer.html
+calc-invalid-parsing.html
+calc-invalid-range-clamping.html
+calc-letter-spacing.html
+calc-linear-radial-conic-gradient-001.html
+calc-margin-block-1.html
+calc-max-height-block-1.html
+calc-max-width-block-1.html
+calc-max-width-block-intrinsic-1.html
+calc-min-height-block-1.html
+calc-min-height.html
+calc-min-width-block-1.html
+calc-min-width-block-intrinsic-1.html
+calc-nesting-002.html
+calc-nesting.html
+calc-numbers.html
+calc-offsets-absolute-bottom-1.html
+calc-offsets-absolute-left-1.html
+calc-offsets-absolute-right-1.html
+calc-offsets-absolute-top-1.html
+calc-offsets-relative-bottom-1.html
+calc-offsets-relative-left-1.html
+calc-offsets-relative-right-1.html
+calc-offsets-relative-top-1.html
+calc-padding-block-1.html
+calc-parenthesis-stack.html
+calc-positive-fraction-001.html
+calc-rem-lang.html
+calc-rgb-percent-001.html
+calc-rounding-001.html
+calc-rounding-002.html
+calc-rounding-003.html
+calc-rounds-to-integer.html
+calc-serialization-002.html
+calc-serialization.html
+calc-text-indent-1.html
+calc-text-indent-intrinsic-1.html
+calc-time-values.html
+calc-transform-origin-1.html
+calc-unit-analysis.html
+calc-vertical-align-1.html
+calc-width-block-1.html
+calc-width-block-intrinsic-1.html
+calc-width-table-auto-1.html
+calc-width-table-fixed-1.html
+calc-z-index-fractions-001.html
+calc-zero-percent-height.html
+cap-invalidation.html
+cap-unit-001.html
+ch-empty-pseudo-recalc-on-font-load.html
+ch-pseudo-recalc-on-font-load.html
+ch-recalc-on-font-load.html
+ch-unit-001.html
+ch-unit-002.html
+ch-unit-003.html
+ch-unit-004.html
+ch-unit-008.html
+ch-unit-009.html
+ch-unit-010.html
+ch-unit-011.html
+ch-unit-012.html
+ch-unit-016.html
+ch-unit-017.html
+ch-unit-018.html
+ch-unit-019.html
+chrome-interpolation-crash.html
+chrome-typed-arithmetic-crash.html
+clamp-color-computed.html
+clamp-color-invalid.html
+clamp-integer-computed.html
+clamp-integer-invalid.html
+clamp-length-computed.html
+clamp-length-invalid.html
+clamp-length-serialize.html
+crashtests/chrome-405422528-crash.html
+crashtests/chrome-bug-492735384.html
+crashtests/chrome-bug-493952652.html
+crashtests/viewport-unit-inline-style-crash.html
+dynamic-viewport-units-rule-cache.html
+ex-calc-expression-001.html
+ex-unit-001.html
+ex-unit-002.html
+ex-unit-003.html
+ex-unit-004.html
+exp-log-compute.html
+exp-log-invalid.html
+exp-log-serialize.html
+getComputedStyle-border-radius-001.html
+getComputedStyle-border-radius-002.html
+getComputedStyle-border-radius-003.html
+getComputedStyle-calc-mixed-units-001.html
+getComputedStyle-calc-mixed-units-002.html
+getComputedStyle-calc-mixed-units-003.html
+hypot-pow-sqrt-computed.html
+hypot-pow-sqrt-invalid.html
+hypot-pow-sqrt-serialize.html
+ic-unit-001.html
+ic-unit-002.html
+ic-unit-003.html
+ic-unit-004.html
+ic-unit-008.html
+ic-unit-009.html
+ic-unit-010.html
+ic-unit-011.html
+ic-unit-012.html
+ic-unit-013.html
+ic-unit-014.html
+ic-unit-015.html
+ic-unit-016.html
+integer_interpolation_round_half_001.html
+integer_interpolation_round_half_002.html
+integer_interpolation_round_half_towards_positive_infinity_order.html
+integer_interpolation_round_half_towards_positive_infinity_z_index.html
+lh-rlh-on-root-001.html
+lh-rlh-percentage-line-height-with-zoom.html
+lh-unit-001.html
+lh-unit-002.html
+lh-unit-003.html
+lh-unit-004.html
+lh-unit-005.html
+lh-unit-same-element-font-size-dependency.html
+lh-unit-same-element-line-height-dependency.html
+line-break-ch-unit.html
+max-20-arguments.html
+max-function-crash.html
+max-length-percent-001.html
+max-unitless-zero-invalid.html
+min-length-percent-001.html
+min-max-percentage-length-interpolation.html
+minmax-angle-computed.html
+minmax-angle-invalid.html
+minmax-angle-serialize.html
+minmax-integer-computed.html
+minmax-length-computed.html
+minmax-length-invalid.html
+minmax-length-percent-computed.html
+minmax-length-percent-invalid.html
+minmax-length-percent-serialize.html
+minmax-length-serialize.html
+minmax-number-computed.html
+minmax-number-invalid.html
+minmax-number-serialize.html
+minmax-percentage-computed.html
+minmax-percentage-invalid.html
+minmax-percentage-serialize.html
+minmax-time-computed.html
+minmax-time-invalid.html
+minmax-time-serialize.html
+mod-length-degrees-crash.html
+negative-calc-to-non-negative-integer.html
+percentage-rem-low.html
+percentage-without-context.html
+premature-comment-crash.html
+q-unit-case-insensitivity-001.html
+q-unit-case-insensitivity-002.html
+rcap-invalidation.html
+rch-invalidation.html
+rem-length-degrees-crash.html
+rem-root-font-size-restyle-1.html
+rem-unit-root-element.html
+resolution-with-percentage-without-context.html
+rex-invalidation.html
+rgba-011.html
+ric-invalidation.html
+rlh-invalidation.html
+rlh-on-root-lengths.html
+rlh-unit-001.html
+round-function.html
+round-length-degrees-crash.html
+round-mod-rem-computed.html
+round-mod-rem-invalid.html
+round-mod-rem-serialize.html
+sign-in-keyframes-with-relative-units.html
+signed-zero.html
+signs-abs-computed.html
+signs-abs-invalid.html
+signs-abs-serialize.html
+sin-cos-tan-computed.html
+sin-cos-tan-invalid.html
+sin-cos-tan-serialize.html
+svg-attr-case-sensitivity.html
+typed-arithmetic-different-categories-crash.html
+typed-arithmetic-inside-calc-crash.html
+typed-arithmetic-mixed-units-crash.html
+typed_arithmetic.html
+typed_arithmetic_cycle.html
+update-subpixel-rem-unit.html
+various-values-important.html
+vh-calc-support-pct.html
+vh-calc-support.html
+vh-em-inherit.html
+vh-inherit.html
+vh-interpolate-pct.html
+vh-interpolate-px.html
+vh-interpolate-vh.html
+vh-support-margin.html
+vh-support-transform-origin.html
+vh-support-transform-translate.html
+vh-support.html
+vh-update-and-transition-in-subframe.html
+vh-zero-support.html
+viewport-page-print.html
+viewport-relative-lengths-scaled-viewport.html
+viewport-unit-011.html
+viewport-units-001-print.html
+viewport-units-after-font-load.html
+viewport-units-compute.html
+viewport-units-css2-001.html
+viewport-units-extreme-scale.html
+viewport-units-gutter-001.html
+viewport-units-gutter-002.html
+viewport-units-gutter-003.html
+viewport-units-gutter-004.html
+viewport-units-gutter-005.html
+viewport-units-gutter-006.html
+viewport-units-gutter-007.html
+viewport-units-gutter-008.html
+viewport-units-invalidation.html
+viewport-units-keyframes.html
+viewport-units-media-queries.html
+viewport-units-modify.html
+viewport-units-parsing.html
+viewport-units-scrollbars-auto-vhw-001.html
+viewport-units-scrollbars-compute.html
+viewport-units-scrollbars-crash.html
+viewport-units-scrollbars-custom-001.html
+viewport-units-scrollbars-dynamic-001.html
+viewport-units-scrollbars-mq-001.html
+viewport-units-scrollbars-root-properties-001.html
+viewport-units-scrollbars-scroll-vhw-001.html
+viewport-units-scrollbars-scroll-vw-001.html
+viewport-units-scrollbars-scroll-vw-002.html
+viewport-units-scrollbars-scroll-vw-003.html
+viewport-units-writing-mode-font-size.html
+viewport-units-writing-mode.html
+
\ No newline at end of file
diff --git a/cssom-1/Overview.bs b/cssom-1/Overview.bs
index edfa480f8fc1..e4663c21f0e5 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 8a56c7b924ce..7f1cdfb8c3e7 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.