Name: align-items
-	Value: normal | stretch | <> | [ <>? <> ]
+	Value: normal | stretch | <> | <>? <>
 	Initial: normal
 	Applies to: all elements
 	Inherited: no
@@ -2252,8 +2258,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 +2355,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
@@ -2514,175 +2520,13 @@ Appendix A: Static Position Terminology
 

 Changes
 
-	Changes since the 17 February 2023 Working Draft include:
-	

-		
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)
-	
-
-	Changes since the 24 December 2021 Working Draft include:
-	

-		
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=].
-	
-
-	Changes since the 21 April 2020 Working Draft include:
-	

-		
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)
-	
-
-	Changes since the 6 December 2018 Working Draft include:
-	

-		
Improved the center self-alignment of absolutely-positioned elements.
-		Issue 4659
-		
Fixed inconsistent fallback of baseline alignment in mixed writing modes.
-		Issue 3454
-		
Minor editorial fixes and clarifications.
-	
-
-	Changes since the 30 August 2018 Working Draft consist of some minor clarifications.
-
-	Changes since the 23 April 2018 Working Draft include:
-	

-		
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]].
-		
More detailed definition of how the content-distribution properties work on scroll containers.
-		See [[#overflow-scroll-position]].
-		
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''.
+	* Allow absolutely positioned boxes to honor alignment even when overflowing into
+		the scrollable overflow area of a scroll container containing block.
+		(Issue 12106)
 
-	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)
-		
Miscellaneous clarifications.
-	
-
-	Changes since the 20 July 2017 Working Draft include:
-	

-		
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.
-	
-
-	Changes since the 15 May 2017 Working Draft include:
-	

-		
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.
-		
A large number of minor corrections and clarifications reported by David Baron.
-	
-
-	Changes since the 7 April 2017 Working Draft include:
-	

-		
Adding a section to clarify handling of partial implementations.
-			(Issue 1167)
-		
Dropped <> value of 'justify-content' since it can't do anything anyway.
-			(Issue 1184)
-		
Deferred ability to specify fallback alignments to Level 4.
-			(Issue 1002)
-		
Fixed position of <> wrt <>.
-			(Issue 1001)
-		
Fixed rules for handling baseline-aligned boxes being aligned along their block axis.
-			(Issue 1038)
-		
Renamed ''justify-items: auto'' to ''justify-items: legacy''.
-			(Issue 1318)
-		
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)
-	
+	See also previous changes.
 
 

 Privacy Considerations
diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs
index bcd0ec7304c8..9abafa68c6e2 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:
 
@@ -421,7 +421,7 @@ in anchor positioning.
 
 		* |el| is an [=anchor element=] with an [=anchor name=] of |anchor spec|.
 
-		* |el|'s [=anchor name=] and |anchor spec| are both associated with the same [=tree=] [=tree/root=].
+		* |el|'s [=anchor name=] [=tree-scoped name/loosely matched|loosely matches=] |anchor spec|.
 
 			Note: The [=anchor name=] is a [=tree-scoped name=],
 			while |anchor spec| is a [=tree-scoped reference=].
@@ -648,10 +648,12 @@ 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''.
+* 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]].
 
@@ -717,7 +719,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
@@ -1222,7 +1224,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:
 
@@ -1312,9 +1314,14 @@ 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.
+* 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=],
@@ -1328,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}
------------------------------------------------------
-
-
-Name: justify-self, align-self, justify-items, align-items
-New Values: dialog
-
-
-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''.
-
-
 
 
 Anchor-Based Sizing {#sizing}
@@ -1508,7 +1483,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,
@@ -1543,7 +1519,7 @@ Values have the following meanings:
 		and adds it to the [=position options list=].
 
 		
-		<> = flip-block || flip-inline || flip-start
+		<> = flip-block || flip-inline || flip-start || flip-x || flip-y
 		
 
 		: flip-block
@@ -1557,6 +1533,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,
@@ -1570,6 +1557,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=].
 
 	: <> || <>
 	::
@@ -1973,7 +1962,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.
 
@@ -2203,15 +2192,19 @@ 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.
-	
+	must be checked after [=updating content relevancy for a document=]
+	(see 'content-visibility' in [[css-contain-2]])
+	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,
@@ -2605,38 +2598,23 @@ 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.
+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)
+* Resolve ''margin/auto'' margins to zero when 'position-area' or 'anchor-center' is in effect,
+	due to the ill-considered HTML UA default stylesheet rules for popovers.
+	Also drop the dialog alignment value which was the previous attempt to address this problem.
 	(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.
+* 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''
+	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)
+
+See also Previous Changes.
diff --git a/css-anchor-position-2/Overview.bs b/css-anchor-position-2/Overview.bs
index ad779ad3ec6f..d29b441ec7cd 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 3b16f042f393..3408c98121d8 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
@@ -24,7 +23,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) , cssom-1 (interface) cssstyledeclaration, dom-core-ls (interface) event, webidl (type) SyntaxError
-Ignored Terms: domstring, animationeventinit, event, eventinit, eventtarget, document
+Ignored Terms: domstring, animationeventinit, cssText, event, eventinit, eventtarget, document
 
 
 
@@ -372,7 +371,7 @@ Declaring Keyframes
 		the state of the animation if it were given a duration of ''10s''.
 
 		

-			
+			
 			
 		
 	
@@ -1082,7 +1081,7 @@ Attributes
 			  
The declared declarations in the rule, in specified
 			      order.
 			  
parent CSS rule
-			  
The context object (i.e. this {{CSSKeyframeRule}}).
+			  
The context object (i.e. this {{CSSKeyframeRule}}).
 			  
owner node
 			  
Null.
 			
diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs
index 8b0bf8ad9199..bc6fb0839acf 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,263 @@ 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-trigger' property
+
+
+Name: animation-trigger
+Value: [ none | [ <> <>+ ]+ ]#
+Initial: none
+Applies to: all elements
+Inherited: no
+Percentages: N/A
+Computed value: as specified
+Animation type: not animatable
+Canonical order: per grammar
+
+
+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=] take one and possibly an optional second, depending on whether they're stateless or stateful;
+        [=timeline triggers=] take one and optionally a second.)
+        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 '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}
+
 
-
-Name: animation-trigger-behavior
-Value: <>#
-Initial: once
+

