From d0d244d9ce555e8155cb1a8c027e90d2acac278f Mon Sep 17 00:00:00 2001
From: Chris Lilley
Date: Mon, 20 Oct 2025 10:43:51 -0400
Subject: [PATCH 001/124] [css-color-5] Defined that if there are multiple
@color-profile rules,the last one wins #12980
---
css-color-5/Overview.bs | 3 +++
1 file changed, 3 insertions(+)
diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs
index ccc208c8844..ff8c935761e 100644
--- a/css-color-5/Overview.bs
+++ b/css-color-5/Overview.bs
@@ -2025,6 +2025,9 @@ or any other color or monochrome output device which has been characterized.
The '@color-profile/src' descriptor specifies the URL to retrieve the color-profile information from.
+ If multiple ''@color-profile' rules are defined with the same name,
+ the last one in document order wins, and all preceding ones are ignored.
+
The retrieved ICC profile is valid if
- it can be parsed as an ICC Profile
From 5f26843835886ddd297e6d7725c88112c8dfaa9d Mon Sep 17 00:00:00 2001
From: Chris Lilley
Date: Mon, 20 Oct 2025 10:47:21 -0400
Subject: [PATCH 002/124] [css-fonts-4] Defined that if there are multiple
@font-palette-values rules, the last one wins #12981
---
css-fonts-4/Overview.bs | 3 +++
1 file changed, 3 insertions(+)
diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs
index eea1950fd5c..79cfe1abd3b 100644
--- a/css-fonts-4/Overview.bs
+++ b/css-fonts-4/Overview.bs
@@ -7682,6 +7682,9 @@ User-defined font color palettes: The ''@font-palette-values'' rule
The ''@font-palette-values'' rule accepts the descriptors defined in this specification.
+ If multiple ''@font-palette-values'' rules are defined with the same name,
+ the last one in document order wins, and all preceding ones are ignored.
+
Modify Bixa Color's color palette.
From 40c794e174ee5eb50a891051aedd11e344715aa0 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner
Date: Sat, 18 Oct 2025 23:57:41 +0200
Subject: [PATCH 003/124] [css-conditional-5] Made last @supports-condition win
#12973
---
css-conditional-5/Overview.bs | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs
index f734cfd57d3..0637a481a92 100644
--- a/css-conditional-5/Overview.bs
+++ b/css-conditional-5/Overview.bs
@@ -1778,7 +1778,8 @@ improving maintainability and readability.
Once defined, the named supports condition can be used in subsequent ''@supports'' or ''@when'' conditions.
- Multiple ''@supports-condition'' rules with the same name in a style sheet are invalid and must be ignored.
+ If multiple ''@supports-condition'' rules are defined with the same name,
+ the last one in document order wins, and all preceding ones are ignored.
For example, we can define a supports query checking multiple properties at once:
From cd10620c303d00ad78eac71468dc9fe42aed2ffc Mon Sep 17 00:00:00 2001
From: Chris Lilley
Date: Mon, 20 Oct 2025 12:04:53 -0400
Subject: [PATCH 004/124] typo
---
css-color-5/Overview.bs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs
index ff8c935761e..75820e63186 100644
--- a/css-color-5/Overview.bs
+++ b/css-color-5/Overview.bs
@@ -2025,7 +2025,7 @@ or any other color or monochrome output device which has been characterized.
The '@color-profile/src' descriptor specifies the URL to retrieve the color-profile information from.
- If multiple ''@color-profile' rules are defined with the same name,
+ If multiple ''@color-profile'' rules are defined with the same name,
the last one in document order wins, and all preceding ones are ignored.
The retrieved ICC profile is valid if
From 8464fd573532c53ff9b5fec034459c46755bb971 Mon Sep 17 00:00:00 2001
From: Chris Lilley
Date: Mon, 20 Oct 2025 12:10:48 -0400
Subject: [PATCH 005/124] [css-fonts-4][editorial] wpt
---
css-fonts-4/Overview.bs | 5 ++---
1 file changed, 2 insertions(+), 3 deletions(-)
diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs
index 79cfe1abd3b..fda236b1db1 100644
--- a/css-fonts-4/Overview.bs
+++ b/css-fonts-4/Overview.bs
@@ -837,7 +837,6 @@ Generic font families
font-weight-lighter-001.xht
font-weight-normal-001.xht
font-weight-sign-function.html
- test-synthetic-bold.xht
test-synthetic-bold.html
synthetic-bold-space-width.html
parsing/font-weight-computed.html
@@ -1186,7 +1185,6 @@ Font style: the 'font-style!!property' property
font-style-angle.html
test-synthetic-italic-2.html
test-synthetic-italic-3.html
- test-synthetic-italic.xht
test-synthetic-italic.html
animations/font-style-interpolation.html
parsing/font-style-computed.html
@@ -1355,9 +1353,9 @@ Font size: the 'font-size' property
font-size-relative-across-calc-ff-bug-001.html
- font-size-zero-1-ref.html
font-size-zero-1.html
font-size-zero-2.html
+ font-size-zero-3.html
font-size-xxx-large.html
rem-in-monospace.html
animations/font-size-interpolation-001.html
@@ -2097,6 +2095,7 @@ Controlling synthesized bold: The 'font-synthesis-weight' property
font-synthesis-weight-first-letter.html
font-synthesis-weight-first-line.html
font-synthesis-weight.html
+ font-synthesis-weight-webfont-bold.html
parsing/font-synthesis-weight-invalid.html
parsing/font-synthesis-weight-valid.html
From 1319f974e70efb53bbacc8b5ee65dedb20082c98 Mon Sep 17 00:00:00 2001
From: Chris Lilley
Date: Mon, 20 Oct 2025 12:23:57 -0400
Subject: [PATCH 006/124] [css-fonts-5][editorial] wpt
---
css-fonts-5/Overview.bs | 2 ++
1 file changed, 2 insertions(+)
diff --git a/css-fonts-5/Overview.bs b/css-fonts-5/Overview.bs
index bf4635778f7..026a8b54dea 100644
--- a/css-fonts-5/Overview.bs
+++ b/css-fonts-5/Overview.bs
@@ -1373,6 +1373,8 @@ Changes
parsing/font-width-valid.html
test-synthetic-bold.html
test-synthetic-italic.html
+ font-size-zero-3.html
+ font-synthesis-weight-webfont-bold.html
+
Clarified that the last @supports-condition in document order wins
+ (#12973)
+
Extended [=supports queries=] to express [=at-rule=] capabilities
via ''at-rule()''.
@@ -2027,6 +2029,35 @@ Changes since the #11117)
Added ''@supports-condition'' at-rule and related {{CSSSupportsConditionRule}} interface.
(#12622)
+
Clarified that container-names are not tree-scoped
+ (#12090)
+
+
Defined direction feature for scroll-state() queries
+ (#6400)
+
+
Clarified that 0 and 0px are equivalent in conditions
+ (#12236)
+
+
+
Defined a range syntax for style container queries
+ (#8376)
+
Clamped baselines of scrollable boxes to the border edge, rather than margin edge.
(Issue 766)
-
Updated the flex container gap definition to use 'gutter'. (Issue 12084)
+
Updated the flex container gap definition to use [=gutter=]. (Issue 12084)
From 028e69f82e3ac694cfd6c22a75a4832f517496cf Mon Sep 17 00:00:00 2001
From: Sebastian Zartner
Date: Wed, 22 Oct 2025 01:00:21 +0200
Subject: [PATCH 012/124] [css-anchor-position-1][editorial] Fixed Bikeshed
errors
---
css-anchor-position-1/Overview.bs | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs
index bcd0ec7304c..4811df1639b 100644
--- a/css-anchor-position-1/Overview.bs
+++ b/css-anchor-position-1/Overview.bs
@@ -114,7 +114,7 @@ to find the “best” one that avoids overlap/overflow.
Note that using the [[HTML#the-popover-attribute|Popover API]]
will automatically set 'position' and create the anchoring relationship
without setting 'anchor-name' or 'position-anchor' value
- (by defining an [=implicit anchor=]),
+ (by defining an [=implicit anchor element=]),
so those properties wouldn't need to be explicitly set again.
So with the correct markup, this example can be simplified to:
@@ -717,7 +717,7 @@ by specifying the rows and columns the region occupies as follows:
: start, end, self-start, self-end
: top, bottom, left, right
- : y-start, y-end, self-x-start, self-y-end
+ : y-start, y-end, self-y-start, self-y-end
: x-start, x-end, self-x-start, self-x-end
: block-start, block-end, self-block-start, self-block-end
: inline-start, inline-end, self-inline-start, self-inline-end
@@ -1368,7 +1368,7 @@ it is aligned as per ''align-self/center''.
█▌ █▌ ████▌ ███▌ ▐▌ █▌ ████ █▌ ▐█
█████▌ █▌ ▐▌ █ █▌ █▌ ▐█
█▌ █▌ █▌ █▌ ▐▌ █ █▌ █▌ ▐█
-█▌ █▌ ███▌ ████ █████▌ █████▌ ██ ██
+█▌ █▌ ███▌ ████ █████▌ █████▌ ██ ██
-->
Anchor-Based Sizing {#sizing}
From c94eb585c1d55460a8f8c060f312e9d8fb77ae7b Mon Sep 17 00:00:00 2001
From: Sebastian Zartner
Date: Wed, 22 Oct 2025 01:00:38 +0200
Subject: [PATCH 013/124] [css-animations-1][editorial] Fixed Bikeshed errors
---
css-animations-1/Overview.bs | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/css-animations-1/Overview.bs b/css-animations-1/Overview.bs
index 3b16f042f39..5718e6647ad 100644
--- a/css-animations-1/Overview.bs
+++ b/css-animations-1/Overview.bs
@@ -24,7 +24,7 @@ Former Editor: Sylvain Galineau, Adobe, galineau@adobe.com
Abstract: This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.
Link Defaults: css-values-3 (type)
the state of the animation if it were given a duration of ''10s''.
-
+ Animation states specified by keyframes
Null.
From fefdce42a6016169b20b71aceb703c645ca76992 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner
Date: Wed, 22 Oct 2025 01:00:52 +0200
Subject: [PATCH 014/124] [css-borders-4][editorial] Fixed Bikeshed errors
---
css-borders-4/Overview.bs | 62 +++++++++++++++++++++++----------------
1 file changed, 36 insertions(+), 26 deletions(-)
diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs
index f778acf8d0d..cb240ade620 100644
--- a/css-borders-4/Overview.bs
+++ b/css-borders-4/Overview.bs
@@ -14,7 +14,8 @@ Editor: Sebastian Zartner, Invited Expert, sebastianzartner@gmail.com, w3cid 649
Editor: Noam Rosenthal, Google, w3cid 121539
Former Editor: Bert Bos, W3C, bert@w3.org, w3cid 3343
Abstract: This module contains the features of CSS relating to the borders and decorations of boxes on the page.
-Ignored Terms: total width, border-*-*-radius, corner-*-shape, corner-*-*-shape, corner-*-*, corner-*, box-shadow-*, border-*-clip
+Ignored Terms: border-*-*-radius, border-*-clip, box-shadow-*, corner-*-shape, corner-*-*-shape, corner-*-*, corner-*
+Ignored Vars: block, inline, Li, Ltop, Lbottom, Lleft, Lright, total width, W, Wside, Wleft, Wright, Wtop, Wbottom
Repository: w3c/csswg-drafts
WPT Path Prefix: css/css-borders/
WPT Display: open
@@ -128,11 +129,11 @@ Line Colors: the 'border-color' properties
Sample rendering:
-
+
The same border colors with ''border-style: dotted'':
-
+
@@ -311,9 +312,7 @@ Line Patterns: the 'border-style' properties
but behind the element’s content (in case it overlaps).
-
+ Example renderings of the predefined border styles.
@@ -586,9 +585,7 @@ Corners
follow the curve of the border.
-
+
The effect of a rounded corner when the two borders it connects
@@ -620,6 +617,7 @@ Corners
describing a quarter-ellipse;
but since the opposite sides have a border thickness
the padding edge curve starts inward from the outer arc's endpoints."
+ width="141"
>
@@ -696,9 +694,7 @@ Color and Style Transitions
or what function maps from this ratio to a point on the curve.
-
+
Given these corner shapes, color and style transitions
@@ -774,7 +770,8 @@ Overlapping Curves
@@ -827,6 +824,7 @@ Corner Sizing: the 'border-*-*-radius' properties
@@ -1253,7 +1251,7 @@ Corner Shaping: the 'corner-*-shape' properties
-
+
Different ''superellipse()'' values for the top right corner: infinity, 1, 0, -1, and -infinity.
@@ -1411,7 +1409,9 @@ while when rendering 'box-shadow' or offsetting for 'overflow-clip-margin', the
+ alt="Adjusting corner shapes"
+ width="600"
+ >
Borders are aligned to the curve, shadows and clip are aligned to the axis.
@@ -1642,7 +1642,10 @@ Border Images
The image to tile is as follows.
Apart from the diamonds, it is transparent:
-
+
The image is 81 by 81 pixels and has to be divided into 9 equal parts.
The style rules could thus be as follows:
@@ -1657,7 +1660,10 @@ Border Images
The result, when applied to a DIV of 12 by 5em,
will be similar to this:
-
+
@@ -1091,10 +1091,10 @@ Nesting Selector: the ''&'' selector {#nest-selector}
While the position of a [=nesting selector=] in a [=compound selector=]
does not make a difference in its behavior
- (that is, ''&.foo'' and ''.foo&'' match the same elements),
+ (that is, ''&.foo'' and ''.foo&'' match the same elements),
the existing rule that a [=type selector=], if present, must be first in the [=compound selector=]
continues to apply
- (that is, ''&div'' is illegal, and must be written ''div&'' instead).
+ (that is, ''&div'' is illegal, and must be written ''div&'' instead).
-
+
linear-timing-functions-output.html
linear-timing-functions-syntax.html
+
+
+
+ linear-timing-functions-chrome-406926307-crash.html
\ No newline at end of file
From db91fef762bee93d16b07bf8dd007ea51b6c75f3 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner
Date: Thu, 23 Oct 2025 01:30:48 +0200
Subject: [PATCH 025/124] [css-exclusions-1][editorial] Fixed Bikeshed issues
---
css-exclusions-1/Overview.bs | 33 ++++++++++++++++++---------------
1 file changed, 18 insertions(+), 15 deletions(-)
diff --git a/css-exclusions-1/Overview.bs b/css-exclusions-1/Overview.bs
index fbb1cd7d189..86a461f0b9b 100644
--- a/css-exclusions-1/Overview.bs
+++ b/css-exclusions-1/Overview.bs
@@ -18,6 +18,7 @@ Abstract: CSS Exclusions define arbitrary areas around which inline content ([[!
Ignored Terms: div, dl, dfn
The content area is normally used for layout of the inline flow content of a box.
-
Wrapping area
+
Wrapping area
The area used for layout of inline flow content of a box affected by a
wrapping context, defined by subtracting the wrapping
@@ -146,6 +147,7 @@ The 'wrap-flow' property
Inherited: no
Percentages: N/A
Computed value: as specified except for element's whose 'float' computed value is not ''float/none'', in which case the computed value is ''auto''.
+ Animation type: discrete
The values of this property have the following meanings:
@@ -203,7 +205,7 @@ The 'wrap-flow' property
block's descendants to wrap around its exclusion area.
-
+ Exclusion with 'wrap-flow': ''start'' interacting with various
writing modes.
@@ -215,7 +217,7 @@ The 'wrap-flow' property
context (see [[!CSS2]]) for its content.
-
+ Combining exclusions
@@ -284,31 +286,31 @@ The 'wrap-flow' property
.exclusion{ wrap-flow: both; }
-
-
+
+
.exclusion{ wrap-flow: start; }
.exclusion{ wrap-flow: end; }
-
-
+
+
.exclusion{ wrap-flow: minimum; }
.exclusion{ wrap-flow: maximum; }
-
-
+
+
.exclusion{ wrap-flow: clear; }
-
+
@@ -364,6 +366,7 @@ Applies to: block-level elements
Inherited: no
Percentages: N/A
Computed value: as specified
+Animation type: discrete
The values of this property have the following meanings:
@@ -435,7 +438,7 @@ The values of this property have the following meanings:
</div>
-
+
@@ -498,8 +501,8 @@ Exclusions order
.middle { z-index: 1; }
-
-
+
+
@@ -773,7 +776,7 @@ Resolving RWC-1
laid out to resolve the e2 exclusion's position
because it is absolutely positioned and its size can be resolved without
layout either. At this point, RWC-1 is resolved and can be used when laying
- inline content out.
+ inline content out.
Resolving RWC-2
@@ -853,7 +856,7 @@ Effect of exclusions on floats
No new privacy considerations have been reported on this specification.
-
+
Security Considerations
No new security considerations have been reported on this specification.
From a2151580947cf51df6a76afb90e9901d28548134 Mon Sep 17 00:00:00 2001
From: Chris Lilley
Date: Wed, 22 Oct 2025 20:20:13 -0400
Subject: [PATCH 026/124] [css-conditional-3][editorial] a bit of wpt
---
css-conditional-3/Overview.bs | 12 +++++++++---
"css-conditional-3/\357\200\274wpt" | 0
2 files changed, 9 insertions(+), 3 deletions(-)
create mode 100644 "css-conditional-3/\357\200\274wpt"
diff --git a/css-conditional-3/Overview.bs b/css-conditional-3/Overview.bs
index d4d62087b15..1de22858782 100644
--- a/css-conditional-3/Overview.bs
+++ b/css-conditional-3/Overview.bs
@@ -765,7 +765,9 @@ interface CSSConditionRule : CSSGroupingRule {
js/conditional-CSSGroupingRule.html
-
+
+ js/supports-conditionText.html
+
@@ -784,7 +786,9 @@ js/conditional-CSSGroupingRule.html
The conditionText attribute, on getting, must return
the result of serializing the associated condition.
-
+
+ js/supports-conditionText.html
+
diff --git "a/css-conditional-3/\357\200\274wpt" "b/css-conditional-3/\357\200\274wpt"
new file mode 100644
index 00000000000..e69de29bb2d
From 6fd4a7ed415ede9714e3da67e1e8fd2481c787a5 Mon Sep 17 00:00:00 2001
From: Chris Lilley
Date: Wed, 22 Oct 2025 20:21:23 -0400
Subject: [PATCH 027/124] [css-conditional-3][editorial] preferred text for no
security issues
---
css-conditional-3/Overview.bs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/css-conditional-3/Overview.bs b/css-conditional-3/Overview.bs
index 1de22858782..a8b2177d83f 100644
--- a/css-conditional-3/Overview.bs
+++ b/css-conditional-3/Overview.bs
@@ -963,7 +963,7 @@ js/CSS-supports-L3.html
Security Considerations
-This spec introduces no new security considerations.
+No security issues have been raised against this document
Privacy Considerations
From 34d7f5cbb1214cff98133749406513edb8a1af40 Mon Sep 17 00:00:00 2001
From: Chris Couzens
Date: Thu, 23 Oct 2025 23:55:11 +0100
Subject: [PATCH 028/124] Fix typo of unit name in css-env draft (#13008)
1em didn't make sense with the associated formula.
The context of the line above makes me think it was meant to be pem.
The definition of pem here fits the line
https://github.com/w3c/csswg-drafts/issues/10674
Although it also suggests it's going away, so maybe the whole section needs removing.
---
css-env-1/Overview.bs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/css-env-1/Overview.bs b/css-env-1/Overview.bs
index ba6c154af40..0a57724e5c9 100644
--- a/css-env-1/Overview.bs
+++ b/css-env-1/Overview.bs
@@ -256,7 +256,7 @@ would cause text sizes to double,
then ''env(preferred-text-scale)'' would resolve to ''2''.
Note: The ''pem'' unit represents this same information;
-''1em'' is exactly equivalent to ''calc(1em * env(preferred-text-scale))''.
+''1pem'' is exactly equivalent to ''calc(1em * env(preferred-text-scale))''.
When directly sizing things, ''bsem'' is just a more convenient length to use.
From ec724fbe0463b4999d15310c3308062f3d0c4268 Mon Sep 17 00:00:00 2001
From: "Tab Atkins Jr."
Date: Thu, 23 Oct 2025 19:35:47 -0700
Subject: [PATCH 029/124] Add the proposed syntax stuff from the f2f discussion
(#13009)
* wip
* wip
* All the rest
---
css-animations-2/Overview.bs | 586 +++++++++++++++++++++++------------
1 file changed, 380 insertions(+), 206 deletions(-)
diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs
index 8b0bf8ad919..d4fb16e51c0 100644
--- a/css-animations-2/Overview.bs
+++ b/css-animations-2/Overview.bs
@@ -189,7 +189,7 @@ is elem. animation is disassociated from
elem.style.animation = 'spin 1s';
let animation = elem.getAnimations()[0]; // animation's owning element is elem
-elem.style.animation = ''; // animation no longer has an owning element
+elem.style.animation = ""; // animation no longer has an owning element
Note that although the owning element is often equal to the
@@ -704,79 +704,241 @@ When multiple 'animation-*' properties are set simultaneously,
so e.g. a change to 'animation-play-state' applies
to the simultaneously-applied timeline specified in 'animation-timeline'.
-## The 'animation' shorthand property ## {#animation-shorthand}
-
-The 'animation' shorthand property syntax is as follows:
-
-<single-animation> = <<'animation-duration'>> || <> || <<'animation-delay'>> || <> || <> || <> || <> || [ none | <> ] || <>
-
-
-Declaring Animation Triggers
-
- Animation Triggers are defined using the 'animation-trigger-*' properties.
- These list-valued properties,
- which are all [=longhands=] of the 'animation-trigger' [=shorthand=],
- form a [=coordinating list property group=]
- with 'animation-name' as the [=coordinating list base property=]
- and each item in the [=coordinated value list=]
- defining the properties of a single animation trigger.
-
- The 'animation-trigger' properties
- are [=reset-only sub-properties=] of the 'animation' [=shorthand=].
-## The 'animation-trigger-behavior' property ## {#animation-trigger-behavior}
+
+The 'animation-trigger' property
-The 'animation-trigger-behavior' property specifies the [=animation trigger behavior=]
-of the [=animation trigger=].
-
-
-Name: animation-trigger-behavior
-Value: <>#
-Initial: once
+
+Name: animation-trigger
+Value: [ none | [ <> <>+ ]+ ]#
+Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
-Computed value: list, each item a keyword as specified
+Computed value: as specified
Animation type: not animatable
Canonical order: per grammar
-<single-animation-trigger-behavior> = once | repeat | alternate | state
+The 'animation-trigger' property
+specifies whether the animation is a [=triggered animation=],
+and if it is,
+what trigger it responds to
+and what actions it takes in response.
+'animation-trigger' is a [=reset-only sub-property=] of the 'animation' shorthand.
+Its values are:
+
+
+ : none
+ ::
+ The corresponding animation is not a [=triggered animation=].
+
+ : [ <> <>+ ]+
+ ::
+ The corresponding animation is a [=triggered animation=],
+ responding to the triggers named by each <>,
+ and responding by taking the action named by the corresponding <>.
+ (See [[#trigger-scope]] for how <>s are resolved to [=triggers=].)
+
+ How many <>s a trigger accepts,
+ and what exactly activates them,
+ is determined by the type of the trigger.
+ ([=Event triggers=] only take a single <>,
+ while [=timeline triggers=] can take one or two.)
+ Specifying the wrong number of actions
+ (too many or too few)
+ is valid syntactically,
+ but causes the trigger to have no effect.
+
+ If multiple triggers occur simultaneously,
+ they take effect in the order specified.
+
+ If the same <> is specified multiple times,
+ all but the last have no effect.
+
+
+The possible <> values,
+and what effect they have in each animation state:
+
+
+
+
Keyword
Extra Effect
initial
playing
paused
finished
+
+
none
—
—
—
—
—
+
play
—
{{play()}}
—
{{play()}}
{{play()}}
+
play-forwards
set playback rate to positive
{{play()}}
—
{{play()}}
{{play()}}
+
play-backwards
set playback rate to negative
{{play()}}
—
{{play()}}
{{play()}}
+
pause
—
—
{{pause()}}
—
—
+
reset
set progress to 0
—
{{pause()}}
{{pause()}}
{{pause()}}
+
replay
set progress to 0
{{play()}}
—
{{play()}}
{{play()}}
+
+ If there is an "effect",
+ it happens regardless of the current state,
+ before the state-specific action
+
+
-The values of 'animation-trigger-behavior' have the following meaning
-for an [=animation trigger=] that enters its [=animation trigger/active interval|active interval=]:
-
-
once
-
- The animation is triggered and played once and only once.
+## The 'animation' shorthand property ## {#animation-shorthand}
-
repeat
-
- The animation is played from the beginning each time it is triggered.
- When the trigger’s [=animation trigger/active interval=] is exited the animation is reset.
+The 'animation' shorthand property syntax is as follows:
-
alternate
-
- The animation is played forwards, according to its [=playback direction=], each time it is triggered.
- When the trigger’s [=animation trigger/active interval=] is exited the animation is reversed.
+<single-animation> = <<'animation-duration'>> || <> || <<'animation-delay'>> || <> || <> || <> || <> || [ none | <> ] || <>
-
state
-
- The animation is triggered and played once.
- When the trigger’s [=animation trigger/active interval=] is exited the animation is paused.
- When the trigger’s [=animation trigger/active interval=] is re-entered the animation is resumed.
-
+
+Triggers
+
+While CSS animations are, by default,
+automatically run as soon as the appropriate 'animation' values have been set on an element,
+the 'animation-trigger' property allows the animation's start to be delayed
+until an appropriate trigger occurs,
+and even paused, restarted, or reset by triggers
+(making it a triggered animation).
+
+This is a simplified and streamlined version
+of what can be achieved with the Web Animations API in Javascript,
+allowing simple, common interaction patterns
+to be created and managed purely in CSS.
+
+Currently, two types of triggers are defined:
+
+* [=timeline triggers=], managed by the 'timeline-trigger' properties,
+ which allow animations to be triggered by entering or leaving certain timeline ranges.
+ (Usually, [=view progress timelines=],
+ so an animation can be started when an element comes on-screen,
+ without actually driving the animation with the scroll progress.)
+
+* [=event triggers=], managed by the 'event-trigger' properties,
+ which allow animations to be triggered by certain user-interaction events,
+ such as clicking an element or pressing certain keys.
+
+A [=trigger=] is defined on some specific triggering element.
+All triggers have a name,
+and the specific type of trigger dictates how and when it's activated.
+A trigger can define multiple "types" of activation.
+(For example, [=timeline triggers=] can do different things on entry and exit.)
+
+A [=trigger=] is used on potentially any element,
+for some specific purpose
+(currently, just 'animation-trigger').
+A trigger-using element specifies what trigger(s) it's listening to,
+and what actions
+(currently, just <>s)
+to do in response to that activation.
+
+Note: This design for [=triggers=],
+and the way they're associated with [=triggered animations=] and <>s,
+is intentionally somewhat generic,
+intended to support using [=triggers=] for other purposes in the future.
+For now, though, [=triggered animations=] are the only user of this feature.
+
+
+
+Trigger Scope/Resolution
+
+All [=triggers=] are document-global by default,
+similar to [=anchor names=].
+
+If a single element attempts to define multiple [=triggers=] of different types
+with the same name,
+it only exposes one of them,
+with [=event triggers=] winning over [=timeline triggers=].
+
+Note: This order is completely arbitrary
+(based on alphabetic order of the concept name),
+as this is just an error case.
+
+If multiple elements define [=triggers=] with the same name,
+the [=trigger=] defined by the later element in [=tree order=] is used.
+
+Note: This behavior will be improved by a trigger-scope property,
+not yet defined,
+letting you define triggers that are only visible to subtrees
+and references that only search in that subtree
+(just like 'anchor-scope').
+
+
+Timeline Triggers
+
+A timeline trigger is a [=trigger=]
+which is activated when some [=timeline=]
+enters the trigger's enter range,
+or leaves the trigger's exit range.
+It is defined on an element with the 'timeline-trigger' shorthand property,
+or its longhands.
+
+A [=timeline trigger=] has a binary trigger state associated with it;
+it is initially "untriggered".
+While it's "untriggered",
+the associated [=timeline=] entering (or starting in) the trigger's [=enter range=]
+performs an associated enter action
+and switches the [=trigger state=] to "triggered";
+while it's "triggered",
+the associated timeline leaving the trigger's [=exit range=]
+performs an associated exit action
+and switches the [=trigger state=] to "untriggered".
+
+Note: By default, the [=exit range=] is the same as the [=enter range=];
+even when manually specified,
+the [=exit range=] is always a superset of the [=enter range=].
+The two ranges allow, for example,
+an 'animation-trigger' to start an animation
+when an element is scrolled close the center of the screen
+(using a [=view progress timeline=] with a relatively small window as the [=enter range=]),
+but not stop it until the element is fully off-screen
+(using ''animation-timeline-range/cover'' as the [=exit range=]).
+
+Issue: I think it's WebAnim2 that needs to define
+that exit ranges are interpreted
+as the bounding range of the [=enter range=]
+and what's specified for the [=exit range=].
+
+A [=timeline trigger=] can have one or two actions associated with it
+when used as a trigger on an element
+(such as by 'animation-trigger').
+If two are specified, the first is the trigger's [=enter action=]
+and the second is the trigger's [=exit action=];
+if only one is specified, the first is the trigger's [=enter action=]
+and its [=exit action=] is to do nothing.
+
+An element can define multiple [=timeline triggers=],
+using the same [=timeline=] (potentially with different ranges)
+or different ones.
+The set of 'timeline-trigger' longhands
+form a [=coordinating list property group=],
+with 'timeline-trigger-name' as the [=coordinating list base property=],
+and each item in the [=coordinated value list=]
+defining the properties of a single [=timeline trigger=].
+
+
+
+Naming the Trigger: the 'timeline-trigger-name' property
+
+
+Name: timeline-trigger-name
+Value: none | <>#
+Initial: none
+Applies to: all elements
+Inherited: no
+Percentages: N/A
+Computed value: as specified
+Canonical order: per grammar
+Animation type: not animatable
+
+
+If ''timeline-trigger-name/none'' is specified,
+the element does not define any [=timeline triggers=].
-The behavior of each value is defined in [[web-animations-2#trigger-behaviors]].
+If the same <> appears multiple times in the list,
+only the last one defines a [=timeline trigger=];
+the preceding ones have no effect.
-## The 'animation-trigger-timeline' property ## {#animation-trigger-timeline}
-The 'animation-trigger-timeline' property specifies the timeline
-of the animation’s associated [=animation trigger=].
+
+Linking a Timeline: the 'timeline-trigger-source' property
-Name: animation-trigger-timeline
+Name: timeline-trigger-source
Value: <>#
Initial: auto
Applies to: all elements
@@ -793,200 +955,212 @@ Canonical order: per grammar
Animation Type: not animatable
-The values of 'animation-trigger-timeline' have the same meaning as those of 'animation-timeline'.
+The 'timeline-trigger-source' property
+specifies the [=timeline trigger's=] associated [=timeline=].
+Values have the same meaning as those of 'animation-timeline',
+except that ''timeline-trigger-source/none''
+instead causes the corresponding entry in the [=coordinated value list=]
+to not define a [=timeline trigger=].
-Issue: Probably a trigger with timeline "none" is under-specified here. Need to clarify what it means.
-
-## The 'animation-trigger-range' property ## {#animation-trigger-range}
+
+The Enter Range: the 'timeline-trigger-range' property
-The 'animation-trigger-range' property is a [=shorthand property|shorthand=]
-that sets 'animation-trigger-range-start' and 'animation-trigger-range-end'
-together in a single declaration,
-specifying the [=animation trigger=]’s associated [=default range=].
+The 'timeline-trigger-range' property is a [=shorthand property=]
+that sets 'timeline-trigger-range-start' and 'timeline-trigger-range-end'
+together in a single declaration.
It has the same syntax as the 'animation-range' property.
-The behavior of 'animation-trigger-range' is defined in [[web-animations-2#trigger-ranges]].
+The behavior of 'timeline-trigger-range' is defined in [[web-animations-2#trigger-ranges]].
-## The 'animation-trigger-range-start' property ## {#animation-trigger-range-start}
+Issue: Need to rewrite WebAnim2 to use the term "enter range".
- Name: animation-trigger-range-start
- Value: [ normal | <> | <> <>? ]#
- Initial: normal
- Applies to: all elements
- Inherited: no
- Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline
- Computed value: list, each item either the keyword ''animation-trigger-range-start/normal'' or a timeline range and progress percentage
- Animation type: not animatable
+Name: timeline-trigger-range-start, timeline-trigger-range-end
+Value: [ normal | <> | <> <>? ]#
+Initial: normal
+Applies to: all elements
+Inherited: no
+Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline
+Computed value: list, each item either the keyword ''animation-trigger-range-start/normal'' or a timeline range and progress percentage
+Animation type: not animatable
-The 'animation-trigger-range-start' property specifies the start of the [=animation trigger=]’s
-associated [=default range=].
+The 'timeline-trigger-range-start' and 'timeline-trigger-range-end' properties
+specify the [=timeline trigger=]’s associated [=timeline trigger/enter range=].
+Values have the same meaning as 'animation-range-start' and 'animation-range-end'.
-The values of 'animation-trigger-range-start' have the same meaning as those of 'animation-range-start'.
-## The 'animation-trigger-range-end' property ## {#animation-trigger-range-end}
+
+The Exit Range: the 'timeline-trigger-exit-range' property
-
- Name: animation-trigger-range-end
- Value: [ normal | <> | <> <>? ]#
- Initial: normal
- Applies to: all elements
- Inherited: no
- Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline
- Computed value: list, each item either the keyword ''animation-trigger-range-end/normal'' or a timeline range and progress percentage
- Animation type: not animatable
+
-The 'animation-trigger-range-end' property specifies the end of the [=animation trigger=]’s
-associated [=default range=].
+The 'timeline-trigger-exit-range' property is a [=shorthand property=]
+that sets 'timeline-trigger-exit-range-start' and 'timeline-trigger-exit-range-end'
+together in a single declaration.
+It has the same syntax as the 'animation-range' property.
+
+The behavior of 'timeline-trigger-exit-range' is defined in [[web-animations-2#trigger-ranges]].
+
+
+
+Name: timeline-trigger-exit-range-start, timeline-trigger-exit-range-end
+Value: [ auto | normal | <> | <> <>? ]#
+Initial: normal
+Applies to: all elements
+Inherited: no
+Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline
+Computed value: list, each item either the keyword ''animation-trigger-range-start/normal'' or a timeline range and progress percentage
+Animation type: not animatable
+
-The values of 'animation-trigger-range-end' have the same meaning as those of 'animation-range-end'.
+The 'timeline-trigger-exit-range-start' and 'timeline-trigger-exit-range-end' properties
+specify the [=timeline trigger=]’s associated [=timeline trigger/exit range=].
+Values have the same meaning as 'animation-range-start' and 'animation-range-end',
+with the following addition:
+
+
+ : auto
+ ::
+ The start (for 'timeline-trigger-exit-range-start')
+ or end (for 'timeline-trigger-exit-range-end')
+ is equal to the start/end of the [=timeline trigger's=] [=enter range=].
+
-## The 'animation-trigger-exit-range' property ## {#animation-trigger-exit-range}
+
-The 'animation-trigger-exit-range' property is a [=shorthand property|shorthand=]
-that sets 'animation-trigger-exit-range-start' and 'animation-trigger-exit-range-end'
-together in a single declaration,
-specifying the [=animation trigger=]’s associated [=exit range=].
-It has the same syntax as the 'animation-range' property, with the addition of the ''animation-trigger-exit-range-start/auto'' keyword.
+The 'timeline-trigger' [=shorthand property=]
+sets all of 'timeline-trigger-name',
+'timeline-trigger-source',
+'timeline-trigger-range',
+and optionally 'timeline-trigger-exit-range'
+at once.
-The [=exit range=] replaces the [=default range=] once the [=animation trigger=]’s
-[=animation trigger/active interval|active interval=] is entered,
-and redefines the extent of the [=animation trigger=]’s [=animation trigger/active interval|active interval=].
-It is used to extend the [=default range=], for example,
-in cases where exiting the [=animation trigger/active interval|active interval=]
-may create a visual jump that needs to be avoided.
+A value of none
+is equivalent to ''none none normal''.
-The behavior of 'animation-trigger-exit-range' is further defined in [[web-animations-2#trigger-ranges]].
+Note: Due to significant potentially ambiguities in the syntax
+('timeline-trigger-name' vs [=timeline=] names in 'timeline-trigger-source';
+[=enter ranges=] vs [=exit ranges=]),
+this shorthand's values must be given in the specified order,
+rather than being settable in any order as is more common.
-## The 'animation-trigger-exit-range-start' property ## {#animation-trigger-exit-range-start}
+Issue: I think we need the ''/'' to disambiguate the two ranges?
-
- Name: animation-trigger-exit-range-start
- Value: [ auto | normal | <> | <> <>? ]#
- Initial: auto
- Applies to: all elements
- Inherited: no
- Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline
- Computed value: list, each item either the keyword ''animation-trigger-exit-range-start/normal'' or a timeline range and progress percentage
- Animation type: not animatable
-
-The 'animation-trigger-exit-range-start' property specifies the start of the [=animation trigger=]’s
-associated [=exit range=].
-
-The values of 'animation-trigger-exit-range-start' have the following meaning:
-
-
-
auto
-
- The start of the trigger’s [=exit range=]
- is equal to the start of its [=default range=].
-
-
normal
-
- The start of the trigger’s [=exit range=]
- is the start of its associated [=timeline=];
- the start of the trigger’s [=animation trigger/active interval|active interval=]
- is determined as normal.
-
-
<>
-
- The [=exit range=] starts
- at the specified point on the [=timeline=]
- measuring from the start of the timeline.
-
-
<> <>?
-
- The [=exit range=] starts
- at the specified point on the [=timeline=]
- measuring from the start of the specified [=named timeline range=].
- If the <> is omitted,
- it defaults to 0%.
-
-## The 'animation-trigger-exit-range-end' property ## {#animation-trigger-exit-range-end}
+
+Event Triggers
-
- Name: animation-trigger-exit-range-end
- Value: [ auto | normal | <> | <> <>? ]#
- Initial: auto
- Applies to: all elements
- Inherited: no
- Percentages: relative to the specified [=named timeline range=] if one was specified, else to the entire timeline
- Computed value: list, each item either the keyword ''animation-trigger-exit-range-end/normal'' or a timeline range and progress percentage
- Animation type: not animatable
-
+An event trigger is a [=trigger=]
+which is activated when certain {{Event}}s are fired at the element.
+It is defined on an element with the 'event-trigger' shorthand property,
+or its longhands.
-The 'animation-trigger-exit-range-end' property specifies the end of the [=animation trigger=]’s
-associated [=exit range=].
-
-The values of 'animation-trigger-exit-range-start' have the following meaning:
-
-
-
auto
-
- The end of the trigger’s [=exit range=]
- is equal to the end of its [=default range=].
-
-
normal
-
- The end of the trigger’s [=exit range=]
- is the end of its associated [=timeline=];
- the end of the trigger’s [=animation trigger/active interval|active interval=]
- is determined as normal.
-
-
<>
-
- The [=exit range=] ends
- at the specified point on the [=timeline=]
- measuring from the start of the timeline.
-
-
<> <>?
-
- The [=exit range=] ends
- at the specified point on the [=timeline=]
- measuring from the start of the specified [=named timeline range=].
- If the <> is omitted,
- it defaults to 100%.
-
+An [=event trigger=] only has a single action associated with it,
+which it performs every time the trigger is activated.
-## The 'animation-trigger' property ## {#animation-trigger}
+An element can define multiple [=event triggers=],
+using the same {{Event}}s or different ones.
+The set of 'event-trigger' longhands
+form a [=coordinating list property group=],
+with 'event-trigger-name' as the [=coordinating list base property=],
+and each item in the [=coordinated value list=]
+defining the properties of a single [=event trigger=].
-The 'animation-trigger' property is a [=shorthand property|shorthand=]
-that sets 'animation-trigger-behavior', 'animation-trigger-timeline',
-'animation-trigger-range-start', 'animation-trigger-range-end',
-'animation-trigger-exit-range-start', and 'animation-trigger-exit-range-end'
-together in a single declaration,
-specifying the [=animation trigger=] for an animation.
-
-Name: animation-trigger
-Value: <>#
-Initial: see individual properties
+
+Naming the Trigger: the 'event-trigger-name' property
+
+
+Name: event-trigger-name
+Value: none | <>#
+Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
-Computed value: see individual properties
+Computed value: as specified
Canonical order: per grammar
-Animation Type: not animatable
+Animation type: not animatable
+
+
+If ''event-trigger-name/none'' is specified,
+the element does not define any [=event triggers=].
+
+If the same <> appears multiple times in the list,
+only the last one defines a [=event trigger=];
+the preceding ones have no effect.
+
+
+Linking an Event: the 'event-trigger-source' property
+
+
+Name: event-trigger-source
+Value: [ none | <>+ ]#
+Initial: none
+Applies to: all elements
+Inherited: no
+Percentages: N/A
+Computed value: as specified
+Animation type: not animatable
+The 'event-trigger-source' property
+specifies what event or events activate the [=event trigger=].
+
+Whenever any of the specified {{Event}}s are fired
+with this element as its {{Event/target}},
+the [=event target=] activates.
+
+Issue: Figure out the full set of events we want to handle.
+
+Issue: The proposal I drew this text from
+specified that it only cares if the element is the *target* of the event.
+We probably want to allow for bubbling and/or capturing,
+possibly as an opt in/out.
+
+
+
+The 'event-trigger' Shorthand
+
+
+Name: event-trigger
+Value: none | [ <<'event-trigger-name'>> <<'event-trigger-source'>> ]#
+Initial: none
+Applies to: all elements
+Inherited: no
+Percentages: N/A
+Computed value: as specified
+Animation type: not animatable
+
+
+The 'event-trigger' [=shorthand property=]
+sets both 'event-trigger-name' and 'event-trigger-source' at once.
+
+A value of none
+is equivalent to ''none none''.
+
+
+
+
# Animation Events # {#events}
## Event dispatch ## {#event-dispatch}
From 3092f6190172fb53286443a5a153b60172d563f7 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner
Date: Fri, 24 Oct 2025 08:37:24 +0200
Subject: [PATCH 030/124] [css-flexbox-1][editorial] Fixed Bikeshed issues
---
css-flexbox-1/Overview.bs | 17 ++++++-----------
1 file changed, 6 insertions(+), 11 deletions(-)
diff --git a/css-flexbox-1/Overview.bs b/css-flexbox-1/Overview.bs
index 058ea65cf97..a29eb0c08ee 100644
--- a/css-flexbox-1/Overview.bs
+++ b/css-flexbox-1/Overview.bs
@@ -53,11 +53,6 @@ spec: css-writing-modes-3; type: dfn;
spec: css-pseudo-4; type: selector;
text: ::first-line
text: ::first-letter
-spec:css-flexbox-1;
- type:property;
- text:order
- type:dfn;
- text:order-modified document order
@@ -368,7 +363,7 @@ Overview
-
+
Computer Starter Kit
This is the best computer money can buy,
@@ -381,7 +376,7 @@ Overview
-
+
Printer
Only capable of printing
@@ -1947,8 +1942,8 @@ Flex Direction and Wrap: the 'flex-flow' shorthand
flex-flow: row wrap; writing-mode: horizontal-tb;
flex-flow: row wrap; writing-mode: vertical-rl;
-
-
+
+
@@ -2105,7 +2100,7 @@ Flex Lines
the flex container will create an additional line to contain the last item.
-
+ An example rendering of the multi-line flex container.
@@ -2146,7 +2141,7 @@ Flex Lines
and will stretch to the entire width of the line, i.e. 300px.
-
+
A rendering of the same as above,
From f65d6ca7bcad264d2521299caeeebaf664b68acb Mon Sep 17 00:00:00 2001
From: Sebastian Zartner
Date: Fri, 24 Oct 2025 22:37:28 +0200
Subject: [PATCH 031/124] [many][editorial] Reset to ED
---
css-2020/Overview.bs | 3 +--
css-2022/Overview.bs | 5 ++---
css-2023/Overview.bs | 5 ++---
css-2024/Overview.bs | 5 ++---
css-2025/Overview.bs | 5 ++---
css-anchor-position-2/Overview.bs | 5 ++---
css-animations-1/Overview.bs | 5 ++---
css-box-3/Overview.bs | 5 ++---
css-contain-1/Overview.bs | 3 +--
css-display-3/Overview.bs | 6 ++----
css-display-4/Overview.bs | 5 ++---
css-env-1/Overview.bs | 5 ++---
css-font-loading-3/Overview.bs | 5 ++---
css-gcpm-3/Overview.bs | 5 ++---
css-images-4/Overview.bs | 5 ++---
css-multicol-1/Overview.bs | 6 ++----
css-multicol-2/Overview.bs | 5 ++---
css-overflow-5/Overview.bs | 5 ++---
css-scroll-snap-2/Overview.bs | 5 ++---
css-scrollbars-1/Overview.bs | 2 +-
css-viewport-1/Overview.bs | 5 ++---
cssom-view-1/Overview.bs | 5 ++---
22 files changed, 41 insertions(+), 64 deletions(-)
diff --git a/css-2020/Overview.bs b/css-2020/Overview.bs
index 66c83809a0c..5c61be9f60b 100644
--- a/css-2020/Overview.bs
+++ b/css-2020/Overview.bs
@@ -4,8 +4,7 @@ Shortname: css-2020
Level: none
Status: ED
Group: CSSWG
-Date: 2020-12-21
-Prepare for TR: yes
+Prepare for TR: no
Work Status: revising
URL: https://drafts.csswg.org/css-2020/
TR: https://www.w3.org/TR/css-2020/
diff --git a/css-2022/Overview.bs b/css-2022/Overview.bs
index c7a013d108d..ba4a53be0dc 100644
--- a/css-2022/Overview.bs
+++ b/css-2022/Overview.bs
@@ -2,9 +2,8 @@
Title: CSS Snapshot 2022
Shortname: css-2022
Level: none
-Status: NOTE-FPWD
-Date: 2022-11-22
-Prepare for TR: yes
+Status: ED
+Prepare for TR: no
Group: CSSWG
Work Status: revising
URL: https://drafts.csswg.org/css-2022/
diff --git a/css-2023/Overview.bs b/css-2023/Overview.bs
index 3b37deba34b..696e4cba341 100644
--- a/css-2023/Overview.bs
+++ b/css-2023/Overview.bs
@@ -2,9 +2,8 @@
Title: CSS Snapshot 2023
Shortname: css-2023
Level: none
-Status: NOTE
-Prepare for TR: yes
-Date: 2023-12-07
+Status: ED
+Prepare for TR: no
Group: CSSWG
Work Status: revising
URL: https://drafts.csswg.org/css-2023/
diff --git a/css-2024/Overview.bs b/css-2024/Overview.bs
index 3a33e35a338..78f28348ea5 100644
--- a/css-2024/Overview.bs
+++ b/css-2024/Overview.bs
@@ -2,9 +2,8 @@
Title: CSS Snapshot 2024
Shortname: css-2024
Level: none
-Status: NOTE
-Prepare for TR: yes
-Date: 2025-02-25
+Status: ED
+Prepare for TR: no
Group: CSSWG
Work Status: revising
URL: https://drafts.csswg.org/css-2024/
diff --git a/css-2025/Overview.bs b/css-2025/Overview.bs
index 6b6eb4c798f..4f1c16c1e44 100644
--- a/css-2025/Overview.bs
+++ b/css-2025/Overview.bs
@@ -2,9 +2,8 @@
Title: CSS Snapshot 2025
Shortname: css-2025
Level: none
-Status: NOTE
-Prepare for TR: yes
-Date: 2025-09-18
+Status: ED
+Prepare for TR: no
Group: CSSWG
Work Status: revising
URL: https://drafts.csswg.org/css-2025/
diff --git a/css-anchor-position-2/Overview.bs b/css-anchor-position-2/Overview.bs
index ad779ad3ec6..d29b441ec7c 100644
--- a/css-anchor-position-2/Overview.bs
+++ b/css-anchor-position-2/Overview.bs
@@ -3,9 +3,8 @@ Title: CSS Anchor Positioning Module Level 2
Shortname: css-anchor-position
Level: 2
!Delta Spec: yes
-Status: FPWD
-Prepare for TR: yes
-Date: 2025-10-21
+Status: ED
+Prepare for TR: no
Group: csswg
Work Status: exploring
ED: https://drafts.csswg.org/css-anchor-position-2/
diff --git a/css-animations-1/Overview.bs b/css-animations-1/Overview.bs
index 5718e6647ad..3408c98121d 100644
--- a/css-animations-1/Overview.bs
+++ b/css-animations-1/Overview.bs
@@ -1,9 +1,8 @@
Title: CSS Animations Module Level 1
-Status: WD
+Status: ED
Work Status: Refining
-Prepare for TR: yes
-Date: 2023-03-02
+Prepare for TR: no
Shortname: css-animations
Level: 1
Group: csswg
diff --git a/css-box-3/Overview.bs b/css-box-3/Overview.bs
index 4b06ce5d90f..9453c5950c4 100644
--- a/css-box-3/Overview.bs
+++ b/css-box-3/Overview.bs
@@ -2,9 +2,8 @@
Title: CSS Box Model Module Level 3
Shortname: css-box
Level: 3
-Status: REC
-Prepare for TR: yes
-Date: 2024-04-11
+Status: ED
+Prepare for TR: no
Implementation Report: https://wpt.fyi/results/css/css-box
Work Status: Completed
Group: csswg
diff --git a/css-contain-1/Overview.bs b/css-contain-1/Overview.bs
index 38a32fa9aa4..bdb7cea6ece 100644
--- a/css-contain-1/Overview.bs
+++ b/css-contain-1/Overview.bs
@@ -3,8 +3,7 @@ Title: CSS Containment Module Level 1
Level: 1
Shortname: css-contain
Status: ED
-Date: 2024-06-25
-Prepare for TR: yes
+Prepare for TR: no
Implementation Report: https://drafts.csswg.org/css-contain-1/implementation-report-2022-09
Work Status: completed
Group: csswg
diff --git a/css-display-3/Overview.bs b/css-display-3/Overview.bs
index 3f7d7d3f837..ac1d1f3edb1 100644
--- a/css-display-3/Overview.bs
+++ b/css-display-3/Overview.bs
@@ -1,9 +1,7 @@
Title: CSS Display Module Level 3
-Status: CR
-Prepare for TR: yes
-Date: 2023-03-30
-Deadline: 2023-05-30
+Status: ED
+Prepare for TR: no
Status Text: A preliminary implementation report is available. Further tests will be added during the CR period.
Work Status: Testing
ED: https://drafts.csswg.org/css-display/
diff --git a/css-display-4/Overview.bs b/css-display-4/Overview.bs
index 8786c7ea846..3660d700f37 100644
--- a/css-display-4/Overview.bs
+++ b/css-display-4/Overview.bs
@@ -2,9 +2,8 @@
Title: CSS Display Module Level 4
Shortname: css-display
Level: 4
-Status: FPWD
-Prepare for TR: yes
-Date: 2024-12-19
+Status: ED
+Prepare for TR: no
Group: csswg
Work Status: Testing
Status Text: A preliminary implementation report is available. Further tests will be added during the CR period.
diff --git a/css-env-1/Overview.bs b/css-env-1/Overview.bs
index 0a57724e5c9..b36e214e40b 100644
--- a/css-env-1/Overview.bs
+++ b/css-env-1/Overview.bs
@@ -2,11 +2,10 @@
Title: CSS Environment Variables Module Level 1
Shortname: css-env
Level: 1
-Status: FPWD
+Status: ED
Work Status: exploring
Group: CSSWG
-Prepare for TR: yes
-Date: 2025-09-23
+Prepare for TR: no
URL: https://drafts.csswg.org/css-env-1/
TR: https://www.w3.org/TR/css-env-1
Editor: Tab Atkins-Bittner, Google, w3cid 42199
diff --git a/css-font-loading-3/Overview.bs b/css-font-loading-3/Overview.bs
index e2ff2840c2f..62dad669891 100644
--- a/css-font-loading-3/Overview.bs
+++ b/css-font-loading-3/Overview.bs
@@ -3,9 +3,8 @@ Title: CSS Font Loading Module Level 3
Shortname: css-font-loading
Level: 3
Group: csswg
-Status: WD
-Date: 2023-04-06
-Prepare for TR: yes
+Status: ED
+Prepare for TR: no
Work Status: Exploring
ED: https://drafts.csswg.org/css-font-loading/
TR: https://www.w3.org/TR/css-font-loading/
diff --git a/css-gcpm-3/Overview.bs b/css-gcpm-3/Overview.bs
index fe618cd6847..0764e4336a3 100644
--- a/css-gcpm-3/Overview.bs
+++ b/css-gcpm-3/Overview.bs
@@ -1,8 +1,7 @@
Title: CSS Generated Content for Paged Media Module Level 3
-Status: WD
-Date: 2024-01-25
-Prepare for TR: yes
+Status: ED
+Prepare for TR: no
Work Status: Exploring
Shortname: css-gcpm
Level: 3
diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
index 28dd2594818..eea0fec5694 100644
--- a/css-images-4/Overview.bs
+++ b/css-images-4/Overview.bs
@@ -1,8 +1,7 @@
Title: CSS Images Module Level 4
-Status: WD
-Prepare for TR: yes
-Date: 2025-09-30
+Status: ED
+Prepare for TR: no
Work Status: Exploring
Shortname: css-images
Level: 4
diff --git a/css-multicol-1/Overview.bs b/css-multicol-1/Overview.bs
index 394d01a65aa..cadfa8da59e 100644
--- a/css-multicol-1/Overview.bs
+++ b/css-multicol-1/Overview.bs
@@ -3,10 +3,8 @@ Title: CSS Multi-column Layout Module Level 1
Group: CSSWG
Shortname: css-multicol
Level: 1
-Status: CR
-Prepare for TR: yes
-Date: 2024-05-09
-Deadline: 2024-07-09
+Status: ED
+Prepare for TR: no
Implementation Report: https://test.csswg.org/harness/results/css-multicol-1_dev/grouped/
Work Status: Testing
WPT Path Prefix: /css/css-multicol/
diff --git a/css-multicol-2/Overview.bs b/css-multicol-2/Overview.bs
index 7ce8b697815..0d231584656 100644
--- a/css-multicol-2/Overview.bs
+++ b/css-multicol-2/Overview.bs
@@ -3,9 +3,8 @@ Title: CSS Multi-column Layout Module Level 2
Group: CSSWG
Shortname: css-multicol
Level: 2
-Status: FPWD
-Prepare for TR: yes
-Date: 2024-12-19
+Status: ED
+Prepare for TR: no
Work Status: Exploring
ED: https://drafts.csswg.org/css-multicol-2/
TR: https://www.w3.org/TR/css-multicol-2/
diff --git a/css-overflow-5/Overview.bs b/css-overflow-5/Overview.bs
index b1c74ba3e51..2dc5f470430 100644
--- a/css-overflow-5/Overview.bs
+++ b/css-overflow-5/Overview.bs
@@ -1,9 +1,8 @@
Title: CSS Overflow Module Level 5
-Status: FPWD
-Prepare for TR: yes
+Status: ED
+Prepare for TR: no
Work Status: Revising
-Date: 2024-12-17
ED: https://drafts.csswg.org/css-overflow-5/
TR: https://www.w3.org/TR/css-overflow-5/
Shortname: css-overflow
diff --git a/css-scroll-snap-2/Overview.bs b/css-scroll-snap-2/Overview.bs
index 438b8d79a15..0a458018910 100644
--- a/css-scroll-snap-2/Overview.bs
+++ b/css-scroll-snap-2/Overview.bs
@@ -3,9 +3,8 @@ Title: CSS Scroll Snap Module Level 2
Group: csswg
Shortname: css-scroll-snap
Level: 2
-Status: FPWD
-Prepare for TR: yes
-Date: 2024-07-23
+Status: ED
+Prepare for TR: no
Implementation Report: https://wpt.fyi/results/css/css-scroll-snap
Work Status: Testing
ED: https://drafts.csswg.org/css-scroll-snap-2/
diff --git a/css-scrollbars-1/Overview.bs b/css-scrollbars-1/Overview.bs
index e42fbe65f6d..10c552b9023 100644
--- a/css-scrollbars-1/Overview.bs
+++ b/css-scrollbars-1/Overview.bs
@@ -4,7 +4,7 @@ Group: csswg
Shortname: css-scrollbars
Level: 1
Status: ED
-Prepare for TR: yes
+Prepare for TR: no
Work Status: Revising
Implementation Report: https://wpt.fyi/results/css/css-scrollbars?label=experimental&label=master&aligned
ED: https://drafts.csswg.org/css-scrollbars/
diff --git a/css-viewport-1/Overview.bs b/css-viewport-1/Overview.bs
index 7e3974e21dd..406822f92a2 100644
--- a/css-viewport-1/Overview.bs
+++ b/css-viewport-1/Overview.bs
@@ -3,9 +3,8 @@ Title: CSS Viewport Module Level 1
Level: 1
Shortname: css-viewport
Group: CSSWG
-Status: FPWD
-Date: 2024-01-25
-Prepare for TR: yes
+Status: ED
+Prepare for TR: no
Work Status: Exploring
TR: http://www.w3.org/TR/css-viewport-1/
ED: https://drafts.csswg.org/css-viewport-1/
diff --git a/cssom-view-1/Overview.bs b/cssom-view-1/Overview.bs
index 6fbf6d47303..987740ac605 100644
--- a/cssom-view-1/Overview.bs
+++ b/cssom-view-1/Overview.bs
@@ -9,9 +9,8 @@ Previous Version: https://www.w3.org/TR/2009/WD-cssom-view-20090804/
Previous Version: https://www.w3.org/TR/2008/WD-cssom-view-20080222/
Previous Version: https://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/
Group: CSSWG
-Status: WD
-Date: 2025-09-16
-Prepare for TR: yes
+Status: ED
+Prepare for TR: no
Work Status: Revising
Shortname: cssom-view
Level: 1
From d1c88e9a832880e2bd3beec17be6b9d92627fd33 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner
Date: Fri, 24 Oct 2025 22:39:48 +0200
Subject: [PATCH 032/124] [css-font-loading-3][editorial] Fixed Bikeshed issues
---
css-font-loading-3/Overview.bs | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/css-font-loading-3/Overview.bs b/css-font-loading-3/Overview.bs
index 62dad669891..ee914fcb3af 100644
--- a/css-font-loading-3/Overview.bs
+++ b/css-font-loading-3/Overview.bs
@@ -831,7 +831,7 @@ The load() method
Find the matching font faces from font face set
- using the {{FontFaceSet/load()/font}} and {{FontFaceSet/load()/text}} arguments passed to the function,
+ using the {{FontFaceSet/load(font, text)/font}} and {{FontFaceSet/load(font, text)/text}} arguments passed to the function,
and let font face list be the return value
(ignoring the found faces flag).
If a syntax error was returned,
@@ -898,7 +898,7 @@ The check() method
Find the matching font faces from font face set
- using the {{FontFaceSet/check()/font}} and {{FontFaceSet/check()/text}} arguments passed to the function,
+ using the {{FontFaceSet/check(font, text)/font}} and {{FontFaceSet/check(font, text)/text}} arguments passed to the function,
and including system fonts,
and let font face list be the returned list of font faces,
and found faces be the returned found faces flag.
From 1a050b18fe9ca6b515b28c6423d0c6800088a97e Mon Sep 17 00:00:00 2001
From: Sebastian Zartner
Date: Sat, 25 Oct 2025 12:16:42 +0200
Subject: [PATCH 033/124] [css-flexbox-1][editorial] Fixed "cross size"
references
---
css-flexbox-1/Overview.bs | 38 +++++++++++++++++++-------------------
1 file changed, 19 insertions(+), 19 deletions(-)
diff --git a/css-flexbox-1/Overview.bs b/css-flexbox-1/Overview.bs
index a29eb0c08ee..e666f201b21 100644
--- a/css-flexbox-1/Overview.bs
+++ b/css-flexbox-1/Overview.bs
@@ -1150,7 +1150,7 @@ Collapsed Items
is guaranteed to have no effect on its cross size
and won't cause the rest of the page's layout to "wobble".
Flex line wrapping is re-done after collapsing, however,
- so the cross-size of a flex container with multiple lines might or might not change.
+ so the cross size of a flex container with multiple lines might or might not change.
Though [=collapsed flex items=] aren't rendered,
they do appear in the formatting structure.
@@ -1255,7 +1255,7 @@ Collapsed Items
To compute the size of the strut, flex layout is first performed with all items uncollapsed,
and then re-run with each [=collapsed flex item=] replaced by a strut that maintains
- the original cross-size of the item's original line.
+ the original [=cross size=] of the item's original line.
See the Flex Layout Algorithm
for the normative definition of how ''visibility:collapse''
interacts with flex layout.
@@ -3899,11 +3899,11 @@ Cross Size Determination
find the largest outer hypothetical cross size.
- The used cross-size of the flex line is the largest of the numbers found in the previous two steps and zero.
+ The used cross size of the flex line is the largest of the numbers found in the previous two steps and zero.
If the flex container is single-line,
then clamp the line's cross-size to be within
- the container's computed min and max cross sizes.
+ the container's computed min and max cross sizes.
Note that if CSS 2.1's definition of min/max-width/height applied more generally,
this behavior would fall out automatically.
@@ -3921,7 +3921,7 @@ Cross Size Determination
Handle 'align-content: stretch'.
- If the flex container has a definite cross size,
+ If the flex container has a definitecross size,
'align-content' is stretch,
and the sum of the flex lines' cross sizes is less than the flex container's inner cross size,
increase the cross size of each flex line by equal amounts
@@ -3930,7 +3930,7 @@ Cross Size Determination
Collapse ''visibility:collapse'' items.
If any flex items have ''visibility: collapse'',
- note the cross size of the line they're in as the item's |strut size|,
+ note the cross size of the line they're in as the item's |strut size|,
and restart layout from the beginning.
In this second layout round,
@@ -3960,7 +3960,7 @@ Cross Size Determination
its computed cross size property is auto,
and neither of its cross-axis margins are auto,
the used outer cross size is the used cross size of its flex line,
- clamped according to the item's used min and max cross sizes.
+ clamped according to the item's used min and max [=cross size|cross sizes=].
Otherwise,
the used cross size is the item's hypothetical cross size.
@@ -4540,13 +4540,13 @@ Flex Container Intrinsic Cross Sizes
For a multi-lineflex container,
the behavior depends on whether it's a row or column flexbox:
- : ''flex-direction/row'' [=multi-line=] [=flex container=] [=cross-size=]
+ : ''flex-direction/row'' [=multi-line=] [=flex container=] [=cross size=]
:: The min-content/max-contentcross size
is the sum of the flex line cross sizes
resulting from sizing the flex container
under a cross-axismin-content constraint/max-content constraint (respectively).
- : ''flex-direction/column'' [=multi-line=] [=flex container=] [=cross-size=]
+ : ''flex-direction/column'' [=multi-line=] [=flex container=] [=cross size=]
:: The [=min-content=] [=cross size=]
is the largest [=min-content contribution=] among all of its [=flex items=].
@@ -4559,10 +4559,10 @@ Flex Container Intrinsic Cross Sizes
it will at least be large enough to fit
any given column entirely within its [=scrollport=].
- The [=max-content=] [=cross size=] is the sum of the [=flex line=] [=cross sizes=]
+ The [=max-content=] [=cross size=] is the sum of the [=flex line=] cross sizes
resulting from sizing the [=flex container=]
under a cross-axismax-content constraint,
- using the largest max-contentcross-size contribution among the flex items
+ using the largest max-content cross-size contribution among the flex items
as the available space in the cross axis
for each of the flex items during layout.
@@ -5395,13 +5395,13 @@ Changes since the min-content/max-content
- cross-size contribution among the flex items (respectively),
+ cross-size contribution among the flex items (respectively),
then using that size as the available space in the cross axis
for each of the flex items during layout.
@@ -6284,7 +6284,7 @@ Substantive Changes and Bugfixes
If the flex container has only one flex line
(even if it's a multi-line flex container),
is single-line,
- then clamp the line's cross-size to be within the container's computed min and max cross-size properties.
+ then clamp the line's cross size to be within the container's computed min and max cross-size properties.
@@ -6496,13 +6496,13 @@ Substantive Changes and Bugfixes
- The used cross-size of the flex line is
+ The used cross size of the flex line is
the largest of the numbers found in the previous two steps
and zero.
If the flex container has only one flex line
(even if it's a multi-line flex container),
- then clamp the line's cross-size to be within the container's computed min and max cross-size properties.
+ then clamp the line's cross size to be within the container's computed min and max cross-size properties.
Note that if CSS 2.1's definition of min/max-width/height applied more generally,
this behavior would fall out automatically.
@@ -6770,7 +6770,7 @@ Substantive Changes and Bugfixes
Flex lines have their size floored at 0.
(Issue 2)
-
The used cross-size of the flex line is the larger largest
+
The used cross size of the flex line is the larger largest
of the numbers found in the previous two steps and zero.
@@ -6955,7 +6955,7 @@ Clarifications
Clarify that stretch checks for the computed
value of the cross-size property being auto,
- which means that percentage cross-sizes that behave as auto
+ which means that percentage [=cross size|cross sizes=] that behave as auto
(because they don't resolve against definite sizes) aren't stretched.
(Issue 5)
From ff9643422460b48bc6b69dc3374eab5ff235ab2b Mon Sep 17 00:00:00 2001
From: Sebastian Zartner
Date: Mon, 27 Oct 2025 00:07:12 +0100
Subject: [PATCH 034/124] [css-ui-4][editorial] Let `outline-color` refer to
`border-top-color` values (#12993)
---
css-ui-4/Overview.bs | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/css-ui-4/Overview.bs b/css-ui-4/Overview.bs
index b1f42f4029a..75f158627eb 100644
--- a/css-ui-4/Overview.bs
+++ b/css-ui-4/Overview.bs
@@ -476,7 +476,7 @@ Outline Colors: the 'outline-color' property
Name: outline-color
- Value: auto | <> | <>
+ Value: auto | <<'border-top-color'>>
Initial: auto
Applies to: all elements
Inherited: no
@@ -486,7 +486,7 @@ Outline Colors: the 'outline-color' property
The 'outline-color' property
- accepts all values of <'border-color'>,
+ accepts all values of <<'border-top-color'>>,
as well as the following keywords:
@@ -65,6 +67,10 @@ to select a single value from the list or grid of possibilities,
similar to selecting one element from a list in a traditional programming language
with a syntax like values[0].
+
+env-parsing.html
+
+
Environment Variables {#environment}
====================================
From 61050b3544a880d250cf57cef75e1188bd6d5af6 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner
Date: Mon, 27 Oct 2025 00:55:28 +0100
Subject: [PATCH 036/124] [css-font-loading-3][editorial] Added WPTs
---
css-color-4/Overview.bs | 2 +-
css-font-loading-3/Overview.bs | 64 ++++++++++++++++++++++++++++++++++
2 files changed, 65 insertions(+), 1 deletion(-)
diff --git a/css-color-4/Overview.bs b/css-color-4/Overview.bs
index 725dcc7ade7..5ad0020bc14 100644
--- a/css-color-4/Overview.bs
+++ b/css-color-4/Overview.bs
@@ -1274,7 +1274,7 @@ Parsing a <> Value
4. Return |used color|.
-Note: This algorithm is not intented
+Note: This algorithm is not intented
to parse a CSS <> value
specified in a CSS stylesheet
or with a CSSOM interface,
diff --git a/css-font-loading-3/Overview.bs b/css-font-loading-3/Overview.bs
index ee914fcb3af..3db8eb8bf03 100644
--- a/css-font-loading-3/Overview.bs
+++ b/css-font-loading-3/Overview.bs
@@ -14,6 +14,8 @@ Former Editor: John Daggett, Mozilla, jdaggett@mozilla.com
Abstract: This CSS module describes events and interfaces used for dynamically loading font resources.
Link Defaults: css-fonts-4 (descriptor) src, dom (interface) Event
Ignored Terms: EventHandler, InvalidModificationError, WorkerGlobalScope, Document, add(), src
+WPT Path Prefix: css/css-font-loading/
+WPT Display: closed
@@ -117,6 +119,13 @@ The FontFace Interface
};
+
+ fontface-descriptor-updates.html
+ fontface-override-descriptor-getter-setter.sub.html
+ fontface-override-descriptors.html
+ fontface-size-adjust-descriptor.html
+
+
Issue: Clarify all mentions of "the document" to be clear about which document is being referenced,
since objects can move between documents.
@@ -391,6 +400,12 @@ The load() method
(perhaps on a different page entirely!)
has been loaded.
+
+ empty-family-load.html
+ font-face-reject.html
+ fontface-load-in-modal-dialog.html
+
+
Interaction with CSS’s ''@font-face'' Rule
@@ -423,6 +438,10 @@ Interaction with CSS’s ''@font-face'' Rule
and CSS-connected to the ''@font-face''.
(This will also remove the old and add the new {{FontFace}} objects from any font sources they appear in.)
+
+ nonexistent-file-url.html
+
+
: ready
:: This attribute reflects the {{FontFaceSet}}'s {{[[ReadyPromise]]}} slot.
@@ -566,6 +591,10 @@ The FontFaceSet Interface
2. Append font to the {{FontFaceSet}}’s {{[[LoadingFonts]]}} list.
3. Return the {{FontFaceSet}}.
+
+ fontfaceset-add-css-connected.html
+
+
: delete(font)
::
When the {{delete()}} method is called,
@@ -584,6 +613,11 @@ The FontFaceSet Interface
switch the FontFaceSet to loaded.
5. Return deleted.
+
+ fontfaceset-delete-css-connected-2.html
+ fontfaceset-delete-css-connected.html
+
+
: clear()
::
When the {{clear()}} method is called,
@@ -595,6 +629,12 @@ The FontFaceSet Interface
2. If the {{FontFaceSet}}’s {{[[LoadingFonts]]}} list is non-empty,
remove all items from it,
then switch the FontFaceSet to loaded.
+
+
+ fontfaceset-clear-css-connected-2.html
+ fontfaceset-clear-css-connected.html
+
+
{{FontFaceSet}} objects also have internal
@@ -791,6 +831,10 @@ Events
Return matched font faces and the found faces flag.
+
+ fontface-loadingevent.html
+
+
+
Triggers
@@ -819,14 +831,13 @@ A trigger can define multiple "types" of activation.
(For example, [=timeline triggers=] can do different things on entry and exit.)
A [=trigger=] is used on potentially any element,
-for some specific purpose
-(currently, just 'animation-trigger').
-A trigger-using element specifies what trigger(s) it's listening to,
-and what actions
-(currently, just <>s)
-to do in response to that activation.
-
-Note: This design for [=triggers=],
+creating a trigger instance on the element.
+(For example, 'animation-trigger' associates a [=trigger instance=]
+with a specific animation on the element.)
+The trigger-using element specifies what actions to take
+when the [=trigger=] activates.
+
+Note: This design for [=triggers=] and [=trigger instances=],
and the way they're associated with [=triggered animations=] and <>s,
is intentionally somewhat generic,
intended to support using [=triggers=] for other purposes in the future.
@@ -857,6 +868,17 @@ letting you define triggers that are only visible to subtrees
and references that only search in that subtree
(just like 'anchor-scope').
+
+
Timeline Triggers
@@ -867,16 +889,16 @@ or leaves the trigger's exit range.
It is defined on an element with the 'timeline-trigger' shorthand property,
or its longhands.
-A [=timeline trigger=] has a binary trigger state associated with it;
+A [=timeline trigger=] [=trigger instance=] has a binary trigger state associated with it;
it is initially "untriggered".
While it's "untriggered",
the associated [=timeline=] entering (or starting in) the trigger's [=enter range=]
performs an associated enter action
-and switches the [=trigger state=] to "triggered";
+and switches the [=timeline trigger/trigger state=] to "triggered";
while it's "triggered",
the associated timeline leaving the trigger's [=exit range=]
performs an associated exit action
-and switches the [=trigger state=] to "untriggered".
+and switches the [=timeline-trigger/trigger state=] to "untriggered".
Note: By default, the [=exit range=] is the same as the [=enter range=];
even when manually specified,
@@ -1062,6 +1084,16 @@ rather than being settable in any order as is more common.
Issue: I think we need the ''/'' to disambiguate the two ranges?
+
Event Triggers
@@ -1071,8 +1103,39 @@ which is activated when certain {{Event}}s are fired at the element.
It is defined on an element with the 'event-trigger' shorthand property,
or its longhands.
-An [=event trigger=] only has a single action associated with it,
-which it performs every time the trigger is activated.
+An [=event trigger=] can be defined as either stateless or stateful:
+
+* If stateless, it has a single set of enter events
+ that activate it.
+* If stateful, it has two sets of events, its [=enter events=]
+ and another set of exit events.
+
+[=Event triggers=] are activated when one of its associated {{Event}}s are fired on the page
+with the trigger-defining element as its {{Event/target}}.
+If it's stateful,
+then its [=trigger instance=] has a binary trigger state
+associated with it,
+initially "untriggered":
+while "untriggered", it only activates when the [=event trigger=] receives one of its [=enter events=],
+performing an associated enter action
+and switching its [=event trigger/trigger state=] to "triggered";
+while "triggered", it only activates when it receives one of its [=exit events=],
+performing an associated exit action
+and switching its [=event trigger/trigger state=] back to "untriggered".
+
+A stateless [=event trigger=] must be given exactly one action for its [=trigger instance=].
+A stateful one can be given one or two:
+the first is its [=event trigger/enter action=],
+and the second, if provided, is its [=event trigger/exit action=];
+if the second is not provided,
+the [=event trigger/exit action=] is to do nothing.
+
+Note: A stateful and stateless [=event trigger=] act differently
+even if you only assign a single action;
+a single-action stateful [=event trigger=] will effectively "turn off"
+until it receives one of its [=exit events=],
+ignoring any of the [=enter events=] after the first,
+while a stateless one will repeatedly trigger for every [=enter event=].
An element can define multiple [=event triggers=],
using the same {{Event}}s or different ones.
@@ -1082,6 +1145,11 @@ with 'event-trigger-name' as the [=coordinating list base property=],
and each item in the [=coordinated value list=]
defining the properties of a single [=event trigger=].
+Issue: The proposal I drew this text from
+specified that it only cares if the element is the *target* of the event.
+We probably want to allow for bubbling and/or capturing,
+possibly as an opt in/out.
+
Naming the Trigger: the 'event-trigger-name' property
@@ -1110,7 +1178,7 @@ Linking an Event: the 'event-trigger-source' property
Name: event-trigger-source
-Value: [ none | <>+ ]#
+Value: [ none | <>+ [ / <>+ ]? ]#
Initial: none
Applies to: all elements
Inherited: no
@@ -1121,22 +1189,32 @@ Animation type: not animatable
The 'event-trigger-source' property
specifies what event or events activate the [=event trigger=].
+Its values are:
+
+
+ : none
+ :: The corresponding entry in the [=coordinated value list=] does not define a trigger.
+
+ : <>+ [ / <>+ ]?
+ :: Defines what event(s) the [=event trigger=] responds to.
+
+ If a ''/'' is used in the value,
+ the [=event trigger=] is stateful;
+ the set of events before the ''/'' are the [=event trigger's=] [=enter events=],
+ while those after the ''/'' are the [=exit events=].
+ (The same events can occur in both sets.)
+
+ Otherwise,
+ the [=event trigger=] is stateless,
+ and the provided events are its [=enter events=].
+
-Whenever any of the specified {{Event}}s are fired
-with this element as its {{Event/target}},
-the [=event target=] activates.
-
Issue: Figure out the full set of events we want to handle.
-Issue: The proposal I drew this text from
-specified that it only cares if the element is the *target* of the event.
-We probably want to allow for bubbling and/or capturing,
-possibly as an opt in/out.
-
The 'event-trigger' Shorthand
From 7daaa2f4629702b620462f0886c832190388ff53 Mon Sep 17 00:00:00 2001
From: Tab Atkins-Bittner
Date: Mon, 27 Oct 2025 21:45:36 +0000
Subject: [PATCH 044/124] [css-animations-2][editorial] fix linking errors
---
css-animations-2/Overview.bs | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs
index 56ae0631a28..539f607312e 100644
--- a/css-animations-2/Overview.bs
+++ b/css-animations-2/Overview.bs
@@ -898,7 +898,7 @@ and switches the [=timeline trigger/trigger state=] to "triggered";
while it's "triggered",
the associated timeline leaving the trigger's [=exit range=]
performs an associated exit action
-and switches the [=timeline-trigger/trigger state=] to "untriggered".
+and switches the [=timeline trigger/trigger state=] to "untriggered".
Note: By default, the [=exit range=] is the same as the [=enter range=];
even when manually specified,
@@ -918,10 +918,10 @@ and what's specified for the [=exit range=].
A [=timeline trigger=] can have one or two actions associated with it
when used as a trigger on an element
(such as by 'animation-trigger').
-If two are specified, the first is the trigger's [=enter action=]
-and the second is the trigger's [=exit action=];
-if only one is specified, the first is the trigger's [=enter action=]
-and its [=exit action=] is to do nothing.
+If two are specified, the first is the trigger's [=timeline trigger/enter action=]
+and the second is the trigger's [=timeline trigger/exit action=];
+if only one is specified, the first is the trigger's [=timeline trigger/enter action=]
+and its [=timeline trigger/exit action=] is to do nothing.
An element can define multiple [=timeline triggers=],
using the same [=timeline=] (potentially with different ranges)
@@ -989,7 +989,7 @@ The Enter Range: the 'timeline-trigger-range' property
The 'timeline-trigger-exit-range' property is a [=shorthand property=]
From 6d993259cddd11ef2dba2a1a933358e957e76d9b Mon Sep 17 00:00:00 2001
From: Sebastian Zartner
Date: Tue, 28 Oct 2025 12:01:33 +0100
Subject: [PATCH 045/124] [css-ui-3][css-ui-4][editorial] Added WPTs (#13026)
* Added WPTs
* Restructured Changes section and added note about WPTs
---
css-ui-3/Overview.bs | 1370 +++++++++++++++++++++++++++++++++++++++++-
css-ui-4/Overview.bs | 1368 ++++++++++++++++++++++++++++++++++++++++-
2 files changed, 2732 insertions(+), 6 deletions(-)
diff --git a/css-ui-3/Overview.bs b/css-ui-3/Overview.bs
index c24ef21f766..311a45eea21 100644
--- a/css-ui-3/Overview.bs
+++ b/css-ui-3/Overview.bs
@@ -6,8 +6,8 @@ Previous Version: https://www.w3.org/TR/2017/PR-css-ui-3-20171214/
Shortname: css-ui
Level: 3
Group: csswg
-Status: REC
-Prepare for TR: true
+Status: ED
+Prepare for TR: no
Work Status: completed
Editor: Tantek Çelik, Mozilla https://www.mozilla.org/, tantek@cs.stanford.edu, http://tantek.com, w3cid 1464
Editor: Florian Rivoal, On behalf of Bloomberg, http://florian.rivoal.net/, w3cid 43241
@@ -21,6 +21,7 @@ Abstract: This specification describes user interface related
Ignored Terms: outline-top
Ignored Terms: outline-left
Ignored Terms: ime-mode
+WPT Path Prefix: css/css-ui/
Can I Use URL: https://drafts.csswg.org/css-ui-3/
Can I Use URL: http://drafts.csswg.org/css-ui-3/
Can I Use URL: https://drafts.csswg.org/css-ui/
@@ -104,6 +105,10 @@ introduced several user interface related properties and values.
This specification incorporates, extends, and supersedes them.
+
+inheritance.html
+
+
Purpose
The purpose of this specification is to achieve the following objectives:
@@ -155,6 +160,36 @@ Computed value: specified value
Animation type: discrete
This is the behavior of width and height as specified by CSS2.1.
@@ -292,6 +327,35 @@ without making sure an alternative highlighting mechanism is provided.
The rendering of applying transforms to outlines is left explicitly undefined in CSS3-UI.
+
+outline-003.html
+outline-004.html
+outline-005.html
+outline-007.html
+outline-008.html
+outline-009.html
+outline-010.html
+outline-011.html
+outline-012.html
+outline-013.html
+outline-014.html
+outline-015.html
+outline-016.html
+outline-019.html
+outline-020.html
+outline-021.html
+outline-022.html
+outline-024.html
+outline-025.html
+outline-026.html
+outline-027.html
+outline-028.html
+outline-negative-offset-composited-scroll.html
+outline-offset-table-001.html
+outline-offset.html
+outline-style-inherit.html
+
+
Outlines Shorthand: the 'outline' property
@@ -303,6 +367,18 @@ Inherited: no
Percentages: N/A
@@ -344,6 +443,14 @@ Computed value: The computed value for ''outline-color/invert'' is ''outline-col
Animation Type: by computed value
+
+animation/outline-color-interpolation.html
+outline-color-001.html
+parsing/outline-color-computed.html
+parsing/outline-color-invalid.html
+parsing/outline-color-valid.html
+
+
The outline created with the outline properties is drawn "over" a box,
i.e., the outline is always on top,
and doesn't influence the position or size of the box,
@@ -468,6 +575,17 @@ Computed value: absolute length
Animation type: by computed value
+
+animation/outline-offset-composition.html
+animation/outline-offset-interpolation.html
+neg-outline-offset-border-radius-crash.html
+negative-outline-offset.html
+outline-offset-001.html
+parsing/outline-offset-computed.html
+parsing/outline-offset-invalid.html
+parsing/outline-offset-valid.html
+
+
If the computed value of 'outline-offset'
is anything other than 0,
then the outline is outset from the border edge by that amount.
@@ -522,6 +640,37 @@ Computed value: specified keyword
Animation type: discrete
The UA does not present a resizing mechanism on the element,
@@ -643,6 +792,55 @@ Computed value: specified keyword
Animation type: discrete
+
+crashtests/text-overflow-ellipsis-multiline-crash.html
+parsing/text-overflow-computed.html
+parsing/text-overflow-invalid.html
+parsing/text-overflow-valid.html
+text-overflow-001.html
+text-overflow-002.html
+text-overflow-003.html
+text-overflow-004.html
+text-overflow-005.html
+text-overflow-006.html
+text-overflow-007.html
+text-overflow-008.html
+text-overflow-009.html
+text-overflow-010.html
+text-overflow-011.html
+text-overflow-012.html
+text-overflow-013.html
+text-overflow-014.html
+text-overflow-015.html
+text-overflow-016.html
+text-overflow-017.html
+text-overflow-020.html
+text-overflow-021.html
+text-overflow-022.html
+text-overflow-023.html
+text-overflow-024.html
+text-overflow-025.html
+text-overflow-026.html
+text-overflow-027.html
+text-overflow-028.html
+text-overflow-029.html
+text-overflow-030.html
+text-overflow-change-color.html
+text-overflow-ellipsis-abspos-in-inline-block-crash-001.html
+text-overflow-ellipsis-hyphen.html
+text-overflow-ellipsis-indent-001.html
+text-overflow-ellipsis-multiline-001.html
+text-overflow-ellipsis-self-painting.html
+text-overflow-ellipsis-width-001.html
+text-overflow-ruby.html
+text-overflow-string-001.html
+text-overflow-string-002.html
+text-overflow-string-003.html
+text-overflow-string-004.html
+text-overflow-string-005.html
+text-overflow.html
+
+
This property specifies rendering when inline content overflows
its end line box edge
in the inline progression direction of its block container element ("the block")
@@ -746,6 +944,11 @@ Behavior of partially-selected ellipsed text is up to the UA.
+
+text-overflow-018.html
+text-overflow-019.html
+
+
Example(s):
text-overflow examples
@@ -930,6 +1133,122 @@ Computed value: as specified, except with any relative URLs converted to absolut
Animation type: discrete
+
+animation/cursor-no-interpolation.html
+cgitor-image-png-016-manual.html
+cgrsor-image-png-017-manual.html
+cgrsor-image-png-019-manual.html
+cgrsor-image-png-023-manual.html
+cgrsor-image-png-024-manual.html
+cgrsor-image-png-025-manual.html
+cgrsor-image-png-027-manual.html
+cgrsor-image-png-028-manual.html
+cgrsor-image-png-036-manual.html
+cgrsor-image-png-040-manual.html
+cgrsor-image-png-042-manual.html
+cursor-001-manual.html
+cursor-002-manual.html
+cursor-003-manual.html
+cursor-004-manual.html
+cursor-005-manual.html
+cursor-006-manual.html
+cursor-007-manual.html
+cursor-008-manual.html
+cursor-009-manual.html
+cursor-010-manual.html
+cursor-011-manual.html
+cursor-012-manual.html
+cursor-013-manual.html
+cursor-014-manual.html
+cursor-015-manual.html
+cursor-016-manual.html
+cursor-017-manual.html
+cursor-018-manual.html
+cursor-019-manual.html
+cursor-020-manual.html
+cursor-autg-003-manual.html
+cursor-auto-001-manual.html
+cursor-auto-002-manual.html
+cursor-auto-004-manual.html
+cursor-auto-005.html
+cursor-auto-006-manual.html
+cursor-auto-007.html
+cursor-border-area.html
+cursor-box-004.html
+cursor-box-005.html
+cursor-box-006.html
+cursor-box-007-manual.html
+cursor-calc-hotspot.html
+cursor-content-area-manual.html
+cursor-gover-003-manual.html
+cursor-hover-001-manual.html
+cursor-hover-002.html
+cursor-image-001.html
+cursor-image-002.html
+cursor-image-003-manual.html
+cursor-image-004-manual.html
+cursor-image-005-manual.html
+cursor-image-005-nfs-manual.html
+cursor-image-006-manual.html
+cursor-image-008-manual.html
+cursor-image-009-manual.html
+cursor-image-010-manual.html
+cursor-image-011-manual.html
+cursor-image-012-manual.html
+cursor-image-013.html
+cursor-image-014-manual.html
+cursor-image-016-manual.html
+cursor-image-017-manual.html
+cursor-image-018-manual.html
+cursor-image-png-001-manual.html
+cursor-image-png-002-manual.html
+cursor-image-png-003-manual.html
+cursor-image-png-004.html
+cursor-image-png-005-manual.html
+cursor-image-png-006-manual.html
+cursor-image-png-007-manual.html
+cursor-image-png-008-manual.html
+cursor-image-png-009-manual.html
+cursor-image-png-010-manual.html
+cursor-image-png-011-manual.html
+cursor-image-png-012-manual.html
+cursor-image-png-013-manual.html
+cursor-image-png-014-manual.html
+cursor-image-png-018.html
+cursor-image-png-020-manual.html
+cursor-image-png-021-manual.html
+cursor-image-png-022.html
+cursor-image-png-026-manual.html
+cursor-image-png-029-manual.html
+cursor-image-png-030-manual.html
+cursor-image-png-031.html
+cursor-image-png-032.html
+cursor-image-png-033.html
+cursor-image-png-034-manual.html
+cursor-image-png-035-manual.html
+cursor-image-png-037-manual.html
+cursor-image-png-038-manual.html
+cursor-image-png-039-manual.html
+cursor-image-png-041-manual.html
+cursor-image-png-043-manual.html
+cursor-imgge-png-015-manual.html
+cursor-imgie-007-manual.html
+cursor-outline-area-manual.html
+cursor-padding-area-manual.html
+cursor-pointer-links-001-manual.html
+cursor-pointer-links-002-manual.html
+cursor-pointer-links-003-manual.html
+cursor-text-001-manual.html
+cursor-text-002-manual.html
+cursor-x-y-001-manual.html
+cursor-x-y-002-manual.html
+cursor-x-y-003-manual.html
+parsing/cursor-computed.html
+parsing/cursor-invalid.html
+parsing/cursor-valid.html
+select-cursor-001-manual.html
+
+
This property specifies the type of cursor to be displayed for the pointing device
when the cursor's hotspot is within the element's border edge.
@@ -1256,6 +1575,11 @@ but still generate boxes. For example,
if the element has ''visibility: hidden'' but not ''display: none'',
boxes are generated for it and its cursor is used for the canvas.
+
+canvas-cursor-001.html
+canvas-cursor-002.html
+
+
Insertion caret
@@ -1273,6 +1597,35 @@ Computed value: The computed value for ''caret-color/auto'' is ''caret-color/aut
Animation type: by computed value
+
+animation/caret-color-composition.html
+animation/caret-color-interpolation.html
+caret-color-001.html
+caret-color-002.html
+caret-color-003.html
+caret-color-004.html
+caret-color-005.html
+caret-color-006.html
+caret-color-007.html
+caret-color-008.html
+caret-color-009.html
+caret-color-010.html
+caret-color-011.html
+caret-color-012.html
+caret-color-013.html
+caret-color-014.html
+caret-color-015.html
+caret-color-016.html
+caret-color-017.html
+caret-color-018.html
+caret-color-019.html
+caret-color-020.html
+caret-color-021.html
+parsing/caret-color-computed.html
+parsing/caret-color-invalid.html
+parsing/caret-color-valid.html
+
+
auto
User agents should use currentColor.
@@ -1415,8 +1768,15 @@ and
This appendix is informative.
-This appendix describes changes from the
-Candidate Recommendation (CR) of 2 March 2017.
+
The user agent automatically determines which element to navigate the focus to in response to directional navigational input.
@@ -1712,6 +2094,16 @@ Controlling content selection
Animation type: discrete
+
+ parsing/user-select-computed.html
+ parsing/user-select-invalid.html
+ parsing/user-select-valid.html
+ user-select-001.html
+ user-select-inheritance.html
+ user-select-none-in-editable.html
+ user-select-none-on-input.html
+
+
User agents must not apply the 'user-select' property to
the ''::first-line'' and ''::first-letter'' pseudo-elements.
@@ -1971,6 +2363,11 @@ Exclusion from Hit-testing: the 'pointer-events' property
Animation type: by computed value type
+
+ pointer-events-no-scrollbars-001.html
+ pointer-events-no-scrollbars-002.html
+
+
The 'pointer-events' property defines whether an element's boxes can be targeted by point pointer events.
Values have the following meanings:
@@ -2026,6 +2423,19 @@ Computed Value: as specified
Animation type: discrete
+
+inert-attribute-overriding.html
+interactivity-inert-animated.html
+interactivity-inert-click.html
+interactivity-inert-find.html
+interactivity-inert-focus.html
+interactivity-inert-fullscreen-ua.html
+interactivity-inert-html-attribute-ua.html
+interactivity-inert-modal-dialog-ua.html
+parsing/interactivity-computed.html
+parsing/interactivity.html
+
+
The 'interactivity' property specifies whether an element and its [=flat tree=] descendants
(including [=text nodes=])
are [=inert=] or not.
@@ -2197,6 +2607,19 @@ Widget Accent Colors: the 'accent-color' property
Animation type: by computed value type
+
+ accent-color-checkbox-checked-001.html
+ accent-color-computed.html
+ accent-color-invalidation-currentcolor.html
+ accent-color-parent-currentcolor.html
+ accent-color-parsing.html
+ accent-color-radio-checked-001.html
+ accent-color-visited.html
+ animation/accent-color-interpolation.html
+ transparent-accent-color-001.html
+ transparent-accent-color-002.html
+
+
User interface controls on any given platform are typically designed as a cohesive set,
under a single, cohesive visual style.
On many platforms (though not all),
@@ -2330,6 +2753,54 @@ Switching appearance: the 'appearance' property
Animation type: discrete
+
+ animation/appearance-no-interpolation.html
+ appearance-auto-001.html
+ appearance-auto-input-non-widget-001.html
+ appearance-auto-non-html-namespace-001.html
+ appearance-button-001.html
+ appearance-checkbox-001.html
+ appearance-cssom-001.html
+ appearance-initial-value-001.html
+ appearance-listbox-001.html
+ appearance-menulist-001.html
+ appearance-menulist-button-001.html
+ appearance-menulist-button-002.tentative.html
+ appearance-meter-001.html
+ appearance-parsing.html
+ appearance-progress-bar-001.html
+ appearance-progress-bar-002.html
+ appearance-property.html
+ appearance-radio-001.html
+ appearance-revert-001.tentative.html
+ appearance-searchfield-001.html
+ appearance-serialization.html
+ appearance-textarea-001.html
+ appearance-textfield-001.html
+ button-author-level-padding-applies.html
+ parsing/webkit-appearance-alias.html
+ select-author-level-padding-applies.html
+ webkit-appearance-auto-001.html
+ webkit-appearance-auto-input-non-widget-001.html
+ webkit-appearance-auto-non-html-namespace-001.html
+ webkit-appearance-button-001.html
+ webkit-appearance-checkbox-001.html
+ webkit-appearance-listbox-001.html
+ webkit-appearance-menulist-001.html
+ webkit-appearance-menulist-button-001.html
+ webkit-appearance-menulist-button-002.tentative.html
+ webkit-appearance-meter-001.html
+ webkit-appearance-parsing.html
+ webkit-appearance-progress-bar-001.html
+ webkit-appearance-progress-bar-002.html
+ webkit-appearance-property.html
+ webkit-appearance-radio-001.html
+ webkit-appearance-searchfield-001.html
+ webkit-appearance-serialization.html
+ webkit-appearance-textarea-001.html
+ webkit-appearance-textfield-001.html
+
+
While the way most elements in a document look can be fully controlled by CSS,
widgets are typically rendered by UAs using native UI controls of the host operating system,
which can neither be replicated nor styled using CSS.
@@ -2417,7 +2888,7 @@ Switching appearance: the 'appearance' property
auto
- The element's box is laid out like a regular replaced element.
+ The element's box is laid out like a regular replaced element.
Within that box, elements representing widgets should have the native appearance of that widget.
@@ -2641,6 +3112,813 @@ Properties Disabling Native Appearance
- This module is currently maintained as a diff against
- the parts related to backgrounds of
- CSS Backgrounds and Borders Module Level 3 [[CSS3BG]].
- We will fold in the text once it's all formatted up and in CR again,
- as this will reduce the effort of keeping them in sync
- (source diffs will be accurate in reflecting the differences).
+ When elements are rendered according to the
+ CSS box model [[!CSS-BOX-3]],
+ each element is either not displayed at all,
+ or formatted as one or more rectangular boxes.
+ Each box has a rectangular [=content area=],
+ a band of [=padding=] around the content,
+ a [=border=] around the padding,
+ and a [=margin=] outside the border.
+ (The margin may actually be negative,
+ but margins have no influence on the background and border.)
+
+
+
+
+
+ The various areas and edges of a typical box.
+ (This diagram is explained in the CSS Box Model Module [[!CSS-BOX-3]].)
+
+
+
+ The properties of this module deal with the background of the [=content area|content=], [=padding area|padding=], and [=border area|border=] areas.
+
+ If an element is broken into multiple [=box fragments=],
+ 'box-decoration-break' defines
+ how the borders and background are divided over the various fragments.
+ (An element can result in more than one fragment if it is broken
+ at the end of a line, at the end of a column or at the end of a page;
+ and continued in the next line, column or page.)
+
+ The relative stacking order of backgrounds, borders, and shadows
+ is given in this module.
+ For how these layers interact with other rendered content,
+ see Appendix E “Elaborate description of Stacking Contexts” in [[!CSS2]].
+
+
+Module Interactions
+
+ This specification extends the parts related to backgrounds
+ of CSS Backgrounds and Borders Module Level 3 [[CSS3BG]].
+
+ It provides specifications for the added 'background-repeat-*' and `background-position-*' longhands,
+ a new 'background-tbd' property that allows to define the background layers excluding the color,
+ and adds two new values to 'background-clip'.
+
+ All properties in this module apply to the ''::first-letter'' and ''::first-line'' [=pseudo-elements=].
+
+
+Value Definitions
+
+ This specification follows the CSS property definition conventions from [[!CSS2]]
+ using the value definition syntax from [[!CSS-VALUES-3]].
+ Value types not defined in this specification are defined in CSS Values & Units [[!CSS-VALUES-3]].
+ Combination with other CSS modules may expand the definitions of these value types.
+ For example, combining with CSS Images
+ allows for using CSS gradients as 'background-image' or 'border-image' values.
+ [[CSS-IMAGES-3]]
+
+ In addition to the property-specific values listed in their definitions,
+ all properties defined in this specification
+ also accept the CSS-wide keywords as their property value.
+ For readability they have not been repeated explicitly.
-Backgrounds
+Defining Backgrounds
+
+ Each box has a background layer that may be fully transparent (the default),
+ or filled with a color and/or one or more images.
+ The background properties specify what color ('background-color')
+ and images ('background-image') to use,
+ and how they are sized, positioned, tiled, etc.
+
+ The background properties are not inherited,
+ but the parent box's background will shine through by default
+ because of the initial ''transparent'' value on 'background-color'.
+
+
+Base Color: the 'background-color' property
+
+
+ Name: background-color
+ Value: <>
+ Initial: transparent
+ Applies to: all elements
+ Inherited: no
+ Percentages: N/A
+ Computed value: computed color
+ Animation type: by computed value
+
+
+ The [=background color=] is clipped
+ according to the 'background-clip' value
+ associated with the bottom-most [=background image layer=].
+
+
+Image Sources: the 'background-image' property
+
+
+ Name: background-image
+ Value: <>#
+ Initial: none
+ Applies to: all elements
+ Inherited: no
+ Percentages: N/A
+ Computed value: list, each item either an <> or the keyword ''background-image/none''
+ Animation type: discrete
+
+
+
+ background-image-001.html
+ background-image-002.html
+ background-image-003.html
+ background-image-004.html
+ background-image-005.html
+ background-image-006.html
+ background-image-007.html
+ background-image-centered-with-border-radius.html
+ background-image-centered.html
+ background-image-cors-no-reload.html
+ background-image-cover-zoomed-1.html
+ background-image-first-letter.html
+ background-image-first-line.html
+ background-image-gradient-currentcolor-conic-repaint.html
+ background-image-gradient-currentcolor-linear-repaint.html
+ background-image-gradient-currentcolor-radial-repaint.html
+ background-image-gradient-currentcolor-visited.html
+ background-image-gradient-interpolation-repaint.html
+ background-image-large-with-auto.html
+ background-image-none-gradient-repaint.html
+ background-image-shared-stylesheet.html
+ background-image-table-cells-straddling-no-repeat.html
+ background-image-table-cells-zoomed.html
+ background-image-with-border-radius-fidelity.html
+ animations/background-image-interpolation.html
+ inheritance.sub.html
+ parsing/background-image-computed.sub.html
+ parsing/background-image-invalid.html
+ parsing/background-image-valid.html
+
+
+ This property specifies the background image(s) of an element.
+ Images are drawn with the first specified one on top (closest to the user)
+ and each subsequent image behind the previous one.
+ The property's value is given as a comma-separated list
+ of <> values where
+
+
<> = <> | none
+
+ A value of none
+ counts as a [=background image layer=] but draws nothing.
+ An image that is empty (zero width or zero height),
+ that fails to download,
+ or that cannot be displayed
+ (e.g., because it is not in a supported image format)
+ likewise counts as a [=layer=] but draws nothing.
+
+ See [[#layering]] for how 'background-image' interacts
+ with other comma-separated background properties
+ to form each [=background image layer=].
+
+ When setting a background image,
+ authors should also specify a 'background-color'
+ that will preserve contrast with the text
+ for when the image is unavailable.
+
+ For accessibility reasons,
+ authors should not use background images
+ as the sole method of conveying important information.
+ See Web Content Accessibility Guideline F3 [[WCAG20]].
+ Images are not accessible in non-graphical presentations,
+ and background images specifically
+ might be turned off in high-contrast display modes.
+
+ Note: Stylistic foreground images can be provided in CSS
+ with the 'content' property.
+ Semantically-important foreground images should be provided
+ in the document markup, e.g. with the <img> tag in HTML.
+
+ Note: Media fragments
+ can be used to display a portion of an image.
+ The CSS Images module
+ will provide fallback syntax for image formats
+ and include additional controls for image display.
+
+
+ Some examples specifying background images:
+
+
+ html { background-image: url("marble.svg") }
+ p { background-image: none }
+ div { background-image: url(tl.png), url(tr.png) }
+ main { background-image: radial-gradient(at bottom right, transparent, white); }
+
+
+
+ Implementations may optimize
+ by not downloading and drawing images that are not visible
+ (e.g., because they are behind other, fully opaque images).
Tiling Images: the 'background-repeat-x', 'background-repeat-y', 'background-repeat-block', and 'background-repeat-inline' properties
@@ -96,18 +376,19 @@ Tiling Images: the 'background-repeat-x', 'background-repeat-y', 'background-rep
The image is placed once and not repeated in the given direction.
-
Unless one of the axes is set to ''no-repeat'', the
- whole background painting area will be tiled, i.e., not just one
- vertical strip and one horizontal strip.
+
Unless one of the axes is set to ''no-repeat'',
+ the whole background painting area will be tiled,
+ i.e., not just one vertical strip and one horizontal strip.
Example(s):
+
- body {
- background: white url("pendant.png");
- background-repeat-y: repeat;
- background-position: center;
- }
+ body {
+ background: white url("pendant.png");
+ background-repeat-y: repeat;
+ background-position: center;
+ }
@@ -121,8 +402,7 @@ Tiling Images: the 'background-repeat-x', 'background-repeat-y', 'background-rep
This shorthand sets the values for the
'background-repeat-x' and 'background-repeat-y' longhand properties.
- Where
-
<> = repeat-x | repeat-y | <>{1,2}
+
+
+ <> = repeat-x | repeat-y | <>{1,2}
+
Single values for <> have the following
meanings:
@@ -178,82 +496,179 @@ Tiling Images Shorthand: the 'background-repeat' property
Computes to ''no-repeat no-repeat''
-
If a <> value has two keywords, the first
- one is for the horizontal direction, the second for the vertical one.
+
If a <> value has two keywords,
+ the first one is for the horizontal direction,
+ the second for the vertical one.
-
-
Example(s):
-
- body {
- background-image: url(dot.png) white;
- background-repeat: space
- }
-
See the section [[#layering]] for how 'background-repeat' interacts with other
comma-separated background properties to form each background image
layer.
Issue: Should a 'background-repeat: extend' be added?
-
-Background Positioning: the 'background-position' shorthand property
+
+Affixing Images: the 'background-attachment' property
- Name: background-position
- Value: <>#
- Initial: 0% 0%
+ Name: background-attachment
+ Value: <>#
+ Initial: scroll
Applies to: all elements
Inherited: no
- Percentages: refer to size of background positioning area
- minus size of background image; see text
- Computed value: a list,
- each item a pair of offsets (horizontal and vertical) from the top left origin,
- each offset given as a computed <> value
- Animation type: repeatable list
+ Percentages: N/A
+ Computed value: list, each item the keyword as specified
+ Animation type: discrete
- If [=background images=] have been specified,
- this property specifies their initial position
- (after any resizing)
- within their corresponding [=background positioning area=].
+
+ animations/discrete-no-interpolation.html
+ background-attachment-350.html
+ background-attachment-353.html
+ background-attachment-fixed-block-002.html
+ background-attachment-fixed-border-radius-offset.html
+ background-attachment-fixed-inline-002.html
+ background-attachment-fixed-inline-scrolled.html
+ background-attachment-fixed-inside-transform-1.html
+ background-attachment-local-block-002.html
+ background-attachment-local-hidden.html
+ background-attachment-local/attachment-local-clipping-color-1.html
+ background-attachment-local/attachment-local-clipping-color-2.html
+ background-attachment-local/attachment-local-clipping-color-3.html
+ background-attachment-local/attachment-local-clipping-color-4.html
+ background-attachment-local/attachment-local-clipping-color-5.html
+ background-attachment-local/attachment-local-clipping-color-6.html
+ background-attachment-local/attachment-local-clipping-image-1.html
+ background-attachment-local/attachment-local-clipping-image-2.html
+ background-attachment-local/attachment-local-clipping-image-3.html
+ background-attachment-local/attachment-local-clipping-image-4.html
+ background-attachment-local/attachment-local-clipping-image-5.html
+ background-attachment-local/attachment-local-clipping-image-6.html
+ background-attachment-local/attachment-local-positioning-2.html
+ background-attachment-local/attachment-local-positioning-3.html
+ background-attachment-local/attachment-local-positioning-4.html
+ background-attachment-local/attachment-local-positioning-5.html
+ background-attachment-local/attachment-scroll-positioning-1.html
+ background-attachment-margin-root-001.html
+ background-attachment-margin-root-002.html
+ inheritance.sub.html
+ local-attachment-content-box-scroll.html
+ parsing/background-attachment-computed.html
+ parsing/background-attachment-invalid.html
+ parsing/background-attachment-valid.html
+ table-cell-background-local-002.html
+ table-cell-background-local-003.html
+ table-cell-background-local.html
+
+
+ If [=background images=] are specified,
+ this property specifies whether they are
+ fixed with regard to the [=viewport=] (''fixed'')
+ or scroll along with the box (''scroll'')
+ or its contents (''local'').
+ The property's value is given as a comma-separated list
+ of <> keywords where
+
+
<> = scroll | fixed | local
+
+
+
fixed
+
+ The background is fixed with regard to the viewport.
+ In [=paged media=] where there is no viewport,
+ a ''fixed'' background is fixed with respect to
+ the page box
+ and therefore replicated on every page.
+
+ Note: There is only one viewport per view.
+ Even if an box is a [=scroll container=],
+ a ''fixed'' background doesn't move with the box.
+
+
local
+
+ The background is fixed with regard to the box's contents:
+ if the box has a scrolling mechanism,
+ the background scrolls with the box's contents,
+ and the [=background painting area=] and [=background positioning area=]
+ are relative to the [=scrollable overflow area=] of the box
+ rather than to the border framing them.
+ Because the [=scrollable overflow area=]
+ does not include the [=border area=],
+ for [=scroll containers=] the ''background-clip/border-box'' value of 'background-clip'
+ may be treated the same as ''background-clip/padding-box''.
+
+
scroll
+
+ The background is fixed with regard to the box itself
+ and does not scroll with its contents.
+ (It is effectively attached to the box's border.)
+
- This property is a [=shorthand property=] that sets
- 'background-position-x', 'background-position-y', 'background-position-block', and 'background-position-inline'
- in a single declaration.
+ Even if the image is fixed,
+ it is still only visible when it is in the [=background painting area=] of the box
+ or otherwise unclipped.
+ (See [[#special-backgrounds]] for the cases when
+ background images are not clipped.)
+ Thus, unless the image is tiled, it may be invisible.
- Its value is given as a comma-separated list
- of <> values, which are interpreted as <> values
- with the resized [=background image=] as the [=alignment subject=]
- and the [=background positioning area=] as the [=alignment container=].
+
+ This example creates an infinite vertical band
+ that remains “glued” to the viewport when the document is scrolled.
-
- <> = <> | <>
- <> = [
- [ left | center | right ] && [ [ top | bottom ] <> ]
- |
- [ [ left | right ] <> ] && [ top | center | bottom ]
- ]
-
+
+ body {
+ background: red url("pendant.gif");
+ background-repeat: repeat-y;
+ background-attachment: fixed;
+ }
+
+
- The omitted <> in the 'background-position'-specific
- <> syntax variant
- defaults to ''0%''.
+ Note: User agents that do not support ''fixed'' backgrounds
+ (for example due to limitations of the hardware platform)
+ will ignore declarations
+ with the keyword ''fixed''.
+ For example:
- Issue(9690): Specify how the [=longhand properties=] are set.
+
+ body {
+ /* For all UAs: */
+ background: white url(paper.png) scroll;
+ /* For UAs that do fixed backgrounds: */
+ background: white url(ledger.png) fixed;
+ }
+ h1 {
+ /* For all UAs: */
+ background: silver;
+ /* For UAs that do fixed backgrounds: */
+ background: url(stripe.png) fixed, white url(ledger.png) fixed;
+ }
+
+
+ See [[#layering]] for how 'background-attachment' interacts
+ with other comma-separated background properties
+ to form each [=background image layer=].
-
-Background Positioning Longhands: the 'background-position-x', 'background-position-y', 'background-position-inline', and 'background-position-block' properties
+
+Background Positioning: the 'background-position-x', 'background-position-y', 'background-position-inline', and 'background-position-block' properties
Issue: This section is still being worked out. The tricky thing is making all the start/end keywords work sanely.
@@ -313,6 +728,223 @@ Background Positioning Longhands: the 'background-position-x', 'background-posit
This property specifies the background position's block-axis component.
An omitted origin keyword is assumed to be ''background-position-block/start''.
+
+
<>
+
+ A percentage for the horizontal offset is relative to
+ (width of [=background positioning area=] - width of [=background image=]).
+ A percentage for the vertical offset is relative to
+ (height of [=background positioning area=] - height of [=background image=]),
+ where the size of the image is the size given by 'background-size'.
+
+
+ For example, with a value pair of ''0% 0%'',
+ the upper left corner of the image is aligned with
+ the upper left corner of, usually, the box's [=padding edge=].
+ A value pair of ''100% 100%'' places
+ the lower right corner of the image
+ in the lower right corner of the area.
+ With a value pair of ''75% 50%'',
+ the point 75% across and 50% down the image
+ is to be placed at the point 75% across and 50% down the area.
+
+
+
+
+ Diagram of the meaning of ''background-position: 75% 50%''.
+
+
+
+
+
<>
+
+ A length value gives a fixed length as the offset.
+ For example, with a value pair of ''2cm 1cm'',
+ the upper left corner of the image is placed
+ 2cm to the right and 1cm below
+ the upper left corner of the [=background positioning area=].
+
+
''top''
+
+ Computes to ''0%'' for the vertical position if one or two values are given,
+ otherwise specifies the top edge as the origin for the next offset.
+
+
''right''
+
+ Computes to ''100%'' for the horizontal position if one or two values are given,
+ otherwise specifies the right edge as the origin for the next offset.
+
+
''bottom''
+
+ Computes to ''100%'' for the vertical position if one or two values are given,
+ otherwise specifies the bottom edge as the origin for the next offset.
+
+
''left''
+
+ Computes to ''0%'' for the horizontal position if one or two values are given,
+ otherwise specifies the left edge as the origin for the next offset.
+
+
''center''
+
+ Computes to ''50%'' (''left 50%'') for the horizontal position
+ if the horizontal position is not otherwise specified,
+ or ''50%'' (''top 50%'') for the vertical position if it is.
+
+
+
+ The following 'background' shorthand declarations use keywords
+ to set 'background-position' to the stated percentage values.
+
+
+ body { background: url("banner.jpeg") right top } /* 100% 0% */
+ body { background: url("banner.jpeg") top center } /* 50% 0% */
+ body { background: url("banner.jpeg") center } /* 50% 50% */
+ body { background: url("banner.jpeg") bottom } /* 50% 100% */
+
+
+
+
+ In the example below, the (single) image is placed
+ in the lower-right corner of the viewport.
+
+
+ Background positions can also be relative to other corners than the top left.
+ For example, the following puts the background image
+ 10px from the bottom and 3em from the right:
+
+
background-position: right 3em bottom 10px
+
+
+ See [[#layering]] for how 'background-position' interacts
+ with other comma-separated background properties
+ to form each [=background image layer=].
+
+
+Background Positioning Shorthand: the 'background-position' shorthand property
+
+
+ Name: background-position
+ Value: <>#
+ Initial: 0% 0%
+ Applies to: all elements
+ Inherited: no
+ Percentages: refer to size of background positioning area
+ minus size of background image; see text
+ Computed value: a list,
+ each item a pair of offsets (horizontal and vertical) from the top left origin,
+ each offset given as a computed <> value
+ Animation type: repeatable list
+
+
+
+ animations/background-position-interpolation.html
+ animations/background-position-x-interpolation.html
+ animations/background-position-y-interpolation.html
+ background-position-calc-minmax-001.html
+ background-position-negative-percentage-comparison-002.html
+ background-position-negative-percentage-comparison.html
+ background-position-three-four-values.html
+ background-position-xy-three-four-values-passthru.html
+ background-position/background-position-bottom-right-repeat-round.html
+ background-position/background-position-right-in-body.html
+ inheritance.sub.html
+ parsing/background-position-computed.html
+ parsing/background-position-invalid.html
+ parsing/background-position-valid.html
+ parsing/background-position-x-computed.html
+ parsing/background-position-x-invalid.html
+ parsing/background-position-x-valid.html
+ parsing/background-position-y-computed.html
+ parsing/background-position-y-invalid.html
+ parsing/background-position-y-valid.html
+
+
+ If [=background images=] have been specified,
+ this property specifies their initial position
+ (after any resizing)
+ within their corresponding [=background positioning area=].
+
+ This property is a [=shorthand property=] that sets
+ 'background-position-x', 'background-position-y', 'background-position-block', and 'background-position-inline'
+ in a single declaration.
+
+ Its value is given as a comma-separated list
+ of <> values, which are interpreted as <> values
+ with the resized [=background image=] as the [=alignment subject=]
+ and the [=background positioning area=] as the [=alignment container=].
+
+ Note: A pair of keywords can be reordered,
+ while a combination of keyword and length or percentage cannot.
+ So ''center left'' is valid while ''50% left'' is not.
+
+ If three or four values are given,
+ then each <> represents an offset
+ and must be preceded by a keyword,
+ which specifies from which edge the offset is given.
+ For example, ''background-position: bottom 10px right 20px''
+ represents a ''10px'' vertical offset up from the bottom edge
+ and a ''20px'' horizontal offset leftward from the right edge.
+ If three values are given,
+ the missing offset is assumed to be zero.
+
+ Positive values represent an offset inward
+ from the edge of the [=background positioning area=].
+ Negative values represent an offset outward
+ from the edge of the [=background positioning area=].
+
+
+ The following declarations give the stated (horizontal, vertical)
+ offsets from the top left corner:
+
+
+ background-position: left 10px top 15px; /* 10px, 15px */
+ background-position: left top ; /* 0px, 0px */
+ background-position: 10px 15px; /* 10px, 15px */
+ background-position: left 15px; /* 0px, 15px */
+ background-position: 10px top ; /* 10px, 0px */
+ background-position: left top 15px; /* 0px, 15px */
+ background-position: left 10px top ; /* 10px, 0px */
+
+
+
+
+ <> = <> | <>
+ <> = [
+ [ left | center | right ] && [ [ top | bottom ] <> ]
+ |
+ [ [ left | right ] <> ] && [ top | center | bottom ]
+ ]
+
+
+ The omitted <> in the 'background-position'-specific
+ <> syntax variant
+ defaults to ''0%''.
+
+ Issue(9690): Specify how the [=longhand properties=] are set.
+
+
+Serialization of 'background-position' values
+
+ The [=specified value=] and [=computed value=] of the <> type
+ serialize exactly as defined in [[CSS-VALUES-4]] for <>.
+ For 3-value productions
+ (which are not valid in <>),
+ the [=specified value=] serialization
+ is identical to the equivalent 4-value syntax
+ except that the omitted offset remains omitted.
+
Painting Area: the 'background-clip' property
@@ -324,6 +956,63 @@ Painting Area: the 'background-clip' property
Animation type: repeatable list
+
+ animations/discrete-no-interpolation.html
+ background-clip-001.html
+ background-clip-002.html
+ background-clip-003.html
+ background-clip-004.html
+ background-clip-005.html
+ background-clip-006.html
+ background-clip-007.html
+ background-clip-008.html
+ background-clip-009.html
+ background-clip-010.html
+ background-clip-color-repaint.html
+ background-clip-color.html
+ background-clip-content-box-001.html
+ background-clip-content-box-002.html
+ background-clip-padding-box-001.html
+ background-clip-padding-box-with-border-radius.html
+ background-clip-content-box-with-border-radius-002.html
+ background-clip-content-box-with-border-radius-003.html
+ background-clip-padding-box-with-border-radius-002.html
+ background-clip-padding-box-with-border-radius-003.html
+ background-clip/clip-border-area-background-geometry.html
+ background-clip/clip-border-area-border-on-top.html
+ background-clip/clip-border-area-border-image.html
+ background-clip/clip-border-area-box-decoration-break.html
+ background-clip/clip-border-area-multiple-backgrounds.html
+ background-clip/clip-border-area-on-body-not-propagated-to-root.html
+ background-clip/clip-border-area-on-body-propagated-to-root.html
+ background-clip/clip-border-area-on-root.html
+ background-clip/clip-border-area.html
+ background-clip/clip-rounded-corner.html
+ background-clip/clip-text-ellipsis.html
+ background-clip/clip-text-animated-text.html
+ background-clip/clip-text-dynamic-2.html
+ background-clip/clip-text-flex.html
+ background-clip/clip-text-multi-line.html
+ background-clip/clip-text-on-body-not-propagated-to-root.html
+ background-clip/clip-text-on-body-propagated-to-root.html
+ background-clip/clip-text-on-root.html
+ background-clip/clip-text-text-decorations.html
+ background-clip/clip-text-text-emphasis.html
+ background-clip_padding-box.html
+ background-paint-order-001.html
+ background-rounded-image-clip-001.html
+ background-rounded-image-clip-002.html
+ css3-background-clip-border-box.html
+ css3-background-clip-content-box.html
+ css3-background-clip-padding-box.html
+ css3-background-clip.html
+ inheritance.sub.html
+ local-attachment-content-box-scroll.html
+ parsing/background-clip-computed.html
+ parsing/background-clip-invalid.html
+ parsing/background-clip-valid.html
+
+
Determines the background painting area,
which determines the area within which the background is painted.
The syntax of the property is given with
@@ -350,13 +1039,600 @@ Painting Area: the 'background-clip' property
border-area
- The background is clipped to the area painted by the border, taking 'border-width' and 'border-style' into account but ignoring any transparency introduced by 'border-color'.
+ The background is clipped to the area painted by the border,
+ taking 'border-width' and 'border-style' into account but ignoring any transparency introduced by 'border-color'.
If both ''background-clip/border-area'' and ''background-clip/text'' are specified,
the background is painted within (clipped to) the union of these two areas.
+ Note: The root element has a different [=background painting area=]
+ and thus the 'background-clip' property has no effect when specified on it.
+ See [[#special-backgrounds]].
+
+ Note: The background is always drawn behind the border, if any.
+ See “Elaborate description of Stacking Contexts” in [[!CSS2]] Appendix E.
+
+ See [[css-borders-4#corner-shaping]] for how 'border-radius' affects
+ the shape of the [=background painting area=].
+
+ See [[#layering]] for how 'background-clip' interacts
+ with other comma-separated background properties
+ to form each [=background image layer=].
+
+
+Positioning Area: the 'background-origin' property
+
+
+ Name: background-origin
+ Value: <>#
+ Initial: padding-box
+ Applies to: all elements
+ Inherited: no
+ Percentages: N/A
+ Computed value: list, each item a keyword as specified
+ Animation type: repeatable list
+
+
+
+ animations/discrete-no-interpolation.html
+ animations/background-position-origin-interpolation.html
+ background-gradient-subpixel-fills-area.html
+ background-origin-001.html
+ background-origin-002.html
+ background-origin-003.html
+ background-origin-004.html
+ background-origin-005.html
+ background-origin-006.html
+ background-origin-007.html
+ background-origin-008.html
+ background-origin/origin-border-box.html
+ background-origin/origin-border-box_with_position.html
+ background-origin/origin-border-box_with_radius.html
+ background-origin/origin-border-box_with_size.html
+ background-origin/origin-content-box.html
+ background-origin/origin-content-box_with_position.html
+ background-origin/origin-content-box_with_radius.html
+ background-origin/origin-content-box_with_size.html
+ background-origin/origin-padding-box.html
+ background-origin/origin-padding-box_with_position.html
+ background-origin/origin-padding-box_with_radius.html
+ background-origin/origin-padding-box_with_size.html
+ css3-background-origin-border-box.html
+ css3-background-origin-content-box.html
+ css3-background-origin-padding-box.html
+ inheritance.sub.html
+ parsing/background-origin-computed.html
+ parsing/background-origin-invalid.html
+ parsing/background-origin-valid.html
+
+
+ This property determines the background positioning area:
+ the area within which any background images are positioned.
+ For elements rendered as multiple [=box fragments=]
+ (e.g., inline boxes on several lines, boxes on several pages),
+ specifies which boxes 'box-decoration-break' [[CSS-BREAK-3]] operates on
+ to determine the background positioning area(s).
+
+
+
padding-box
+
+ The position is relative to the [=padding box=].
+ (For single boxes ''0 0'' is the upper left corner of the padding edge,
+ ''100% 100%'' is the lower right corner.)
+
border-box
+
+ The position is relative to the [=border box=].
+
content-box
+
+ The position is relative to the [=content box=].
+
+
+ If the 'background-attachment' value for this [=layer=] is ''fixed'',
+ then this property has no effect:
+ in this case the [=background positioning area=] is
+ the [=initial containing block=].
+
+ Note: If 'background-clip' is ''background-clip/padding-box'',
+ 'background-origin' is ''background-origin/border-box'',
+ 'background-position' is ''top left'' (the initial value),
+ and the element has a non-zero border,
+ then the top and left edges of the [=background image=] will be clipped.
+
+ See [[#layering]] for how 'background-origin' interacts
+ with other comma-separated background properties
+ to form each [=background image layer=].
+
+
+Sizing Images: the 'background-size' property
+
+
+ Name: background-size
+ Value: <>#
+ Initial: auto
+ Applies to: all elements
+ Inherited: no
+ Percentages: see text
+ Computed value: list,
+ each item a pair of sizes (one per axis)
+ each represented as either a keyword or a computed <> value
+ Animation type: repeatable list
+
+ Scale the image, while preserving its [=natural aspect ratio=] (if any),
+ to the largest size such that both its width and its height
+ can fit inside the [=background positioning area=].
+
+
cover
+
+ Scale the image, while preserving its [=natural aspect ratio=] (if any),
+ to the smallest size such that both its width and its height
+ can completely cover the [=background positioning area=].
+
+
[ <>
+ | auto ]{1,2}
+
+ The first value gives the width of the corresponding image,
+ the second value its height.
+ If only one value is given
+ the second is assumed to be ''background-size/auto''.
+
+ A <> is relative to the [=background positioning area=].
+
+ An ''background-size/auto'' value for one dimension
+ is resolved by using the image's [=natural aspect ratio=]
+ and the size of the other dimension,
+ or failing that, using the image's [=natural size=],
+ or failing that, treating it as ''100%''.
+
+ If both values are ''background-size/auto''
+ then the [=natural width=] and/or [=natural height|height=] of the image
+ should be used, if any,
+ the missing dimension (if any) behaving as ''background-size/auto''
+ as described above.
+ If the image has neither [=natural size=],
+ its size is determined as for ''contain''.
+
+ Negative values are invalid.
+
+
+
+ Here are some examples.
+ The first example stretches the background image
+ independently in both dimensions
+ to completely cover the content area:
+
+
+
+ The following example rounds the height of the image to 33.3%,
+ up from the specified value of 30%.
+ At 30%, three images would fit entirely and a fourth only partially.
+ After rounding, three images fit exactly.
+ The width of the image is 20% of the background positioning area width
+ and is not rounded.
+
+
+
+ If 'background-repeat' is ''background-repeat/round''
+ for one (or both) dimensions,
+ there is a second step.
+ The UA must scale the image in that dimension (or both dimensions)
+ so that it fits a whole number of times in the [=background positioning area=].
+ In the case of the width (height is analogous):
+
+
+ If X ≠ 0 is the width of the image after step one
+ and W is the width of the background positioning area,
+ then the rounded width
+ X' = W / round(W / X)
+ where round() is a function that returns the nearest natural number
+ (integer greater than zero).
+
+
+ If 'background-repeat' is ''background-repeat/round'' for one dimension only
+ and if 'background-size' is ''background-size/auto'' for the other dimension,
+ then there is a third step:
+ that other dimension is scaled so that the original aspect ratio is restored.
+
+
+ In this example the background image is shown at its natural size:
+
+
+
+ In the following example, the background is shown with a width of
+ 3em and its height is scaled proportionally to keep the original
+ aspect ratio:
+
+
+
+ In the following example,
+ the background is shown with a width of approximately 3em:
+ scaled so that it fits a whole number of times in the width of the background.
+ The height is scaled proportionally to keep the original aspect ratio:
+
+
+
+ In the following example, the background image is shown
+ with a width of 3em and a height that is either
+ the height corresponding to that width at the original aspect ratio
+ or slightly less:
+
+
+
+ In the following example,
+ the background image is shown with a height of approximately 4em:
+ scaled slightly so that it fits a whole number of times in the background height.
+ The width is the approximately the width that corresponds to
+ a 4em height at the original aspect ratio:
+ scaled slightly so that it fits a whole number of times
+ in the background width.
+
+
+ div {
+ background-image: url(image5.png);
+ background-repeat: round;
+ background-size: auto 4em;
+ }
+
+
+
+ If the background image's width or height resolves to zero,
+ this causes the image not to be displayed.
+ (The effect is the same as if it had been a transparent image.)
+
+ See [[#layering]] for how 'background-size' interacts
+ with other comma-separated background properties
+ to form each [=background image layer=].
+
Background Image Layers: the 'background-tbd' shorthand property
+ Name: background
+ Value: <>#? , <>
+ Applies to: all elements
+ Inherited: no
+
+
+
+ background-331.html
+ background-332.html
+ background-333.html
+ background-334.html
+ background-335.html
+ background-336.html
+ parsing/background-computed.html
+ parsing/background-invalid.html
+ parsing/background-shorthand-serialization.html
+ parsing/background-valid.html
+
+
+ The 'background' property is a [=shorthand property=]
+ for setting most background properties at the same place in the style sheet.
+ The number of comma-separated items defines the number of [=background image layers=].
+ Given a valid declaration, for each layer
+ the shorthand first sets the corresponding value of each of
+ 'background-image',
+ 'background-position',
+ 'background-size',
+ 'background-repeat',
+ 'background-origin',
+ 'background-clip'
+ and 'background-attachment' to
+ that property's [=initial value=],
+ then assigns any explicit values
+ specified for this layer in the declaration.
+ Finally 'background-color' is set to the specified color, if any,
+ else set to its initial value.
+
+ This property's value is given as a comma-separated list
+ of values where
+
+
+
+ Note: A color is permitted in <>, but not in <>.
+
+ If one <> value is present
+ then it sets both 'background-origin' and 'background-clip' to that value.
+ If two values are present,
+ then the first sets 'background-origin' and the second 'background-clip'.
+
+
+ In the first rule of the following example, only a value for
+ 'background-color' has been given and the
+ other individual properties are set to their initial values. In the
+ second rule, many individual properties have been specified.
+
+
+ body { background: red }
+ p { background: url("chess.png") 40% / 10em gray
+ round fixed border-box; }
+
+ The following example shows how a both
+ a background color (''#CCC'') and a background image (''url(metal.jpg)'')
+ are set.
+ The image is rescaled to the full width of the element:
+
+
+ E { background: #CCC url("metal.jpg") top left / 100% auto no-repeat}
+
+ The following declaration with multiple, comma-separated values
+
+
+ background: url(a.png) top left no-repeat,
+ url(b.png) center / 100% 100% no-repeat,
+ url(c.png) white;
+
+
+ is equivalent to
+
+
+ background-image: url(a.png), url(b.png), url(c.png);
+ background-position: top left, center, top left;
+ background-repeat: no-repeat, no-repeat, repeat;
+ background-clip: border-box, border-box, border-box;
+ background-origin: padding-box, padding-box, padding-box;
+ background-size: auto auto, 100% 100%, auto auto;
+ background-attachment: scroll, scroll, scroll;
+ background-color: white;
+
+
+
+
+Layering Multiple Background Images
+
+ The background of a box can have multiple
+ background image layers.
+ The number of layers is determined by
+ the number of comma-separated values in the 'background-image' property.
+ Note that a value of ''background-image/none'' still creates a layer.
+
+
+ background-none-none-and-color.html
+ order-of-images.htm
+ scroll-positioned-multiple-background-images.html
+
+
+ Each of the [=background images=] is sized, positioned, and tiled
+ according to the corresponding value in the other background properties.
+ The lists are matched up from the first value:
+ excess values at the end are not used.
+ If a property doesn't have enough comma-separated values
+ to match the number of layers,
+ the [=UA=] must calculate its [=used value=]
+ by repeating the list of values until there are enough.
+
+
+ For example, this set of declarations:
+
+
+ background-image: url(flower.png), url(ball.png), url(grass.png);
+ background-position: center center, 20% 80%, top left, bottom right;
+ background-origin: border-box, content-box;
+ background-repeat: no-repeat;
+
+
+ has exactly the same effect as this set,
+ with the extra position dropped
+ and the missing values for 'background-origin' and 'background-repeat'
+ filled in (emphasized for clarity):
+
+
+ background-image: url(flower.png), url(ball.png), url(grass.png);
+ background-position: center center, 20% 80%, top left;
+ background-origin: border-box, content-box, border-box;
+ background-repeat: no-repeat, no-repeat, no-repeat;
+
+
+
+ The first image in the list is the [=layer=] closest to the user,
+ the next one is painted behind the first, and so on.
+ The background color, if present,
+ is painted below all of the other [=layers=].
+
+ Note: The [[css-borders-4#border-images|border-image properties]]
+ can also define a background image,
+ which, if present, is painted on top of
+ the background [=layers=] created by the background properties.
+
+
+Backgrounds of Special Elements
+
+ The document canvas
+ is the infinite surface over which the document is rendered. [[!CSS2]]
+ Since no element corresponds to the canvas,
+ in order to allow styling of the canvas
+ CSS propagates the background of the [=root element=]
+ (or, in the case of HTML, the <body> element)
+ as described below.
+ However, if the element whose background would be used for the canvas
+ is ''display: none'',
+ then the [=canvas background=] is transparent.
+
+ If the [=canvas background=] is not opaque,
+ the canvas surface below it shows through.
+ The texture of the [=canvas surface=] is UA-dependent
+ (but is typically an opaque white).
+
+
+The Canvas Background and the Root Element
+
+ The background of the [=root element=] becomes the canvas background
+ and its [=background painting area=] extends
+ to cover the entire canvas.
+ However, any images are sized and positioned relative to the root element’s box
+ as if they were painted for that element alone.
+ (In other words, the
+ background positioning area
+ is determined as for the root element.)
+ The root element does not paint this background again,
+ i.e., the [=used value=] of its background is ''transparent''.
+
+
+ background-margin-iframe-root.html
+ background-margin-root.html
+ background-margin-transformed-root.html
+ background-margin-will-change-root.html
+
+
+
+The Canvas Background and the HTML <body> Element
+
+ For documents whose root element is
+ an HTML HTML element
+ or an XHTML html element [[!HTML]]:
+ if the [=computed value=] of 'background-image' on the [=root element=]
+ is ''background-image/none'' and its 'background-color' is ''transparent'',
+ user agents must instead propagate
+ the [=computed values=] of the background properties
+ from that element's first
+ HTML BODY or XHTML body
+ child element.
+ The [=used values=]
+ of that BODY element's background properties
+ are their [=initial values=],
+ and the propagated values are treated
+ as if they were specified on the root element.
+ It is recommended that authors of HTML documents specify the canvas background
+ using the BODY element
+ rather than the HTML element.
+
+
+ document-canvas-remove-body.html
+
+
+ Note: Using [=containment=] disables
+ this special handling of the HTML <{body}> element.
+ See the [[CSS-CONTAIN-1#contain-property]] for details.
+
+
+ According to these rules, the canvas underlying the following HTML document
+ will have a “marble” background:
+
+
+ <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.0//EN'
+ >
+ <html>
+ <head>
+ <title>Setting the canvas background</title>
+ <style type="text/css">
+ body { background: url("http://example.org/marble.png") }
+ </style>
+ </head>
+ <body>
+ <p>My background is marble.</p>
+ </body>
+ </html>
+
+
+
+
+The ''::first-line'' Pseudo-element‘s Background
+
+ The ''::first-line'' pseudo-element
+ is like an inline-level element
+ for the purposes of the background
+ (see section 5.12.1 of [[!CSS2]]).
+ That means, e.g., that in a left-justified first line,
+ the background does not necessarily extend
+ all the way to the right edge.
+
+
+ linear-gradient-currentcolor-first-line.html
+
+
Changes
@@ -428,7 +2019,7 @@ Additions since [[CSS3BG]]
Acknowledgments
-
In addition to the many contributors to the [[CSS1]], [[CSS21]],
+
In addition to the many contributors to the [[CSS1]], [[CSS2]],
and [[CSS3BG]] predecessors to this module,
the editors would like to thank
Tab Atkins,
@@ -442,3 +2033,368 @@ No new privacy considerations have been reported on this specification.
Security Considerations
No new security considerations have been reported on this specification.
+
+
+ background-color-applied-to-rounded-inline-element.htm
+ background-color-border-box.htm
+ background_color_padding_box.htm
+ background-repeat-round-001.html
+ background-repeat-round-002.html
+ background-repeat-space-padding-box.htm
+ background_repeat_space_border_box.htm
+ background_repeat_space_content_box.htm
+ background-attachment-fixed.html
+ background-attachment-local-inline-002.html
+ background-attachment-local-scrolling.htm
+ background-attachment-local.html
+ background-clip-root.html
+ background-clip/clip-border-box.html
+ background-clip/clip-border-box_with_position.html
+ background-clip/clip-border-box_with_radius.html
+ background-clip/clip-border-box_with_size.html
+ background-clip/clip-content-box.html
+ background-clip/clip-content-box_with_position.html
+ background-clip/clip-content-box_with_radius.html
+ background-clip/clip-content-box_with_size.html
+ background-clip/clip-padding-box.html
+ background-clip/clip-padding-box_with_position.html
+ background-clip/clip-padding-box_with_radius.html
+ background-clip/clip-padding-box_with_size.html
+ background-clip-content-box.html
+ background-size-003.html
+ background-size-022.html
+ background-size-023.html
+ background-size-024.html
+ background-size-032.html
+ background-size-033.html
+ background-size-applies-to-block.htm
+ background-size-aspect-ratio.htm
+ border-color_transparent.html
+ ttwf-css3background-border-color-shorthand-missing-bottom.htm
+ ttwf-css3background-border-color-shorthand-missing-left.htm
+ ttwf-css3background-border-color-shorthand-missing-right.htm
+ ttwf-css3background-border-color-shorthand.htm
+ ttwf-css3background-border-color.htm
+ ttwf-css3background-border-style-double.htm
+ ttwf-css3background-border-style-shorthand-missing-bottom.htm
+ ttwf-css3background-border-style-shorthand-missing-left.htm
+ ttwf-css3background-border-style-shorthand.htm
+ ttwf-css3background-border-style-values.htm
+ ttwf-css3background-border-style.htm
+ border-bottom-left-radius-002.xht
+ border-bottom-left-radius-012.xht
+ border-bottom-left-radius-013.xht
+ border-bottom-right-radius-002.xht
+ border-bottom-right-radius-012.xht
+ border-bottom-right-radius-013.xht
+ border-radius-applies-to-001.htm
+ border-radius-applies-to-002.htm
+ border-radius-applies-to-003.htm
+ border-radius-applies-to-004.htm
+ border-radius-applies-to-005.htm
+ border-radius-applies-to-006.htm
+ border-radius-applies-to-007.htm
+ border-radius-applies-to-008.htm
+ border-radius-applies-to-009.htm
+ border-radius-applies-to-010.htm
+ border-radius-applies-to-011.htm
+ border-radius-applies-to-012.htm
+ border-radius-applies-to-013.htm
+ border-radius-applies-to-014.htm
+ border-radius-applies-to-015.htm
+ border-radius-applies-to-016.htm
+ border-radius-applies-to-017.htm
+ border-radius-content-edge-001.htm
+ border-radius-different-width-001.htm
+ border-radius-initial-value-001.htm
+ border-radius-not-inherited-001.htm
+ border-radius-overflow-hidden.html
+ border-radius-shorthand-001.htm
+ border-radius-style-001.htm
+ border-radius-style-002.htm
+ border-radius-style-003.htm
+ border-radius-style-004.htm
+ border-radius-style-005.htm
+ border-radius-sum-of-radii-001.htm
+ border-radius-sum-of-radii-002.htm
+ border-radius-with-three-values-001.htm
+ border-radius-with-two-values-001.htm
+ border-top-left-radius-002.xht
+ border-top-left-radius-012.xht
+ border-top-left-radius-013.xht
+ border-top-left-radius-values-001.htm
+ border-top-left-radius-values-002.htm
+ border-top-left-radius-values-003.htm
+ border-top-left-radius-values-004.htm
+ border-top-right-radius-002.xht
+ border-top-right-radius-012.xht
+ border-top-right-radius-013.xht
+ border-top-right-radius-values-004.htm
+ border-image-outset-001.htm
+ border-image-outset-002.htm
+ border-images.html
+ box-shadow-001.htm
+ box-shadow-002.htm
+ box-shadow-003.htm
+ box-shadow-004.htm
+ box-shadow/box-shadow-blur-definition-001.xht
+ background_properties_greater_than_images.htm
+ none-as-image-layer.htm
+
+
+
+ tiny-foreignObject-double-border-radius-crash.html
+ gradient-wrong-interpolation-crash.html
+ linear-gradient-calc-crash.html
+
+
+
+ background-gradient-interpolation-001.html
+ background-gradient-interpolation-002.html
+ background-gradient-interpolation-003.html
+ color-mix-currentcolor-outline-repaint-parent.html
+ color-mix-currentcolor-outline-repaint.html
+ first-letter-space-not-selected.html
+
+
+
+ animations/border-bottom-left-radius-composition.html
+ animations/border-bottom-right-radius-composition.html
+ animations/border-bottom-width-composition.html
+ animations/border-color-interpolation.html
+ animations/border-image-outset-composition.html
+ animations/border-image-outset-interpolation.html
+ animations/border-image-slice-composition.html
+ animations/border-image-slice-interpolation-stability.html
+ animations/border-image-slice-interpolation.html
+ animations/border-image-source-interpolation.html
+ animations/border-image-width-composition.html
+ animations/border-image-width-interpolation.html
+ animations/border-left-width-composition.html
+ animations/border-radius-interpolation.html
+ animations/border-right-width-composition.html
+ animations/border-top-left-radius-composition.html
+ animations/border-top-right-radius-composition.html
+ animations/border-top-width-composition.html
+ animations/border-width-interpolation.html
+ animations/box-shadow-composition.html
+ animations/box-shadow-interpolation.html
+ border-bottom-left-radius-001.xht
+ border-bottom-left-radius-004.xht
+ border-bottom-left-radius-005.xht
+ border-bottom-left-radius-010.xht
+ border-bottom-left-radius-011.xht
+ border-bottom-left-radius-014.xht
+ border-bottom-right-radius-001.xht
+ border-bottom-right-radius-004.xht
+ border-bottom-right-radius-005.xht
+ border-bottom-right-radius-010.xht
+ border-bottom-right-radius-011.xht
+ border-bottom-right-radius-014.xht
+ border-bottom-width-medium.html
+ border-bottom-width-thick.html
+ border-bottom-width-thin.html
+ border-image-002.html
+ border-image-003.html
+ border-image-004.html
+ border-image-006.html
+ border-image-007.html
+ border-image-011.html
+ border-image-012.html
+ border-image-013.html
+ border-image-017.xht
+ border-image-018.xht
+ border-image-019.xht
+ border-image-020.xht
+ border-image-021.html
+ border-image-calc.html
+ border-image-displayed-with-transparent-border-color.html
+ border-image-image-type-001.htm
+ border-image-image-type-002.htm
+ border-image-image-type-003.htm
+ border-image-image-type-004.htm
+ border-image-image-type-005.htm
+ border-image-outset-003.html
+ border-image-outset-004.html
+ border-image-repeat-002.htm
+ border-image-repeat-004.htm
+ border-image-repeat-005.html
+ border-image-repeat-1.html
+ border-image-repeat-repeat-001.html
+ border-image-repeat-round-003.html
+ border-image-repeat-round-1.html
+ border-image-repeat-round-2.html
+ border-image-repeat-round-stretch-001.html
+ border-image-repeat-round.html
+ border-image-repeat-space-011.html
+ border-image-repeat-space-1.html
+ border-image-repeat-space-10.html
+ border-image-repeat-space-2.html
+ border-image-repeat-space-3.html
+ border-image-repeat-space-4-ref-1.html
+ border-image-repeat-space-4.html
+ border-image-repeat-space-5-ref-1.html
+ border-image-repeat-space-5.html
+ border-image-repeat-space-6.html
+ border-image-repeat-space-7.html
+ border-image-repeat-space-8.html
+ border-image-repeat-space-9.html
+ border-image-repeat-stretch-round-001.html
+ border-image-repeat_repeatnegx_none_50px.html
+ border-image-round-and-stretch.html
+ border-image-shorthand-001.htm
+ border-image-shorthand-002.htm
+ border-image-shorthand-003.htm
+ border-image-slice-001.xht
+ border-image-slice-002.xht
+ border-image-slice-003.xht
+ border-image-slice-004.htm
+ border-image-slice-005.htm
+ border-image-slice-006.htm
+ border-image-slice-007.htm
+ border-image-slice-fill-001.html
+ border-image-slice-fill-002.html
+ border-image-slice-fill-003.html
+ border-image-slice-percentage.html
+ border-image-slice-shorthand-reset.html
+ border-image-space-001.html
+ border-image-width-001.htm
+ border-image-width-005.xht
+ border-image-width-006.xht
+ border-image-width-007.xht
+ border-image-width-008.html
+ border-image-width-009.html
+ border-image-width-should-extend-to-padding.html
+ border-left-width-medium.html
+ border-left-width-thick.html
+ border-left-width-thin.html
+ border-radius-001.xht
+ border-radius-002.xht
+ border-radius-003.xht
+ border-radius-004.xht
+ border-radius-005.xht
+ border-radius-006.xht
+ border-radius-007.xht
+ border-radius-008.xht
+ border-radius-009.xht
+ border-radius-010.xht
+ border-radius-011.xht
+ border-radius-012.html
+ border-radius-013.html
+ border-radius-clip-001.html
+ border-radius-clip-002.htm
+ border-radius-clipping-002.html
+ border-radius-clipping-with-transform-001.html
+ border-radius-css-text.html
+ border-radius-dynamic-from-no-radius.html
+ border-radius-horizontal-value-is-zero.html
+ border-radius-shorthand-002.html
+ border-right-width-medium.html
+ border-right-width-thick.html
+ border-right-width-thin.html
+ border-top-left-radius-001.xht
+ border-top-left-radius-004.xht
+ border-top-left-radius-005.xht
+ border-top-left-radius-010.xht
+ border-top-left-radius-011.xht
+ border-top-left-radius-014.xht
+ border-top-right-radius-001.xht
+ border-top-right-radius-004.xht
+ border-top-right-radius-005.xht
+ border-top-right-radius-010.xht
+ border-top-right-radius-011.xht
+ border-top-right-radius-014.xht
+ border-top-width-medium.html
+ border-top-width-thick.html
+ border-top-width-thin.html
+ border-width-cssom.html
+ border-width-pixel-snapping-001-a.html
+ border-width-pixel-snapping-001-b.html
+ border-width-small-values-001-a.html
+ border-width-small-values-001-b.html
+ border-width-small-values-001-c.html
+ border-width-small-values-001-d.html
+ border-width-small-values-001-e.html
+ box-shadow-005.html
+ box-shadow-029.html
+ box-shadow-039.html
+ box-shadow-040.html
+ box-shadow-041.html
+ box-shadow-042.html
+ box-shadow-body.html
+ box-shadow-border-radius-001.html
+ box-shadow-calc.html
+ box-shadow-currentcolor.html
+ box-shadow-inset-without-border-radius.html
+ box-shadow-invalid-001.html
+ box-shadow-multiple-001.html
+ box-shadow-outset-without-border-radius-001.html
+ box-shadow-overlapping-001.html
+ box-shadow-overlapping-002.html
+ box-shadow-overlapping-003.html
+ box-shadow-overlapping-004.html
+ box-shadow-radius-000.html
+ box-shadow-radius-001.html
+ box-shadow-radius-generated.html
+ box-shadow-table-border-collapse-001.html
+ box-shadow/slice-block-fragmentation-001.html
+ box-shadow/slice-block-fragmentation-002.html
+ box-shadow/slice-block-fragmentation-003.html
+ box-shadow/slice-inline-fragmentation-001.html
+ box-shadow/slice-inline-fragmentation-002.html
+ box-shadow/slice-inline-fragmentation-003.html
+ color-mix-currentcolor-border-repaint.html
+ color-mix-currentcolor-border-repaint-parent.html
+ css-border-radius-001.html
+ css-box-shadow-001.html
+ css3-border-image-repeat-repeat.html
+ css3-border-image-repeat-stretch.html
+ css3-border-image-source.html
+ css3-box-shadow.html
+ currentcolor-border-repaint-parent.html
+ fieldset-inset-shadow.html
+ inner-border-non-renderable.html
+ inset-box-shadow-scroll.html
+ inset-box-shadow-stacking-context-scroll.html
+ parsing/border-color-computed.html
+ parsing/border-color-invalid.html
+ parsing/border-color-shorthand.html
+ parsing/border-color-valid.html
+ parsing/border-image-invalid.html
+ parsing/border-image-outset-computed.html
+ parsing/border-image-outset-invalid.html
+ parsing/border-image-outset-valid.html
+ parsing/border-image-repeat-computed.html
+ parsing/border-image-repeat-invalid.html
+ parsing/border-image-repeat-valid.html
+ parsing/border-image-shorthand.sub.html
+ parsing/border-image-slice-computed.html
+ parsing/border-image-slice-invalid.html
+ parsing/border-image-slice-valid.html
+ parsing/border-image-source-computed.sub.html
+ parsing/border-image-source-invalid.html
+ parsing/border-image-source-valid.html
+ parsing/border-image-valid.html
+ parsing/border-image-width-computed.html
+ parsing/border-image-width-invalid.html
+ parsing/border-image-width-valid.html
+ parsing/border-invalid.html
+ parsing/border-radius-computed.html
+ parsing/border-radius-invalid.html
+ parsing/border-radius-valid.html
+ parsing/border-shorthand.html
+ parsing/border-style-computed.html
+ parsing/border-style-invalid.html
+ parsing/border-style-shorthand.html
+ parsing/border-style-valid.html
+ parsing/border-valid.html
+ parsing/border-width-computed.html
+ parsing/border-width-invalid.html
+ parsing/border-width-shorthand.html
+ parsing/border-width-valid.html
+ parsing/box-shadow-computed.html
+ parsing/box-shadow-invalid.html
+ parsing/box-shadow-valid.html
+ parsing/webkit-border-radius-valid.html
+ ttwf-reftest-borderRadius.html
+
\ No newline at end of file
From 21b7f1acc6e9afdd35d68ac1082c6a1293d269a7 Mon Sep 17 00:00:00 2001
From: Noam Rosenthal
Date: Tue, 28 Oct 2025 13:50:39 +0000
Subject: [PATCH 047/124] Revise two-phase transition explainer
Updated the two-phase transition explainer to enhance clarity and detail on cross-document navigation and proposed solutions.
---
.../two-phase-transition-explainer.md | 100 ++++++++++++------
1 file changed, 69 insertions(+), 31 deletions(-)
diff --git a/css-view-transitions-2/two-phase-transition-explainer.md b/css-view-transitions-2/two-phase-transition-explainer.md
index 7f99a1f1a44..ae966503479 100644
--- a/css-view-transitions-2/two-phase-transition-explainer.md
+++ b/css-view-transitions-2/two-phase-transition-explainer.md
@@ -1,54 +1,92 @@
-# Two-phase view transition
-Making cross-document view-transitions feel instant and seamless.
+# Two-phase cross-document navigation
+Making the navigation experience customizable & declarative.
-See whatwg/html#10616
+See whatwg/html#10616, whatwg/html#11819 and w3c/csswg-drafts#12829.
-# Current state
-View-transitions don’t start immediately - rendering is paused until the new state is ready.
-This is especially visible in cross-document view transitions, where the transition only captures the old when the new document’s response arrives, and starts when the new document is ready to render.
+# Overview
+The period between initiating a navigation (e.g. clicking a link) and consuming the content of the next page ([FCP](https://web.dev/articles/fcp)), is a sensitive moment in user experince.
+It is a point in time where users are very likely to notice delays, jarring moments of frozen display, and abrupt changes to presentation.
-This can create a jarring or abrupt experience.
+The core of this being difficult stems from a tradeoff between speed and smoothness.
+The new document becomes activate ASAP (in favor of speed), at the moment the headers are received.
+However, it cannot render until all of its render-blocking resources and elements are present (in favor of smoothness, preventing FoUCs).
-# Current workarounds
+This "uncanny valley" where the old page is no longer active but the new page cannot render anything is far from being an optimal user experience, and the knobs given for developers to control it are crude and implicit.
+
+# Current knobs
+
+## Cross-document view transitions
+
+This feature declaratively makes the navigation smoother. However, the view-transition starts very late. It captures the old state when the new page's response headers arrive, and then freezes the presentation until rendering is unblocked.
## Starting an animation manually on the old page
-This is possible, however the old page cannot delay the navigation, which means the animation is likely to be interrupted when the navigation commits.
+This would create an instant response to the navigation, however the animation would be interrupted as soon as the new page's headers arrive, freezing at that point. So by default this would be both abrupt and jarring.
## Intercepting the navigation and restarting it when the animation ends
-This works but is hard to achieve without slowing down the whole navigation process.
+This would feel smoother but slows down the whole navigation and tweaking it correctly is finicky.
## Timing out render-blocking
-This can reduce the “frozen” time, however it means the transition doesn’t end at the optimal state, and also doesn’t help with making it feel instant.
+This can reduce the jarring time, however it means the transition doesn’t end at the optimal state, and also doesn’t help with making it feel instant.
-# Proposed solution
-The core of the problem is that view-transitions require a start and an end phase before starting, but we don’t know the end phase in advance when it is computed in an async function (e.g. in a navigation).
+# Two-phase transition
-## In a nutshell
-Proposing to prototype a “two-phase” view-transition:
-Instantly start a transition to a state that can be computed quickly enough or synchronously. Call this a “preview” state.
-When the to-preview transition ends, transition from there to the final state.
-Only interrupt the first transition after a timeout, otherwise stall the navigation commit until finished.
-This should ideally not delay the LCP / loading experience of the new page, as the content keeps loading (and potentially prerendering) in the background.
+To make this part of the experience feel more seamless, developers should be able to create a "two-phase page transition".
+This transition starts *instantly* after navigation initiation (link click), and continues *smoothly* until the next page is ready to render.
+The instant part of the transition can only use information knows to the old page, which could be a skeleton of the new page or something generic of sorts.
-## Phase 1: script-invoked preview
-We can create this kind of seamless/instant experience without any new CSS, and potentially without needing to fully spec it normatively by changing the behavior as follows:
-Calling document.startViewTransition while there is an uncommitted navigation currently works, however it might get cancelled if the navigation is committed.
-Instead, if setting up that preview transition’s new state is fast enough so that it is activated before commit, let the animation run its course and use the final state as the “old” state for the cross-document view-transition.
+To achieve that, there are 3(?) potential avenues
-## Phase 2: declarative, using route-matching
-Instead of relying on carefully crafted scripts, use the proposed [declarative routing feature](https://github.com/WICG/declarative-partial-updates/blob/main/route-matching-explainer.md), and compute the preview value declaratively and synchronously by applying the style associated with the new route and using it as the intermediate state.
+## Heuristic-based
+Allow a subset of animations, e.g. ones that started after the navigation was initiated, to continue until the new page is ready to commit.
+This would allow instant reactions to a navigation while not creating the abrupt experience of spotting it prematurely.
-Something like this, though perhaps the “preview” opt-in is not necessary and we can make this inferred
+## Low-level knobs with prerendering support
+Currently, deferring the commit, even for same-origin navigation, is not possible. So the browser is responsible for the handover,
+not allowing the developer to curate this experience.
-@route (to: article) {
- .article-skeleton { display: block }
-}
+### Deferring commit
+Something like `navigateEvent.waitUntil(promise)` (or `defer` or some such) can let the developer tweak the handover point.
+This can of course also be a footgun as it's a simple way to delay navigations, however it's arguably less of a footgun than the current workarounds.
+
+### Responding to prerender
+When prerendering takes place, a more sensible time to hand over the control to the new document is when it is ready to produce a frame (all the render-blocking resources had been discovered).
+However, it is not guaranteed that the destination page is prerendered, and there is no hook to know when the new page is ready to render.
+
+A rather low level way to expose this is `navigateEvent.prerender()` which initiates a prerender if that hasn't happened yet, and returns a promise that resolves at that point, and compose it with the `waitUntil` method above.
+It is also possible to short-circuit this and somehow declare "please defer commit until prerender", which is perhaps safer than a general-purpose promise-based API.
+
+## Declarative preview transitions
+The above knobs might be very effective, but might also require expertise to get right.
+
+```css
@view-transition {
navigation: preview;
+ types: skeleton;
+}
+
+:active-view-transition-types(skeleton) {
+/* style the transition here */
}
+```
+
+This is especially expressive together with route-matching:
-The big advantage of doing this declaratively is that the author doesn't have to worry about "cleaning up after themselves", e.g. in the case of restoring from BFCache.
-Since routing is declarative, the style of the "new" route would simply not apply when restoring the "old" page from BFCache because the user is no longer navigating to it.
+```css
+@route (from: movie-list) and (to: movie-details) {
+ @view-transition {
+ navigation: preview;
+ types: skeleton;
+ }
+}
+
+@route (movie-details) {
+ :active-view-transition-types(skeleton) {
+ /* style the page as a details page skeleton even if we don't have all the data */
+ }
+}
+```
+# Conclusion
+Proposing to pursue both the declarative and JS-based approach for completeness (one for ease of use, one for fine-tuning and complete control), and avoid the heuristic approach as it's a bit opaque and implicit.
From 6d84debd74a94d7ab698f285c402e64addfe23da Mon Sep 17 00:00:00 2001
From: Chris Lilley
Date: Tue, 28 Oct 2025 09:19:19 -0400
Subject: [PATCH 048/124] nop
---
"css-conditional-3/\357\200\274wpt" | 0
1 file changed, 0 insertions(+), 0 deletions(-)
delete mode 100644 "css-conditional-3/\357\200\274wpt"
diff --git "a/css-conditional-3/\357\200\274wpt" "b/css-conditional-3/\357\200\274wpt"
deleted file mode 100644
index e69de29bb2d..00000000000
From 5fae956b3864b8e71335f82a6886c5e1fd108a44 Mon Sep 17 00:00:00 2001
From: Chris Lilley
Date: Tue, 28 Oct 2025 10:01:25 -0400
Subject: [PATCH 049/124] [css-conditional-5][editoril] Status to WD
---
css-conditional-5/Overview.bs | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs
index 71ae5a96ce7..36c31b20e8f 100644
--- a/css-conditional-5/Overview.bs
+++ b/css-conditional-5/Overview.bs
@@ -3,8 +3,9 @@ Title: CSS Conditional Rules Module Level 5
Group: csswg
Shortname: css-conditional
Level: 5
-Status: ED
-Prepare for TR: no
+Status: WD
+Prepare for TR: yes
+Date: 2025-10-30
!Delta Spec: yes
Work Status: Exploring
ED: https://drafts.csswg.org/css-conditional-5/
From 0c282f0714ca8a53a0651c87a334f72fdf9ce8a0 Mon Sep 17 00:00:00 2001
From: Chris Lilley
Date: Tue, 28 Oct 2025 10:24:21 -0400
Subject: [PATCH 050/124] [css-images-4][editorial] Start new changes section
---
css-images-4/Overview.bs | 7 +++++++
1 file changed, 7 insertions(+)
diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
index eea0fec5694..00293c4c351 100644
--- a/css-images-4/Overview.bs
+++ b/css-images-4/Overview.bs
@@ -3001,6 +3001,13 @@ Note: No change from [[css-images-3]].
Changes {#changes}
==================
+
From c74d5f93e842d9a55770b250d477bb1513fe5961 Mon Sep 17 00:00:00 2001
From: Chris Lilley
Date: Tue, 28 Oct 2025 10:29:48 -0400
Subject: [PATCH 051/124] [css-images-4][editorial] wpt
---
css-images-4/Overview.bs | 2 ++
1 file changed, 2 insertions(+)
diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
index 00293c4c351..9b05516f469 100644
--- a/css-images-4/Overview.bs
+++ b/css-images-4/Overview.bs
@@ -1291,6 +1291,7 @@ Linear Gradients: the ''linear-gradient()'' notation {#linear-gradients}
normalization-linear.html
tiled-gradients.html
gradient/color-stops-parsing.html
+ gradient/display-p3-linear-gradient.html
gradient/linear-gradient-relative-currentcolor-stop.html
gradient/gradient-single-stop-001.html
gradient/gradient-single-stop-002.html
@@ -1309,6 +1310,7 @@ Linear Gradients: the ''linear-gradient()'' notation {#linear-gradients}
parsing/gradient-interpolation-method-valid.html
parsing/gradient-position-invalid.html
parsing/gradient-position-valid.html
+ parsing/gradient-position-computed.html
### Effects of color space on interpolation: examples ### {#color-interpolation}
From 6144c824f50659d41f3f3e89e07ee56f9d2a11e2 Mon Sep 17 00:00:00 2001
From: "Psychpsyo (Cameron)" <60073468+Psychpsyo@users.noreply.github.com>
Date: Thu, 11 Sep 2025 00:02:06 +0200
Subject: [PATCH 052/124] Fix typo
---
css-content-3/Overview.bs | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/css-content-3/Overview.bs b/css-content-3/Overview.bs
index 9f97908d2da..46233746103 100644
--- a/css-content-3/Overview.bs
+++ b/css-content-3/Overview.bs
@@ -491,8 +491,8 @@ Inserting Quotation Marks: the ''*-quote'' keywords
These values are replaced by the appropriate string
as defined by the 'quotes' property,
- and increments (for ''no-open-quote'')
- or decrements (for ''no-close-quote'')
+ and increments (for ''open-quote'')
+ or decrements (for ''close-quote'')
the level of nesting for quotes.
no-open-quote
From 4745978e2bbc5015ce075095f9ca71185d84c0c6 Mon Sep 17 00:00:00 2001
From: Munira Tursunova
Date: Tue, 26 Aug 2025 13:33:47 +0200
Subject: [PATCH 053/124] Add explainer for CSS if() function
---
css-values-5/if-explainer.md | 141 +++++++++++++++++++++++++++++++++++
1 file changed, 141 insertions(+)
create mode 100644 css-values-5/if-explainer.md
diff --git a/css-values-5/if-explainer.md b/css-values-5/if-explainer.md
new file mode 100644
index 00000000000..b45db98bf42
--- /dev/null
+++ b/css-values-5/if-explainer.md
@@ -0,0 +1,141 @@
+# Explainer: CSS `if()` function
+
+This document is an explainer for the `if()` function proposed for CSS Values and Units Module Level 5.
+
+## Introduction
+
+The `if()` function introduces powerful, inline conditional logic to CSS properties. It allows authors to select a value for a property based on a set of ordered conditions, similar to `if/else` constructs in many programming languages. This provides a more dynamic and streamlined way to write CSS without relying on verbose selectors or JavaScript.
+
+## Motivation
+
+Currently, CSS authors often need to repeat selectors to apply different styles under different conditions. For example, to change a property based on a media query, one would write:
+
+```css
+.my-element {
+ color: blue;
+}
+
+@media (min-width: 600px) {
+ .my-element {
+ color: red;
+ }
+}
+```
+
+While functional, this pattern can lead to verbose and fragmented code, especially when multiple conditions are involved. The `if()` function aims to simplify this by allowing conditional logic to be expressed inline within a single declaration:
+
+```css
+.my-element {
+ color: if(media(min-width: 600px): red; else: blue);
+}
+```
+
+This approach improves readability and co-locates related logic, making stylesheets easier to maintain. This is especially powerful when combined with CSS Custom Properties, allowing for the creation of dynamic, themeable components with logic encapsulated directly in the CSS.
+
+## Syntax
+
+The `if()` function's syntax is formally defined as:
+
+```
+<> = if( [ <> ; ]* <> ;? )
+ = : ?
+ = ]> | else
+ =
+ supports( [ : ] | ) |
+ media( | ) |
+ style( )
+```
+
+In essence, the function is a list of conditional branches separated by semicolons. Each branch contains a condition followed by a colon (`:`) and a value. The conditions are evaluated in order, and the value from the first branch with a true condition is used.
+
+The `else` keyword can be used as a condition that is always true. This makes it useful for providing a final fallback value, as any branches after an `else` branch will be ignored.
+
+## Core Use Cases
+
+The `if()` function is well-suited for a variety of scenarios where a property's value needs to change based on context.
+
+* **Responsive Design:** Instead of defining multiple rules in separate `@media` blocks, `if()` allows responsive logic to be encapsulated within a single property. This is ideal for component-based architectures, as it co-locates the logic and makes it easier to manage fluid typography, spacing, or layout adjustments directly where they are applied.
+
+* **Theming:** `if()` enables dynamic and sophisticated theming systems. By checking the value of a custom property with `style()`, a component can adjust multiple aspects of its appearance (e.g., background, text color, border) based on a single theme flag (like `--theme: dark`). This centralizes theme logic and allows for the creation of derived styles that automatically respond to theme changes.
+
+* **Feature Detection & Progressive Enhancement:** Similar to the `@supports` rule, `if()` can check for browser feature support. Its advantage is providing an inline fallback within a single declaration. This is perfect for progressively enhancing a component. For example, you can use a modern layout mode like `subgrid` if it's supported, and fall back to a simpler, more widely-supported value like `grid` or `block` if it's not, all within the same `display` property.
+
+## Examples
+
+### 1. Simple Media Query
+
+A common use case is to switch a value based on a media query.
+
+```css
+.component {
+ background-color: if(media(width >= 600px): blue; else: green);
+}
+```
+
+### 2. Feature Support
+
+Conditionally apply a value based on whether the browser supports a particular CSS feature.
+
+```css
+.card {
+ display: if(supports(display: grid): grid; else: block);
+}
+```
+
+### 3. Theming with Custom Properties
+
+The `if()` function is particularly powerful for creating themes. Here, we use `style()` to check the value of a `--theme` custom property inherited from an ancestor and adjust colors accordingly.
+
+```css
+/* On a parent element, you might have: --theme: dark; */
+
+.themed-component {
+ --bg-color: if(
+ style(--theme: dark): #333;
+ style(--theme: sepia): #f4e8d5;
+ else: #eee
+ );
+ --text-color: if(
+ style(--theme: dark): #eee;
+ style(--theme: sepia): #5b4636;
+ else: #333
+ );
+
+ background-color: var(--bg-color);
+ color: var(--text-color);
+}
+```
+
+### 4. Combining Conditions with `and`
+
+Conditions can be combined with boolean keywords like `and`, `or`, and `not`. This allows for more complex logic, such as applying a style only when multiple conditions are met.
+
+```css
+.widget {
+ --base-size: 2rem;
+ --enhanced-size: 3rem;
+
+ /* Use the enhanced size only on wide screens that also support subgrid */
+ font-size: if(
+ media(width >= 1024px) and supports(display: subgrid): var(--enhanced-size);
+ else: var(--base-size)
+ );
+}
+```
+
+## Fallback Behavior
+
+If no condition in an `if()` function evaluates to true and no `else` branch is provided, the function resolves to an empty token stream. This makes the declaration invalid at computed-value time, causing the property to fall back to its inherited or initial value (behaving like `unset`).
+
+```css
+.box {
+ /* If the viewport width is less than 500px, this property becomes invalid */
+ padding: if(media(width >= 500px): 20px);
+}
+```
+
+To ensure predictable behavior, it is recommended to always provide an `else` branch.
+
+## Security and Privacy Considerations
+
+The `if()` function itself does not introduce new security or privacy concerns. It provides a new syntax for expressing conditional logic but relies on existing mechanisms (`media()`, `supports()`, `style()`) that have their own, already-defined security profiles. It does not introduce any new capabilities that could be used to fingerprint users or exfiltrate data.
\ No newline at end of file
From e8a7432d577fb4bc762e6739b3e01e4e2553fed9 Mon Sep 17 00:00:00 2001
From: Munira Tursunova
Date: Fri, 5 Sep 2025 15:48:27 +0200
Subject: [PATCH 054/124] Applied review comments
---
css-values-5/if-explainer.md | 109 +++++++++++++++++++++++++----------
1 file changed, 77 insertions(+), 32 deletions(-)
diff --git a/css-values-5/if-explainer.md b/css-values-5/if-explainer.md
index b45db98bf42..60393bb58de 100644
--- a/css-values-5/if-explainer.md
+++ b/css-values-5/if-explainer.md
@@ -4,33 +4,48 @@ This document is an explainer for the `if()` function proposed for CSS Values an
## Introduction
-The `if()` function introduces powerful, inline conditional logic to CSS properties. It allows authors to select a value for a property based on a set of ordered conditions, similar to `if/else` constructs in many programming languages. This provides a more dynamic and streamlined way to write CSS without relying on verbose selectors or JavaScript.
+The `if()` function introduces powerful,
+inline conditional logic to CSS properties.
+It allows authors to select a value for a property based on a set of ordered conditions,
+similar to `if/else` constructs in many programming languages.
+This provides a more dynamic and streamlined way to write CSS
+without relying on verbose selectors or JavaScript.
## Motivation
-Currently, CSS authors often need to repeat selectors to apply different styles under different conditions. For example, to change a property based on a media query, one would write:
+Currently, CSS authors often need to repeat selectors
+to apply different styles under different conditions.
+For example, to change a property based on a custom property for theming,
+one would write:
```css
.my-element {
- color: blue;
+ color: blue; /* default */
}
-@media (min-width: 600px) {
- .my-element {
- color: red;
- }
+.theme-dark .my-element {
+ color: red; /* theme override */
}
```
-While functional, this pattern can lead to verbose and fragmented code, especially when multiple conditions are involved. The `if()` function aims to simplify this by allowing conditional logic to be expressed inline within a single declaration:
+While functional, this pattern can lead to verbose and fragmented code,
+especially when multiple conditions are involved.
+The `if()` function aims to simplify this
+by allowing conditional logic to be expressed inline within a single declaration,
+using `style()` query to check custom properties values:
```css
+/* Assuming a parent has --theme: dark set */
.my-element {
- color: if(media(min-width: 600px): red; else: blue);
+ color: if(style(--theme: dark): red; else: blue);
}
```
-This approach improves readability and co-locates related logic, making stylesheets easier to maintain. This is especially powerful when combined with CSS Custom Properties, allowing for the creation of dynamic, themeable components with logic encapsulated directly in the CSS.
+This approach improves readability and co-locates related logic,
+making stylesheets easier to maintain.
+This is especially powerful when combined with CSS Custom Properties,
+allowing for the creation of dynamic,
+themeable components with logic encapsulated directly in the CSS.
## Syntax
@@ -46,21 +61,17 @@ The `if()` function's syntax is formally defined as:
style( )
```
-In essence, the function is a list of conditional branches separated by semicolons. Each branch contains a condition followed by a colon (`:`) and a value. The conditions are evaluated in order, and the value from the first branch with a true condition is used.
+In essence,
+the function is a list of conditional branches separated by semicolons.
+Each branch contains a condition followed by a colon (`:`) and a value.
+The conditions are evaluated in order,
+and the value from the first branch with a true condition is used.
-The `else` keyword can be used as a condition that is always true. This makes it useful for providing a final fallback value, as any branches after an `else` branch will be ignored.
+The `else` keyword can be used as a condition that is always true.
+This makes it useful for providing a final fallback value,
+as any branches after an `else` branch will be ignored.
-## Core Use Cases
-
-The `if()` function is well-suited for a variety of scenarios where a property's value needs to change based on context.
-
-* **Responsive Design:** Instead of defining multiple rules in separate `@media` blocks, `if()` allows responsive logic to be encapsulated within a single property. This is ideal for component-based architectures, as it co-locates the logic and makes it easier to manage fluid typography, spacing, or layout adjustments directly where they are applied.
-
-* **Theming:** `if()` enables dynamic and sophisticated theming systems. By checking the value of a custom property with `style()`, a component can adjust multiple aspects of its appearance (e.g., background, text color, border) based on a single theme flag (like `--theme: dark`). This centralizes theme logic and allows for the creation of derived styles that automatically respond to theme changes.
-
-* **Feature Detection & Progressive Enhancement:** Similar to the `@supports` rule, `if()` can check for browser feature support. Its advantage is providing an inline fallback within a single declaration. This is perfect for progressively enhancing a component. For example, you can use a modern layout mode like `subgrid` if it's supported, and fall back to a simpler, more widely-supported value like `grid` or `block` if it's not, all within the same `display` property.
-
-## Examples
+## Use Cases
### 1. Simple Media Query
@@ -74,17 +85,33 @@ A common use case is to switch a value based on a media query.
### 2. Feature Support
-Conditionally apply a value based on whether the browser supports a particular CSS feature.
+Conditionally apply a value based on whether the browser supports a particular CSS feature,
+allowing for progressive enhancement.
+For example, using a modern,
+more vibrant color from a wider-gamut color space like Display P3,
+inside of a gradient,
+and falling back to a standard sRGB color if P3 is not supported.
+Without `if()`,
+the author would have to repeat the entire `linear-gradient()` expression.
```css
-.card {
- display: if(supports(display: grid): grid; else: block);
+.highlight {
+ background-image: linear-gradient(
+ to right,
+ hsl(50 100% 50%),
+ if(
+ supports(color: color(display-p3 0 0 0)): color(display-p3 1 0.5 0);
+ else: hsl(30 100% 50%)
+ )
+ );
}
```
### 3. Theming with Custom Properties
-The `if()` function is particularly powerful for creating themes. Here, we use `style()` to check the value of a `--theme` custom property inherited from an ancestor and adjust colors accordingly.
+The `if()` function is particularly powerful for creating themes.
+Here, we use `style()` to check the value of a `--theme` custom property inherited from an ancestor
+and adjust colors accordingly.
```css
/* On a parent element, you might have: --theme: dark; */
@@ -108,16 +135,18 @@ The `if()` function is particularly powerful for creating themes. Here, we use `
### 4. Combining Conditions with `and`
-Conditions can be combined with boolean keywords like `and`, `or`, and `not`. This allows for more complex logic, such as applying a style only when multiple conditions are met.
+Conditions can be combined with boolean keywords like `and`, `or`, and `not`.
+This allows for more complex logic,
+such as applying a style only when multiple conditions are met.
```css
.widget {
--base-size: 2rem;
--enhanced-size: 3rem;
- /* Use the enhanced size only on wide screens that also support subgrid */
+ /* Use the enhanced size only on wide screens that also support flexbox */
font-size: if(
- media(width >= 1024px) and supports(display: subgrid): var(--enhanced-size);
+ media(width >= 1024px) and supports(display: flex): var(--enhanced-size);
else: var(--base-size)
);
}
@@ -125,7 +154,11 @@ Conditions can be combined with boolean keywords like `and`, `or`, and `not`. Th
## Fallback Behavior
-If no condition in an `if()` function evaluates to true and no `else` branch is provided, the function resolves to an empty token stream. This makes the declaration invalid at computed-value time, causing the property to fall back to its inherited or initial value (behaving like `unset`).
+If no condition in an `if()` function evaluates to true
+and no `else` branch is provided,
+the function resolves to a `` value.
+This makes the declaration invalid at computed-value time,
+causing the property to fall back to its inherited or initial value (behaving like `unset`).
```css
.box {
@@ -136,6 +169,18 @@ If no condition in an `if()` function evaluates to true and no `else` branch is
To ensure predictable behavior, it is recommended to always provide an `else` branch.
+## Stakeholder Feedback
+
+This proposal has been discussed in the CSS Working Group,
+and feedback from browser vendors and web developers has been positive.
+Currently, `media()`, `supports()`, and `style()` queries are supported,
+but there are possibilities for expansion in the future.
+
## Security and Privacy Considerations
-The `if()` function itself does not introduce new security or privacy concerns. It provides a new syntax for expressing conditional logic but relies on existing mechanisms (`media()`, `supports()`, `style()`) that have their own, already-defined security profiles. It does not introduce any new capabilities that could be used to fingerprint users or exfiltrate data.
\ No newline at end of file
+The `if()` function itself does not introduce new security or privacy concerns.
+It provides a new syntax for expressing conditional logic
+but relies on existing mechanisms (`media()`, `supports()`, `style()`)
+that have their own, already-defined security profiles.
+It does not introduce any new capabilities
+that could be used to fingerprint users or exfiltrate data.
From 2f1038178433c298de9d61c6ec1922f9f736e7df Mon Sep 17 00:00:00 2001
From: Chris Rebert
Date: Wed, 15 Jan 2025 13:43:35 -0800
Subject: [PATCH 055/124] [css-flexbox-1] Gloss in-flow/out-of-flow jargon
---
css-flexbox-1/Overview.bs | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/css-flexbox-1/Overview.bs b/css-flexbox-1/Overview.bs
index e666f201b21..3b41441bf54 100644
--- a/css-flexbox-1/Overview.bs
+++ b/css-flexbox-1/Overview.bs
@@ -786,7 +786,7 @@ Flex Containers: the ''flex'' and ''inline-flex'' 'display' values
In particular:
* 'float' and 'clear' do not create floating or clearance of flex item,
- and do not take it out-of-flow.
+ and do not take it out-of-flow.
* 'vertical-align' has no effect on a flex item.
* the ''::first-line'' and ''::first-letter'' pseudo-elements do not apply to flex containers,
and flex containers do not contribute a first formatted line or first letter
@@ -838,9 +838,9 @@ Flex Containers: the ''flex'' and ''inline-flex'' 'display' values
Flex Items
Loosely speaking, the flex items of a flex container
- are boxes representing its in-flow contents.
+ are boxes representing its in-flow contents.
- Each in-flow child of a flex container
+ Each in-flow child of a flex container
becomes a flex item,
and each child text sequence
is wrapped in an anonymousblock containerflex item.
@@ -979,7 +979,7 @@ Flex Items
Absolutely-Positioned Flex Children
- As it is out-of-flow,
+ As it is out-of-flow,
an absolutely-positioned child of a flex container does not participate in flex layout.
The [=cross-axis=] edges of the [=static-position rectangle=]
@@ -4777,7 +4777,7 @@ Sample Flex Fragmentation Algorithm
a flex container with ''justify-content:start''
and no flexible items
should paginate identically to
- a block with in-flow children with same content,
+ a block with in-flow children with same content,
same used size and same used margins.
- For the purposes of these rules, out-of-flow elements are represented as inline elements of zero width and height.
+ For the purposes of these rules, out-of-flow elements are represented as inline elements of zero width and height.
Their containing blocks are chosen accordingly.
The following steps are performed in three stages:
@@ -1966,7 +1966,7 @@ spec:css-sizing-3; type:property; text:box-sizing
The baseline of a cell is defined as
- the baseline of the first in-flow line box in the cell, or
+ the baseline of the first in-flow line box in the cell, or
the first in-flow table-row in the cell,
whichever comes first.
If there is no such line box or table-row,
@@ -2000,7 +2000,7 @@ spec:css-sizing-3; type:property; text:box-sizing
For the purposes of finding a baseline,
- in-flow boxes with a scrolling mechanisms (see the 'overflow' property)
+ in-flow boxes with a scrolling mechanisms (see the 'overflow' property)
must be considered as if scrolled to their origin position.
@@ -2523,7 +2523,7 @@ With a table-root as containing block
then indicate offsets inwards from the corresponding edges
of this containing block, as normal.
- Absolute positioning occurs after layout of the table and its in-flow contents,
+ Absolute positioning occurs after layout of the table and its in-flow contents,
and does not contribute to the sizing of any table grid tracks
or affect the size/configuration of the table grid in any way.
From 4e685114736f6aab58068ef62689fbeed03ce714 Mon Sep 17 00:00:00 2001
From: Chris Rebert
Date: Fri, 17 Jan 2025 22:11:50 -0800
Subject: [PATCH 057/124] [css-text-decor-3] Gloss in-flow/out-of-flow jargon
---
css-text-decor-3/Overview.bs | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/css-text-decor-3/Overview.bs b/css-text-decor-3/Overview.bs
index f67f98d836e..f7e622f2026 100644
--- a/css-text-decor-3/Overview.bs
+++ b/css-text-decor-3/Overview.bs
@@ -88,10 +88,10 @@ Line Decoration: Underline, Overline, and Strike-Through
When specified on or propagated to a ruby container,
the decorations are propagated only to the ruby base.
For all other box types,
- the decorations are propagated to all in-flow children.
+ the decorations are propagated to all in-flow children.
- Note that text decorations are not propagated to any out-of-flow descendants,
+ Note that text decorations are not propagated to any out-of-flow descendants,
nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
They are also not propagated to inline children of inline boxes,
although the decoration is applied to such boxes.
From b2b9f3343e30ecc7a5a7aa717eb4735194b040ba Mon Sep 17 00:00:00 2001
From: Chris Rebert
Date: Fri, 17 Jan 2025 22:55:49 -0800
Subject: [PATCH 058/124] [css-pseudo-4] Gloss in-flow/out-of-flow jargon
---
css-pseudo-4/Overview.bs | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs
index 316fc66dc55..a6879407cb1 100644
--- a/css-pseudo-4/Overview.bs
+++ b/css-pseudo-4/Overview.bs
@@ -491,12 +491,12 @@ Finding the First-Letter Text
Its [=first-letter text=] is the first such [=inline-level content=]
participating in the [=inline formatting context=]
of its [=originating element=]’s [=first formatted line=],
- if it is not preceded by any other in-flow content
+ if it is not preceded by any other [=in-flow=] content
(such as images or inline tables) on its line.
For this purpose, any [=marker boxes=] are ignored,
- as if they were out-of-flow.
- However, if an element has in-flow ''::before'' or ''::after'' content,
+ as if they were [=out-of-flow=].
+ However, if an element has [=in-flow=] ''::before'' or ''::after'' content,
the [=first-letter text=] is selected from the content of the element
including that generated content.
From 1377915de4fba7df67d388efb68e4dc2d7e075ac Mon Sep 17 00:00:00 2001
From: Chris Lilley
Date: Tue, 28 Oct 2025 11:22:17 -0400
Subject: [PATCH 059/124] [selectors-4][editorial] Split changes according to
which WD they apply to
---
selectors-4/Overview.bs | 20 ++++++++++++--------
1 file changed, 12 insertions(+), 8 deletions(-)
diff --git a/selectors-4/Overview.bs b/selectors-4/Overview.bs
index 7ec3742de3f..90750abd9bb 100644
--- a/selectors-4/Overview.bs
+++ b/selectors-4/Overview.bs
@@ -4408,25 +4408,31 @@ while still preserving as much of the usefulness of '':visited'' as pos
Changes
+
+Changes since the 11 November 2022 Working Draft
+
+ * Marked '':blank'' as at-risk and removed the at-risk status from '':read-write'' and '':has()''
+ * Added '':popover-open'' pseudo-class.
+ (Issue 8637)
+ * Made '':has()'' and the selector argument of '':nth-child()''/'':nth-last-child()''
+ no longer forgiving.
+ (Issue 7676)
+ * Moved the legacy single-colon pseudo-element syntax into the grammar itself.
+ (Issue 8122)
+
Changes since the 7 May 2022 Working Draft
Significant changes since the 7 May 2022 Working Draft:
- * Marked '':blank'' as at-risk and removed the at-risk status from '':read-write'' and '':has()''
* Added '':open'' pseudo-class.
(Issue 7319,
Issue 11039)
- * Added '':popover-open'' pseudo-class.
- (Issue 8637)
* Disallowed [=pseudo-elements=] from '':has()'' unless explicitly allowed
by the pseudo-element’s definition.
(Issue 7463)
* Disallowed nesting of '':has()''.
(Issue 7344)
- * Made '':has()'' and the selector argument of '':nth-child()''/'':nth-last-child()''
- no longer forgiving.
- (Issue 7676)
* Defined matching of ''::lang("")'' and of elements not tagged with a language.
(Issue 6915)
* Untangled the concepts of "scoped" and "relative" selectors completely.
@@ -4438,8 +4444,6 @@ Changes since the 7 May 2022 Working Draft
(Issue 3760)
* Defined '':-webkit-autofill'' [=legacy selector alias=].
(Issue 7474)
- * Moved the legacy single-colon pseudo-element syntax into the grammar itself.
- (Issue 8122)
Changes since the 21 November 2018 Working Draft
From ea34f77c9ff58de4b4d12755aa6e6d9f1cadd819 Mon Sep 17 00:00:00 2001
From: Chris Lilley
Date: Tue, 28 Oct 2025 11:24:45 -0400
Subject: [PATCH 060/124] [selectors-4][editorial] Link most recent WD
---
selectors-4/Overview.bs | 2 ++
1 file changed, 2 insertions(+)
diff --git a/selectors-4/Overview.bs b/selectors-4/Overview.bs
index 90750abd9bb..627662996c0 100644
--- a/selectors-4/Overview.bs
+++ b/selectors-4/Overview.bs
@@ -4411,6 +4411,8 @@ Changes
Changes since the 11 November 2022 Working Draft
+ Significant changes since the 11 November 2022 Working Draft:
+
* Marked '':blank'' as at-risk and removed the at-risk status from '':read-write'' and '':has()''
* Added '':popover-open'' pseudo-class.
(Issue 8637)
From ea30f326bd9e7fea226da938bccb1420fe516efb Mon Sep 17 00:00:00 2001
From: andruud
Date: Tue, 21 Oct 2025 09:50:57 +0200
Subject: [PATCH 061/124] [css-nesting-1] Fix warning about multiple elements
with the same ID
`WARNING: Multiple elements have the same id 'nested-declarations-rule'`
---
css-nesting-1/Overview.bs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/css-nesting-1/Overview.bs b/css-nesting-1/Overview.bs
index 22537b61004..352d99df07c 100644
--- a/css-nesting-1/Overview.bs
+++ b/css-nesting-1/Overview.bs
@@ -1108,7 +1108,7 @@ Nesting Selector: the ''&'' selector {#nest-selector}
█▌ ▐▌ █████▌ ███▌ █▌ █████▌ ████▌ ████▌ █████▌ ███▌ █████
-->
-
+
The Nested Declarations Rule
For somewhat-technical reasons,
From 4f6d84692ac15bf1cef519addfcd4b0638675c15 Mon Sep 17 00:00:00 2001
From: Munira
Date: Tue, 28 Oct 2025 18:35:29 +0300
Subject: [PATCH 062/124] Include panning with and without momentum in relative
scrolls (#13022)
---
css-scroll-snap-1/Overview.bs | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/css-scroll-snap-1/Overview.bs b/css-scroll-snap-1/Overview.bs
index dd7a73062eb..9e68ddec10d 100644
--- a/css-scroll-snap-1/Overview.bs
+++ b/css-scroll-snap-1/Overview.bs
@@ -993,8 +993,6 @@ Types of Scrolling Methods {#scroll-types}
Common examples of [=absolute scrolls=] include:
- * a panning gesture,
- released without momentum
* manipulating the scrollbar “thumb” explicitly
* programmatically scrolling via APIs such as {{Window/scrollTo()}}
* tabbing through the document’s focusable elements
@@ -1020,6 +1018,8 @@ Types of Scrolling Methods {#scroll-types}
Common examples of [=relative scrolls=] with both an intended direction and end position include:
* a “fling” gesture, interpreted with momentum
+ * a panning gesture,
+ released with or without momentum
* programmatically scrolling via APIs such as {{Window/scrollBy()}}
* paging operations such as the PgUp/PgDn keys (or equivalent operations on the scrollbar)
From d6bcca1bcad97640082ebbfcf0cd843ff970cae5 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner
Date: Tue, 21 Oct 2025 00:42:18 +0200
Subject: [PATCH 063/124] [selectors-4][editorial] Added WPTs
---
selectors-4/Overview.bs | 1021 ++++++++++++++++++++++++++++++++++++++-
1 file changed, 1014 insertions(+), 7 deletions(-)
diff --git a/selectors-4/Overview.bs b/selectors-4/Overview.bs
index 627662996c0..02d714508d3 100644
--- a/selectors-4/Overview.bs
+++ b/selectors-4/Overview.bs
@@ -29,6 +29,8 @@ At Risk: the '':blank'' pseudo-class
Ignored Terms: function token, Document, DocumentFragment, math, h1, shadow tree, querySelector(), quirks mode, button, a, span, object, p, div, q, area, link, label, input, html, em, li, ol, pre, CSS Value Definition Syntax
Ignored Vars: identifier, i
Ignore MDN Failure: #the-target-within-pseudo
+WPT Path Prefix: css/selectors/
+WPT Display: closed
spec:css-values-4; type:dfn; text:identifier
@@ -58,6 +60,8 @@ Introduction
This section is not normative.
+
+
A selector is a boolean predicate
that takes an element in a tree structure
and tests whether the element matches the selector or not.
@@ -88,6 +92,8 @@ Introduction
+
+ featureless-001.html
+ featureless-002.html
+ featureless-003.html
+ featureless-004.html
+ featureless-005.html
+
+
While individual elements may lack any of the above features,
some elements are featureless.
A featureless element does not match any selector at all,
@@ -770,7 +1086,6 @@ Relative Selectors
and lists of them by <>.
-
+
+ attribute-selectors/attribute-case/cssom.html
+ attribute-selectors/attribute-case/semantics.html
+ attribute-selectors/attribute-case/syntax.html
+
+
By default case-sensitivity of attribute names and values in selectors
depends on the document language.
@@ -1738,6 +2239,10 @@ Case-sensitivity
Attribute selectors and namespaces
+
+ selectors-namespace-001.xml
+
+
The attribute name in an attribute selector is given as a
[=CSS qualified name=]: a namespace prefix that has been previously [=declared=]
may be prepended to the attribute name separated by the namespace
@@ -1777,6 +2282,7 @@ Attribute selectors and namespaces
in a namespace.
+
Default attribute values in DTDs
@@ -1836,9 +2342,15 @@ Default attribute values in DTDs
are overridden in the non-default cases' style rules.
+
Class selectors
+
+ parsing/parse-class.html
+ xml-class-selector.xml
+
+
The class selector is given as a full stop (. U+002E) immediately
followed by an identifier. It represents an element belonging to the
class identified by the identifier, as defined by the document language.
@@ -1907,9 +2419,15 @@ Class selectors
class selectors are otherwise case-sensitive,
only matching class names they are [=identical to=]. [[INFRA]]
+
ID selectors
+
+ historical-xmlid.xht
+ parsing/parse-id.html
+
+
Document languages may contain attributes that are declared to be of type ID.
What makes attributes of type ID special
is that no two such attributes can have the same value in a conformant document,
@@ -1965,12 +2483,40 @@ ID selectors
ID selectors are otherwise case-sensitive,
only matching IDs they are [=identical to=]. [[INFRA]]
+
Linguistic Pseudo-classes
The Directionality Pseudo-class: '':dir()''
+
+ dir-pseudo-in-has.html
+ dir-pseudo-on-bdi-element.html
+ dir-pseudo-on-input-element.html
+ dir-pseudo-update-document-element.html
+ dir-selector-auto-direction-change-001.html
+ dir-selector-auto.html
+ dir-selector-change-001.html
+ dir-selector-change-002.html
+ dir-selector-change-003.html
+ dir-selector-change-004.html
+ dir-selector-ltr-001.html
+ dir-selector-ltr-002.html
+ dir-selector-ltr-003.html
+ dir-selector-querySelector.html
+ dir-selector-rtl-001.html
+ dir-selector-white-space-001.html
+ dir-style-01a.html
+ dir-style-01b.html
+ dir-style-02a.html
+ dir-style-02b.html
+ dir-style-03a.html
+ dir-style-03b.html
+ dir-style-04.html
+ invalidation/part-dir.html
+
+
The :dir() pseudo-class allows the author to write
selectors that represent an element based on its directionality
as determined by the document language.
@@ -2007,9 +2553,85 @@ The Directionality Pseudo-class: '':dir()''
'':dir(ltr)'' or '':dir(rtl)'' depending on the resolved
directionality of the elements as determined by its contents. [[HTML5]]
+
+
+ invalidation/any-link-attribute-removal.html
+ invalidation/any-link-pseudo.html
+
+
The :any-link pseudo-class represents an element
that acts as the source anchor of a hyperlink.
For example, in [[HTML5]],
@@ -2133,6 +2760,17 @@ The Hyperlink Pseudo-class: '':any-link''
The Link History Pseudo-classes: '':link'' and '':visited''
+
+ scope-selector.html
+ scope-without-scoping.html
+
+
In some contexts, selectors are matched
with respect to one or more [=scoping roots=],
such as when calling the {{Element/querySelector()}} method in [[DOM]].
@@ -2309,6 +2952,7 @@ The Reference Element Pseudo-class: '':scope''
as the document fragment itself can't be the [=subject of the selector=].
+
User Action Pseudo-classes
@@ -2350,6 +2994,12 @@ User Action Pseudo-classes
The Pointer Hover Pseudo-class: '':hover''
+
+ hover-001-manual.html
+ hover-002.html
+ remove-hovered-element.html
+
+
The :hover pseudo-class applies
while the user designates an element (or pseudo-element)
with a pointing device,
@@ -2375,6 +3025,7 @@ The Pointer Hover Pseudo-class: '':hover''
it is possible for '':hover'' to apply
to an element that is not underneath the pointing device.
+
The Activation Pseudo-class: '':active''
@@ -2403,6 +3054,12 @@ The Activation Pseudo-class: '':active''
The Input Focus Pseudo-class: '':focus''
+
+ focus-display-none-001.html
+ focus-in-focus-event-001.html
+ focus-in-focusin-event-001.html
+
+
The :focus pseudo-class applies
while an element (or pseudo-element) has the focus
(accepts keyboard or other forms of input).
@@ -2424,9 +3081,58 @@ The Input Focus Pseudo-class: '':focus''
See CSSWG issue (CSS)
and WHATWG issue (HTML).
+
The Focus-Indicated Pseudo-class: '':focus-visible''
+
+ focus-visible-001.html
+ focus-visible-002.html
+ focus-visible-003.html
+ focus-visible-004.html
+ focus-visible-005.html
+ focus-visible-006.html
+ focus-visible-007.html
+ focus-visible-008.html
+ focus-visible-009.html
+ focus-visible-010.html
+ focus-visible-011.html
+ focus-visible-012.html
+ focus-visible-013.html
+ focus-visible-014.html
+ focus-visible-015.html
+ focus-visible-016.html
+ focus-visible-017-2.html
+ focus-visible-017.html
+ focus-visible-018-2.html
+ focus-visible-018.html
+ focus-visible-019.html
+ focus-visible-020.html
+ focus-visible-021.html
+ focus-visible-023.html
+ focus-visible-024.html
+ focus-visible-025.html
+ focus-visible-026.html
+ focus-visible-027.html
+ focus-visible-028.html
+ focus-visible-script-focus-001.html
+ focus-visible-script-focus-004.html
+ focus-visible-script-focus-005.html
+ focus-visible-script-focus-008-b.html
+ focus-visible-script-focus-008.html
+ focus-visible-script-focus-009.html
+ focus-visible-script-focus-010.html
+ focus-visible-script-focus-011.html
+ focus-visible-script-focus-012.html
+ focus-visible-script-focus-013.html
+ focus-visible-script-focus-014.html
+ focus-visible-script-focus-015.html
+ focus-visible-script-focus-018.html
+ focus-visible-script-focus-019.html
+ focus-visible-script-focus-020.html
+ parsing/parse-focus-visible.html
+
+
While the '':focus'' [=pseudo-class=] always matches the currently-focused element,
UAs only sometimes visibly indicate focus
(such as by drawing a “focus ring”),
@@ -2502,9 +3208,33 @@ The Focus-Indicated Pseudo-class: '':focus-visible''
so that authors using '':focus-visible'' will not also need to disable
the default '':focus'' style.
+
The Focus Container Pseudo-class: '':focus-within''
+
+ focus-within-001.html
+ focus-within-002.html
+ focus-within-003.html
+ focus-within-004.html
+ focus-within-005.html
+ focus-within-006.html
+ focus-within-007.html
+ focus-within-008.html
+ focus-within-009.html
+ focus-within-010.html
+ focus-within-011.html
+ focus-within-012.html
+ focus-within-013.html
+ focus-within-display-none-001.html
+ focus-within-shadow-001.html
+ focus-within-shadow-002.html
+ focus-within-shadow-003.html
+ focus-within-shadow-004.html
+ focus-within-shadow-005.html
+ focus-within-shadow-006.html
+
+
The :focus-within pseudo-class
applies to any element (or pseudo-element)
for which the '':focus'' pseudo-class applies,
@@ -2513,6 +3243,7 @@ The Focus Container Pseudo-class: '':focus-within''
(including non-element nodes, such as text nodes)
matches the conditions for matching '':focus''.
+
The Interest Pseudo-classes: '':interest-source'' and '':interest-target''
@@ -2631,6 +3362,10 @@ Resource State Pseudo-classes
Media Playback State: the '':playing'', '':paused'', and '':seeking'' pseudo-classes
+
+ media/media-playback-state.html
+
+
The :playing pseudo-class represents an element
that is capable of being “played” or “paused”,
when that element is “playing”.
@@ -2653,6 +3388,10 @@ Media Playback State: the '':playing'', '':paused'', and '':seeking'' pseudo-cla
Media Loading State: the '':buffering'' and '':stalled'' pseudo-classes
+
+ media/media-loading-state.html
+
+
The :buffering pseudo-class represents an element
that is capable of being “played” or “paused”,
when that element cannot continue playing
@@ -2673,9 +3412,14 @@ Media Loading State: the '':buffering'' and '':stalled'' pseudo-classes
Whenever '':stalled'' matches an element,
'':playing'' also matches the element.)
+
Sound State: the '':muted'' and '':volume-locked'' pseudo-classes
+
+ media/sound-state.html
+
+
The :muted pseudo-class represents
an element that is capable of making sound,
but is currently “muted“ (forced silent).
@@ -2689,12 +3433,20 @@ Sound State: the '':muted'' and '':volume-locked'' pseudo-classes
(For the <{audio}> and <{video}> elements of HTML,
see the algorithm for setting the element's [=HTMLMediaElement/effective media volume=]. [[HTML]])
+
Element Display State Pseudo-classes
Collapse State: the '':open'' pseudo-class
+
+ open-pseudo.html
+ selectors-4/details-open-pseudo-001.html
+ selectors-4/details-open-pseudo-002.html
+ selectors-4/details-open-pseudo-003.html
+
+
The :open pseudo-class represents an element
that has both “open” and “closed” states,
and which is currently in the “open” state.
@@ -2714,9 +3466,14 @@ Collapse State: the '':open'' pseudo-class
Note: A ":closed" pseudo-class might be added in the future
once the full set of things that support '':open'' is known.
+
Popover State: the '':popover-open'' pseudo-class
+
+ popover-open-with-has-sibling-selector.html
+
+
The :popover-open pseudo-class represents an element
that has both “popover-showing” and “popover-hidden” states
and which is currently in the “popover-showing” state.
@@ -2731,9 +3488,14 @@ Popover State: the '':popover-open'' pseudo-class
but is exemplified by the presence of the HTML <{html-global/popover}> attribute
and the associated popover visibility state.
+
Modal (Exclusive Interaction) State: the '':modal'' pseudo-class
+
+ modal-pseudo-class.html
+
+
The :modal pseudo-class represents
an element which is in a state that excludes all interaction
with elements outside it until it has been dismissed.
@@ -2748,6 +3510,7 @@ Modal (Exclusive Interaction) State: the '':modal'' pseudo-class
since this prevents interaction with the rest of the page.
+
Fullscreen Presentation State: the '':fullscreen'' pseudo-class
@@ -2756,6 +3519,7 @@ Fullscreen Presentation State: the '':fullscreen'' pseudo-class
takes up most (usually all) of the screen,
such as that defined by the Fullscreen API. [[FULLSCREEN]]
+
Picture-in-Picture Presentation State: the '':picture-in-picture'' pseudo-class
@@ -2766,18 +3530,25 @@ Picture-in-Picture Presentation State: the '':picture-in-picture'' pseudo-class<
while being displayed over other content,
for example when using the Picture-in-Picture API. [[picture-in-picture]]
+
The Input Pseudo-classes
The pseudo-classes in this section mostly apply to elements that take user input,
such as HTML's input element.
+
Input Control States
The '':enabled'' and '':disabled'' Pseudo-classes
+
+ invalidation/enabled-disabled.html
+ pseudo-enabled-disabled.html
+
+
The :enabled pseudo-class represents
user interface elements that are in an enabled state;
such elements must have a corresponding disabled state.
@@ -2801,6 +3572,11 @@ The '':enabled'' and '':disabled'' Pseudo-classes
The Mutability Pseudo-classes: '':read-only'' and '':read-write''
+
+ selector-read-write-type-change-001.html
+ selector-read-write-type-change-002.html
+
+
An element matches :read-write if it is user-alterable,
as defined by the document language.
Otherwise, it is :read-only.
@@ -2811,6 +3587,15 @@ The Mutability Pseudo-classes: '':read-only'' and '':read-write''
The Placeholder-shown Pseudo-class: '':placeholder-shown''
+
+ invalidation/placeholder-shown.html
+ placeholder-shown.html
+ selector-placeholder-shown-emptify-placeholder.html
+ selector-placeholder-shown-type-change-001.html
+ selector-placeholder-shown-type-change-002.html
+ selector-placeholder-shown-type-change-003.html
+
+
Input elements can sometimes show placeholder text
as a hint to the user on what to type in.
See, for example, the placeholder attribute in [[HTML5]].
@@ -2849,6 +3634,7 @@ The Default-option Pseudo-class: '':default''
the initially-selected <option>(s) in a <select>,
and a few other elements.
+
Input Value States
@@ -2981,6 +3767,12 @@ The Range Pseudo-classes: '':in-range'' and '':out-of-range''
The Optionality Pseudo-classes: '':required'' and '':optional''
+
+ selector-required-type-change-001.html
+ selector-required-type-change-002.html
+ selector-required.html
+
+
A form element is :required or
:optional
if a value for it is, respectively, required or optional before the
@@ -2990,6 +3782,14 @@ The Optionality Pseudo-classes: '':required'' and '':optional''
The User-interaction Pseudo-classes: '':user-valid'' and '':user-invalid''
+
+ invalidation/user-valid-user-invalid.html
+ user-invalid-form-submission-invalidation.html
+ user-invalid.html
+ user-valid.html
+ valid-invalid-form-fieldset.html
+
+
The :user-invalid
and the :user-valid pseudo-classes
represent an element with incorrect or correct input, respectively,
@@ -3037,9 +3837,14 @@ The User-interaction Pseudo-classes: '':user-valid'' and '':user-invalid''
+
Tree-Structural pseudo-classes
+
+ selector-structural-pseudo-root.html
+
+
Selectors introduces the concept of structural pseudo-classes
to permit selection based on extra information that lies in
the document tree but cannot be represented by other simple selectors or
@@ -3057,6 +3862,10 @@ Tree-Structural pseudo-classes
'':root'' pseudo-class
+
+ root-siblings.html
+
+
The :root pseudo-class represents an element that is
the root of the document.
@@ -3065,9 +3874,14 @@ Tree-Structural pseudo-classes
In HTML, this will be the <{html}> element
(unless scripting has been used to modify the document).
+
'':empty'' pseudo-class
+
+ selectors-empty-001.xml
+
+
The :empty pseudo-class represents
an element that has no children
except, optionally, document white space characters.
@@ -3112,9 +3926,87 @@ Tree-Structural pseudo-classes
elements which authors perceive of as empty
can be selected by this selector, as they expect.
+
+
+ nth-of-invalid.html
+ invalidation/crashtests/nth-child-of-attribute-crash.html
+ invalidation/nth-of-namespace-class-invalidation-crash.html
+
+
The :nth-child(An+B [of S]? )
pseudo-class notation represents elements that
are among An+Bth elements
@@ -3255,6 +4153,11 @@ Child-indexed Pseudo-classes
'':first-child'' pseudo-class
+
+ first-child.html
+ invalidation/first-child-last-child.html
+
+
The :first-child pseudo-class
represents an element that is first among its inclusive siblings.
Same as '':nth-child(1)''.
@@ -3297,6 +4200,10 @@ Child-indexed Pseudo-classes
'':last-child'' pseudo-class
+
+ last-child.html
+
+
The :last-child pseudo-class
represents an element that is last among its inclusive siblings.
Same as '':nth-last-child(1)''.
@@ -3312,6 +4219,10 @@ Child-indexed Pseudo-classes
'':only-child'' pseudo-class
+
+ only-child.html
+
+
The :only-child pseudo-class
represents an element that has no siblings.
Same as '':first-child:last-child''
@@ -3322,6 +4233,10 @@ Child-indexed Pseudo-classes
Typed Child-indexed Pseudo-classes
+
+ nth-of-type-namespace.html
+
+
The pseudo-classes in this section are similar to the Child Index Pseudo-classes,
but they resolve based on an element's index among elements of the same type (tag name) in their sibling list.
@@ -3351,10 +4266,13 @@ Typed Child-indexed Pseudo-classes
That is, ''img:nth-of-type(2)''
is equivalent to ''*:nth-child(2 of img)''.
-
'':nth-last-of-type()'' pseudo-class
+
+ last-of-type.html
+
+
The :nth-last-of-type(An+B) pseudo-class notation
represents the same elements that would be matched by '':nth-last-child(|An+B| of |S|)'',
where |S| is a [=type selector=] and namespace prefix matching the element in question.
@@ -3380,6 +4298,17 @@ Typed Child-indexed Pseudo-classes
'':first-of-type'' pseudo-class
+
+ first-of-type.html
+ invalidation/negated-always-matches-negated-first-of-type-when-ancestor-changes.html
+ invalidation/negated-first-of-type-in-nonsubject-position.html
+ invalidation/negated-is-always-matches-negated-first-of-type-when-ancestor-changes.html
+ invalidation/negated-is-never-matches-negated-first-of-type-when-ancestor-changes.html
+ invalidation/negated-negated-first-of-type-when-ancestor-changes.html
+ invalidation/negated-never-matches-negated-first-of-type-when-ancestor-changes.html
+ of-type-selectors.xhtml
+
+
The :first-of-type pseudo-class
represents the same element as '':nth-of-type(1)''.
@@ -3413,6 +4342,15 @@ Typed Child-indexed Pseudo-classes
'':last-of-type'' pseudo-class
+
+ invalidation/negated-always-matches-negated-last-of-type-when-ancestor-changes.html
+ invalidation/negated-is-always-matches-negated-last-of-type-when-ancestor-changes.html
+ invalidation/negated-is-never-matches-negated-last-of-type-when-ancestor-changes.html
+ invalidation/negated-last-of-type-invalidation.html
+ invalidation/negated-negated-last-of-type-when-ancestor-changes.html
+ invalidation/negated-never-matches-negated-last-of-type-when-ancestor-changes.html
+
+
The :last-of-type pseudo-class
represents the same element as '':nth-last-of-type(1)''.
@@ -3427,6 +4365,10 @@ Typed Child-indexed Pseudo-classes
'':only-of-type'' pseudo-class
+
+ only-of-type.html
+
+
The :only-of-type pseudo-class
represents the same element as '':first-of-type:last-of-type''.
@@ -3437,6 +4379,10 @@ Combinators
Descendant combinator ()
+
+ parsing/parse-descendant.html
+
+
At times, authors may want selectors to describe an element that is
the descendant of another element in the document tree (e.g., "an
em element that is contained within an H1 element").
@@ -3480,9 +4426,14 @@ Descendant combinator ()
div p *[href]
+
Child combinator (>)
+
+ parsing/parse-child.html
+
+
A child combinator describes a childhood relationship
between two elements. A child combinator is made of the
"greater-than sign" (U+003E, >) code point and
@@ -3511,9 +4462,19 @@ Child combinator (>)
For information on selecting the first child of an element,
please see the section on the '':first-child'' pseudo-class above.
+
Next-sibling combinator (+)
+
+ invalidation/insert-sibling-001.html
+ invalidation/insert-sibling-002.html
+ invalidation/insert-sibling-003.html
+ invalidation/insert-sibling-004.html
+ invalidation/sibling.html
+ parsing/parse-sibling.html
+
+
The next-sibling combinator is made of the “plus sign”
(U+002B, +) code point that separates two
compound selectors.
@@ -3580,6 +4541,7 @@ Grid-Structural Selectors
are defined.
In a column-primary format, these pseudo-classes match against row associations instead.
+
Column combinator (||)
@@ -3613,6 +4575,7 @@ Column combinator (||)
+
'':nth-col()'' pseudo-class
@@ -3629,7 +4592,6 @@ Column combinator (||)
The CSS Syntax Module [[!CSS3SYN]] defines the An+B notation.
-
'':nth-last-col()'' pseudo-class
@@ -3645,6 +4607,7 @@ Column combinator (||)
The CSS Syntax Module [[!CSS3SYN]] defines the An+B notation.
+
Calculating a selector's specificity
@@ -3747,9 +4710,14 @@ Calculating a selector's specificity
specified in an HTML style attribute
is described in CSS Style Attributes. [[CSSSTYLEATTR]]
+
Grammar
+
+ selectors-attr-white-space-001.html
+
+
Selectors are [=CSS/parsed=] according to the following grammar:
@@ -3863,6 +4831,7 @@ Grammar
be written with only a single ":" character at their front,
making them resemble a <>.
+
@@ -141,6 +143,10 @@ Exposing custom state: the '':state()'' pseudo-class
whose [=states set=] contains a string
that [=string/is=] the selector's argument's value.
+
+ parsing/parse-state.html
+
+
@@ -201,6 +207,11 @@ Heading Structures: the heading pseudo-classes '':heading'', and '':heading()''<
type selector. Thus, a selector ''h1:heading(3)'' matches any
''h1'' tag which has an exposed heading level of 3.
+
+ heading.html
+ parsing/parse-heading.html
+
+
Combinators
From 7b8747365329ad61e34abd0211fd4eaa15b87490 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner
Date: Tue, 28 Oct 2025 21:45:34 +0100
Subject: [PATCH 068/124] [selectors-5][editorial] Marked as delta spec
---
selectors-5/Overview.bs | 1 +
1 file changed, 1 insertion(+)
diff --git a/selectors-5/Overview.bs b/selectors-5/Overview.bs
index 46f7e9cbbe9..036ed686b07 100644
--- a/selectors-5/Overview.bs
+++ b/selectors-5/Overview.bs
@@ -4,6 +4,7 @@ Group: CSSWG
Shortname: selectors
Level: 5
Status: ED
+!Delta Spec: yes
Work Status: Exploring
ED: https://drafts.csswg.org/selectors-5/
TR: https://www.w3.org/TR/selectors-5/
From 843313d1470211627af8d0451243caaae95f6101 Mon Sep 17 00:00:00 2001
From: Chris Rebert
Date: Wed, 15 Jan 2025 14:15:38 -0800
Subject: [PATCH 069/124] [css-align-3] Gloss in-flow/out-of-flow jargon
---
css-align-3/Overview.bs | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/css-align-3/Overview.bs b/css-align-3/Overview.bs
index d565c21017f..db84332e038 100644
--- a/css-align-3/Overview.bs
+++ b/css-align-3/Overview.bs
@@ -2252,8 +2252,8 @@ Determining the Baselines of a Box
block containers
The first/last [=baseline set=] of a block container
- is taken from the first/last in-flow line box in the block container
- or the first/last in-flow block-level child in the block container
+ is taken from the first/last [=in-flow=] line box in the block container
+ or the first/last [=in-flow=] block-level child in the block container
that contributes a set of first/last baselines,
whichever comes first/last.
If there is no such line box or child,
@@ -2349,7 +2349,7 @@ Determining the Baselines of a Box
and ''vertical-rl'' if 'direction' is ''rtl''.
For the purposes of finding the baselines of a box,
- it and all its in-flow descendants with a scrolling mechanism (see the 'overflow' property)
+ it and all its [=in-flow=] descendants with a scrolling mechanism (see the 'overflow' property)
must be considered as if scrolled to their initial scroll position.
Additionally,
if the position of a [=scroll container=]’s first/last baseline
From 4ffbd11c04e85f725ae2c7deca35846f528eeea5 Mon Sep 17 00:00:00 2001
From: Chris Rebert
Date: Tue, 28 Oct 2025 14:13:08 -0700
Subject: [PATCH 070/124] [css-inline-3][editorial] Hyperlink instance of
"in-flow" jargon
---
css-inline-3/Overview.bs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/css-inline-3/Overview.bs b/css-inline-3/Overview.bs
index 09b50fa9f98..3f9fccba981 100644
--- a/css-inline-3/Overview.bs
+++ b/css-inline-3/Overview.bs
@@ -2837,7 +2837,7 @@ Interaction with Fragmentation (Pagination)
for the purpose of block-axis fragmentation
(breaking across pages, columns, regions, etc.).
Additionally,
- breaks between the in-flow lines alongside an initial letter box
+ breaks between the in-flow lines alongside an initial letter box
are avoided,
much as breaks between line boxes affected be 'widows' and 'orphans'
are avoided.
From 826179342a4a729b28734e855ce327633de8ef59 Mon Sep 17 00:00:00 2001
From: Chris Rebert
Date: Tue, 28 Oct 2025 12:09:24 -0700
Subject: [PATCH 071/124] [css-overflow-3] Gloss in-flow/out-of-flow jargon
---
css-overflow-3/Overview.bs | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/css-overflow-3/Overview.bs b/css-overflow-3/Overview.bs
index 02e31869d1d..b5fc7205cfb 100644
--- a/css-overflow-3/Overview.bs
+++ b/css-overflow-3/Overview.bs
@@ -277,11 +277,11 @@ Scrollable Overflow
within the [=scrollable overflow rectangle=],
the box’s own padding
so that when its content is scrolled to its end,
- there is padding between the edge of its in-flow (or floated) content
+ there is padding between the edge of its [=in-flow=] (or floated) content
and the border edge of the box.
It typically ends up being exactly the same size as the box's own padding,
except in a few cases--
- such as when an out-of-flow positioned element,
+ such as when an [=out-of-flow=] positioned element,
or the visible overflow of a descendent,
has already increased the size of the [=scrollable overflow rectangle=]
outside the conceptual “content edge” of the [=scroll container=]’s content.
From adae408d8b3cd762a9ef79445e651d2e7cb0227f Mon Sep 17 00:00:00 2001
From: Chris Rebert
Date: Tue, 28 Oct 2025 14:34:16 -0700
Subject: [PATCH 072/124] [css-backgrounds-4][editorial] Gloss in-flow jargon
---
css-backgrounds-4/Overview.bs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/css-backgrounds-4/Overview.bs b/css-backgrounds-4/Overview.bs
index 735dbeb1bfb..e531fa07a8b 100644
--- a/css-backgrounds-4/Overview.bs
+++ b/css-backgrounds-4/Overview.bs
@@ -1035,7 +1035,7 @@ Painting Area: the 'background-clip' property
The background is painted within (clipped to)
the intersection of the border box
- and the geometry of the text in the element and its in-flow and floated descendants.
+ and the geometry of the text in the element and its [=in-flow=] and floated descendants.
border-area
From 24f6a8e972ff5c6bd45a827ad26e28304245e06c Mon Sep 17 00:00:00 2001
From: Chris Rebert
Date: Wed, 29 Oct 2025 00:05:19 -0700
Subject: [PATCH 073/124] [css-page-floats-3][editorial] Gloss out-of-flow
jargon (#13032)
---
css-page-floats-3/Overview.bs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/css-page-floats-3/Overview.bs b/css-page-floats-3/Overview.bs
index 454743b8845..d4af66b13a8 100644
--- a/css-page-floats-3/Overview.bs
+++ b/css-page-floats-3/Overview.bs
@@ -994,7 +994,7 @@ Differences between inline floats and absolutely positioned elements
This section is not normative.
- Inline floats and absolutely positioned elements are both out-of-flow elements.
+ Inline floats and absolutely positioned elements are both out-of-flow elements.
Absolutely positioned elements that are also exclusions can imitate many of
the features of floats.
From a735b158dcc3667ad01ffbbf79a015d1a4413f35 Mon Sep 17 00:00:00 2001
From: Chris Rebert
Date: Wed, 29 Oct 2025 00:06:36 -0700
Subject: [PATCH 074/124] [css-text-4][editorial] Gloss out-of-flow jargon
(#13030)
---
css-text-4/Overview.bs | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/css-text-4/Overview.bs b/css-text-4/Overview.bs
index 12c476187ce..f7b418cf494 100644
--- a/css-text-4/Overview.bs
+++ b/css-text-4/Overview.bs
@@ -7950,7 +7950,7 @@ Hyphenation Control: the 'hyphens' property
For the purpose of the 'hyphens' property,
what constitutes a “word” is UA-dependent.
However, inline element boundaries
- and out-of-flow elements
+ and [=out-of-flow=] elements
must be ignored when determining word boundaries.
@@ -13189,7 +13189,7 @@ Word and Phrase Detection
Inline box boundaries
- and out-of-flow elements must be ignored
+ and [=out-of-flow=] elements must be ignored
when determining word or phrase boundaries.
However,
if a [=word boundary|word=] or [=phrase boundary=] is found at the same position as
From 3cf6a36d1b188f7454755b90f6adde625141617c Mon Sep 17 00:00:00 2001
From: Chris Lilley
Date: Wed, 29 Oct 2025 17:28:32 -0400
Subject: [PATCH 075/124] [css-color-hdr] Remove mention of SMPTE-ST-2094-50
as justification for eps #12873 #11788
---
css-color-hdr-1/Overview.bs | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/css-color-hdr-1/Overview.bs b/css-color-hdr-1/Overview.bs
index e3b63c8fc41..0888c8a21d3 100644
--- a/css-color-hdr-1/Overview.bs
+++ b/css-color-hdr-1/Overview.bs
@@ -652,8 +652,7 @@ Mixing Dynamic Range Limits: the ''dynamic-range-limit-mix()'' function {#dynami
Let cxyz[i] = pow(c1xyz[i] + eps, w1 ) * pow(c2xyz[i] + eps, w2 ) - eps
Note: The factor eps is to prevent division by zero,
- and the value is chosen to match that used in
- [[SMPTE-ST-2094-50]].
+ and is particularly important when interpolating with SDR colors near to black.
From b50c63b806d292b6513286a0a450b228f6382c23 Mon Sep 17 00:00:00 2001
From: Chris Lilley
Date: Wed, 29 Oct 2025 17:37:14 -0400
Subject: [PATCH 076/124] [css-color-hdr][editorial] Update changes
---
css-color-hdr-1/Overview.bs | 20 +++++++++++++++++++-
1 file changed, 19 insertions(+), 1 deletion(-)
diff --git a/css-color-hdr-1/Overview.bs b/css-color-hdr-1/Overview.bs
index 0888c8a21d3..933a3b55a49 100644
--- a/css-color-hdr-1/Overview.bs
+++ b/css-color-hdr-1/Overview.bs
@@ -1869,10 +1869,28 @@ in a user stylesheet.
+
+
Removed mention of SMPTE-ST-2094-50 as justification for eps
+ (#12873,
+ #11788)
+
+
Noted similarity of hdr-color to adaptive gain curves
From 5accfe688f402d1ffbf1c88b6cd4b4fa1a9da134 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner
Date: Wed, 29 Oct 2025 23:48:39 +0100
Subject: [PATCH 077/124] [css-text-decor-4][editorial] Fixed Bikeshed issues
---
css-text-decor-4/Overview.bs | 184 ++++++++++++++++++++---------------
1 file changed, 107 insertions(+), 77 deletions(-)
diff --git a/css-text-decor-4/Overview.bs b/css-text-decor-4/Overview.bs
index 5795328a390..7a936902d0b 100644
--- a/css-text-decor-4/Overview.bs
+++ b/css-text-decor-4/Overview.bs
@@ -15,10 +15,11 @@ Abstract: This module contains the features of CSS relating to text decoration,
+spec:css-backgrounds-3; type:property; text:box-shadow
spec:css-text-3; type:dfn; text:character
spec:fill-stroke-3; type:property;
- text: fill
- text: stroke
+ text: fill
+ text: stroke
@@ -153,7 +154,10 @@ Line Decoration: Underline, Overline, and Strike-Through
which the underline is propagated. The final line of text is fuchsia,
but the underline underneath it is still the blue underline from the
anonymous inline element.
-
+
This diagram shows the boxes involved in the example above. The
rounded aqua line represents the anonymous inline element wrapping
the inline contents of the paragraph element, the rounded blue line
@@ -167,7 +171,7 @@ Line Decoration: Underline, Overline, and Strike-Through
span { font-size: 20px; vertical-align: top; text-shadow: green 0px 100px 0px; }
- <div>Help, help! <span>I am under a hat!</span></div>
+ <div>Help, help! <span>I am under a hat!</span></div>
...the <div> is the [=decorating box=] for its underline (in black),
which is rendered uninterrupted through both the <div> and the <span>.
@@ -177,7 +181,10 @@ Line Decoration: Underline, Overline, and Strike-Through
overrides the blue text shadow on the <div>.
As a result, when the shadows are painted,
the shadow of the <div>’s underline is disjoint across the two elements.
-
+
Note: Line decorations are propagated through the box tree,
@@ -202,7 +209,7 @@ Text Decoration Lines: the 'text-decoration-line' property
This property,
which is a sub-property of the 'text-decoration' shorthand,
specifies what line decorations, if any, are added by the element.
- Values other than ''text-decoration-line''
+ Values other than ''text-decoration-line/none''
cause the element to originate the indicated text decorations,
and to apply and propagate it as described [[#line-decoration|above]].
@@ -396,8 +403,8 @@ Determining the Position and Thickness of Line Decorations
The line decoration positions are then calculated
per line
as follows
- (treating over-positioned underlines as over lines
- and under-positioned overlines as under lines):
+ (treating over-positioned underlines as over lines
+ and under-positioned overlines as under lines):
over lines
@@ -465,7 +472,10 @@ Determining the Position and Thickness of Line Decorations
Using the same example, a line-through would in the second fragment,
instead of averaging the two font sizes,
split the line-through into two segments:
-
+
In both cases, however, the superscript, due to the vertical-alignment shift,
has no effect on the position of the line.
@@ -559,11 +569,13 @@ Text Underline Position: the 'text-underline-position' property
+ alt="In a typical Latin font, the underline is positioned slightly
+ below the alphabetic baseline, leaving a gap between the line
+ and the bottom of most Latin letters, but crossing through
+ descenders such as the stem of a 'p'."
+ src="images/underline-position-alphabetic.png"
+ width="231"
+ height="61">
A typical “alphabetic” underline is positioned just below the alphabetic baseline
@@ -585,7 +597,9 @@ Text Underline Position: the 'text-underline-position' property
+ src="images/underline-position-under.png"
+ width="405"
+ height="68">
''text-underline-position: under''
@@ -628,13 +642,17 @@ Text Underline Position: the 'text-underline-position' property
+ src="images/underline-position-left.png"
+ width="40"
+ height="168">
''text-underline-position/left''
@@ -774,10 +792,14 @@ Text Decoration Line Uniformity
+ alt="A single underline drawn under varying font sizes and vertical positions must be a single line."
+ width="125"
+ height="81">
vs.
+ alt="Drawing multiple line segments, each with the position and thickness appropriate to the decorated text, is incorrect."
+ width="120"
+ height="80">
Correct and incorrect rendering of <u>A<sup>B</sup><big>C</big>D</u>
@@ -794,8 +816,8 @@ Text Decoration Line Uniformity
UA consideration of descendant content will therefore result in better typography.
-
-
+
+
Due to the central baseline alignment of vertical text,
a left-side underline on small vertical text will cut through the text
@@ -821,8 +843,10 @@ Text Decoration Line Uniformity
+ alt="An underline for just the superscript 'st' in '1st' is drawn just below the superscript,
+ whereas an underline for the entire text is drawn at the appropriate position for full-size text."
+ width="80"
+ height="38">
Example of underline applied to superscripted text
vs. underline applied to text containing a superscript
+
Altered the border-radius outset adjustment,
+ so the radius reduction factor in the
+ minimum radius percentage of the corner, makes it less pronounced
+ the closer the corner's border-radius gets to 50%.
+ (Issue 7103)
+
+
Fixed syntax of 'box-shadow' to avoid allowing negative blur radii,
+ aligning it with the prose.
+
Cross linked to 'ink overflow' terminology
+
+
Changes since the 14 February 2023 Candidate Recommendation Snapshot
@@ -3687,8 +3703,6 @@ Changes since the 14 February 2023 Candidate Recommendation Snapshot
[=CSS/value definition syntax=].
Fixed the definition for where box shadows apply.
(Issue 9286)
-
Fixed syntax of 'box-shadow' to avoid allowing negative blur radii,
- aligning it with the prose.
From 24679bb9f4df1c58f2ae8ec474c02f4fade7743b Mon Sep 17 00:00:00 2001
From: Chris Lilley
Date: Wed, 5 Nov 2025 14:25:35 -0500
Subject: [PATCH 095/124] [css-backgrounds-3][editorial] link defaults
---
css-backgrounds-3/Overview.bs | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/css-backgrounds-3/Overview.bs b/css-backgrounds-3/Overview.bs
index e0a0739ca2a..2c451d0b7f5 100644
--- a/css-backgrounds-3/Overview.bs
+++ b/css-backgrounds-3/Overview.bs
@@ -36,6 +36,10 @@ spec:css-color-4; type:value; text:transparent
spec:selectors-3; type:selector; text: ::first-letter
spec:selectors-3; type:selector; text: ::first-line
spec:css-values-3; type:type; text:
+spec:html; type:element; text:body
+spec:css-sizing-3; type:dfn; text:size
+spec:css-sizing-3; type:dfn; text:width
+spec:css-sizing-3; type:dfn; text:height
When expanding an [=edge=] that has a [=border radius=], e.g. for computing the [=margin edge=], 'box-shadow' spread, or 'overflow-clip-margin',
@@ -2762,6 +2789,11 @@ Border Images
@@ -3570,6 +3602,10 @@ Shadow Shape, Spread, and Knockout
The 'border-image' does not affect the shape of the box-shadow.
+
+ box-shadow-radius-generated.html
+
+
Blurring Shadow Edges
@@ -4158,4 +4194,7 @@ Changes Since the 17 December 2009 Candidate Recommendation
color-mix-currentcolor-outline-repaint-parent.html
color-mix-currentcolor-outline-repaint.html
first-letter-space-not-selected.html
+ animations/background-color-animation-custom-property.html
+ animations/background-color-animation-custom-timing-function-reverse.html
+ animations/background-color-animation-custom-timing-function.html
From e5af44169bc576a6885faec0b8dffe8c9e05b603 Mon Sep 17 00:00:00 2001
From: Chris Lilley
Date: Wed, 5 Nov 2025 14:52:56 -0500
Subject: [PATCH 097/124] [css-backgrounds-4][editorial] Bert Bos no longer in
CSSWG, moved to former editor
---
css-backgrounds-4/Overview.bs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/css-backgrounds-4/Overview.bs b/css-backgrounds-4/Overview.bs
index db33780f628..5b69bb85dd9 100644
--- a/css-backgrounds-4/Overview.bs
+++ b/css-backgrounds-4/Overview.bs
@@ -6,10 +6,10 @@ Status: ED
Work Status: Exploring
Group: csswg
ED: https://drafts.csswg.org/css-backgrounds-4/
-Editor: Bert Bos, W3C, bert@w3.org, w3cid 3343
Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Lea Verou, Invited Expert, http://lea.verou.me/about/, w3cid 52258
Editor: Sebastian Zartner, Invited Expert, sebastianzartner@gmail.com, w3cid 64937
+Former Editor: Bert Bos, W3C, bert@w3.org, w3cid 3343
Abstract: This module contains the features of CSS relating to the backgrounds of boxes on the page.
Ignored Vars: width of background positioning area, width of background image, height of background positioning area, height of background image, X'
Ignored Terms: total width
From 458ecc15bad8a70c1819c338ff8750aeab8c8c3b Mon Sep 17 00:00:00 2001
From: Sebastian Zartner
Date: Wed, 5 Nov 2025 14:28:23 +0100
Subject: [PATCH 098/124] [css-backgrounds-4][editorial] Removed the "Not Ready
For Implementation" status
---
css-backgrounds-4/Overview.bs | 11 ++++++++++-
1 file changed, 10 insertions(+), 1 deletion(-)
diff --git a/css-backgrounds-4/Overview.bs b/css-backgrounds-4/Overview.bs
index 5b69bb85dd9..839fff93c8b 100644
--- a/css-backgrounds-4/Overview.bs
+++ b/css-backgrounds-4/Overview.bs
@@ -15,7 +15,6 @@ Ignored Vars: width of background positioning area, width of background image, h
Ignored Terms: total width
WPT Path Prefix: css/css-backgrounds/
WPT Display: closed
-Warning: Not Ready
@@ -1637,6 +1636,16 @@ Sizing Images: the 'background-size' property
Background Image Layers: the 'background-tbd' shorthand property
+
+ Not Ready For Implementation
+
+ This section is not yet ready for implementation.
+ It exists in this repository to record the ideas and promote discussion.
+
+ Before attempting to implement anything of this section,
+ please contact the CSSWG at www-style@w3.org.
+
+
Name: background-tbd
Value: <>#
From dd8e1be0b2dec35f3a5d3d8bb44570a92c831643 Mon Sep 17 00:00:00 2001
From: Callum Law
Date: Mon, 15 Sep 2025 21:25:06 +1200
Subject: [PATCH 099/124] [css-text-decor-3] Update text-shadow syntax to
disallow negative blur radius
The first two length values for `text-shadow` (x and y offsets) are allowed to be negative but the third value (blur) is not.
This behaviour is respected in all major browsers and is tested in WPT, see the second test here: http://wpt.live/css/css-text-decor/text-shadow/parsing/text-shadow-invalid.html
---
css-text-decor-3/Overview.bs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/css-text-decor-3/Overview.bs b/css-text-decor-3/Overview.bs
index f7e622f2026..cae11cf23cf 100644
--- a/css-text-decor-3/Overview.bs
+++ b/css-text-decor-3/Overview.bs
@@ -861,7 +861,7 @@ Text Shadows: the 'text-shadow' property
Name: align-items
- Value: normal | stretch | <> | [ <>? <> ]
+ Value: normal | stretch | <> | <>? <>
Initial: normal
Applies to: all elements
Inherited: no
From ca237a6cc0479b8b1546cd14de405208fb5c3b92 Mon Sep 17 00:00:00 2001
From: Chris Rebert
Date: Fri, 17 Jan 2025 22:22:54 -0800
Subject: [PATCH 101/124] [css-display-4] Gloss in-flow/out-of-flow jargon
---
css-display-4/Overview.bs | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/css-display-4/Overview.bs b/css-display-4/Overview.bs
index e45e6a5aa61..f4b3f780698 100644
--- a/css-display-4/Overview.bs
+++ b/css-display-4/Overview.bs
@@ -1176,7 +1176,7 @@ Automatic Box Type Transformations
so that it remains a block container.
* If an [=inline box=] (''inline flow'') is inlinified,
- it recursively inlinifies all of its in-flow children,
+ it recursively inlinifies all of its in-flow children,
so that no block-level descendants
break up the inline formatting context in which it participates.
@@ -2031,7 +2031,7 @@ Run-In Layout
A run-in sequence is a maximal sequence of consecutive sibling run-in boxes
- and intervening white space and/or out-of-flow boxes.
+ and intervening white space and/or out-of-flow boxes.
Note: This statement implies that out-of-flow boxes are reparented
if they are between two run-in boxes.
@@ -2462,7 +2462,7 @@ Appendix A: Glossary
that form an ancestor-descendant chain
through the containing block relation.
For example, an inline box’s containing block is the content box of its closest block container ancestor;
- if that block container is an in-flow block,
+ if that block container is an in-flowblock,
then its containing block is formed by its parent block container;
if that grandparent block container is absolutely positioned,
then its containing block is the padding edges of its closest positioned ancestor (not necessarily its parent),
From 77bb7352591e41216ad2c15e9bcd7d837fbbf418 Mon Sep 17 00:00:00 2001
From: gitspeaks <37540903+gitspeaks@users.noreply.github.com>
Date: Tue, 19 Nov 2024 02:24:10 +0200
Subject: [PATCH 102/124] link to absolute-position containing block
---
css-position-3/Overview.bs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/css-position-3/Overview.bs b/css-position-3/Overview.bs
index 3634d78914d..ae52a1c7ef8 100644
--- a/css-position-3/Overview.bs
+++ b/css-position-3/Overview.bs
@@ -900,7 +900,7 @@ Absolute Positioning Layout Model
as its [=preferred size=] capped by its [=maximum size=] (if any), floored by its [=minimum size=].
See [[#abspos-auto-size]].
Percentages, however,
- are resolved against the original [=containing block=] size.
+ are resolved against the [=absolute-position containing block=] size.
Then, the value of any ''margin/auto'' margins are calculated,
From e18537fbed53c5dac74a41d3f9cb9aae4325382e Mon Sep 17 00:00:00 2001
From: Dmitry Statsenko
Date: Thu, 25 Jul 2024 18:36:04 +0300
Subject: [PATCH 103/124] [css-logical-1] Fix spurious / in
---
css-logical-1/Overview.bs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/css-logical-1/Overview.bs b/css-logical-1/Overview.bs
index 8e12e95f12d..40a9f75e578 100644
--- a/css-logical-1/Overview.bs
+++ b/css-logical-1/Overview.bs
@@ -62,7 +62,7 @@ Introduction
that works across different writing systems:
-
+ Rendering of the below code in a compatible browser
From 3e44ea59eebfe0b103195857c1d4217f71164bf4 Mon Sep 17 00:00:00 2001
From: fantasai
Date: Wed, 5 Nov 2025 16:28:48 -0500
Subject: [PATCH 104/124] [css-anchor-position-1] Fix typos
---
css-position-3/Overview.bs | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/css-position-3/Overview.bs b/css-position-3/Overview.bs
index ae52a1c7ef8..8a05840e01e 100644
--- a/css-position-3/Overview.bs
+++ b/css-position-3/Overview.bs
@@ -1736,8 +1736,7 @@ Acknowledgments
* Defined the [=initial fixed containing block=] and its relationship to the [=initial containing block=],
to give this concept a name.
- See also Previous Changes.
+ See also Previous Changes.
Privacy Considerations
From ccb66ec19e37a98ac26c16f5474f1011c93cb05b Mon Sep 17 00:00:00 2001
From: Chris Rebert
Date: Wed, 5 Nov 2025 14:13:58 -0800
Subject: [PATCH 105/124] [css-display-3][editorial] Gloss in-flow/out-of-flow
jargon
Backports #11524
---
css-display-3/Overview.bs | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/css-display-3/Overview.bs b/css-display-3/Overview.bs
index ac1d1f3edb1..86069fae735 100644
--- a/css-display-3/Overview.bs
+++ b/css-display-3/Overview.bs
@@ -1178,7 +1178,7 @@ Automatic Box Type Transformations
so that it remains a block container.
* If an [=inline box=] (''inline flow'') is inlinified,
- it recursively inlinifies all of its in-flow children,
+ it recursively inlinifies all of its in-flow children,
so that no block-level descendants
break up the inline formatting context in which it participates.
@@ -1712,7 +1712,7 @@ Run-In Layout
A run-in sequence is a maximal sequence of consecutive sibling run-in boxes
- and intervening white space and/or out-of-flow boxes.
+ and intervening white space and/or out-of-flow boxes.
Note: This statement implies that out-of-flow boxes are reparented
if they are between two run-in boxes.
@@ -1913,7 +1913,7 @@ Appendix A: Glossary
that form an ancestor-descendant chain
through the containing block relation.
For example, an inline box’s containing block is the content box of its closest block container ancestor;
- if that block container is an in-flow block,
+ if that block container is an in-flowblock,
then its containing block is formed by its parent block container;
if that grandparent block container is absolutely positioned,
then its containing block is the padding edges of its closest positioned ancestor (not necessarily its parent),
From a0064bea0b4c17dee01afb1c956adf2a9cbf72e5 Mon Sep 17 00:00:00 2001
From: fantasai
Date: Wed, 5 Nov 2025 17:22:48 -0500
Subject: [PATCH 106/124] [css-anchor-position-1] Make anchor-center also use
scrollable containing block #12952
---
css-anchor-position-1/Overview.bs | 53 ++++++++-----------------------
1 file changed, 14 insertions(+), 39 deletions(-)
diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs
index 4811df1639b..6c0bb971862 100644
--- a/css-anchor-position-1/Overview.bs
+++ b/css-anchor-position-1/Overview.bs
@@ -648,7 +648,7 @@ what area of this [=position-area grid=] to lay out the positioned box in.
Values other than ''position-area/none'' have the following additional effects:
* The [=scrollable containing block=] is used in place of the [=local containing block=]
- where applicable,
+ when the [=absolute-position containing block=] is generated by a [=scroll container=],
so that the entire [=scrollable overflow area=] (typically) is available
for positioning.
* Any ''top/auto'' [=inset properties=] resolve to ''0''.
@@ -1312,9 +1312,12 @@ if the positioned box has a [=default anchor box=],
then it is centered (insofar as possible)
over the [=default anchor box=]
in the relevant axis.
-
-Additionally,
-any ''top/auto'' [=inset properties=] resolve to ''0''.
+Additionally:
+* The [=scrollable containing block=] is used in place of the [=local containing block=]
+ where applicable,
+ so that the entire [=scrollable overflow area=] (typically) is available
+ for positioning.
+* Any ''top/auto'' [=inset properties=] resolve to ''0''.
If the box is not [=absolutely positioned=],
or does not have a [=default anchor box=],
@@ -2605,38 +2608,10 @@ No Privacy issues have been raised against this document.
Changes {#changes}
=======
-Significant changes since the 9 May 2025 Working Draft:
-
-* Rename x/y-self-start/end keywords to self-x/y-start/end for 'position-area'
- due to persistent confusion about the ordering.
- (Issue 12749)
-* Make 'position-area' use the (newly defined) [=scrollable containing block=]
- when the box's [=containing block=] is a [=scroll container=].
- (Issue 10861)
-* Make default 'position-area' alignment for single-''inset/auto'' 'inset' axes align to the non-''inset/auto'' side.
- (Issue 12512)
-* Make transforms affect the [=anchor box=] geometry.
- (Issue 8584)
-* Add the ''place-self/dialog'' value to 'align-self' and 'justify-self'
- to solve regrettable default UA stylesheet rules for HTML popovers.
- (Issue 10258)
-* Clarify how fragmentation affects the [=anchor box=] geometry.
- (Issue 12287)
-* Clarify whe the [=last successful position option=] is cleared.
- (Issue 12577)
-* Clarify how tree-scoped names anchor are matched for 'anchor-scope' vs 'position-anchor'.
- (Issues 7916, 9408, and 5984)
-* Clarify how top layer interacts with finding the [=acceptable anchor element=]
- and rewrite the rules for valid anchors to be easier to understand.
- (Issue 11602)
-* Fix grammar of 'position-try-fallbacks' to exclude lists of ''position-area/none'' keywords.
- (Issue 12838)
-* Various small fixes and clarifications.
- (Issue 11028,
- Issue 11080,
- Issue 12058,
- Issue 12636,
- Issue 12653,
- Issue 12732)
-
-See also Previous Changes.
+Significant changes since the 7 October 2025 Working Draft:
+
+* Define ''anchor-center'' to also use the [=scrollable containing block=]
+ so that it doesn't trigger overflow alignment when positioned outside the [=local containing block=].
+ (Issue 12952)
+
+See also Previous Changes.
From 6e1b8c9fc0c49e35749344ebf3d37d5e1bc3f2c5 Mon Sep 17 00:00:00 2001
From: fantasai
Date: Wed, 5 Nov 2025 17:47:18 -0500
Subject: [PATCH 107/124] [css-anchor-position-1] Clarify writing-mode for try
tactics. #12869
---
css-anchor-position-1/Overview.bs | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs
index 6c0bb971862..83af2db07ac 100644
--- a/css-anchor-position-1/Overview.bs
+++ b/css-anchor-position-1/Overview.bs
@@ -1573,6 +1573,8 @@ Values have the following meanings:
If multiple keywords are given,
the transformations are composed in order
to produce a single [=position option=].
+ Logical directions are resolved against
+ the [=writing mode=] of the [=containing block=].
: <> || <>
::
@@ -2613,5 +2615,7 @@ Significant changes since the Issue 12952)
+* Clarify that ''flip-block'', ''flip-inline'', and ''flip-start'' use the [=writing mode=] of the [=containing block=].
+ (Issue 12869)
See also Previous Changes.
From b009e0a5c616c50872055c97f0d61decee1d2948 Mon Sep 17 00:00:00 2001
From: fantasai
Date: Wed, 5 Nov 2025 17:52:32 -0500
Subject: [PATCH 108/124] [css-writing-modes][editorial] Add hyphenated lt for
adjective form linking
---
css-writing-modes-3/Overview.bs | 4 ++--
css-writing-modes-4/Overview.bs | 4 ++--
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/css-writing-modes-3/Overview.bs b/css-writing-modes-3/Overview.bs
index 3c31053ecad..738c4715ce8 100644
--- a/css-writing-modes-3/Overview.bs
+++ b/css-writing-modes-3/Overview.bs
@@ -1521,8 +1521,8 @@ Abstract Box Terminology
The physical dimensions are width and height,
- which correspond to measurements along the x-axis
- (horizontal dimension) and y-axis (vertical dimension),
+ which correspond to measurements along the x-axis
+ (horizontal dimension) and y-axis (vertical dimension),
respectively. Abstract dimensions
are identical in both flow-relative and line-relative terms, so there
is only one set of these terms.
diff --git a/css-writing-modes-4/Overview.bs b/css-writing-modes-4/Overview.bs
index 2b7e36c94c0..ec5514f7086 100644
--- a/css-writing-modes-4/Overview.bs
+++ b/css-writing-modes-4/Overview.bs
@@ -1595,8 +1595,8 @@ Abstract Box Terminology
The physical dimensions are width and height,
- which correspond to measurements along the x-axis
- (horizontal dimension) and y-axis (vertical dimension),
+ which correspond to measurements along the x-axis
+ (horizontal dimension) and y-axis (vertical dimension),
respectively. Abstract dimensions
are identical in both flow-relative and line-relative terms, so there
is only one set of these terms.
From 5b257aa33d7c57ace0b8a0baed5bf4fc9ed33724 Mon Sep 17 00:00:00 2001
From: fantasai
Date: Wed, 5 Nov 2025 17:53:20 -0500
Subject: [PATCH 109/124] [css-anchor-position-1] Add flip-x and flip-y to
position-try-fallbacks #12869
---
css-anchor-position-1/Overview.bs | 15 ++++++++++++++-
1 file changed, 14 insertions(+), 1 deletion(-)
diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs
index 83af2db07ac..f650737c10c 100644
--- a/css-anchor-position-1/Overview.bs
+++ b/css-anchor-position-1/Overview.bs
@@ -1546,7 +1546,7 @@ Values have the following meanings:
and adds it to the [=position options list=].
: flip-block
@@ -1560,6 +1560,17 @@ Values have the following meanings:
swaps the values in the [=inline axis=],
essentially mirroring across a [=block-axis=] line.
+ : flip-x
+ ::
+ swaps the values in the [=horizontal axis=]
+ (between, for example, 'margin-left' and 'margin-right'),
+ essentially mirroring across a [=vertical-axis=] line.
+
+ : flip-y
+ ::
+ swaps the values in the [=vertical axis=],
+ essentially mirroring across a [=horizontal-axis=] line.
+
: flip-start
::
swaps the values of the [=start=] properties with each other,
@@ -2612,6 +2623,8 @@ Changes {#changes}
Significant changes since the 7 October 2025 Working Draft:
+* Add ''flip-x'' and ''flip-y'' to 'position-try-fallbacks'.
+ (Issue 12869)
* Define ''anchor-center'' to also use the [=scrollable containing block=]
so that it doesn't trigger overflow alignment when positioned outside the [=local containing block=].
(Issue 12952)
From e7dcecf27b6e1b1f14bf48a95631e5785eed6d27 Mon Sep 17 00:00:00 2001
From: Tab Atkins-Bittner
Date: Wed, 5 Nov 2025 23:06:50 +0000
Subject: [PATCH 110/124] [css-anchor-position-1] Put the element's base styles
in as the first item of the 'position options list'. #12890
---
css-anchor-position-1/Overview.bs | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs
index f650737c10c..004f034c922 100644
--- a/css-anchor-position-1/Overview.bs
+++ b/css-anchor-position-1/Overview.bs
@@ -1511,7 +1511,8 @@ This property provides a list of alternate positioning styles
to try when the [=absolutely positioned box=]
overflows its [=inset-modified containing block=].
This position options list
-is initially empty.
+initially contains a single [=position option=]
+generated from the element's base styles.
Each comma-separated entry in the list is a separate option:
either the name of a ''@position-try'' block,
@@ -1989,7 +1990,7 @@ Applying Position Fallback {#fallback-apply}
When a positioned box
(shifted by its [=default scroll shift=])
overflows its [=inset-modified containing block=],
-and has a non-empty [=position options list=],
+and has more than one [=position option=] in its [=position options list=],
it [=determines position fallback styles=]
to attempt to find an option that avoids overflow.
From 7f97e06f853514afdbdf2a926fd3f358b5d81586 Mon Sep 17 00:00:00 2001
From: fantasai
Date: Wed, 5 Nov 2025 18:13:53 -0500
Subject: [PATCH 111/124] [css-anchor-position-1] Add clip-path to
anchors-visible check and tie to IntersectionObserver #12732
---
css-anchor-position-1/Overview.bs | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs
index 004f034c922..34773e3369c 100644
--- a/css-anchor-position-1/Overview.bs
+++ b/css-anchor-position-1/Overview.bs
@@ -2220,8 +2220,10 @@ depending on some commonly needed layout conditions.
is fully clipped by a box
which is an ancestor of |anchor|
but a descendant of |abspos|'s containing block.
- Clipping in this case refers only to clipping due to 'overflow',
- or other effects (such as [=paint containment=])
+ Clipping in this case refers only to the same clipping effects
+ that are (by default) checked by {{IntersectionObserver}},
+ i.e. clipping due to 'clip-path',
+ 'overflow', or other effects (such as [=paint containment=])
that clip to the [=overflow clip edge=].
ISSUE(12732): Define timing of visibility checks.
@@ -2631,5 +2633,7 @@ Significant changes since the Issue 12952)
* Clarify that ''flip-block'', ''flip-inline'', and ''flip-start'' use the [=writing mode=] of the [=containing block=].
(Issue 12869)
+* Add 'clip-path' to the list of clipping effects considered for ''anchors-visible''.
+ (Issue 12732)
See also Previous Changes.
From ad62d111b222f93c1355429b3c452a31508ad0f5 Mon Sep 17 00:00:00 2001
From: fantasai
Date: Wed, 5 Nov 2025 18:15:26 -0500
Subject: [PATCH 112/124] [css-anchor-position-1] Update changes list
---
css-anchor-position-1/Overview.bs | 2 ++
1 file changed, 2 insertions(+)
diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs
index 34773e3369c..c4fc82d015b 100644
--- a/css-anchor-position-1/Overview.bs
+++ b/css-anchor-position-1/Overview.bs
@@ -2635,5 +2635,7 @@ Significant changes since the Issue 12869)
* Add 'clip-path' to the list of clipping effects considered for ''anchors-visible''.
(Issue 12732)
+* Fix error where base styles were accidentally left out of the [=position options list=].
+ (Issue 12890)
See also Previous Changes.
From 85c0252debe911fb09d87beda43ed8a5a72d1eb3 Mon Sep 17 00:00:00 2001
From: fantasai
Date: Wed, 5 Nov 2025 18:25:23 -0500
Subject: [PATCH 113/124] [css-anchor-position-1] Clarify timing of
anchors-visible checks. #12732
---
css-anchor-position-1/Overview.bs | 11 ++++++-----
1 file changed, 6 insertions(+), 5 deletions(-)
diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs
index c4fc82d015b..f1357234154 100644
--- a/css-anchor-position-1/Overview.bs
+++ b/css-anchor-position-1/Overview.bs
@@ -2226,11 +2226,11 @@ depending on some commonly needed layout conditions.
'overflow', or other effects (such as [=paint containment=])
that clip to the [=overflow clip edge=].
- ISSUE(12732): Define timing of visibility checks.
-
+ must be checked after [=updating content relevancy for a document=]
+ (see 'content-visibility' in [[css-contain-2]])
+ and before running any {{IntersectionObserver}},
+ and may also be checked at other times to improve responsiveness.
Note: This means that if an abspos is next to its anchor in the DOM,
for example,
@@ -2633,7 +2633,8 @@ Significant changes since the Issue 12952)
* Clarify that ''flip-block'', ''flip-inline'', and ''flip-start'' use the [=writing mode=] of the [=containing block=].
(Issue 12869)
-* Add 'clip-path' to the list of clipping effects considered for ''anchors-visible''.
+* Add 'clip-path' to the list of clipping effects considered for ''anchors-visible''
+ and clarify the timing of its checks.
(Issue 12732)
* Fix error where base styles were accidentally left out of the [=position options list=].
(Issue 12890)
From 72f413b657443f0b547fa7e94252cb8d073b3329 Mon Sep 17 00:00:00 2001
From: fantasai
Date: Wed, 5 Nov 2025 18:50:17 -0500
Subject: [PATCH 114/124] [css-anchor-position-1] Clarify anchors-visible is
after ResizeObservers also #12732
---
css-anchor-position-1/Overview.bs | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs
index f1357234154..27bfbe01d89 100644
--- a/css-anchor-position-1/Overview.bs
+++ b/css-anchor-position-1/Overview.bs
@@ -2229,8 +2229,10 @@ depending on some commonly needed layout conditions.
Whether or not |anchor| is [=clipped by intervening boxes=]
must be checked after [=updating content relevancy for a document=]
(see 'content-visibility' in [[css-contain-2]])
- and before running any {{IntersectionObserver}},
- and may also be checked at other times to improve responsiveness.
+ and running any {{ResizeObserver}},
+ but before running any {{IntersectionObserver}}.
+ It may also be checked at other times to improve responsiveness.
+
Note: This means that if an abspos is next to its anchor in the DOM,
for example,
From 93aeb5c76139cfe5bb5cbf5ddb017eb4b1b94a0e Mon Sep 17 00:00:00 2001
From: fantasai
Date: Wed, 5 Nov 2025 18:57:26 -0500
Subject: [PATCH 115/124] [css-align-3][css-anchor-position-1] Clarify that
position-area normal alignment magic triggers overflow safety magic
---
css-align-3/Overview.bs | 173 +-----------------------------
css-anchor-position-1/Overview.bs | 2 +-
2 files changed, 5 insertions(+), 170 deletions(-)
diff --git a/css-align-3/Overview.bs b/css-align-3/Overview.bs
index 3e73b0e7fa3..5d7947239b8 100644
--- a/css-align-3/Overview.bs
+++ b/css-align-3/Overview.bs
@@ -898,7 +898,7 @@ Content Distribution for Scroll Containers
Self-Alignment for Absolutely Positioned Boxes
For [=absolutely positioned=] [=alignment subjects=]
- whose relevant [=self-alignment property=] is not ''justify-self/normal'',
+ whose relevant [=used value|used=] [=self-alignment property=] is not ''justify-self/normal'',
the default [=overflow alignment=] behavior is as follows:
@@ -2514,175 +2514,10 @@ Appendix A: Static Position Terminology
Made [=block containers=] default to ''safe'' alignment.
- See [[#auto-safety-default]].
- (Issue 8992)
-
Made [=absolutely positioned boxes=] default to using a “smart” safe alignment
- that allows unsafe overflow of the [=inset-modified containing block=]
- while maintaining safety within the [=original containing block=].
- See [[#auto-safety-position]].
- (Issue 10316,
- Issue 9960)
-
Make all the ''space-*'' keywords fallback to ''safe'' overflow.
- (Issue 10154)
-
Clearly define the interaction of overflowing [=content distribution=] and [=scroll containers=]
- to not impact layout, but to only affect the extent of the [=scrollable overflow area=].
- (Issue 4957)
-
Only apply the special margin-edge baseline rule for [=scroll container=] [=block containers=]
- when 'baseline-source' is its [=initial value=].
- (Issue 8214)
-
When synthesizing the baseline of an orthogonal-flow box,
- make the assumed parallel [=writing mode=] sensitive to 'direction'.
- (Issue 7775)
-
-
Otherwise,
- assume either ''horizontal-tb'' or ''vertical-lr'' 'writing-mode',
- whichever is orthogonal to the box’s own 'writing-mode'.
-
Otherwise:
-
-
If the box’s own [=writing mode=] is vertical,
- assume ''horizontal-tb''.
-
If the box’s own [=writing mode=] is horizontal,
- assume ''vertical-lr'' if 'direction' is ''ltr''
- and ''vertical-rl'' if 'direction' is ''rtl''.
-
-
-
-
Clarify that spanning cells only participate in the first/last row they span
- when participating in first/last baseline alignment.
- (Issue 7655)
-
Define the 'grid-gap' properties as [=legacy name aliases=] of the 'gap' properties.
- (Issue 8014)
-
Defer definition of ''align-self/normal'' alignment for [=absolutely positioned boxes=] to [[css-position-3]].
- (Issue 11215,
- Issue 11285)
-
Changed sentence about applicability of 'row-gap' to [=multi-column containers=]
- to indicate that it applies in [[CSS-MULTICOL-2]].
- (Issue 11539)
-
Defined that [=gutters=] dissappear at [=fragmentation breaks=].
- (Issue 11520)
-
Define the baselines of a [=multi-column container=].
- (Issue 7856,
- Issue 7639)
-
Use the [=writing mode=] of the [=static-position containing block=]
- when determining the [=static position=].
- (Issue 7599,
- Issue 7612;
- Changes)
-
Remove definition of special behavior for including padding in [=scrollable overflow=]
- for non-''align-content/normal'' alignments
- since this is now defined unconditionally in [[!CSS-OVERFLOW-3]].
- (Issue 129)
-
Minor clarifications:
- * Define [=fallback alignment=] of a [=baseline-sharing group=]
- as the shared [=fallback alignment=] of its individual items.
- * Annotate <> value definitions using [=CSS bracketed range notation=].
-
Allowed reordering of ''[ first | last ]'' and ''align-self/baseline'' components of <>.
- (Issue 5235)
-
Make [=fallback alignment=] of ''space-around'' and ''space-evenly'' include ''safe''.
- (Issue 5088)
-
Various corrections to normal alignment and percentage gaps
- to match respective layout specs.
-
Corrections to special legacy handling of the [=last baseline set=] of [=scroll containers=].
- (Issue 3611)
-
Clarify that a box with no [=baseline set=] synthesizes its [=alignment baseline=] as needed.
- (Issue 3611)
-
Clarified that only non-replaced boxes are affected by [=content distribution=].
- (Issue 4545)
-
Clarified when a box has a [=coordinated self-alignment preference=]
- that enables [=baseline content-alignment=],
- particularly with respect to ''margin/auto'' [=margins=].
- (Issue 5923)
-
Better define how baseline self-alignment and content-alignment interact.
- (Issue 6389)
-
Clarify how baseline-sharing groups determine their fallback alignment.
- (Issue 7645)
-
Better definition of how the alignment properties interact with absolutely-positioned boxes with ''left/auto'' offsets.
- See [[#justify-abspos]], [[#align-abspos]], [[#abspos-sizing]], and [[#staticpos-rect]].
-
Noted CSS2’s special rules about the baselines of inline-block scroll containers.
-
Defined that percentage gaps compute against zero when calculating intrinsic sizes, and resolve during layout. (Issue 509)
-
Miscellaneous minor clarifications.
-
+ Changes since the 11 March 2025 Working Draft include:
+ * Clarify that [[#auto-safety-position]] applies when 'position-area' alters the [=used value=] of ''align-self/normal''.
- Changes since the 6 September 2017 Working Draft include:
-
-
Added more illustrations! Many thanks to Melanie Richards for working through a difficult diagramming problem.
-
Fixed errors in property definition table of 'gap' shorthand.
-
Defining percentage gaps to resolve to zero when the containing block’s size depends on the gaps.
- (Issue 509,
- Issue 2297)
-
Fixed errors in handling left and right in the grammars.
-
Fixed discrepancy in ''align-content/space-align'' fallback alignment.
- (Issue 2316)
-
Tightened up handling of baseline alignment in cases where the box edges don't align.
- (Issue 1556,
- Issue 1611)
-
Added the 'row-gap' and 'column-gap' properties and 'gap' shorthand,
- applying them to both grid layout and flex layout
- to replace the grid-specific 'grid-row-gap'/'grid-column-gap'/'grid-gap' properties.
-
Dropped the ''left'' and ''right'' keywords from 'align-self' and 'align-content'.
- They may be re-introduced in a later level if there is demand.
- (Issue 1403)
-
Assigned ''end'' fallback alignment to ''align-self/stretch'' cases when combined with ''last baseline'' content-alignment.
-
Disabled baseline alignment across cells in a table column,
- due to implementation complexity.
-
diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs
index 27bfbe01d89..60bec5ad42e 100644
--- a/css-anchor-position-1/Overview.bs
+++ b/css-anchor-position-1/Overview.bs
@@ -1222,7 +1222,7 @@ Anchor-Based Alignment {#alignment}
Area-specific Default Alignment
When 'position-area' is not ''position-area/none'',
-the behavior of the ''align-self/normal'' [=self-alignment=] value
+the [=used value=] of ''align-self/normal'' [=self-alignment=]
changes depending on the <> value,
to align the box towards the anchor:
From e2454662b0d40b5b7fd557c6f1561f9d55c9a991 Mon Sep 17 00:00:00 2001
From: fantasai
Date: Wed, 5 Nov 2025 19:16:17 -0500
Subject: [PATCH 116/124] [css-align-3] Allow endward overflow of abspos into
scrollable region #12106
---
css-align-3/Overview.bs | 9 +++++++++
1 file changed, 9 insertions(+)
diff --git a/css-align-3/Overview.bs b/css-align-3/Overview.bs
index 5d7947239b8..dba51256020 100644
--- a/css-align-3/Overview.bs
+++ b/css-align-3/Overview.bs
@@ -918,6 +918,12 @@ Self-Alignment for Absolutely Positioned Boxes
For this purpose, the |overflow limit rect| is the bounding rectangle
of the [=alignment subject's=] [=inset-modified containing block=]
and its [=original containing block=].
+ However, because the [=scrollable overflow area=] of a [=scroll container=]
+ can be extended to ensure the visibility of overflowing [=absolutely positioned=] boxes,
+ if the [=original containing block=] is generated by a [=scroll container=]
+ (and is not its [=fixed containing block=]),
+ the |overflow limit rect| is extended to infinity
+ in any direction that does not extend into the [=unreachable scrollable overflow region=].
(For [=absolutely-positioned=] [=alignment subjects=] that fail the above condition,
@@ -2516,6 +2522,9 @@ Changes
Changes since the 11 March 2025 Working Draft include:
* Clarify that [[#auto-safety-position]] applies when 'position-area' alters the [=used value=] of ''align-self/normal''.
+ * Allow absolutely positioned boxes to honor alignment even when overflowing into
+ the scrollable overflow area of a scroll container containing block.
+ (Issue 12106)
See also previous changes.
From 36207d113464bbacc3feb6b62fff4e8c0e2fceb8 Mon Sep 17 00:00:00 2001
From: fantasai
Date: Wed, 5 Nov 2025 19:26:42 -0500
Subject: [PATCH 117/124] [css-anchor-position-1] Compensate for stupid UA
default rules by resolving margins to auto #10258
Also drop the 'dialog' alignment value, which is no longer needed.
---
css-anchor-position-1/Overview.bs | 44 +++++++------------------------
1 file changed, 10 insertions(+), 34 deletions(-)
diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs
index 60bec5ad42e..62ce0a21145 100644
--- a/css-anchor-position-1/Overview.bs
+++ b/css-anchor-position-1/Overview.bs
@@ -651,7 +651,9 @@ Values other than ''position-area/none'' have the following additional effects:
when the [=absolute-position containing block=] is generated by a [=scroll container=],
so that the entire [=scrollable overflow area=] (typically) is available
for positioning.
-* Any ''top/auto'' [=inset properties=] resolve to ''0''.
+* The [=used value=] of any ''top/auto'' [=inset properties=]
+ and ''margin/auto'' [=margin properties=]
+ resolves to ''0''.
* The ''align-self/normal'' value for the [=self-alignment properties=]
resolves to a corresponding value, see [[#position-area-alignment]].
@@ -1317,7 +1319,9 @@ Additionally:
where applicable,
so that the entire [=scrollable overflow area=] (typically) is available
for positioning.
-* Any ''top/auto'' [=inset properties=] resolve to ''0''.
+* The [=used value=] of any ''top/auto'' [=inset properties=]
+ and ''margin/auto'' [=margin properties=]
+ resolves to ''0''.
If the box is not [=absolutely positioned=],
or does not have a [=default anchor box=],
@@ -1331,38 +1335,6 @@ it will “shift” from being purely centered,
in order to remain within the [=original containing block=].
See [[css-align-3#overflow-values]] for more details.
-
-
-Conditional Centering: the ''dialog'' alignment value {#conditional-centering}
------------------------------------------------------
-
-
-
-Dialog boxes are often displayed centered on the screen,
-unless they are anchored to some other element.
-
-The new dialog value
-allows this behavior to be specified:
-if the box is [=absolutely positioned=]
-and its 'position-area' value is not ''position-area/none'',
-it is aligned as per ''align-self/normal''
-(see [[#position-area-alignment]]);
-otherwise,
-it is aligned as per ''align-self/center''.
-
-