+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,
+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.
+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 [=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".
+
+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 [=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)
+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: list, each item a keyword as specified
-Animation type: not animatable
+Computed value: as specified
 Canonical order: per grammar
+Animation type: not animatable
 
 
-<single-animation-trigger-behavior> = once | repeat | alternate | state
-
-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.
-
-        
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.
+If ''timeline-trigger-name/none'' is specified,
+the element does not define any [=timeline triggers=].
 
-        
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.
+If the same <> appears multiple times in the list,
+only the last one defines a [=timeline trigger=];
+the preceding ones have no effect.
 
-        
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.
-
-
-The behavior of each value is defined in [[web-animations-2#trigger-behaviors]].
-
-## 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,199 +977,266 @@ 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
 
 
-  Name: animation-trigger-range
-  Value: [ <<'animation-trigger-range-start'>> <<'animation-trigger-range-end'>>? ]#
+Name: timeline-trigger-range
+Value: [ <<'timeline-trigger-range-start'>> <<'timeline-trigger-range-end'>>? ]#
 
 
-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
+
+Name: timeline-trigger-exit-range
+Value: [ <<'timeline-trigger-exit-range-start'>> <<'timeline-trigger-exit-range-end'>>? ]#
 
 
-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 values of 'animation-trigger-range-end' have the same meaning as those of 'animation-range-end'.
+The behavior of 'timeline-trigger-exit-range' is defined in [[web-animations-2#trigger-ranges]].
 
-## The 'animation-trigger-exit-range' property ## {#animation-trigger-exit-range}
+
+
+Name: timeline-trigger-exit-range-start, timeline-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-range-start/normal'' or a timeline range and progress percentage
+Animation type: not animatable
+
+
+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 'timeline-trigger' Shorthand
 
 
-  Name: animation-trigger-exit-range
-  Value: [ <<'animation-trigger-exit-range-start'>> <<'animation-trigger-exit-range-end'>>? ]#
+Name: timeline-trigger
+Value: none | [ <<'timeline-trigger-name'>> <<'timeline-trigger-source'>> <<'timeline-trigger-range'>> [ '/' <<'timeline-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.
+
+A value of none
+is equivalent to ''none none normal''.
+
+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.
+
+Issue: I think we need the ''/'' to disambiguate the two ranges?
+
+
+
+
+

+Event Triggers
+
+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.
+
+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,
+it has a binary trigger state associated with it,
+initially "untriggered":
+while "untriggered", it only activates when the defining element 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.
+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=].
+
+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
+
+
+Name: event-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
+
 
-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.
+If ''event-trigger-name/none'' is specified,
+the element does not define any [=event triggers=].
 
-The behavior of 'animation-trigger-exit-range' is further defined in [[web-animations-2#trigger-ranges]].
+If the same <> appears multiple times in the list,
+only the last one defines a [=event trigger=];
+the preceding ones have no effect.
 
-## The 'animation-trigger-exit-range-start' property ## {#animation-trigger-exit-range-start}
+

+Linking an Event: the 'event-trigger-source' property
 
-
-  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
+
+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 '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 'event-trigger-source' property
+specifies what event or events activate the [=event trigger=].
+Its values are:
 
-## The 'animation-trigger-exit-range-end' property ## {#animation-trigger-exit-range-end}
+

+    : none
+    :: The corresponding entry in the [=coordinated value list=] does not define a trigger.
 
-
-  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
-
+    : <>+ [ / <>+ ]?
+    :: 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.)
 
-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%.
+        Otherwise,
+        the [=event trigger=] is stateless,
+        and the provided events are its [=enter events=].
 
 
-## The 'animation-trigger' property ## {#animation-trigger}
+
+<> = activate | click | touch | dblclick | keypress(<>) | ...
+
+
+Issue: Figure out the full set of events we want to handle.
 
-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.
+
+

+The 'event-trigger' Shorthand
 
 
-Name: animation-trigger
-Value: <>#
-Initial: see individual properties
+Name: event-trigger
+Value: none | [ <<'event-trigger-name'>> <<'event-trigger-source'>> ]#
+Initial: none
 Applies to: all elements
 Inherited: no
 Percentages: N/A
-Computed value: see individual properties
-Canonical order: per grammar
-Animation Type: not animatable
+Computed value: as specified
+Animation type: not animatable
 
 
-
-<single-animation-trigger> = <> || [ none | auto | [ [ <> | <> | <> ] [ normal | <> | <> <>? ]{0,4} ] ]
-
+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}
 
diff --git a/css-backgrounds-3/Overview.bs b/css-backgrounds-3/Overview.bs
index 5544d3bd1a99..ffea8cf1e5a9 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
 
 
 
Introduction
@@ -947,8 +951,28 @@ Painting Area: the 'background-clip' property
 		background-clip-color.html
 		background-clip-content-box-001.html
 		background-clip-content-box-002.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-padding-box-001.html
 		background-clip-padding-box-with-border-radius.html
+		background-clip/clip-border-area-background-geometry.html
+		background-clip/clip-border-area-border-image.html
+		background-clip/clip-border-area-border-on-top.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-text-ellipsis.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-out-of-flow-child.html
+		background-clip/clip-text-text-decorations.html
+		background-clip/clip-text-text-emphasis.html
 		background-clip/clip-rounded-corner.html
 		background-clip/clip-text-animated-text.html
 		background-clip/clip-text-dynamic-2.html
@@ -1565,6 +1589,13 @@ Positioning Area: the 'background-origin' property
 	with other comma-separated background properties
 	to form each [=background image layer=].
 
+

+Serialization of 'background-size' values
+
+	The [=specified value=] and [=computed value=] of the <> type
+	always serialize as two values, even when the second value is ''background-size/auto'',
+	due to the [[cssom#serializing-css-values|shortest, most backwards-compatible serialization principle]].
+
 

 Backgrounds Shorthand: the 'background' property
 
@@ -2455,6 +2486,13 @@ Corner Shaping
 	calculates its radius by adding the corresponding margin thickness
 	to each border radius, with the corresponding [=outset-adjusted border radius=] applied.
 
+	
+		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
+	
+
 

 
 	When expanding an [=edge=] that has a [=border radius=], e.g. for computing the [=margin edge=], 'box-shadow' spread, or 'overflow-clip-margin',
@@ -2758,6 +2796,11 @@ Border Images
 		
 	
 
+	
+		border-image-021.html
+		border-image-outset-004.html
+	
+
 

 Image Source: the 'border-image-source' property
 
@@ -3562,10 +3605,14 @@ Shadow Shape, Spread, and Knockout
 	from the border-box (padding-box) radii by adding (subtracting)
 	the [=spread distance=] (and flooring at zero).
 	For outer shadows, the [=border-radius=] is then [=outset-adjusted border radius|adjusted=], independently in each dimension,
-	to preseve the sharpness of rounded corners.
+	to preserve the sharpness of rounded corners.
 
 	The 'border-image' does not affect the shape of the box-shadow.
 
+	
+		box-shadow-radius-generated.html
+	
+
 

 Blurring Shadow Edges
 
@@ -3663,6 +3710,22 @@ Level 3
 

 Changes
 
+

+Changes since the 11 March 2024 Candidate Recommendation Draft
+
+	

+		
+		
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 +3750,8 @@ 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.
+		
Defined serialization of 'background-size' in [[#bg-size-serialization]].
+			(Issue 7802)
 	
 
 
@@ -4140,4 +4203,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
 
diff --git a/css-backgrounds-4/Overview.bs b/css-backgrounds-4/Overview.bs
index 203196328327..b315678f5da7 100644
--- a/css-backgrounds-4/Overview.bs
+++ b/css-backgrounds-4/Overview.bs
@@ -6,22 +6,30 @@ 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
-Warning: Not Ready
+WPT Path Prefix: css/css-backgrounds/
+WPT Display: closed
 
 
 
 spec:css-text-4; type:value; text:collapse
 spec:css-shapes-2; type:function; text:path()
 spec:css-borders-4;
+	type:property; text:border
 	type:property; text:border-color
+	type:property; text:border-image
+	type:property; text:border-radius
 	type:property; text:border-style
 	type:property; text:border-width
+	type:property; text:box-shadow
+spec:css2; type:dfn; text:viewport
+spec:html; type:element; text:body
 
 
 
@@ -29,16 +37,287 @@ spec:css-borders-4;
 

 Introduction
 
-	

-		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 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
+	
+
+	
+		animations/background-color-animation-backdrop-infinite-duration-crash.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
+		animations/background-color-animation-element-not-visible-at-current-viewport.html
+		animations/background-color-animation-fallback-additive-keyframe.html
+		animations/background-color-animation-fallback-missing-0-percent.html
+		animations/background-color-animation-fallback-missing-100-percent.html
+		animations/background-color-animation-fallback-replace.html
+		animations/background-color-animation-field-crash.html
+		animations/background-color-animation-fragmented.html
+		animations/background-color-animation-half-opaque.html
+		animations/background-color-animation-in-body.html
+		animations/background-color-animation-non-empty-no-draw-crash.html
+		animations/background-color-animation-non-zero-size-element-change-to-zero.html
+		animations/background-color-animation-pseudo-element.html
+		animations/background-color-animation-removed-element-crash.html
+		animations/background-color-animation-single-keyframe.html
+		animations/background-color-animation-three-keyframes1.html
+		animations/background-color-animation-three-keyframes2.html
+		animations/background-color-animation-three-keyframes3.html
+		animations/background-color-animation-will-change-contents.html
+		animations/background-color-animation-with-blur.html
+		animations/background-color-animation-with-images.html
+		animations/background-color-animation-with-mask.html
+		animations/background-color-animation-with-table1.html
+		animations/background-color-animation-with-table2.html
+		animations/background-color-animation-with-table3.html
+		animations/background-color-animation-with-table4.html
+		animations/background-color-animation-with-zero-playbackRate.html
+		animations/background-color-animation-zero-size-element-change-to-non-zero.html
+		animations/background-color-animation-zero-size-element.html
+		animations/background-color-animation.html
+		animations/background-color-interpolation.html
+		animations/background-color-scroll-into-viewport.html
+		animations/background-color-transition-colormix.html
+		animations/background-color-transition-currentcolor.html
+		animations/background-color-transition.html
+		animations/background-color-transparent-animation-in-body.html
+		animations/invalidation/background-color-animation-with-zero-alpha.html
+		animations/invalidation/background-color-transition-obscured.html
+		animations/invalidation/background-color-transition-with-delay.html
+		animations/invalidation/background-color-transition-with-initially-transparent.html
+		animations/two-background-color-animation-diff-length1.html
+		animations/two-background-color-animation-diff-length2.html
+		animations/two-background-color-animation-diff-length3.html
+		background-none-none-and-color.html
+		background-color-body-propagation-001.html
+		background-color-body-propagation-002.html
+		background-color-body-propagation-003.html
+		background-color-body-propagation-004.html
+		background-color-body-propagation-005.html
+		background-color-body-propagation-006.html
+		background-color-body-propagation-007.html
+		background-color-body-propagation-008.html
+		background-color-body-propagation-009.html
+		background-color-clip.html
+		background-color-root-propagation-001.html
+		background-color-root-propagation-002.html
+		bg-color-with-gradient.html
+		child-move-reveals-parent-background.html
+		color-mix-currentcolor-background-repaint-parent.html
+		color-mix-currentcolor-background-repaint.html
+		hidpi/simple-bg-color.html
+		inheritance.sub.html
+		inline-background-rtl-001.html
+		parsing/background-color-computed.html
+		parsing/background-color-invalid.html
+		parsing/background-color-valid.html
+		color-behind-images.htm
+	
+
+	This property sets the background color of a box.
+	This color is drawn behind any background images.
+
+	

+		Example:
+
+		
h1 { background-color: #F00 } /* Sets background to red. */
+	
+
+	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 +375,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 +401,7 @@ Tiling Images: the 'background-repeat-x', 'background-repeat-y', 'background-rep
 		
 	
 
-	
See the section “Layering multiple background
-	images” for how
+	
See the section [[#layering]] for how
 	'background-repeat-x',
 	'background-repeat-y',
 	'background-repeat-block',
@@ -144,10 +423,48 @@ Tiling Images Shorthand: the 'background-repeat' property
 	Animation type: discrete
 	

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 | repeat-block | repeat-inline | <>{1,2}
+	

Single values for <> have the following meanings: @@ -161,6 +478,14 @@ Tiling Images Shorthand: the 'background-repeat' property

-	body {
-	background-image: url(dot.png) white;
-	background-repeat: space
-	}
-	

+		body {
+			background-image: url(dot.png) white;
+			background-repeat: space;
+		}
+		

-	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
 	

<> = scroll | fixed | local

-		<> =  <> | <>
-		<> = [
-		  [ left | center | right ] && [ [ top | bottom ] <> ]
-		|
-		  [ [ left | right ] <> ] && [ top | center | bottom ]
-		]
-	

+		body {
+			background: red url("pendant.gif");
+			background-repeat: repeat-y;
+			background-attachment: fixed;
+		}
+		

+	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;
+	}
+	

+		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% */
+		

+		body {
+			background-image: url("logo.png");
+			background-attachment: fixed;
+			background-position: 100% 100%;
+			background-repeat: no-repeat;
+		}
+		

background-position: right 3em bottom 10px

+	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
+	

+		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 ]
+		]
+	

+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
+	

+

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=]. +

+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
+	

> values where + +

<> = [ <> | auto ]{1,2} | cover | contain

+ + Values have the following meanings: + +

+

contain

+

+ 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: + +

+		div {
+			background-image: url(plasma.png);
+			background-repeat: no-repeat;
+			background-size: 100% 100%;
+			background-origin: content-box;
+		}
+		

+ + The second example stretches the image + so that exactly two copies fit horizontally. + The aspect ratio is preserved: + +

+		p {
+			background-image: url(tubes.png);
+			background-size: 50% auto;
+			background-origin: border-box;
+		}
+		

+ + This example forces the background image to be 15 by 15 pixels: + +

+		p {
+			background-size: 15px 15px;
+			background-image: url(tile.png);
+		}
+		

+ + This example uses the image's natural size. + Note that this is the only possible behavior in CSS level 1 and 2. + +

+		body {
+			background-size: auto;            /* default */
+			background-image: url(flower.png);
+		}
+		

+ + 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. + +

+		p {
+			background-image: url(chain.png);
+			background-repeat: no-repeat round;
+			background-size: 20% 30%;
+		}
+		

+

+ + 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: + +

+		div {
+			background-image: url(image1.png);
+			background-repeat: repeat;         /* default */
+			background-size: auto;             /* default */
+		}
+		

+ + 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: + +

+		div {
+			background-image: url(image2.png);
+			background-repeat: repeat;         /* default */
+			background-size: 3em;              /* = '3em auto' */
+		}
+		

+ + 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: + +

+		div {
+			background-image: url(image3.png);
+			background-repeat: round repeat;
+			background-size: 3em auto;
+		}
+		

+ + 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: + +

+		div {
+			background-image: url(image4.png);
+			background-repeat: repeat round;
+			background-size: 3em auto;
+		}
+		

+ + 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=]. + +

+Serialization of 'background-size' values

+ + The [=specified value=] and [=computed value=] of the <> type + always serialize as two values, even when the second value is ''background-size/auto'', + due to the [[cssom#serializing-css-values|shortest, most backwards-compatible serialization principle]]. +

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: <>#
@@ -413,6 +1714,323 @@ Background Image Layers: the 'background-tbd' shorthand property
 		

+

+Backgrounds Shorthand: the 'background' 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 + +

+	<bg-layer> = <> || <> [ / <> ]? || <> || <> || <> || <>
+	<final-bg-layer> =  <> || <> [ / <> ]? || <> || <> || <> || <> || <<'background-color'>>

+ + 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. + However, if a value is set that is only valid in 'background-clip', + then it sets 'background-clip' to that value and 'background-origin' to ''background-origin/border-box''. + 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 first rule is equivalent to: + +

+		body {
+		    background-color: red;
+		    background-position: 0% 0%;
+		    background-size: auto;
+		    background-repeat: repeat;
+		    background-clip: border-box;
+		    background-origin: padding-box;
+		    background-attachment: scroll;
+		    background-image: none }
+		

+ + The second is equivalent to: + +

+		p {
+			background-color: gray;
+			background-position: 40% 50%;
+			background-size: 10em auto;
+			background-repeat: round;
+			background-clip: border-box;
+			background-origin: border-box;
+			background-attachment: fixed;
+			background-image: url(chess.png);
+		}
+		

+

+ +

+ 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}
+		

+

+ +

+ Another example shows equivalence: + +

+		div {
+			background: padding-box url(paper.jpg) white center;
+		}
+
+		div {
+			background-color: white;
+			background-image: url(paper.jpg);
+			background-repeat: repeat;
+			background-attachment: scroll;
+			background-position: center;
+			background-clip: padding-box;
+			background-origin: padding-box;
+			background-size: auto auto;
+		}
+		

+

+ +

+ 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

@@ -424,11 +2042,12 @@ Additions since [[CSS3BG]] * added ''background-clip/border-area'' and ''background-clip/text'' values to 'background-clip' * added 'background-tbd' * added 'background-repeat-*' longhands + * added logical keywords ''background-repeat/repeat-block'' and ''background-repeat/repeat-inline'' to 'background-repeat'

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 +2061,368 @@ No new privacy considerations have been reported on this specification.

Security Considerations

No new security considerations have been reported on this specification. + + + + + + + + \ No newline at end of file diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs index f778acf8d0dd..1715a359cafb 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).
 
 	

-		
+		
 
 		
 	
@@ -586,9 +585,7 @@ Corners
 	follow the curve of the border.
 
 	

-		
+		
 
 		

 spec:css-sizing-3; type:dfn; text:size
-spec:css-backgrounds-3; type:property; text:border-radius
+spec:css-borders-4;
+	type:property; text:border
+	type:property; text:border-radius
 

Introduction {#intro} @@ -113,7 +115,7 @@ The CSS Box Model {#box-model}

+ content, padding, border and margin areas" width="461">

The various areas and edges of a typical box.

diff --git a/css-break-3/Overview.bs b/css-break-3/Overview.bs index 5a298c5d9db6..74fd00706b35 100644 --- a/css-break-3/Overview.bs +++ b/css-break-3/Overview.bs @@ -17,6 +17,13 @@ Ignored Terms: background positioning area, region chain, … message topic …, At Risk: the ''region'' and ''break-after/avoid-region'' values of 'break-*' +

+spec:css-borders-4;
+    type:property; text:border-image
+    type:property; text:border-radius
+    type:property; text:box-shadow
+

+

CSS Fragmentation Module Level 3
Breaking the Web, one fragment at a time

@@ -27,8 +34,8 @@ Introduction

In [=paged media=] (e.g., paper, transparencies, photo album pages, pages displayed on computer screens as printed output simulations), as - opposed to [=continuous media=], - the content of the document is split into one or + opposed to [=continuous media=], + the content of the document is split into one or more discrete display surfaces. In order to avoid awkward breaks (such as halfway through a line of text), the layout engine must be able to shift around content that would fall across the page break. @@ -536,8 +543,8 @@ Rules for Breaking

- To guarantee progress, fragmentainers are assumed to have a minimum - block size of 1px regardless of their used size. + To guarantee progress, fragmentainers are assumed to have a minimum + block size of 1px regardless of their used size.

Possible Break Points

@@ -766,7 +773,7 @@ Unforced Breaks Finally, if there are no possible break points below the top of the fragmentainer, and not all the content fits, the UA may break anywhere in order to avoid losing content off the edge of the fragmentainer. - + In such cases, the UA may also fragment the contents of monolithic elements by slicing the element's graphical representation. However, the UA must not break at the top of the page, @@ -888,6 +895,7 @@ Breaking into Varying-size Fragmentainers with the box's margin in addition to its padding and border.

@@ -995,8 +1003,9 @@ Splitting Boxes

Illustration of filling the remaining fragmentainer extent. @@ -1059,10 +1068,13 @@ Fragmented Borders and Backgrounds: the 'box-decoration-break' property

-

+

Two possibilities for 'box-decoration-break': on the left, the value ''slice'', on the right the value ''clone''. @@ -1171,7 +1183,8 @@ Transforms, Positioning, and Pagination

+ src="images/fragmented-transforms.png" + width="144">

A fixed-height box spanning 2.5 pages with overflow content spanning to a total of 4 pages. The transform origin of each fragment is the center of its border box; @@ -1238,7 +1251,7 @@ Changes (Issue 3073)

- When an unforced break occurs between before or after a block-level boxes, + When an unforced break occurs between before or after a block-level boxes, any margins adjoining the break truncate to the remaining fragmentainer extent before the break, and are truncated to zero after the break.

@@ -1314,48 +1327,3 @@ Changes

Made a handful of trivial wording fixes. - -

A Disposition of Comments is available. - -

The following significant changes were made since the - 29 January 2015 Working Draft: - -

-
• Dropped any and always values of 'break-*'. -
• Switched priority of 'widows' and 'orphans' vs. 'break-*' restrictions - to make 'widows' and 'orphans' lower-priority rather than higher-priority. -
• Defined that margins are also cloned for ''box-decoration-break: clone'' - (but are truncated in block-level layout). -
• Corrected unforced breaking rules (Class A) to handle new break types - (original rules only handled page breaks). -
• Allowed dropping cloned box decorations when running out of room. -

- -

A Disposition of Comments is available. - -

-Acknowledgments

- -

- The editors would like to thank - Mihai Balan, - Michael Day, - Alex Mogilevsky, - Shinyu Murakami, - Florian Rivoal, - and Alan Stearns - for their contributions to this module. - Special thanks go to the former [[CSS3PAGE]] editors - Jim Bigelow (HP), - Melinda Grant (HP), - Håkon Wium Lie (Opera), - and - Jacob Refstrup (HP) - for their contributions to this specification, - which is a successor of their work there. -

- -

-Privacy and Security Considerations

- -This specification introduces no new privacy or security considerations over CSS in general. diff --git a/css-break-4/Overview.bs b/css-break-4/Overview.bs index 69b80d90048b..50cf2a47e773 100644 --- a/css-break-4/Overview.bs +++ b/css-break-4/Overview.bs @@ -16,6 +16,13 @@ Ignored Terms: background positioning area, region chain, … message topic …, At Risk: the ''break-before/all'' value of 'break-before'/'break-after' +

+spec:css-borders-4;
+	type:property; text:border-image
+	type:property; text:border-radius
+	type:property; text:box-shadow
+

+

CSS Fragmentation Module Level 4
Breaking the Web, one fragment at a time

@@ -134,7 +141,7 @@ Fragmentation Model and Terminology

and the edge of the fragmentainer. - Each fragmentation break (hereafter, break) + Each fragmentation break (hereafter, break) ends layout of the fragmented box in the current fragmentainer and causes the remaining content to be laid out in the next fragmentainer, in some cases causing a new fragmentainer to be generated @@ -712,7 +719,7 @@ Unforced Breaks Finally, if there are no possible break points below the top of the fragmentainer, and not all the content fits, the UA may break anywhere in order to avoid losing content off the edge of the fragmentainer. - + In such cases, the UA may also fragment the contents of monolithic elements by slicing the element's graphical representation. However, the UA must not break at the top of the page, @@ -838,6 +845,7 @@ Breaking into Varying-size Fragmentainers in addition to its padding and border.

@@ -995,36 +1003,40 @@ Adjoining Margins at Breaks: the 'margin-break' property

+ alt="Here the top margin is kept on the first paragraph and the heading + (which starts after a forced break) + but not after the second paragraph + (which starts after an unforced break). + The bottom margins are all discarded + at the bottom of each column." + width="595">

+ alt="Here the top margins occurring at the top of each column + and the bottom margins occurring at the bottom of each column + are all truncated to zero." + width="595">

+ alt="Here the top margins occurring at the top of each column + are all kept; however the bottom margins are still truncated." + width="595">

+ alt="Here the top margins occurring at the top of each column + as well as the bottom margins occurring at the bottom of each column + are all kept; this increases the height of the auto-height container + to accommodate the bottom margins." + width="595">

@@ -1063,8 +1075,9 @@ Splitting Boxes

Illustration of filling the remaining fragmentainer extent. @@ -1123,10 +1136,13 @@ Fragmented Borders and Backgrounds: the 'box-decoration-break' property

- +

Two possibilities for 'box-decoration-break': on the left, the value ''slice'', on the right the value ''clone''. @@ -1234,7 +1250,8 @@ Transforms, Positioning, and Pagination

+ src="images/fragmented-transforms.png" + width="144">

A fixed-height box spanning 2.5 pages with overflow content spanning to a total of 4 pages. The transform origin of each fragment is the center of its border box; @@ -1252,10 +1269,15 @@ Transforms, Positioning, and Pagination are not required to correctly position absolutely-positioned elements that end up on a previously-rendered page. -

-Privacy and Security Considerations

+

+Privacy Considerations

+ +This specification introduces no new privacy considerations over CSS in general. + +

+Security Considerations

-This specification introduces no new privacy or security considerations over CSS in general. +This specification introduces no new security considerations over CSS in general.

Changes

diff --git a/css-cascade-5/Overview.bs b/css-cascade-5/Overview.bs index daa5995e33c4..493de2abd7f5 100644 --- a/css-cascade-5/Overview.bs +++ b/css-cascade-5/Overview.bs @@ -31,6 +31,7 @@ Informative Classes: ex spec:dom; type:dfn; text:shadow tree spec:css-color-4; type:property; text:color spec:css-values-3; type: value; text:ex +spec:css-values-5; type: function; text:if() spec:css-conditional-3; type:at-rule; text:@media spec:mediaqueries-4; type:type; for:@media; text:all spec:mediaqueries-4; type:type; text: @@ -430,7 +431,7 @@ Resetting All Properties: the 'all' property

 	Name: all
-	Value: initial | inherit | unset | revert | revert-layer
+	Value: initial | inherit | unset | revert | revert-layer | revert-rule
 	

The 'all' property is a shorthand @@ -1817,7 +1818,7 @@ Explicit Defaulting As specified in CSS Values and Units [[!css-values-3]], all CSS properties can accept these values. - The keywords ''revert'' and ''revert-layer'' + The keywords ''revert'', ''revert-layer'', and ''revert-rule'' are cascade-dependent keywords; some contexts may restrict their use while allowing the other [=CSS-wide keywords=]. @@ -1954,6 +1955,42 @@ Rolling Back Cascade Layers: the ''revert-layer'' keyword as it is for ''revert'', and thus effectively forms its own [=cascade layer=]. +

+Rolling Back Rules: the ''revert-rule'' keyword

+ + The revert-rule [=CSS-wide keyword=] + rolls back the cascade similar to ''revert'' and ''revert-layer'', + except it works by [=style rule=] + rather than [=cascade origin=] or [=cascade layer=]. + + If the cascaded value of a property is the ''revert-rule'' keyword, + the cascaded value is rolled back + such that the specified value is calculated + as if the current [=style rule=] had not been present at all. + +

+ The ''revert-rule'' keyword can be combined with ''if()'' + to conditionally ignore a declaration: + +

+		div {
+		  border-radius: 5px;
+		}
+		.apply-sharp {
+		  border-radius: if(style(--mode:sharp): 0px; else: revert-rule);
+		}
+		

+ + Given an element <div class=apply-sharp>, + the above style sets ''border-radius'' to 0px + only when the [=computed value=] of --mode + is sharp. + +

+ + The ''revert-rule'' keyword behaves like ''revert-layer'' + in the [=animation origin=]. +

Layer APIs

@@ -2025,6 +2062,8 @@ Changes since the 13 Jan 2022 Candidate Recommendation Snapshot

Non-trivial changes since the 13 January 2022 Candidate Recommendation Snapshot: + * Added the ''revert-rule'' keyword. + (Issue 10443) * Clarify that all “aliases” of a property are reverted by ''revert''/''revert-layer''. * Clarify that style sheets are ordered in [[final CSS style sheets]] order. * Clarify that only ''@layer'' statement rules are ignored when checking validity of ''@import'', not empty ''@layer'' block rules. diff --git a/css-color-4/Overview.bs b/css-color-4/Overview.bs index 725dcc7ade74..5ad0020bc141 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-color-5/Overview.bs b/css-color-5/Overview.bs index ccc208c88441..75820e63186c 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 diff --git a/css-color-adjust-1/Overview.bs b/css-color-adjust-1/Overview.bs index 1fb625efb147..b414baaddf58 100644 --- a/css-color-adjust-1/Overview.bs +++ b/css-color-adjust-1/Overview.bs @@ -826,7 +826,7 @@ Emulation {#color-adjust-emulation} For the purposes of user agent automation and application testing, this document defines the below emulations. - Emulate Forced Colors Mode {#emulate-forced-colors-mode} + Emulate Forced Colors Mode {#emulate-forced-colors-mode} -------------------------------------------- Each [=top-level traversable=] has an associated diff --git a/css-color-hdr-1/Overview.bs b/css-color-hdr-1/Overview.bs index e3b63c8fc41f..933a3b55a49a 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.

@@ -1870,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
+
• Added alpha() RCS to color syntax + #10689 +
+
• Added display-p3-linear to color spaces for interpolation + (#12596) +
+
• Added a couple of deltaE ITP worked examples + (#11250) +
+
• Added display-p3-linear colorspace + (#12596) +
• Added the clamp function which is used in hdr-color()
• Added sample code for hdr-color()
-
• Explained where the eps factor comes from, and what it is for +
• Explained what the eps factor is for (#11788)
• Added second color-hdr() worked example
• Defined the term "Absolute D65 CIE XYZ"
diff --git a/css-conditional-3/Overview.bs b/css-conditional-3/Overview.bs index fb6390c278ee..a8b2177d83f6 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 +

@@ -803,8 +807,10 @@ interface CSSMediaRule : CSSConditionRule { + + idlharness.html - -->

@@ -957,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

@@ -1317,69 +1323,87 @@ container-queries/unsupported-axis.html container-queries/viewport-units-dynamic.html container-queries/viewport-units.html container-queries/whitespace-update-after-removal.html - at-custom-media-parsing.html - at-supports-selector-details-content-before.html - at-supports-selector-details-content.html - container-queries/container-ident-function.html - container-queries/container-units-auto.html - container-queries/container-units-selection-pseudo.html - container-queries/crashtests/chrome-bug-372358471-crash.html - container-queries/crashtests/chrome-bug-385317081-crash.html - container-queries/crashtests/chrome-bug-439886903-crash.html - container-queries/crashtests/svg-resource-in-container-crash.html - container-queries/crashtests/top-layer-crash.html - container-queries/crashtests/top-layer-nested-crash.html - container-queries/flex-basis-with-container-type.html - container-queries/multiple-size-containers-comma-separated-queries.html - container-queries/multiple-style-containers-comma-separated-queries.html - container-queries/no-layout-containment-subgrid-crash.html - container-queries/position-sticky-crash.html - container-queries/query-container-name.html - container-queries/scroll-state/at-container-scrollable-parsing.html - container-queries/scroll-state/at-container-scrollable-serialization.html - container-queries/scroll-state/at-container-snapped-parsing.html - container-queries/scroll-state/at-container-snapped-serialization.html - container-queries/scroll-state/at-container-stuck-parsing.html - container-queries/scroll-state/at-container-stuck-serialization.html - container-queries/scroll-state/container-type-scroll-state-computed.html - container-queries/scroll-state/container-type-scroll-state-containment.html - container-queries/scroll-state/container-type-scroll-state-parsing.html - container-queries/scroll-state/multiple-scroll-state-containers-comma-separated-queries.html - container-queries/scroll-state/scroll-state-initially-scrollable.html - container-queries/scroll-state/scroll-state-initially-snapped.html - container-queries/scroll-state/scroll-state-initially-stuck.html - container-queries/scroll-state/scroll-state-query-with-var.html - container-queries/scroll-state/scroll-state-scrollable-axis.html - container-queries/scroll-state/scroll-state-scrollable-body-001.html - container-queries/scroll-state/scroll-state-scrollable-body-002.html - container-queries/scroll-state/scroll-state-scrollable-change.html - container-queries/scroll-state/scroll-state-scrollable-container-type-change.html - container-queries/scroll-state/scroll-state-scrollable-layout-change-002.html - container-queries/scroll-state/scroll-state-scrollable-layout-change.html - container-queries/scroll-state/scroll-state-scrollable-pseudo.html - container-queries/scroll-state/scroll-state-scrollable-root.html - container-queries/scroll-state/scroll-state-scrollable-wm.html - container-queries/scroll-state/scroll-state-snapped-both.html - container-queries/scroll-state/scroll-state-snapped-change.html - container-queries/scroll-state/scroll-state-snapped-container-type-change.html - container-queries/scroll-state/scroll-state-snapped-layout-change.html - container-queries/scroll-state/scroll-state-snapped-none.html - container-queries/scroll-state/scroll-state-snapped-pseudo.html - container-queries/scroll-state/scroll-state-snapped-snap-changing.html - container-queries/scroll-state/scroll-state-snapped-wm.html - container-queries/scroll-state/scroll-state-stuck-container-type-change.html - container-queries/scroll-state/scroll-state-stuck-layout-change.html - container-queries/scroll-state/scroll-state-stuck-pseudo.html - container-queries/scroll-state/scroll-state-stuck-writing-direction.html - container-queries/scroll-state/scroll-state-target-query-change.html - container-queries/size-container-auto-height.html - container-queries/size-container-writing-mode-change.html - container-queries/size-query-with-var.html - container-queries/style-query-document-element.html - container-queries/style-query-no-cycle.html - container-queries/style-query-registered-custom-rem-change.html - container-queries/style-query-unset-on-root.html - container-queries/var-evaluation.html - js/CSS-supports-details-content-pseudo-parsing.html +at-supports-selector-details-content-before.html +at-supports-selector-details-content.html +container-queries/container-ident-function.html +container-queries/container-units-auto.html +container-queries/container-units-selection-pseudo.html +container-queries/crashtests/chrome-bug-372358471-crash.html +container-queries/crashtests/chrome-bug-385317081-crash.html +container-queries/crashtests/chrome-bug-439886903-crash.html +container-queries/crashtests/svg-resource-in-container-crash.html +container-queries/crashtests/top-layer-crash.html +container-queries/crashtests/top-layer-nested-crash.html +container-queries/flex-basis-with-container-type.html +container-queries/multiple-size-containers-comma-separated-queries.html +container-queries/multiple-style-containers-comma-separated-queries.html +container-queries/no-layout-containment-subgrid-crash.html +container-queries/position-sticky-crash.html +container-queries/query-container-name.html +container-queries/scroll-state/at-container-scrollable-parsing.html +container-queries/scroll-state/at-container-scrollable-serialization.html +container-queries/scroll-state/at-container-scrolled-parsing.html +container-queries/scroll-state/at-container-scrolled-serialization.html +container-queries/scroll-state/at-container-snapped-parsing.html +container-queries/scroll-state/at-container-snapped-serialization.html +container-queries/scroll-state/at-container-stuck-parsing.html +container-queries/scroll-state/at-container-stuck-serialization.html +container-queries/scroll-state/container-type-scroll-state-computed.html +container-queries/scroll-state/container-type-scroll-state-containment.html +container-queries/scroll-state/container-type-scroll-state-parsing.html +container-queries/scroll-state/multiple-scroll-state-containers-comma-separated-queries.html +container-queries/scroll-state/scroll-state-initially-scrollable.html +container-queries/scroll-state/scroll-state-initially-snapped.html +container-queries/scroll-state/scroll-state-initially-stuck.html +container-queries/scroll-state/scroll-state-query-with-var.html +container-queries/scroll-state/scroll-state-scrollable-axis.html +container-queries/scroll-state/scroll-state-scrollable-body-001.html +container-queries/scroll-state/scroll-state-scrollable-body-002.html +container-queries/scroll-state/scroll-state-scrollable-change.html +container-queries/scroll-state/scroll-state-scrollable-container-type-change.html +container-queries/scroll-state/scroll-state-scrollable-layout-change-002.html +container-queries/scroll-state/scroll-state-scrollable-layout-change.html +container-queries/scroll-state/scroll-state-scrollable-pseudo.html +container-queries/scroll-state/scroll-state-scrollable-root.html +container-queries/scroll-state/scroll-state-scrollable-wm.html +container-queries/scroll-state/scroll-state-scrolled-arrow-key-scroll.html +container-queries/scroll-state/scroll-state-scrolled-home-end-scroll.html +container-queries/scroll-state/scroll-state-scrolled-hv.html +container-queries/scroll-state/scroll-state-scrolled-keyboard-scroll-on-body.html +container-queries/scroll-state/scroll-state-scrolled-keyboard-scroll-on-root.html +container-queries/scroll-state/scroll-state-scrolled-mouse-drag-scroll.html +container-queries/scroll-state/scroll-state-scrolled-multiple-scrollers.html +container-queries/scroll-state/scroll-state-scrolled-programmatic-absolute-scrolls.html +container-queries/scroll-state/scroll-state-scrolled-programmatic-relative-scrolls.html +container-queries/scroll-state/scroll-state-scrolled-pu-pd-scroll.html +container-queries/scroll-state/scroll-state-scrolled-scrollbar-button-clicks.html +container-queries/scroll-state/scroll-state-scrolled-scrollbar-track-clicks.html +container-queries/scroll-state/scroll-state-scrolled-spacebar-scroll.html +container-queries/scroll-state/scroll-state-scrolled-user-touch-scroll.html +container-queries/scroll-state/scroll-state-scrolled-wheel-scroll.html +container-queries/scroll-state/scroll-state-scrolled-wm.html +container-queries/scroll-state/scroll-state-snapped-both.html +container-queries/scroll-state/scroll-state-snapped-change.html +container-queries/scroll-state/scroll-state-snapped-container-type-change.html +container-queries/scroll-state/scroll-state-snapped-layout-change.html +container-queries/scroll-state/scroll-state-snapped-none.html +container-queries/scroll-state/scroll-state-snapped-pseudo.html +container-queries/scroll-state/scroll-state-snapped-snap-changing.html +container-queries/scroll-state/scroll-state-snapped-wm.html +container-queries/scroll-state/scroll-state-stuck-container-type-change.html +container-queries/scroll-state/scroll-state-stuck-layout-change.html +container-queries/scroll-state/scroll-state-stuck-pseudo.html +container-queries/scroll-state/scroll-state-stuck-writing-direction.html +container-queries/scroll-state/scroll-state-target-query-change.html +container-queries/size-container-auto-height.html +container-queries/size-container-writing-mode-change.html +container-queries/size-query-with-var.html +container-queries/style-query-document-element.html +container-queries/style-query-no-cycle.html +container-queries/style-query-registered-custom-rem-change.html +container-queries/style-query-unset-on-root.html +container-queries/var-evaluation.html +js/CSS-supports-details-content-pseudo-parsing.html js/CSS-supports-L5.html +js/supports-at-rule.html diff --git a/css-conditional-4/Overview.bs b/css-conditional-4/Overview.bs index e4dd81940215..683734be9381 100644 --- a/css-conditional-4/Overview.bs +++ b/css-conditional-4/Overview.bs @@ -225,7 +225,6 @@ Additions since Level 3

@@ -2153,3 +2262,13 @@ Additions since Level 4

js/conditional-CSSGroupingRule.html js/supports-conditionText.html + + + + diff --git a/css-contain-1/Overview.bs b/css-contain-1/Overview.bs index 38a32fa9aa49..bdb7cea6ecea 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-content-3/Overview.bs b/css-content-3/Overview.bs index 9f97908d2dac..46233746103a 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 diff --git a/css-counter-styles-3/Overview.bs b/css-counter-styles-3/Overview.bs index 61c652daa296..2734b2557999 100644 --- a/css-counter-styles-3/Overview.bs +++ b/css-counter-styles-3/Overview.bs @@ -174,7 +174,7 @@ Defining Custom Counter Styles: the ''@counter-style'' rule the keywords ''decimal'', ''disc'', ''square'', ''circle'', ''disclosure-open'', and ''disclosure-closed''. Note: Note that <> also automatically excludes the CSS-wide keywords. - In addition, some names, like ''inside'', + In addition, some names, like ''list-style-position/inside'', are valid as counter style names, but conflict with the existing values of properties like 'list-style', and so won't be usable there. diff --git a/css-display-3/Overview.bs b/css-display-3/Overview.bs index 4f7136f5ff59..86069fae7357 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/
@@ -36,6 +34,7 @@ WPT Display: closed
 

 spec:css-align-3; type:value; text:stretch
+spec:css-backgrounds-3; type:property; text:border
 spec:css-break-3; type:dfn; text:fragment;
 spec:css2;
 	type:property; text:overflow;
@@ -1179,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.
 
@@ -1384,13 +1383,14 @@ Display Order: the 'order' property
 				<li>Mouse
 			</ul>
 			<img src="images/computer.jpg"
-				alt="You get: a white desktop computer with matching peripherals.">
+				alt="You get: a white desktop computer with matching peripherals."
+				width="250" height="188">
 		</article>
 		

- +

Computer Starter Kit

This is the best computer money can buy, @@ -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-flow block, 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), diff --git a/css-display-4/Overview.bs b/css-display-4/Overview.bs index 8392ac1f1a0b..f4b3f780698d 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. @@ -1177,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. @@ -1399,13 +1398,14 @@ Display Order: the 'order' property <li>Mouse </ul> <img src="images/computer.jpg" - alt="You get: a white desktop computer with matching peripherals."> + alt="You get: a white desktop computer with matching peripherals." + width="250" height="188"> </article>

- +

Computer Starter Kit

This is the best computer money can buy, @@ -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-flow block, 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), @@ -2845,8 +2845,12 @@ Recent Changes Significant changes since the 19 December 2024 First Public Working Draft: + * The 'reading-order' property (Issue 11208) + * Added a new ''source-order'' value to 'reading-flow'. + (Issue 11208) * Added a new ''force-hidden'' value to 'visibility'. (Issue 10182) + * Added Web Platform Tests coverage

Additions since Level 3

diff --git a/css-easing-1/Overview.bs b/css-easing-1/Overview.bs index 553c556f8859..b6d8d7a7c899 100644 --- a/css-easing-1/Overview.bs +++ b/css-easing-1/Overview.bs @@ -505,8 +505,11 @@ Rachel Nabors, Martin Pitt, and the Animation at Work slack community for their feedback and contributions. - -

@@ -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.

diff --git a/css-flexbox-1/Overview.bs b/css-flexbox-1/Overview.bs index 058ea65cf976..3b41441bf54e 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 @@ -791,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 @@ -843,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 anonymous block container flex item. @@ -984,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=] @@ -1155,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. @@ -1260,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. @@ -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.

- +

@@ -2146,7 +2141,7 @@ Flex Lines and will stretch to the entire width of the line, i.e. 300px.

- +

@@ -6501,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.

@@ -6775,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.

@@ -6960,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)

diff --git a/css-font-loading-3/Overview.bs b/css-font-loading-3/Overview.bs index e2ff2840c2ff..3db8eb8bf035 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/ @@ -15,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

@@ -118,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.
 
@@ -392,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
 
@@ -424,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
+	
+
 

 Discovery of information about a font
 
@@ -531,6 +549,12 @@ The FontFaceSet Interface
 		};
 	
 
+	
+		fontfaceset-has.html
+		fontfacesetloadevent-constructor.html
+		idlharness.https.html
+	
+
 	

 		: ready
 		:: This attribute reflects the {{FontFaceSet}}'s {{[[ReadyPromise]]}} slot.
@@ -567,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,
@@ -585,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,
@@ -596,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
@@ -792,6 +831,10 @@ Events
 			Return matched font faces and the found faces flag.
 	
 
+	
+		fontface-loadingevent.html
+	
+
 
 
-

+

 The Nested Declarations Rule
 
 	For somewhat-technical reasons,
@@ -1344,13 +1345,13 @@ will collapse into a single rule when serialized and parsed again.
 Significant changes since the
 Feb 14, 2023 Working Draft:
 
-* The '''' selector of a ''@scope'' rule
+* The <> selector of a ''@scope'' rule
 	no longer acts as the parent rule for nesting.
 	(Issue 9740)
 
 * Clarified that the [=nesting selector=] is allowed to match featureless elements.
 
-* Switched ''&div'' back to being invalid;
+* Switched ''&div'' back to being invalid;
 	now that Syntax does "infinite lookahead",
 	we no longer need to allow it.
 	Plus, doing so avoids a clash with preprocessors.
diff --git a/css-overflow-3/Overview.bs b/css-overflow-3/Overview.bs
index 02e31869d1d5..b5fc7205cfbd 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.
diff --git a/css-overflow-5/Overview.bs b/css-overflow-5/Overview.bs
index b1c74ba3e517..2dc5f470430c 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-overflow-5/carousel-explainer.md b/css-overflow-5/carousel-explainer.md
index 2a34e99a5ca8..0572b054dd52 100644
--- a/css-overflow-5/carousel-explainer.md
+++ b/css-overflow-5/carousel-explainer.md
@@ -263,6 +263,96 @@ ul::column::scroll-marker {
 }
 ```
 
+### Advantages of pseudo-elements
+
+One of the alternatives considered was to use regular HTML elements. Everything will be possible to build using regular HTML elements with [scroll commands](https://github.com/openui/open-ui/issues/1220#issuecomment-3497651863) and the [scroll-target-group property](https://drafts.csswg.org/css-overflow-5/#scroll-target-group). However, there are several unique advantages to supporting the generation and use of pseudo-elements for carousel components:
+
+#### Semantic content-based HTML with adaptable presentation
+
+By being able to have the buttons and markers out of the DOM, the developer can focus on the semantic content being consumed. E.g. the author can simply write the semantic DOM for a list of tracks and have the stylesheet present that appropriately for the device media with generated controls for scrolling (analogous to an advanced scrollbar).
+
+##### Example
+
+```html
+
Album track list
+

+  

+  

+  

+  

+
+```
+
+Then in the CSS they can customize the presentation to be a carousel on screens, or a list otherwise (e.g. when printed):
+
+```css
+@media only screen {
+  /* On screens, the content is presented in an interactive carousel */
+  ol {
+    overflow-x: auto;
+    scroll-marker-group: after;
+    scroll-snap-type: x mandatory;
+  }
+  track-cover::scroll-marker {
+    content: "" / attr(data-name);
+    background-image: attr(data-image);
+  }
+}
+```
+
+#### Automatic linkage to related content
+
+When using pure HTML elements, the link from marker to content is implicit \- it is the owning element. A scroll marker is an auto-generated [self-link](https://github.com/w3c/csswg-drafts/issues/10498). Unlike anchor links, the author does not need to set up globally unique identifier strings and be careful to keep those in sync across the two locations. E.g. to create the same carousel as above in html, the author would need to define globally unique identifiers for each of the linked items and copy over needed data such as images in this case:
+
+##### Example
+
+```html
+
Album track list carousel
+

+  

+    

+    

+    

+    

+  
+  

+    
+    
+    
+    
+  
+
+```
+
+Note: This example does not include the necessary accessibility roles and semantics as these could be generated given new HTML elements and the semantic id linkage so it would not necessarily require additional developer work to specify.
+
+#### Automatic pagination
+
+Arguably the most unique and significant advantage is that since pseudo-elements can be generated dynamically based on layout (e.g. a marker per ::column), a developer can create a paginated interface. Currently, Javascript libraries have to add resize observers and carefully generate elements and reparent contents every time layout changes to the correct number of "page" elements. Not only is this difficult to write correctly, and slow, but there is a long history of challenges with reparenting elements without undesirable side effects (e.g. losing focus, selection, state, etc).
+
+##### Example
+
+Going back to our track list, to group the tracks into pages with CSS pseudo-element markers, the author doesn't need to change the HTML, and can add the following CSS:
+
+```css
+@media only screen {
+  /* On screens, the content is grouped into horizontal pages */
+  ol {
+    overflow-x: auto;
+    scroll-marker-group: after;
+    scroll-snap-type: x mandatory;
+    columns: 1;
+    counter-reset: --page;
+  }
+  ol::column::scroll-marker {
+    counter-increment: --page;
+    content: counter(--page) / "Page " counter(--page);
+  }
+}
+```
+
+To do this with custom HTML carousel elements, you would have to reparent the elements into their corresponding pages and change the DOM to have the correct number of marker elements to match, linked to those elements.
+
 ## Use cases
 
 ### Carousels
diff --git a/css-page-floats-3/Overview.bs b/css-page-floats-3/Overview.bs
index 454743b8845e..d4af66b13a85 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.
 
diff --git a/css-position-3/Overview.bs b/css-position-3/Overview.bs
index 3634d78914d5..8a05840e01e8 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,
@@ -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
diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs
index 316fc66dc55a..2b487ed78d1e 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.
 
@@ -1666,16 +1666,25 @@ Expandable contents of details element: the ''::details-content'' pseudo-element
     when the <{details}> element opens:
 
     
-details::details-content {
-  opacity: 0;
-  transition: content-visibility 300ms allow-discrete, opacity 300ms;
-}
-
-details[open]::details-content {
-  opacity: 1;
-}
+      details::details-content {
+        opacity: 0;
+        transition: content-visibility 300ms allow-discrete, opacity 300ms;
+      }
+
+      details[open]::details-content {
+        opacity: 1;
+      }
   

+ Note: The default UA stylesheet styles a closed ''::details-content'' + with ''content-visibility: hidden'', + so the contents are still considered present for the purpose of find-in-page + and similar features. + This, however, only suppresses the display of the pseudo-elements's contents; + if margin, borders, etc are set on the pseudo-element, they'll still be visible. + Use ''[open]::details-content'' to apply these styles if that's undesirable. + +

Overlapping Pseudo-element Interactions

diff --git a/css-ruby-1/Overview.bs b/css-ruby-1/Overview.bs index 896ec807a135..5ab2301389a7 100644 --- a/css-ruby-1/Overview.bs +++ b/css-ruby-1/Overview.bs @@ -318,7 +318,7 @@ Anonymous Ruby Box Generation

1. [=Inlinify=] block-level boxes: - Any in-flow boxes directly contained by a + Any [=in-flow=] boxes directly contained by a [=ruby container=], [=ruby base container=], [=ruby annotation container=], diff --git a/css-scroll-snap-1/Overview.bs b/css-scroll-snap-1/Overview.bs index dd7a73062ebc..9e68ddec10db 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) diff --git a/css-scroll-snap-2/Overview.bs b/css-scroll-snap-2/Overview.bs index 438b8d79a15b..0a4580189100 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 e42fbe65f6d5..10c552b90233 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-shapes-2/Overview.bs b/css-shapes-2/Overview.bs index a6e35ac2ecdf..c6bf03ebffcc 100644 --- a/css-shapes-2/Overview.bs +++ b/css-shapes-2/Overview.bs @@ -189,7 +189,7 @@ Shapes from Image Fetching external shapes To fetch an external resource for a shape, either an SVG or an image, given a - [=CSS style declaration=] |declaration|, + [=CSS declaration block=] |declaration|, [=fetch a style resource=] given a <> value, with ruleOrDeclaration being |declaration|, destination "image", diff --git a/css-tables-3/Overview.bs b/css-tables-3/Overview.bs index 9bb9ed07cf59..f3145d966385 100644 --- a/css-tables-3/Overview.bs +++ b/css-tables-3/Overview.bs @@ -359,7 +359,7 @@ spec:css-sizing-3; type:property; text:box-sizing

   Fixup Algorithm

   - 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. diff --git a/css-text-3/Overview.bs b/css-text-3/Overview.bs index f71f3c92b9e0..6006c1142c05 100644 --- a/css-text-3/Overview.bs +++ b/css-text-3/Overview.bs @@ -848,7 +848,7 @@ Mapping Rules For ''capitalize'', what constitutes a “word“ is UA-dependent; [[!UAX29]] is suggested (but not required) for determining such word boundaries. - Out-of-flow elements and inline element boundaries + [=Out-of-flow=] elements and inline element boundaries must not introduce a 'text-transform' word boundary and must be ignored when determining such word boundaries. @@ -3431,7 +3431,7 @@ Line Breaking Details and is forbidden under ''line-break: anywhere''.

2. - Out-of-flow elements + [=Out-of-flow=] elements and inline element boundaries do not introduce a [=forced line break=] or [=soft wrap opportunity=] in the flow. @@ -4763,7 +4763,7 @@ Hyphenation: 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. diff --git a/css-text-4/Overview.bs b/css-text-4/Overview.bs index 12c476187cee..f7b418cf494a 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
3. 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 diff --git a/css-text-decor-3/Overview.bs b/css-text-decor-3/Overview.bs index f67f98d836ee..cae11cf23cfe 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. @@ -861,7 +861,7 @@ Text Shadows: the 'text-shadow' property

    	Name: text-shadow
   -	Value: none | [ <>? && <>{2,3} ]#
   +	Value: none | [ <>? && [ <>{2} <>? ] ]#
    	Initial: none
    	Applies to: text
    	Inherited: yes
   diff --git a/css-text-decor-4/Overview.bs b/css-text-decor-4/Overview.bs
   index 5795328a390a..7a936902d0b1 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"> + src="images/underline-position-right.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 @@ -201,6 +208,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