diff --git a/.github/auto-publish-template.yml b/.github/auto-publish-template.yml index 2f31ebe060a1..2a739765723e 100644 --- a/.github/auto-publish-template.yml +++ b/.github/auto-publish-template.yml @@ -20,6 +20,7 @@ on: jobs: publish-TR-{{shortname}}: name: Publish {{shortname}} + if: github.repository == 'w3c/csswg-drafts' runs-on: ubuntu-latest steps: - uses: actions/checkout@v6 diff --git a/.github/generate-auto-publish-workflows.py b/.github/generate-auto-publish-workflows.py index e8b5899b6d95..d1617672bea0 100644 --- a/.github/generate-auto-publish-workflows.py +++ b/.github/generate-auto-publish-workflows.py @@ -41,6 +41,14 @@ "shortname": "css-fonts-5", "publicationStatus": "WD", }, + { + "shortname": "css-2026", + "publicationStatus": "NOTE", + }, + { + "shortname": "css-2027", + "publicationStatus": "NOTE", + }, ] # ----------------------------------------------------------------------------- @@ -94,7 +102,7 @@ def main(): # Write workflow file filename = workflows_dir / f"{spec['shortname']}.yml" - filename.write_text(content, encoding="utf-8") + filename.write_text(content, encoding="utf-8", newline="\n") print(f"Generated {filename}") diff --git a/.github/workflows/build-specs.yml b/.github/workflows/build-specs.yml index 355593e91f69..3277819b332a 100644 --- a/.github/workflows/build-specs.yml +++ b/.github/workflows/build-specs.yml @@ -17,6 +17,7 @@ concurrency: jobs: build-specs: + if: github.repository == 'w3c/csswg-drafts' runs-on: ubuntu-latest environment: diff --git a/.github/workflows/css-2026.yml b/.github/workflows/css-2026.yml new file mode 100644 index 000000000000..a3726b9ac784 --- /dev/null +++ b/.github/workflows/css-2026.yml @@ -0,0 +1,37 @@ +###################################################################### +# IMPORTANT: Do not edit this file directly! +# +# This workflow was automatically generated through the +# generate-auto-publish-workflows.py script. To update the workflow, +# make changes to the template file and run the script again. +###################################################################### + +name: Publish css-2026 on /TR + +on: + pull_request: + paths: + - "css-2026/**" + push: + branches: [main] + paths: + - "css-2026/**" + workflow_dispatch: + +jobs: + publish-TR-css-2026: + name: Publish css-2026 + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v6 + - uses: w3c/spec-prod@v2 + with: + TOOLCHAIN: bikeshed + SOURCE: css-2026/Overview.bs + DESTINATION: css-2026/index.html + BUILD_FAIL_ON: warning + VALIDATE_MARKUP: false + W3C_ECHIDNA_TOKEN: ${{ secrets.TR_TOKEN_CSS_2026 }} + W3C_WG_DECISION_URL: https://www.w3.org/2025/08/21-css-minutes.html#fc30 + W3C_BUILD_OVERRIDE: | + status: NOTE diff --git a/.github/workflows/css-2027.yml b/.github/workflows/css-2027.yml new file mode 100644 index 000000000000..0e9b4e234e59 --- /dev/null +++ b/.github/workflows/css-2027.yml @@ -0,0 +1,37 @@ +###################################################################### +# IMPORTANT: Do not edit this file directly! +# +# This workflow was automatically generated through the +# generate-auto-publish-workflows.py script. To update the workflow, +# make changes to the template file and run the script again. +###################################################################### + +name: Publish css-2027 on /TR + +on: + pull_request: + paths: + - "css-2027/**" + push: + branches: [main] + paths: + - "css-2027/**" + workflow_dispatch: + +jobs: + publish-TR-css-2027: + name: Publish css-2027 + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v6 + - uses: w3c/spec-prod@v2 + with: + TOOLCHAIN: bikeshed + SOURCE: css-2027/Overview.bs + DESTINATION: css-2027/index.html + BUILD_FAIL_ON: warning + VALIDATE_MARKUP: false + W3C_ECHIDNA_TOKEN: ${{ secrets.TR_TOKEN_CSS_2027 }} + W3C_WG_DECISION_URL: https://www.w3.org/2025/08/21-css-minutes.html#fc30 + W3C_BUILD_OVERRIDE: | + status: NOTE diff --git a/.github/workflows/css-color-4.yml b/.github/workflows/css-color-4.yml index 9e208c2d6ee3..008171aed895 100644 --- a/.github/workflows/css-color-4.yml +++ b/.github/workflows/css-color-4.yml @@ -21,6 +21,7 @@ on: jobs: publish-TR-css-color-4: name: Publish css-color-4 + if: github.repository == 'w3c/csswg-drafts' runs-on: ubuntu-latest steps: - uses: actions/checkout@v6 diff --git a/.github/workflows/css-color-5.yml b/.github/workflows/css-color-5.yml index d8d13bbd78e0..d4bba04747c2 100644 --- a/.github/workflows/css-color-5.yml +++ b/.github/workflows/css-color-5.yml @@ -21,6 +21,7 @@ on: jobs: publish-TR-css-color-5: name: Publish css-color-5 + if: github.repository == 'w3c/csswg-drafts' runs-on: ubuntu-latest steps: - uses: actions/checkout@v6 diff --git a/.github/workflows/css-color-hdr-1.yml b/.github/workflows/css-color-hdr-1.yml index 91778947fff6..c1e4d3cbdd8b 100644 --- a/.github/workflows/css-color-hdr-1.yml +++ b/.github/workflows/css-color-hdr-1.yml @@ -21,6 +21,7 @@ on: jobs: publish-TR-css-color-hdr-1: name: Publish css-color-hdr-1 + if: github.repository == 'w3c/csswg-drafts' runs-on: ubuntu-latest steps: - uses: actions/checkout@v6 diff --git a/.github/workflows/css-fonts-4.yml b/.github/workflows/css-fonts-4.yml index c2cd454cfafd..adde93a731c2 100644 --- a/.github/workflows/css-fonts-4.yml +++ b/.github/workflows/css-fonts-4.yml @@ -21,6 +21,7 @@ on: jobs: publish-TR-css-fonts-4: name: Publish css-fonts-4 + if: github.repository == 'w3c/csswg-drafts' runs-on: ubuntu-latest steps: - uses: actions/checkout@v6 diff --git a/.github/workflows/css-fonts-5.yml b/.github/workflows/css-fonts-5.yml index b47abf323758..2e3f71aa31da 100644 --- a/.github/workflows/css-fonts-5.yml +++ b/.github/workflows/css-fonts-5.yml @@ -21,6 +21,7 @@ on: jobs: publish-TR-css-fonts-5: name: Publish css-fonts-5 + if: github.repository == 'w3c/csswg-drafts' runs-on: ubuntu-latest steps: - uses: actions/checkout@v6 diff --git a/animation-triggers-1/Overview.bs b/animation-triggers-1/Overview.bs index 8506335c7251..a0e5dbe1a760 100644 --- a/animation-triggers-1/Overview.bs +++ b/animation-triggers-1/Overview.bs @@ -391,7 +391,7 @@ urlPrefix: https://www.w3.org/TR/web-animations-1/; type: dfn 
 	Name: timeline-trigger
-	Value: none | [ <<'timeline-trigger-name'>> <<'timeline-trigger-source'>> <<'timeline-trigger-activation-range'>> [ '/' <<'timeline-trigger-active-range'>> ]? ]#
+	Value: none | [ <<'timeline-trigger-name'>> <<'timeline-trigger-source'>> <<'timeline-trigger-activation-range'>> [ / <<'timeline-trigger-active-range'>> ]? ]#
The 'timeline-trigger' [=shorthand property=] diff --git a/bin/bikeshed-curl b/bin/bikeshed-curl index d9706a69364d..a2c747dacc9f 100755 --- a/bin/bikeshed-curl +++ b/bin/bikeshed-curl @@ -1,2 +1,2 @@ -curl http://api.csswg.org/bikeshed/ -F file=@Overview.bs -F output=err -curl http://api.csswg.org/bikeshed/ -F file=@Overview.bs -F force=1 > Overview.html +curl https://www.w3.org/publications/spec-generator/ -F file=@Overview.bs -F type=bikeshed-spec -F output=messages +curl https://www.w3.org/publications/spec-generator/ -F file=@Overview.bs -F type=bikeshed-spec -F die-on=nothing > Overview.html diff --git a/css-2026/Overview.bs b/css-2026/Overview.bs index f80f7ecb2c0a..7197d81dba07 100644 --- a/css-2026/Overview.bs +++ b/css-2026/Overview.bs @@ -33,6 +33,7 @@ Boilerplate: index no spec:css-ui-3; type:property; text:cursor spec:css-ui-3; type:property; text:outline spec:css-display-3; type:property; text:display +spec:css-env-1; type:function; text:env() spec:selectors-4; type:dfn; text:document language type:dfn; text:pseudo-elements @@ -646,7 +647,6 @@ Modules with Rough Interoperability relative to the selector of the parent rule. This increases the modularity and maintainability of CSS stylesheets. -

@@ -992,7 +992,7 @@ Safe to Release pre-CR Exceptions

  • The [=pseudo-classes=] '':scope'', '':defined'', '':focus-within'', '':dir()'', '':any-link'', '':open'', '':popover-open'', '':modal'', '':fullscreen'', '':placeholder-shown'', '':default'', '':valid'', '':invalid'', '':required'', '':optional'', and selector lists for the '':nth-child()'' and '':nth-last-child()'' [=pseudo-classes=], defined in [[!SELECTORS-4]] -
  • The 'accent-color' property and ''outline-color/auto'' value for the 'outline-color' property, defined in [[CSS-UI-4]] +
  • The 'accent-color' property, the ''outline-color/auto'' value for the 'outline-color' property, and the <> data type for the [[css-ui-4#cursor|cursor]] property, defined in [[CSS-UI-4]]
  • Everything in CSS Animations Level 1 @@ -1051,6 +1051,8 @@ Additional information: Deprecated alias names for this type: N/A Magic number(s): N/A File extension(s): .css + macOS Uniform Type Identifier(s): public.css + Windows clipboard name(s): N/A Person & email address to contact for further information: @@ -1081,6 +1083,18 @@ Fallback encoding: document declares its encoding to be UTF-8. +

    + Security Considerations +

    + +Please see the Security Considerations of the individual CSS modules. + +

    + Privacy Considerations +

    + +Please see the Privacy Considerations of the individual CSS modules. +

    Indices

    These sections are non-normative. diff --git a/css-align-3/Overview.bs b/css-align-3/Overview.bs index cfebde4ea8e3..023b07495c7c 100644 --- a/css-align-3/Overview.bs +++ b/css-align-3/Overview.bs @@ -2036,186 +2036,23 @@ Default Alignment Shorthand: the 'place-items' property

    Gaps Between Boxes

    - While 'margin' and 'padding' can be used to specify visual spacing around individual boxes, - it's sometimes more convenient to globally specify spacing - between adjacent boxes within a given layout context, - particularly when the spacing is different between sibling boxes - as opposed to between the first/last box and the container's edge. - - The 'gap' property, - and its 'row-gap' and 'column-gap' sub-properties, - provide this functionality for - multi-column, - flex, - and grid layout. - -

    -Row and Column Gutters: the 'row-gap' and 'column-gap' properties

    - - 
    -	Name: row-gap, column-gap
-	Value: normal | <> | <>
-	Initial: normal
-	Applies to: multi-column containers, flex containers, grid containers
-	Inherited: no
-	Percentages: see [[#gap-percent]]
-	Computed value: specified keyword, else a computed <> value
-	Animation type: by computed value type
-
    - - These properties specify fixed-length gutters - between items in the container, - adding space between them-- - in a manner similar to the ''justify-content/space-between'' keyword - of the content-distribution properties, - but of a fixed size instead of as a fraction of remaining space. - The 'column-gap' property specifies spacing between “columns”, - separating boxes in the container's inline axis - similar to inline-axis margin; - while 'row-gap' indicates spacing between “rows”, - separating boxes in the container's block axis. - - Values have the following meanings: - -
    - : <> - : <> - :: - Specifies a gap between “rows” or “columns”, - as defined by the layout modes to which it applies; - see subsections below for details. - - Negative values are invalid. - For percentages, - see [[#gap-percent]]. - - : normal - :: The value ''gap/normal'' represents - a used value of ''1em'' on multi-column containers, - and a used value of ''0px'' in all other contexts. -
    - - Gutters effect a minimum spacing between items: - additional spacing may be added by 'justify-content'/'align-content'. - Such additional space effectively increases the size of these gutters. - - The exact handling of these properties varies by layout container: - -
    -
    multi-column containers -
    - 'column-gap' specifies the [=gutter=] between adjacent column boxes, - see [[CSS-MULTICOL-1]]. - 'row-gap' specifies the [=gutter=] between the rows of [=column boxes=] established by 'column-height', - see [[CSS-MULTICOL-2]]. - -
    flex containers -
    - When applied to the main axis - (e.g. 'column-gap' in a ''flex-flow/row'' flex container), - indicates the [=gutter=] between items - (as if an additional fixed-size margin were inserted - between adjacent flex items - in a single line). - - When applied to the cross axis - (e.g. 'row-gap' in a ''flex-flow/row'' flex container), - indicates the [=gutter=] between adjacent flex lines. - -
    grid containers -
    - The 'row-gap' and 'column-gap' properties, - when specified on a grid container, - define the [=gutters=] between grid rows and grid columns, - respectively. - See [[css-grid-1#gutters]] for precise details. -
    - - In all cases, the [=gutter=] disappears when it coincides with - a [=fragmentation break=]. [[CSS-BREAK-3]] - - Note: Table boxes do not use the 'gap' properties - to specify separation between their cells. - Instead, they use the 'border-spacing' property, - which has slightly different functionality: - it inherits, - and it also specifies the additional spacing between the outermost cells - and the border of the table - (similar to ''space-evenly'' rather than ''space-between''). - -

    -Gap Shorthand: the 'gap' property

    - - 
    -	Name: gap
-	Value: <<'row-gap'>> <<'column-gap'>>?
-	Initial: see individual properties
-	Applies to: multi-column containers, flex containers, grid containers
-	Inherited: no
-	Percentages: refer to corresponding dimension of the content area
-	Computed value: see individual properties
-	Animation type: by computed value type
-
    - - This property is a shorthand that sets 'row-gap' and 'column-gap' in one declaration. - If <<'column-gap'>> is omitted, - it's set to the same value as <<'row-gap'>>. - -
    -
    - A diagram showing how margins and padding add to the visible gutter size -
    - - Note: The 'gap' property is only one component of the visible “gutter” or “alley” created between boxes. - Margins, padding, or the use of distributed alignment - may increase the visible separation between boxes - beyond what is specified in 'gap'. -
    - -

    -Percentages In 'gap' Properties

    - - In general, - gaps introduced by the 'gap' properties - are intended to act like an empty item/track/etc - with the gap's size; - in other words, - an author should be able to reproduce the effects of 'gap' - by just inserting additional empty items/tracks/etc - into the container. - - 'gap' always resolves percentages against - the corresponding size of the [=content box=] - of the element. - When this size is definite, - the behavior is well-defined - and consistent across layout modes. - But since different layout modes treat [=cyclic percentage sizes=] for items/tracks/etc differently, - 'gap' does as well: - - : In Grid Layout - :: - As in the min size properties and margins/paddings [[CSS-SIZING-3]], - [=cyclic percentage sizes=] resolve against zero - for determining intrinsic size contributions, - but resolve against the box’s content box - when laying out the box’s contents. - - : In Flex Layout - :: - [=Cyclic percentage sizes=] resolve against zero in all cases. - -

    -Legacy Gap Properties: the 'grid-row-gap', 'grid-column-gap', and 'grid-gap' properties

    - - The Grid Layout module was originally written with its own set of [=gutter=] properties, - before all such properties were unified into the existing 'row-gap'/'column-gap' naming. - For compatibility with legacy content, - these grid-prefixed names must be supported as follows: - - * grid-row-gap as a [=legacy name alias=] of the 'row-gap' property - * grid-column-gap as a [=legacy name alias=] of the 'column-gap' property - * grid-gap as a [=legacy name alias=] of the 'gap' property + + + + + + + + + + + + + + + + + This section has been moved to [[CSS-GAPS-1#gaps]]. + + 4. Otherwise, if the row is not empty, + [=synthesize=] from the lowest and highest [=content edges=] + of all the cells in the row. + See [[css2#height-layout]]. + + 5. Otherwise, + use the [=block-start=] [=content edge=] of the [=table row box=] itself + as the [=alignment baseline=]. + + For this purpose, + any [=table cell=] that spans multiple rows + is ignored if it’s span does not start in this row; + except that for step 2, + it's ignored if its span does not end in this row. + + Last baselines are analogous + (with “first”/“last” and “start”/“end” inverted). Spanning cells participate only in the first/last row that they span for the purpose of ''first baseline''/''last baseline''. @@ -2555,6 +2420,8 @@ Changes * Defined that 'justify-self' affects the [=automatic size=] of block-level boxes the same way it does for flex and grid items. (Issue 12102) + * Moved the gap properties to [[!CSS-GAPS-1]]. + (Issue 13089) See also previous changes. diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs index 26dd34b9fe15..8a8911346c51 100644 --- a/css-anchor-position-1/Overview.bs +++ b/css-anchor-position-1/Overview.bs @@ -2,7 +2,7 @@ Title: CSS Anchor Positioning Module Level 1 Shortname: css-anchor-position Level: 1 -Status: ED +Status: WD Group: csswg Work Status: refining ED: https://drafts.csswg.org/css-anchor-position-1/ @@ -31,6 +31,7 @@ spec:css-cascade-5; type:dfn; text:property spec:dom; type:dfn; text:shadow tree spec:css-align-3; type:value; text:center spec:css-values-5; type:dfn; text:invalid at computed-value time +spec:css-env-1; type:function; text:env() 
    @@ -457,7 +458,7 @@ in anchor positioning.
 	if all of the following are true:
 
 	* |possible anchor| is either an [=element=]
-		or a fully styleable [=tree-abiding pseudo-element=].
+		or a [=fully styleable pseudo-elements=].
 
 	* |possible anchor| is in scope for |positioned el|,
 		per the effects of 'anchor-scope' on |possible anchor|
@@ -503,7 +504,7 @@ Default Anchors: the 'position-anchor' property
 
 
     Name: position-anchor
-Value: normal | none | auto | <>
+Value: normal | none | auto | <> | match-parent
 Initial: normal
 Applies to: [=absolutely positioned boxes=]
 Inherited: no
@@ -536,6 +537,13 @@ and (by default) all [=anchor functions=] applied to this element.
 	::
 		The [=target anchor element=] selected by the specified <>
 		is the box's [=default anchor element=].
+
+	: match-parent
+	::
+		Uses the same [=default anchor element=] as the parent--
+		or [=originating element=], if this is a [=pseudo-element=]--
+		if any, and if that would be an [=acceptable anchor element=].
+		Otherwise, the box has no [=default anchor element=].
 
 
 The [=principal box=] of the [=default anchor element=]
@@ -565,6 +573,12 @@ is the box's default anchor box.
 	
    
 
 
+If an element has a [=default anchor element=],
+then the [=scrollable containing block=] is used in place of the [=local containing block=]
+when the [=absolute-position containing block=] is generated by a [=scroll container=],
+so that the entire [=scrollable overflow area=] (typically) is available
+for positioning.
+
 ### Implicit Anchor Elements ### {#implicit}
 
 Some specifications can define that,
@@ -637,7 +651,7 @@ Value: none | <>
 Initial: none
 Inherited: no
 Applies to: positioned boxes with a [=default anchor box=]
-Animation type: TBD
+Animation type: discrete
 Computed value: the keyword ''position-area/none'' or a pair of keywords, see [[#position-area-computed]]
    @@ -679,10 +693,6 @@ 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=] - when the [=absolute-position containing block=] is generated by a [=scroll container=], - 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''. @@ -967,35 +977,46 @@ etc. Because the ''anchor()'' function resolves to a <>, it can be used in [=math functions=] like any other length. - ISSUE(10776): Add a better example; this one can be accomplished easily with ''align-self/anchor-center''. - - For example, the following will set up the element - so that its [=inset-modified containing block=] - is centered on the [=anchor box=] - and as wide as possible without overflowing the [=containing block=]: - - 
    -	.centered-message {
-		position: fixed;
-		max-width: max-content;
-		justify-self: center;
-
-		--center: anchor(--x 50%);
-		--half-distance: min(
-			abs(0% - var(--center)),
-			abs(100% - var(--center))
-		);
-		left: calc(var(--center) - var(--half-distance));
-		right: calc(var(--center) - var(--half-distance));
-		bottom: anchor(--x top);
+	For example, in the following chart,
+	the three bars are set up as possible anchors,
+	and the min/max lines and tooltips use ''min()'' and ''max()''
+	to combine ''anchor()'' functions referring to all three
+	to find where to position themselves.
+	You can use the range inputs below each column to adjust the heights,
+	and see that the anchored lines and tooltips dynamically adjust
+	to whichever bar is the highest/lowest.
+
+	
    
+		
+		
    Full Example
    
+	
    
+
+	The important fragment of the code to accomplish this is:
+
+	
+	#bar-1 { anchor-name: --anchor-1; }
+	#bar-2 { anchor-name: --anchor-2; }
+	#bar-3 { anchor-name: --anchor-3; }
+	.line {
+		position: absolute;
+		left: anchor(--chart left);
+		right: anchor(--chart right);
+		&.max {
+			bottom: max(
+				anchor(--anchor-1 top),
+				anchor(--anchor-2 top),
+				anchor(--anchor-3 top)
+			);
+		}
+		&.min {
+			bottom: min(
+				anchor(--anchor-1 top),
+				anchor(--anchor-2 top),
+				anchor(--anchor-3 top)
+			);
+		}
 	}
-	</pre>
-
-	This might be appropriate for an error message
-	on an <{input}> element,
-	for example,
-	as the centering will make it easier to discover
-	which input is being referred to.
+	
 
 
 
    
@@ -1327,7 +1348,7 @@ Centering on the Anchor: the ''anchor-center'' alignment value {#anchor-center}
 --------------------------------------------------------------
 
 
    -Name: justify-self, align-self, justify-items, align-items
+Name: justify-self, align-self
 New Values: anchor-center
 
    
 
@@ -1340,17 +1361,14 @@ but a common case for anchored positioning--
 centering over the [=anchor box=]--
 requires careful and somewhat complex set-up to achieve.
 
-The new anchor-center value
+The new anchor-center value
 makes this case extremely simple:
 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:
-* 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''.
@@ -1485,12 +1503,12 @@ or being positioned partially off screen.
 
 To ameliorate this, an [=absolutely positioned=] box
 can use the 'position-try-fallbacks' property
-to specify additional [=position options=]
+to specify additional position options
 (variant sets of positioning/alignment properties
 generated from the box's existing styles,
 or specified in ''@position-try'' rules)
 that the UA can try if the box overflows its initial position.
-Each is applied to the box,
+Each [=position option=] is applied to the box,
 one by one in the order specified by 'position-try-order',
 and the first that doesn't cause the box
 to overflow its [=containing block=]
@@ -1544,17 +1562,18 @@ Applies to: [=absolutely positioned boxes=]
 Animation type: discrete
    -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 -initially contains a single [=position option=] -generated from the element's fallback base styles, -i.e. the [=computed values|computed styles=] without applying 'position-try-fallbacks'. +This property provides a list of additional, alternative [=position options=] +to try in order to prevent the [=absolutely positioned box=] +from overflowing its [=inset-modified containing block=]. -Each comma-separated entry in the list is a separate option: +Each comma-separated entry in the list is a separate [=position option=]: either the name of a ''@position-try'' block, -or a <> representing an automatic transformation of the box's existing computed style. +or a <> representing an automatic transformation +of the box's existing computed style (its fallback base styles). +Together with the [=fallback base styles=], +these options form the position options list +from which the effective style is chosen, +see [[#fallback-apply]]. Values have the following meanings: @@ -1562,7 +1581,8 @@ Values have the following meanings: : none :: The property has no effect; - the box's [=position options list=] is empty. + the box's [=position options list=] + consists only of the [=fallback base styles=]. : <> :: @@ -1578,8 +1598,8 @@ Values have the following meanings: :: Automatically creates a [=position option=] by [=executing a try-tactic|executing the specified try tactic=] - to the box's [=base styles=], - then adding the constructed [=position option=] + on the box's [=base styles=], + then adding this constructed [=position option=] to the box's [=position options list=]. 
    @@ -1666,10 +1686,10 @@ Inherited: no
 Animation Type: discrete
    -This property allows an element to sort its [=position options=] -by the available space they define, -if it's more important for the box to have as much space as possible -rather than strictly following the order declared in 'position-try-fallbacks'. +This property allows an element to sort its [=position option list=] +by the available space they produce. +This allows the box to prioritize having more layout space +over strictly following the order declared in 'position-try-fallbacks'. 
     <> = most-width | most-height | most-block-size | most-inline-size
@@ -1827,11 +1847,10 @@ The ''@position-try'' Rule {#fallback-rule}
 -------------------------------
 
 The @position-try rule
-defines a position option
-with a given name,
+defines a [=position option=] with a given name,
 specifying one or more sets of positioning properties
 that can be applied to a box
-via 'position-try-fallbacks',
+via 'position-try-fallbacks'.
 
 The syntax of the ''@position-try'' rule is:
 
@@ -1844,10 +1863,10 @@ The syntax of the ''@position-try'' rule is:
 The <> specified in the prelude
 is the rule's name.
 If multiple ''@position-try'' rules are declared with the same name,
-they [=cascade=] the same as ''@keyframe'' rules do.
+they [=cascade=] (overriding each other) the same as ''@keyframes'' rules do.
 
-The ''@position-try'' rule only accepts
-the following [=properties=]:
+The ''@position-try'' rule only accepts
+the following accepted @position-try properties:
 
 * [=inset properties=]
 * [=margin properties=]
@@ -2016,7 +2035,7 @@ and thus trigger special behavior. These fallback-sensitive changes i
 		have been added, removed, or mutated.
 
 	For this purpose, only changes to the computed base style are considered,
-	i.e. the [=computed style=] ignoring any declarations originating
+	i.e. the [=computed value=] ignoring any declarations originating
 	from the Transitions or Animations [=cascade origins=].
 
 
    
@@ -2200,8 +2219,8 @@ Conditional Hiding: the 'position-visibility' property {#position-visibility}
 
 
     Name: position-visibility
-Value: always | [ anchors-valid || anchors-visible || no-overflow ]
-Initial: anchors-visible
+Value: always | [ anchor-valid || anchor-visible || no-overflow ]
+Initial: anchor-visible
 Applies to: [=absolutely positioned boxes=]
 Percentages: n/a
 Inherited: no
@@ -2220,23 +2239,14 @@ depending on some commonly needed layout conditions.
 		(The box is displayed without regard for its anchors
 		or its overflowing status.)
 
-	: anchors-valid
+	: anchor-valid
 	::
-		If any of the box's [=required anchor references=]
-		do not resolve to a [=target anchor element=],
+		If the box references the [=default anchor box=]
+		(e.g. using 'position-area', 'anchor()' or 'anchor-size()' functions, or ''anchor-center''),
+		but the [=default anchor box=] cannot be resolved,
 		the box's 'visibility' property computes to ''force-hidden''.
 
-		Issue: What is a required anchor reference?
-		''anchor()'' functions that don't have a fallback value;
-		the default anchor *sometimes*?
-		Need more detail here.
-
-		Issue: Any anchors are missing,
-		or all anchors are missing?
-		I can see use-cases for either, potentially.
-		Do we want to make a decision here, or make it controllable somehow?
-
-	: anchors-visible
+	: anchor-visible
 	::
 		If the box has a [=default anchor box=]
 		but that [=anchor box=] is [=invisible=] or [=clipped by intervening boxes=],
@@ -2290,6 +2300,10 @@ depending on some commonly needed layout conditions.
 	rather than also floating in a nonsensical location.
 
 
+User agents may recognize anchors-valid and anchors-visible
+as [=legacy value aliases=] of ''anchor-valid'' and ''anchor-visible''
+(but are not required to).
+
 
+  
  • Moved the animation-trigger property to a new spec, animation-triggers-1
+    (PR 13571)
+  
    • 
+  
  • Define trigger scope.  Flattened tree; removed anchor-scope reference
+    (PR 13241)
+  
    • 
+  
  • Added play-once animation-action
+    (Issue 12611)
+  
    • 
+  
  • Defined that event triggers can be defined to have enter/exit pairs, like timelines.
    • 
+  
  • Separated trigger concept from trigger instance
    • 
+  
  • Changed initial value of the exit ranges to 'auto', to match the start ranges
+  
    • 
+  
  • Changed "animation-trigger-behavior" to "animation-trigger" and largely rewrote the definition
+    (PR 13009)
+  
    • 
+  
  • Changed animation-trigger-type to animation-trigger-behavior
+    (PR 12223)
+  
    • 
+  
  • Clarified that setting "effect" should not prevent the timeline to set "set" via animation-timeline
+    (PR 11812)
+  
    • 
+  
  • Defined animation-trigger-* as reset-only sub-properties of animation
+    (PR 11653)
+  
    • 
+  
  • Added note to Animation Frames about running the updating animation trigger state procedure
    • 
+  
  • Added algorithm for Setting a Trigger of an Animation
    • 
+  
  • Added the AnimationTrigger interface
    • 
+  
  • Moved all new definitions from web-animations-1 to web-animations-2
    • 
+  
  • Specified the animation-trigger property
+    (Issue 8942)
+  
    • 
+  
  • Defined order for sorting animationcancel events
+    (Issue 11064)
+  
    • 
+  
  • Made animation-duration:auto resolve to 0s, for legacy compat
+    (Issue 6530)
+  
    • 
+  
  • Switched timeline names from <> to <>
+    (Issue 8746)
+  
    • 
+
+
+
    Changes since the 2 March 2023 Working Draft:
 
 
      
     
    • Added ''animation-duration/auto'' as the [=initial value=] of 'animation-duration'.
diff --git a/css-backgrounds-3/Makefile b/css-backgrounds-3/Makefile
index b5201a8abdfb..13863c77b724 100644
--- a/css-backgrounds-3/Makefile
+++ b/css-backgrounds-3/Makefile
@@ -7,11 +7,8 @@
 # http://www.w3.org/TR/[YEAR]/CR-[SHORTNAME]-[CDATE]/
 # Or set that URL to [VERSION] and call Make as: make status=CR
 #
-#
-# Possible other options to add to the curl command below:
-# -F ids=on
-# -F omitdchtml=on
-# e.g., like this: make opts="-F ids=on -F omitdchtml=on"
+# Additional options may be specified via opts, e.g.:
+# make opts='-F md-prepare-for-tr=yes'
 
 cdate =
 status =
@@ -43,11 +40,11 @@ opts =
 
 all: check Overview.html
 
-# egrep will exit with a zero exit code if there is anything left
+# fgrep will exit with a zero exit code if there is anything left
 check: Overview.err
 	@cat $<
-	@if egrep -v '^(Warning:|\(Processed in .* seconds\)|No errors)' $<;\
-	 then false; else true; fi
+	@if fgrep -q '"messageType":"success"' $<;\
+	 then true; else false; fi
 
 
 # A handy shortcut:
diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs
index ed020479c657..502d9ddb0803 100644
--- a/css-borders-4/Overview.bs
+++ b/css-borders-4/Overview.bs
@@ -3347,10 +3347,10 @@ Interaction with 'border-radius' and 'corner-shape'
    
 
    
 Interaction with 'box-shadow'
    
 
-	An [=outer box-shadow=] follows the outside of the outer path,
-	and an [=inner box-shadow=] follows the inside of the inner path.
-	Both are rendered as a stroke, with a stroke width of spread * 2,
-	clipped by the border shape.
+	An [=outer box-shadow=] is cast as if the shape defined by the outer path were opaque.
+	An [=inner box-shadow=] is cast as if everything outside the shape defined by the inner path were opaque.
+	For both inner and outer shadows, the shadow shape is expanded or contracted by the spread distance,
+	blurred by the blur radius, and then clipped by the 'border-shape', adhering to the standard 'box-shadow' painting rules.
 
 	
    
 		
    diff --git a/css-box-3/Makefile b/css-box-3/Makefile
index 925fedd77443..d39600454d53 100755
--- a/css-box-3/Makefile
+++ b/css-box-3/Makefile
@@ -9,18 +9,14 @@
 # http://www.w3.org/TR/[YEAR]/CR-[SHORTNAME]-[CDATE]/
 # Or set that URL to [VERSION] and call Make as: make status=CR
 #
-#
-# Possible other options to add to the curl command below:
-# -F ids=on
-# -F omitdchtml=on
-# e.g., like this: make opts="-F ids=on -F omitdchtml=on"
+# Additional options may be specified via opts, e.g.:
+# make opts='-F md-prepare-for-tr=yes'
 
 date ?=
 status ?= ED
 group ?= CSS
 opts ?=
 target ?= Overview
-markup ?= html
 cdate ?= $(date)
 
 
@@ -37,14 +33,13 @@ cdate ?= $(date)
 %.html: %.bs
 	@echo "- Calling Bikeshed to generate $@..."
 	@curl -o $@ -s -L -F file=@$< -F md-date=$(cdate) -F md-status=$(status) \
-	 -F output=html -F paragraph=$(markup) $(opts) http://api.csswg.org/bikeshed/
+	 -F type=bikeshed-spec -F output=html $(opts) https://www.w3.org/publications/spec-generator/
 %.err: %.bs
 	@echo "- Calling Bikeshed to check $<..."
 	@rm -f $@
 	@touch $@
 	@curl -o $@ -s -L -F file=@$< -F md-date=$(cdate) -F md-status=$(status) \
-	 -F output=err -F paragraph=$(markup) $(opts) http://api.csswg.org/bikeshed/
-	@sed -i 's/\\033\[[0-9;]*m//g' $@
+	  -F type=bikeshed-spec -F output=messages $(opts) https://www.w3.org/publications/spec-generator/
 
 # For Dispositions of Comments in css3-background:
 %.html: %.txt; awk -f issues-txt-to-html.awk $< >$@
@@ -61,13 +56,12 @@ cdate ?= $(date)
 
 all: check $(target).html
 
-# egrep will exit with a zero exit code if there is anything left
+# fgrep will exit with a zero exit code if there is anything left
 check: $(target).err
 	@cat $<
 	@echo
-	@if egrep -qv '^(Warning:|\(Processed in .* seconds\)|No errors)' $< &&\
-	  ! egrep -q '[^A-Z]* Successfully generated' $<;\
-	 then false; else true; fi
+	@if fgrep -q '"messageType":"success"' $<;\
+	 then true; else false; fi
 
 
 # A handy shortcut:
diff --git a/css-cascade-3/Overview.bs b/css-cascade-3/Overview.bs
index b206c0776e71..c337b916047b 100644
--- a/css-cascade-3/Overview.bs
+++ b/css-cascade-3/Overview.bs
@@ -343,7 +343,7 @@ Value Processing
 	it must assign,
 	to every element in the tree,
 	and correspondingly to every box in the formatting structure,
-	a value to every property that applies to the target media type.
+	a value to every property that applies to the target [=media type=].
 
 	The final value of a CSS property for a given element or box
 	is the result of a multi-step calculation:
diff --git a/css-cascade-4/Overview.bs b/css-cascade-4/Overview.bs
index 5fc5a0310bef..3e6dec6c1daa 100644
--- a/css-cascade-4/Overview.bs
+++ b/css-cascade-4/Overview.bs
@@ -524,7 +524,7 @@ Value Processing
 	it must assign,
 	to every element in the [=flat tree=],
 	and correspondingly to every box in the formatting structure,
-	a value to every property that applies to the target media type.
+	a value to every property that applies to the target [=media type=].
 
 	The final value of a CSS property for a given element or box
 	is the result of a multi-step calculation:
diff --git a/css-cascade-5/Overview.bs b/css-cascade-5/Overview.bs
index 9afe53cdd0a8..aad064f4251d 100644
--- a/css-cascade-5/Overview.bs
+++ b/css-cascade-5/Overview.bs
@@ -492,7 +492,7 @@ Value Processing
 	it must assign,
 	to every element in the [=flat tree=],
 	and correspondingly to every box in the formatting structure,
-	a value to every property that applies to the target media type.
+	a value to every property that applies to the target [=media type=].
 
 	The final value of a CSS property for a given element or box
 	is the result of a multi-step calculation:
@@ -1264,10 +1264,10 @@ Cascade Layers
 		and come first in the order of appearance.
 	
    
 
-	Name-defining [=at-rules=]
-	such as ''@keyframes'' or ''@font-face''
+	[=At-rules=]
+	(such as ''@keyframes'', ''@font-face'', ''@page'', etc.)
 	that are defined inside [=cascade layers=]
-	also use the layer order when resolving name collisions.
+	also use the layer order when resolving collisions or [=cascading=].
 
 	
    
 		For example,
diff --git a/css-cascade-6/Overview.bs b/css-cascade-6/Overview.bs
index cc6b03b1501d..8cd75053a1ba 100644
--- a/css-cascade-6/Overview.bs
+++ b/css-cascade-6/Overview.bs
@@ -35,6 +35,7 @@ spec:selectors-4; type:dfn; text:selector
 spec:selectors-4; type:dfn; text:combinator
 spec:html; type:element; text:style
 spec:css-scoping-1; type:dfn; text:shadow host
+spec:css-display-4; type:property; text:display
 
    @@ -43,7 +44,7 @@ spec:css-values-4
 spec:css-fonts-4
    -

    +

    Introduction and Missing Sections

    Issue: This is a diff spec over CSS Cascading and Inheritance Level 5. @@ -51,6 +52,228 @@ Introduction and Missing Sections if you are implementing anything, please use Level 5 as a reference. We will merge the Level 5 text into this draft once it reaches CR. + + +

    +Importing Style Sheets: the ''@import'' rule

    + + The @import rule allows users to import style rules from other style sheets. + If an ''@import'' rule refers to a valid stylesheet, + user agents must treat the contents of the stylesheet as if they were written in place of the ''@import'' rule, + with two exceptions: + + * If a feature + (such as the ''@namespace'' rule) + explicitly defines that it only applies to a particular stylesheet, + and not any imported ones, + then it doesn't apply to the imported stylesheet. + + * If a feature relies on the relative ordering of two or more constructs in a stylesheet + (such as the requirement that ''@namespace'' rules must not have any other rules other than + ''@import'' preceding it), + it only applies between constructs in the same stylesheet. + +

    + For example, [=declarations=] in style rules from imported stylesheets interact with the cascade + as if they were written literally into the stylesheet at the point of the ''@import''. + + Any ''@import'' rules must precede all other valid at-rules and style rules in a style sheet + (ignoring ''@charset'', ''@supports-condition'', and @layer statement rules) + and must not have any other valid at-rules or style rules between it and previous ''@import'' rules, + or else the ''@import'' rule is invalid. + The syntax of ''@import'' is: + +

    +		@import [ <> | <> ]
+		        [[ layer | layer( <> ) ]
+		         || [ scope | scope( <> | <> ) ]
+		         || <>]?
+		        <> ;
+
+		<supports-import-condition> = supports( [ <> | <> ] )
+		<media-import-condition> = <>
    + + where: + + * the <> or <> + gives the URL of the style sheet to be imported. + + and optionally: + + * the ''layer'' keyword or ''layer()'' function, + which assigns the contents of the style sheet + into its own anonymous [=cascade layer=] + or into the named [=cascade layer=]. + + The layer is added to the [[#layer-ordering|layer order]] + even if the import fails to load the stylesheet, + but is subject to any [=import conditions=] + (just as if declared by an ''@layer'' rule wrapped + in the appropriate [=conditional group rules=]). + * the ''scope'' keyword or ''scope()'' function, + which [=scopes=] the [=style rules=] within the stylesheet, + using the [=scoping roots=] and [=scoping limits=] + as described by [[#scope-limits]]. + + Note: The ''scope'' keyword behaves like a ''@scope'' rule with an empty prelude, + scoping the imported rules to the [=parent element=] of the [=owner node=] + of the stylesheet containing the ''@import'' rule. + + Note: While the [=style rules=] within the imported stylesheet + become [=scoped=], + they do not become [=nested style rule|nested=]. + In particular, + top-level selectors are not re-interpreted as [=relative selectors=], + and the ''&'' pseudo-class maintains its non-nested behavior. + + * the [=import conditions=], + <> and <>, + which state the conditions under which the ''@import'' rule applies. + +
    + The following conditional @import rule + only loads the style sheet when the UA + supports ''display: flex'', + and only applies the style sheet on a handheld device + with a maximum viewport width of 400px. + + 
    @import url("narrow.css") supports(display: flex) handheld and (max-width: 400px);
    +
    + +
    + The following layer imports load the style sheets into + the ''framework.component'' layer, and an un-named layer, respectively: + + 
    +		@import url("tabs.css") layer(framework.component);
+		@import url("override.css") layer;
+
    +
    + +
    + The following imports a stylesheet, and scopes the style rules + to elements matching .card. + + 
    +		@import url("card.css") scope(.card);
+
    +
    + + If a <> is provided, + it must be interpreted as a <> with the same value. + +
    + The following lines are equivalent in meaning + and illustrate both ''@import'' syntaxes + (one with ''url()'' and one with a bare string): + + 
    +		@import "mystyle.css";
+		@import url("mystyle.css");
+
    +
    + +

    +Conditional ''@import'' Rules

    + + Import conditions allow the import to be media– or feature-support–dependent. + In the absence of any import conditions, the import is unconditional. + (Specifying ''@media/all'' for the <> has the same effect.) + If the import conditions do not match, + the rules in the imported stylesheet do not apply, + exactly as if the imported stylesheet were wrapped in ''@media'' and/or ''@supports'' blocks with the given conditions. + +
    + The following rules illustrate how ''@import'' rules can be made media-dependent: + + 
    +		@import url("fineprint.css") print;
+		@import url("bluish.css") projection, tv;
+		@import url("narrow.css") handheld and (max-width: 400px);
+
    +
    + + User agents may therefore avoid fetching a conditional import + as long as the import conditions do not match. + Additionally, if a <> blocks the application of the imported style sheet, + the UA must not fetch the style sheet (unless it is loaded through some other link) + and must return null for the import rule's CSSImportRule.styleSheet value + (even if it is loaded through some other link). + +
    + The following rule illustrates how an author can provide fallback rules for legacy user agents + without impacting network performance on newer user agents: + + 
    +		@import url("fallback-layout.css") supports(not (display: flex));
+		@supports (display: flex) {
+		  ...
+		}
+
    +
    + + The [=import conditions=] are given by + <>, which is parsed and interpreted as a media query list, + and <>, is parsed and interpreted as a [=supports query=]. + If a <> is given in place of a <>, + it must be interpreted as a <> + (i.e. the extra set of parentheses is implied) + and treated as a <>. + +
    + For example, the following two lines are equivalent: + 
    +		@import "mystyle.css" supports(display: flex);
+		@import "mystyle.css" supports((display: flex));
+
    +
    + + The evaluation and full syntax of the import conditions + are defined by the Media Queries [[!MEDIAQ]] + and CSS Conditional Rules [[!CSS-CONDITIONAL-3]] specifications. + +

    +Processing Stylesheet Imports

    + + When the same style sheet is imported or linked to a document in multiple places, + user agents must process (or act as though they do) each link + as though the link were to an independent style sheet. + + Note: This does not place any requirements on resource fetching, + only how the style sheet is reflected in the CSSOM and used in specs such as this one. + Assuming appropriate caching, + it is perfectly appropriate for a UA to fetch a style sheet only once, + even though it's linked or imported multiple times. + + The [=cascade origin=] of an imported style sheet is the [=cascade origin=] of the style sheet that imported it. + + The environment encoding of an imported style sheet is the encoding of the style sheet that imported it. [[css-syntax-3]] + +

    +Content-Type of CSS Style Sheets

    + + The processing of imported style sheets depends on the actual type of the linked resource: + + * If the resource does not have [=Content-Type metadata=], + the type is treated as text/css. + * If the host document is in [=quirks mode=], + and the host document's origin is [=same origin=] + with the linked resource [=/response's=] [=response/URL's=] origin, + the type is treated as text/css. + * Otherwise, the type is determined from its [=Content-Type metadata=]. + + If the linked resource's type is text/css, + it must be interpreted as a CSS style sheet. + Otherwise, it must be interpreted as a network error. + + +

    +Comparing <> Values

    + + Two <> values are equivalent colors + when they compare as equal using the algorithm below. + This comparison is used, + for example, + by ''style()'' container queries [[CSS-CONDITIONAL-5]] + and by CSS Transitions [[CSS-TRANSITIONS-1]] + to determine whether a color value has changed. + + Given two <> values C1 and C2, + they are [=equivalent colors=] if and only if + the following algorithm returns true: + +
      +
    1. + For each of C1 and C2, + convert any [=powerless component=]s to [=missing component=]s. +
      2. +
    2. + If C1 and C2 share the same <>: +
        +
      1. + Compare their components one by one, + including the alpha channel. + A [=missing component=] is only equal to + another [=missing component=]. + Two numeric components are considered equal + if they differ by no more than a small + implementation-defined ε. +
        2. +
      2. + Return true if and only if + all components compare as equal. +
        3. +
      +
      3. +
    3. + Otherwise, C1 and C2 are in different <>s. + If either color has at least one [=missing component=], + return false. +
      4. +
    4. + Otherwise, neither color has any [=missing component=]. + Convert both C1 and C2 to ''oklab'', + then return true if and only if + all components (including alpha) of the converted colors + compare as equal, + using a standardized Oklab ε of 0.00001. +
      5. +
    + + Note: Two colors that are expressed in different <>s + but are colorimetrically identical—for example, + ''red'' and ''color(srgb 1 0 0)''—are [=equivalent colors=] + by step 4 of this algorithm, + since they convert to the same ''oklab'' value. + + For the purposes of this comparison, + ''rgb()'', ''rgba()'', ''hsl()'', ''hsla()'', ''hwb()'', + [=hex colors=], [=named colors=], and [=system colors=] + are all considered to be in the ''srgb'' <>. + + + query-style-color.html +

    CSS serialization of sRGB values

    - Corresponding sRGB values use either the ''rgb()'' or ''rgba()'' form + If the value has no [=missing color components=], + corresponding sRGB values use either the ''rgb()'' or ''rgba()'' form (depending on whether the (clamped) alpha is exactly 1, or not), with all ASCII lowercase letters for the function name. @@ -6874,7 +7085,77 @@ Serializing sRGB values to separate the blue component of ''rgba()'' from the alpha value. - + However, the legacy color syntax with comma separators + cannot represent ''none''. + If the value has at least one [=missing color component=], + the serialization form is chosen + to preserve those components as the ''none'' keyword, + based on the color function of the [=declared value=]: + + * For ''rgb()'' and ''rgba()'' values + (the only sRGB form in this list whose syntax accepts ''none''; + [=hex colors=], [=named colors=], [=system colors=], + deprecated-colors, + and ''transparent'' have no parametric syntax + and so never have [=missing color components=]), + the value is serialized as a ''color()'' function + in the ''srgb'' [=color space=] + rather than as the modern space-separated form of ''rgb()'', + even though that form would also accept ''none'': + "color(srgb" + followed by a single space, + followed by a space-separated list of the three + non-alpha components serialized as <>s + in the [0, 1] reference range + (or as ''none'' if [=missing=]), + followed (only if the alpha is non-unity or [=missing=]) + by " / " + and the alpha component + (serialized per the + alpha rules, + or as ''none'' if [=missing=]), + followed by ")". + + * For ''hsl()'' and ''hsla()'' values, + the value is serialized using the + modern (whitespace-separated) ''hsl()'' syntax, + with a slash before the alpha component when present. + The function name is "hsl" (in + ASCII lowercase) + regardless of whether the value was authored + using the ''hsla()'' alias. + The hue is serialized as a canonicalized <> in degrees, + the saturation and lightness as <>s, + and the alpha + (included only if non-unity or [=missing=]) + per the alpha rules; + any [=missing component=] is serialized as the ''none'' keyword. + + * For ''hwb()'' values, + the value is serialized using the + modern (whitespace-separated) ''hwb()'' syntax, + with a slash before the alpha component when present. + The function name is "hwb" + in ASCII lowercase. + The hue is serialized as a canonicalized <> in degrees, + the whiteness and blackness as <>s, + and the alpha + (included only if non-unity or [=missing=]) + per the alpha rules; + any [=missing component=] is serialized as the ''none'' keyword. + + Note: this means that an ''hsl()'' or ''hwb()'' value + containing ''none'' round-trips through serialization + in its own color function, + rather than degrading to ''rgba()'' (whose legacy form cannot represent ''none''), + while an ''rgb()'' value containing ''none'' + is serialized via ''color(srgb …)''. + The modern space-separated form of ''rgb()'' could itself represent ''none'', + but the [[#serializing-color-values|sRGB CSS serialization]] uses ''color(srgb …)'' instead + for consistency with how all other [=color spaces=] are serialized + in their non-legacy form. + This parallels the behavior of relative color syntax + defined in [[css-color-5#serial-origin-color]].

    For example, the serialized value of

    @@ -6906,6 +7187,34 @@ Serializing sRGB values
    +
    + For example, the author-supplied value + + 
    hwb(20 none 30% / none)
    + + contains [=missing color components=] + (both the whiteness and the alpha are ''none''), + so it is not serialized through ''rgba()''. + Instead, it is serialized using the modern ''hwb()'' syntax as + + 
    hwb(20 none 30% / none)
    + + preserving each ''none'' value. +
    + +
    + Similarly, the author-supplied value + + 
    rgb(none 0 0)
    + + is serialized as + + 
    color(srgb none 0 0)
    + + because ''rgb()'' (in its serialized legacy comma form) + cannot represent ''none''. +
    + Note: contrary to CSS Color 3, the parameters of the ''rgb()'' function are of type <>, not <>. @@ -7262,14 +7571,14 @@ Serializing other colors The serialized form of ''currentColor'' is the string "currentcolor". - @@ -7283,10 +7592,10 @@ Serializing <> (i.e. does not use ''calc()'') it should be serialized as the equivalent <> (0% maps to 0, 100% maps to 1) value. - value. - Otherwise, the specified value - for an opacity value - should serialize using + value. + Otherwise, the specified value + for an opacity value + should serialize using the standard serialization for the grammar. + +
  • For color comparisons in Oklab, standardized ε to be 0.00001 + (Issue 13157) +
    • +
  • Added a new section defining when two <> values are [=equivalent colors=], + covering same-color-space component comparison, the treatment of [=missing component=]s, + and cross-color-space comparison via ''oklab''. + (Issue 13157) +
    • +
  • Clarified in the main Color interpolation section that, if the hue interpolaton method is not specified, shorter is the default. (This was already specified in the Hue Interpolation section). + (Issue 13788) +
    • +
  • Expanded the concept of analogous components to analogous sets of components, to minimize ''none'' → ''0'' conversions + (Issue 10210) +
    • +
  • Split color conversion into two stages + (Issue 10211) +
    • +
  • Clarified how system colors react to the used color scheme + (Issue 13719)
  • Updated abstract to mention color interpolation and gamut mapping.
  • Clarified wording regarding the aims of CSS gamut mapping
  • Corrected ray trace algorithm to not overwrite end @@ -7801,7 +8137,7 @@ Changes
  • Added a diagram showing imaginary colors in CIE Lab
  • Differentiated between out of gamut but physically realizable colors, and imaginary colors
    • -
  • More even-handed description of clipping, +
  • More even-handed description of clipping, showing some cases which give acceptable results (Issue 10579)
    • @@ -7818,13 +8154,13 @@ Changes
  • Added display-p3-linear to predefined colorspaces (Issue 11250)
    • -
  • Clarified serializing opacity values with calc() +
  • Clarified serializing opacity values with calc() (Issue 10426)
  • Interpolation between legacy sRGB colors is (once again) in sRGB space, for compatibility (Issue 7949)
    • -
  • Clarified real-world CIE Lab range for a and b +
  • Clarified real-world CIE Lab range for a and b (Issue 12208)
  • Clarified that Opacity value does not affect hit testing @@ -7835,7 +8171,6 @@ Changes

    Changes since the Candidate Recommendation Draft of 13 Feb 2024

    @@ -743,12 +748,11 @@ Indicating Block-Axis Overflow: the 'block-ellipsis' property line-clamp-auto-017.html - Ignoring any intervening [=absolutely positioned=] element - or any element closing boundary, - this property only affects a line box - if it immediately precedes either a [=region break=] or a [=clamp point=], - and the line box is in the same [=independent formatting context=] - as the [=clamp point=] or the [=region break=]. + Ignoring any intervening [=absolutely positioned=] elements + or element closing boundaries, + this property affects a line box + that immediately precedes a [=region break=] or a [=clamp point=] + when both participate in the same [=independent formatting context=]. line-clamp-auto-034.html @@ -759,6 +763,65 @@ Indicating Block-Axis Overflow: the 'block-ellipsis' property Note: See ''continue: discard'' for a way to generate boxes with such a [=region break=]. +
    + ```html +
    +
    +
    + Line 1
    + Line 2
    + Line 3
    + Line 4 +
    +
    +
    +
    +
    + + Line 5 +
    + ``` + + Here the clamp point is not immediately after a line box, + but the only thing between it and the last line box + are element closing boundaries and abspos, + and both are in the same independent formatting context, + so "Line 4" is ellipsized. +
    + +
    + Meanwhile, in this example, + there is an in-flow element + between the line box and the clamp point, + so no ellipsis is shown: + + ```html +
    + Line 1
    + Line 2 +
    + + Line 3 +
    + ``` +
    + +
    + In this example, + the last line box is contained + in an [=independent formatting context=], + so no ellipsis will be shown: + + ```html +
    + Line 1 +
    Line 2
    + + Line 3 +
    + ``` +
    + The inserted content is called the block overflow ellipsis. Values have the following meanings: @@ -821,7 +884,7 @@ Indicating Block-Axis Overflow: the 'block-ellipsis' property * The [=block overflow ellipsis=] is wrapped in an anonymous inline whose parent is the [=block container=]’s [=root inline box=]. - This inline is assigned ''unicode-bidi: plaintext'' + This inline is assigned ''unicode-bidi: isolate'' and ''line-height: 0''. @@ -881,10 +944,7 @@ Indicating Block-Axis Overflow: the 'block-ellipsis' property * The anonymous inline of [=block overflow ellipsis=] is placed after any remaining content, after [[css-text-4#white-space-phase-2]], - as a direct child of the block container’s root inline box, - with the appropriate bidi embedding levels - given its directionality - and that of its parent. + as a direct child of the block container’s root inline box. block-ellipsis-004.html @@ -1182,7 +1242,7 @@ Forcing a Break After a Set Number of Lines: the 'max-lines' property then, given a [=computed value=] of N: - If the box is a [=line-clamp container=], - its [=line-based clamp point=] is set + its line-based clamp point is set to the first possible clamp point after its Nth descendant in-flow line box. @@ -1539,8 +1599,18 @@ Handling of Excess Content: the 'continue' property webkit-line-clamp-040.html + For this definition, + [=out-of-flow=] boxes between two line boxes + don't prevent them from being consecutive. + This is the case even if + the second line box is pushed down by [=floats=]. + Such out-of-flow boxes are considered + to be after the clamp point. + - A point between two [=in-flow=] [=block-level=] sibling boxes in the line-clamp container's [=block formatting context=]. + Any [=out-of-flow=] boxes in between are considered + to be after the clamp point. line-clamp-auto-034.html @@ -1568,13 +1638,11 @@ Handling of Excess Content: the 'continue' property if its automatic block size were infinite. If the [=block size=] would be infinite, then there is no [=auto clamp point=]. - Additionally, - when the [=line-clamp container=]'s [=block formatting context root=] - has a [=computed value=] of 'max-lines' other than ''max-lines/none'', - then that property determines the line-based clamp point. - The actual [=clamp point=] used is - either the [=auto clamp point=] or the [=line-based clamp point=], - choosing the earlier when both exist. + + If the [=line-clamp container=]'s [=block formatting context root=] + has a [=computed value=] of 'max-lines' set to ''max-lines/none'', + then the actual [=clamp point=] is the [=auto clamp point=], if any. + Otherwise, the actual clamp point is the [=line-based clamp point=], if any. line-clamp-011.html @@ -1606,6 +1674,10 @@ Handling of Excess Content: the 'continue' property webkit-line-clamp-with-max-height.html + Issue(12041): Having the actual [=clamp point=] be the earlier of + the [=line-based clamp point=] and the [=auto clamp point=], if both exist, + is a wanted behavior, but the syntax for it is still being worked out. + Within a [=line-clamp container=], the following boxes and line boxes become [=invisible boxes=]: @@ -1694,9 +1766,18 @@ Handling of Excess Content: the 'continue' property NOTE: This differs from the ''display: none''-like behavior of not rendered content with ''continue: discard''. + Within a [=line-clamp container=], + floats which have not been made into [=invisible boxes=] + must be visually clipped to the [=content edge=] + of the [=line-clamp container=]. + They do not introduce any clearance + that would make the [=line-clamp container=] increase its height, + and do not contribute to the [=scrollable overflow area=]. + If a [=block container=] contains a [=clamp point=], within itself or in any of its descendants, - its [=automatic block size=] will not take into account any invisible boxes. + its [=automatic block size=] will not take into account any invisible boxes, + nor any clipped float. This also applies for the [=line-clamp container=] itself. @@ -1706,13 +1787,6 @@ Handling of Excess Content: the 'continue' property line-clamp-auto-005.html - NOTE: If there are any floats before the [=clamp point=], - the [=line-clamp container=]'s automatic size must grow to encompass the clearance, - just like it would if it were a regular [=block formatting context=] root - that only contained its contents before the [=clamp point=]. - This is regardless of whether this would cause any content after the [=clamp point=] - to be within the container's bounds. -

    Discarding Content

    Note: ''continue: discard'', and thus this subsection, is [=at risk=]: diff --git a/css-overflow-5/Overview.bs b/css-overflow-5/Overview.bs index 82827c5ebd20..780388ad74d7 100644 --- a/css-overflow-5/Overview.bs +++ b/css-overflow-5/Overview.bs @@ -300,11 +300,11 @@ The 'scroll-marker-group' property 
     	Name: scroll-marker-group
-	Value: none | before | after
+	Value: none | [ [ before | after ] || [ links | tabs ] ]
 	Initial: none
 	Applies to: [=scroll containers=]
 	Inherited: no
-	Computed value: specified value
+	Computed value: specified keyword(s)
 	Animation Type: discrete
 	Canonical Order: per grammar
    @@ -331,6 +331,17 @@ The 'scroll-marker-group' property the generated pseudo-element's box is the last child of the [=originating element=]. Otherwise, its box is an immediate following sibling to its [=originating element=]. +
    links +
    + The generated ''::scroll-marker-group'' operates in "links" mode, + functioning like a navigation list. + This is the default mode if omitted. + +
    tabs +
    + The generated ''::scroll-marker-group'' operates in "tabs" mode, + functioning like a tablist. +

    The ''::scroll-marker-group'' pseudo-element

    @@ -352,9 +363,6 @@ The 'scroll-marker-group' property ::scroll-marker-group { contain: size !important; } - The 'scroll-marker-group' implicitly behaves as a single focusable component, - establishing a focusgroup. -

    The ''::scroll-marker'' pseudo-element

    Similar to ''::before'' and ''::after'', all elements can have a ''::scroll-marker'' pseudo-element, @@ -370,10 +378,25 @@ The 'scroll-marker-group' property These pseudo-elements are [=fully styleable pseudo-elements=] and have a default style like the [[html#the-a-element|HTML <a> element]]. These pseudo-elements have an indicated [=scroll target=] of their originating element. - They behave as an element with a tabindex of "-1", - making them focusable within their '::scroll-marker-group' either by arrow key navigation within the group, - or via the tab key when currently active or when no other ''::scroll-marker'' is active and this is the first marker in the group, - ensuring the group has a guaranteed tab stop. + +

    Scroll Marker Modes

    + + A ''::scroll-marker-group'' operates in either links or tabs mode based on the 'scroll-marker-group' property value of its [=originating element=]. The chosen mode significantly affects the roles, focus behaviors, and interactions of the associated elements and pseudo-elements (see [[#scroll-marker-activation]]). + + If the mode is [=links=]: + + * The roles of ''::scroll-marker-group'' and ''::scroll-marker'' are `navigation` and `link` respectively. + * All ''::scroll-marker'' pseudo-elements are tab stops, in order. + * The roles of the [=originating elements=] are unaffected. + + If the mode is [=tabs=]: + + * The roles of ''::scroll-marker-group'' and ''::scroll-marker'' are `tablist` and `tab` respectively. + * The ''::scroll-marker-group'' implicitly behaves as a single focusable component, establishing a focusgroup. + * Only the active ''::scroll-marker'' is a tab stop; arrow keys are used to switch between markers. They behave as an element with a tabindex of "-1", making them focusable within their ''::scroll-marker-group'' either by arrow key navigation within the group, or via the tab key when currently active (or when no other ''::scroll-marker'' is active and this is the first marker in the group), ensuring the group has a guaranteed tab stop. + * [=Originating elements=] of ''::scroll-marker'' are given an implicit role of `tabpanel`. If the [=originating element=] is a ''::column'' pseudo-element, the `tabpanel` role is given to the [=originating element=] of the ''::column''. + * The ''::scroll-marker'' pseudo-element is a focus navigation scope owner for its associated [=originating element=]. This means that tab focus moves from the marker to the content. Since only the active marker is a tab stop, contents of the inactive tabpanels are not reached unless the active tab is switched. + * Content from inactive tabs is also hidden from the accessibility tree, meaning authors do not need to carefully apply `interactivity: inert` to hide the inactive tabpanels.

    Selecting Scroll Markers: '':target-current'', '':target-before'' and '':target-after'' pseudo-classes

    @@ -520,14 +543,20 @@ Calculating the Active Scroll Marker 1. Scroll the |element| into view with block, inline, and container. 1. : If the activation was triggered by invocation :: - 1. Follow the hyperlink updating the URL, however retain focus on the marker element. - - Note: If the user tabs away the focus behavior will ensure they tab into the relevant content. + 1. Follow the hyperlink updating the URL. + 1. : If the [=scroll marker group=] is in [=tabs=] mode + :: + Retain focus on the [=scroll marker=] element. + 1. : If the [=scroll marker group=] is in [=links=] mode + :: + Set the sequential focus navigation starting point to the [=originating element=], losing focus from the [=scroll marker=]. + + Note: In [=tabs=] mode, if the user tabs away, the focus behavior will ensure they tab into the relevant content.

    Next tab-index-ordered focus

    - When a [=scroll marker=] is activated, + When a [=scroll marker=] in [=tabs=] mode is activated, the next tabindex-ordered focus navigation will focus the [=scroll target=] if it is focusable, otherwise, it will find the next focusable element from the [=scroll target=] as though it were focused. diff --git a/css-overscroll-1/Overview.bs b/css-overscroll-1/Overview.bs index bbfaa1e5ba29..9e8bfded6364 100644 --- a/css-overscroll-1/Overview.bs +++ b/css-overscroll-1/Overview.bs @@ -162,7 +162,7 @@ use preventDefault instead. 
     Name: overscroll-behavior
-Value: [ contain | none | auto ]{1,2}
+Value: [ contain | none | auto | chain ]{1,2}
 Initial: auto auto
 Applies to: scroll container elements
 Inherited: no
@@ -192,6 +192,11 @@ Values have the following meanings:
     This value implies the same behavior as contain and in
     addition this element must also not perform local boundary default actions such as
     showing any overscroll affordances.
+  
    chain
+  
    
+    This value indicates that the element may perform non-local boundary default actions
+    such as scroll chaining or navigation. However, the element must not perform local
+    boundary default actions, such as showing any overscroll affordances.
   
    auto
   
    
     This value indicates that the user agent should perform the usual boundary default action
@@ -250,7 +255,7 @@ Physical Longhands for 'overscroll-behavior'  {#overscroll-behavior-longhands-ph
 
 
     Name: overscroll-behavior-x, overscroll-behavior-y
-Value: contain | none | auto
+Value: contain | none | auto | chain
 Initial: auto
 Applies to: scroll container elements
 Inherited: no
@@ -274,7 +279,7 @@ Flow-relative Longhands for 'overscroll-behavior'  {#overscroll-behavior-longhan
 
 
     Name: overscroll-behavior-inline, overscroll-behavior-block
-Value: contain | none | auto
+Value: contain | none | auto | chain
 Initial: auto
 Applies to: scroll container elements
 Inherited: no
diff --git a/css-print/Makefile b/css-print/Makefile
index 925fedd77443..22dce3574ea1 100755
--- a/css-print/Makefile
+++ b/css-print/Makefile
@@ -9,18 +9,14 @@
 # http://www.w3.org/TR/[YEAR]/CR-[SHORTNAME]-[CDATE]/
 # Or set that URL to [VERSION] and call Make as: make status=CR
 #
-#
-# Possible other options to add to the curl command below:
-# -F ids=on
-# -F omitdchtml=on
-# e.g., like this: make opts="-F ids=on -F omitdchtml=on"
+# Additional options may be specified via opts, e.g.:
+# make opts='-F md-prepare-for-tr=yes'
 
 date ?=
 status ?= ED
 group ?= CSS
 opts ?=
 target ?= Overview
-markup ?= html
 cdate ?= $(date)
 
 
@@ -37,14 +33,13 @@ cdate ?= $(date)
 %.html: %.bs
 	@echo "- Calling Bikeshed to generate $@..."
 	@curl -o $@ -s -L -F file=@$< -F md-date=$(cdate) -F md-status=$(status) \
-	 -F output=html -F paragraph=$(markup) $(opts) http://api.csswg.org/bikeshed/
+	 -F output=html -F type=bikeshed-spec $(opts) https://www.w3.org/publications/spec-generator/
 %.err: %.bs
 	@echo "- Calling Bikeshed to check $<..."
 	@rm -f $@
 	@touch $@
 	@curl -o $@ -s -L -F file=@$< -F md-date=$(cdate) -F md-status=$(status) \
-	 -F output=err -F paragraph=$(markup) $(opts) http://api.csswg.org/bikeshed/
-	@sed -i 's/\\033\[[0-9;]*m//g' $@
+	 -F output=messages -F type=bikeshed-spec $(opts) https://www.w3.org/publications/spec-generator/
 
 # For Dispositions of Comments in css3-background:
 %.html: %.txt; awk -f issues-txt-to-html.awk $< >$@
@@ -61,13 +56,12 @@ cdate ?= $(date)
 
 all: check $(target).html
 
-# egrep will exit with a zero exit code if there is anything left
+# fgrep will exit with a zero exit code if there is anything left
 check: $(target).err
 	@cat $<
 	@echo
-	@if egrep -qv '^(Warning:|\(Processed in .* seconds\)|No errors)' $< &&\
-	  ! egrep -q '[^A-Z]* Successfully generated' $<;\
-	 then false; else true; fi
+	@if fgrep -q '"messageType":"success"' $<;\
+	 then true; else false; fi
 
 
 # A handy shortcut:
diff --git a/css-print/Overview.bs b/css-print/Overview.bs
index 32f8c5253068..5cecb324cabe 100644
--- a/css-print/Overview.bs
+++ b/css-print/Overview.bs
@@ -574,8 +574,8 @@ small-caption | status-bar | inherit
 'font-family'
 MUST*
 MUST*
-[[ <family-name> | <generic-family> ],]* [ 
-<family-name> | <generic-family> ] | inherit
+[[ <font-family-name> | <generic-font-family> ],]* [ 
+<font-family-name> | <generic-font-family> ] | inherit
 depends on user agent
 
 'font-size'
diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs
index 46b26bb8fefc..331854a6d17f 100644
--- a/css-pseudo-4/Overview.bs
+++ b/css-pseudo-4/Overview.bs
@@ -1387,8 +1387,11 @@ Security Considerations for Highlighting
   can leak information about the contents of a user's dictionary
   (which can include the user's name and even includes the contents of their address book!)
   UAs that implement ''::spelling-error'' and ''::grammar-error''
-  must prevent pages from being able to read
-  the styling of such highlighted segments.
+  must mitigate the following attacks:
+  
      
+    
    • Pages attempting to directly read the styling of highlighted segments.
+    
    • Pages attempting to track performance impacts of styling highlighted segments via programatic modification of text fields.
+  
    
 
 
    
 Tree-Abiding Pseudo-elements
    
@@ -1807,7 +1810,9 @@ Additions to the CSS Object Model
 
   The type attribute
   is a string representing the type of the pseudo-element.
-  This can be one of the following values:
+  This can be any standardized [=tree-abiding pseudo-element=]
+  that is not an [=element-backed pseudo-element=],
+  for example:
 
   
    
     
    "::before"
@@ -1816,6 +1821,10 @@ Additions to the CSS Object Model
     
    Represents the ''::after'' pseudo-element.
     
    "::marker"
     
    Represents the ''::marker'' pseudo-element.
+    
    "::backdrop"
+    
    Represents the ''::backdrop'' pseudo-element.
+    
    "::view-transition"
+    
    Represents the ''::view-transition'' pseudo-element.
   
    
 
   The element attribute is the
@@ -1878,7 +1887,13 @@ Additions to the CSS Object Model
     2. If |type| is failure,
       return null.
 
-    3. Otherwise, return the {{CSSPseudoElement}} object
+    3. If |type| is an [=element-backed pseudo-element=],
+      return null.
+
+    4. If |type| is not a [=tree-abiding pseudo-element=],
+      return null.
+
+    5. Otherwise, return the {{CSSPseudoElement}} object
       representing the pseudo-element
       that would match the selector |type|
       with [=this=] as its [=originating element=].
diff --git a/css-regions-1/Makefile b/css-regions-1/Makefile
index 1b085d5bf43d..82e3ac860dc4 100755
--- a/css-regions-1/Makefile
+++ b/css-regions-1/Makefile
@@ -1,16 +1,24 @@
-# use this command line now, or a local bikeshed
+# Use this command with local bikeshed:
+# bikeshed spec Overview.bs Overview.html
 
-# curl http://api.csswg.org/bikeshed/ -F file=@Overview.src.html > Overview.html
+# spec-generator can be used, but sending only Overview.bs will lose img width/height generation
+# curl https://www.w3.org/publications/spec-generator/ -F type=bikeshed-spec -F file=@Overview.bs > Overview.html
 
-%.html: %.src.html
-	curl -s -L -F file=@$< -F time=$(cdate) -F output=html \
-	-F paragraph=$(markup) $(opts) -o $@ http://api.csswg.org/bikeshed/
-%.err: %.src.html
-	curl -s -L -F file=@$< -F time=$(cdate) -F output=err \
-	-F paragraph=$(markup) $(opts) http://api.csswg.org/bikeshed/ >$@
+target ?= Overview
+
+%.html: %.bs
+	curl -s -L -F file=@$< -F md-date=$(cdate) -F output=html \
+	-F type=bikeshed-spec $(opts) -o $@ https://www.w3.org/publications/spec-generator/
+%.err: %.bs
+	curl -s -L -F file=@$< -F md-date=$(cdate) -F output=messages \
+	-F type=bikeshed-spec $(opts) https://www.w3.org/publications/spec-generator/ >$@
 
 all: check Overview.html
 
-check: Overview.err
-	@if test -s $<; then false; else true; fi
+check: $(target).err
 	@cat $<
+	@if fgrep -q '"messageType":"success"' $<;\
+	 then true; else false; fi
+
+clean:
+	rm -f $(target).html $(target).err
diff --git a/css-ruby-1/Overview.bs b/css-ruby-1/Overview.bs
index c4d0b6343c15..4420bc0346e9 100644
--- a/css-ruby-1/Overview.bs
+++ b/css-ruby-1/Overview.bs
@@ -20,10 +20,16 @@ Editor: Florian Rivoal, Invited Expert, https://florian.rivoal.net/, w3cid 43241
 Abstract: “Ruby”, a form of interlinear annotation, are short runs of text alongside the base text.
 Abstract: They are typically used in East Asian documents to indicate pronunciation or to provide a short annotation.
 Abstract: This module describes the rendering model and formatting controls related to displaying ruby annotations in CSS.
+WPT Path Prefix: /css/css-ruby/
 
    
 
     spec:css-box-4; type:dfn; text:content area
 spec:css-text-3; type:dfn; text:character
+spec:css-text-3; type:dfn; text:other space separators
+spec:css-text-4; type:dfn;
+	text:fullwidth opening punctuation
+	text:fullwidth closing punctuation
+	text:fullwidth middle dot punctuation
 spec:css-writing-modes-4; type:dfn; text:bidi isolation
 spec:html-ruby-extensions; type:element;
 	text:rp
@@ -210,7 +216,7 @@ Ruby-specific 'display' Values
 	this is done with the 'display' property.
 
 	
-	
    +	
     	Name: display
 	New values: ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container
 	
    
@@ -1128,8 +1134,8 @@ Styling Ruby Boxes
 	(''vertical-align/top'', ''vertical-align/bottom'')
 	must be ignored (treated as zero).
 
-	Neither the [=margin=], [=padding=], [=border=] properties
-	nor the any properties that do not apply to [=inline boxes=]
+	Neither the [=margin=], [=padding=], and [=border=] properties
+	nor any of the properties that do not apply to [=inline boxes=]
 	apply to [=base containers=] or [=annotation containers=].
 	Additionally, 'line-height' does not apply to [=annotation containers=].
 
@@ -1821,7 +1827,7 @@ Overhanging Ruby: the 'ruby-overhang' property
 
 	
     	Name: ruby-overhang
-	Value: auto | none
+	Value: auto | spaces
 	Initial: auto
 	Applies to: ruby annotation containers
 	Inherited: yes
@@ -1844,10 +1850,42 @@ Overhanging Ruby: the 'ruby-overhang' property
 			Whether, how much, and under which conditions to overhang
 			are determined by the UA.
 
-		
    none
+		
    spaces
 		
    
-			A [=ruby annotation container=] is never allowed
-			to extend past the [=ruby annotation container=].
+			When a [=ruby annotation container=] is longer than
+			its corresponding [=ruby base container=],
+			the [=ruby annotation container=] must not
+			overlap adjacent boxes,
+			except over adjacent spaces.
+
+			For this purpose,
+			spaces are any of the following:
+			* [=preserved white space=]
+			* no-break space (U+00A0)
+			* [=other space separators=]
+			* half of the [=advance measure=] of [=fullwidth opening punctuation=],
+				on the [=inline-start=] side of the character,
+				unless it has been trimmed by 'text-spacing-trim'
+			* half of the [=advance measure=] of [=fullwidth closing punctuation=],
+				on the [=inline-end=] side of the character,
+				unless it has been trimmed by 'text-spacing-trim'
+			* one quarter of the [=advance measure=] of [=fullwidth middle dot punctuation=],
+				on both the [=inline-start=] and [=inline-end=] sides of the character,
+				unless it has been trimmed by 'text-spacing-trim'
+
+			
+			ruby-overhang-spaces-001.html
+			ruby-overhang-spaces-002.html
+			ruby-overhang-spaces-003.html
+			ruby-overhang-spaces-004.html
+			ruby-overhang-spaces-005.html
+			
 	
 
 	When [=ruby annotations=] are not allowed to overhang,
@@ -1871,6 +1909,10 @@ Overhanging Ruby: the 'ruby-overhang' property
 	and the ruby container’s [=annotation boxes=]
 	or its overlapped [=base=]’s contents.
 
+	
+	ruby-overhang-no-overlap.html
+	
+
 	
    
 		Diagram showing the ruby boxes interacting with adjacent text
@@ -1900,6 +1942,16 @@ Overhanging Ruby: the 'ruby-overhang' property
 		for Japanese are described by [[JLREQ]].
 	
    
 
+	Additionally, for compatibility reasons,
+	user agents must support an additional value of none
+	for the 'ruby-overhang' property,
+	as a [=legacy value alias=] of ''ruby-overhang/spaces''.
+
+	
+	ruby-overhang.html
+	ruby-overhang-dynamic.html
+	
+
 
    
 Line-edge Alignment
    
 
diff --git a/css-scroll-anchoring-1/Overview.bs b/css-scroll-anchoring-1/Overview.bs
index f12e90b53011..bbd7fbc7d29f 100644
--- a/css-scroll-anchoring-1/Overview.bs
+++ b/css-scroll-anchoring-1/Overview.bs
@@ -21,6 +21,7 @@ Abstract: This spec also proposes an API for web developers to opt-out of this b
 
 
     spec:css-box; type:dfn; text:content area
+spec:cssom-view-1; type:dfn; text:scrolling area
 spec:css2;
 	type:dfn; text:line box
 spec:css-sizing-3;
@@ -139,17 +140,19 @@ non-atomic inline element as the priority candidate.
 	The anchor node selection algorithm
 	for a scrolling box |S| is as follows:
 
-	1. If |S| is associated with an element
+	1. If |S| is generated by an element
 		whose computed value of the 'overflow-anchor' property is ''overflow-anchor/none'',
 		then do not select an anchor node for |S|.
-	2. Otherwise, for each priority candidate |PC| in order specified,
+	2. If |S| is not scrolled away from the origin of its scrolling area in its
+		block flow direction, then do not select an anchor node for |S|.
+	3. Otherwise, for each priority candidate |PC| in order specified,
 		check if |PC| is a viable candidate in |S|.
 		If so, perform the candidate examination algorithm for |PC| in |S| and terminate.
 
 		Note: Since the priority candidate itself is checked to be viable, the candidate examination algorithm
 		is guaranteed to select at least the candidate node itself.
 
-	3. Otherwise, for each DOM child |N| of the element or document associated with |S|,
+	4. Otherwise, for each DOM child |N| of the element or document associated with |S|,
 		perform the candidate examination algorithm for |N| in |S|,
 		and terminate if it selects an anchor node.
 
@@ -182,17 +185,13 @@ non-atomic inline element as the priority candidate.
 		content to shift without triggering any scroll anchoring adjustment.
 
 
-Conceptually, a new anchor node is computed for every scrolling box
-whenever the scroll position of any scrolling box changes.
-(As a performance optimization,
-the implementation may wait until the anchor node is needed before computing it.)
-
 
    
 	A DOM node |N| is an excluded subtree
 	if it is an element and any of the following conditions holds:
 
 	* |N|’s computed value of the 'display' property is ''display/none''.
 	* |N|’s computed value of the 'position' property is ''position/fixed''.
+	* |N|’s computed value of the 'position' property is ''position/sticky''.
 	* |N|’s computed value of the 'position' property is ''position/absolute''
 		and |N|’s containing block is an ancestor of the scrolling box.
 	* |N|’s computed value of the 'overflow-anchor' property is ''overflow-anchor/none''.
@@ -218,6 +217,18 @@ the implementation may wait until the anchor node is needed before computing it.
 	is |N|’s scrollable overflow rectangle.
 
    
 
+
    
+Invalidation
    
+
+An anchor node is considered valid for a scrolling box until any of the following occur:
+	* The scroll position of the scrolling box changes (excluding adjustments originating from scroll anchoring).
+	* A suppression trigger suppresses a scroll adjustment.
+	* The anchor node is removed from the DOM.
+
+Once an anchor node has become invalid, the anchor node selection algorithm must be run again to compute the anchor node
+
+As a performance optimization, implementations may wait until the anchor node is needed before computing it.
+
 
    
 Scroll Adjustment
    
 
diff --git a/css-scroll-snap-2/Overview.bs b/css-scroll-snap-2/Overview.bs
index 73e4d35e3d03..ac22bc8b95bb 100644
--- a/css-scroll-snap-2/Overview.bs
+++ b/css-scroll-snap-2/Overview.bs
@@ -231,7 +231,7 @@ Issue: The ':snapped' pseudo-class is being dropped in favor of a
 The Snapped-element Pseudo-class: '':snapped'' {#snapped}
 -------------------------------------------------------
 
-The :snapped pseudo-class matches any scroll snap targets,
+The :snapped pseudo-class matches any [=snap targets=],
 regardless of axis.
 The longform physical and logical pseudo-class selectors
 allow for more finite snapped children styling
diff --git a/css-shadow-1/Overview.bs b/css-shadow-1/Overview.bs
index b841ebb60cac..031f5d930cbf 100644
--- a/css-shadow-1/Overview.bs
+++ b/css-shadow-1/Overview.bs
@@ -605,6 +605,22 @@ Selecting Slot-Assigned Content: the ''::slotted()'' pseudo-element
 	The only way to style assigned text nodes
 	is by styling the slot and relying on inheritance.
 
+
+	css-scoping-shadow-slotted-nested.html
+	css-scoping-shadow-slotted-rule.html
+	reslot-text-inheritance.html
+	slotted-invalidation.html
+	slotted-link.html
+	slotted-matches.html
+	slotted-nested.html
+	slotted-parsing.html
+	slotted-placeholder.html
+	slotted-slot.html
+	slotted-specificity-002.html
+	slotted-specificity.html
+	slotted-with-pseudo-element.html
+
+
 
    
 Matching on the Presence of Slot-Assigned Nodes: the '':has-slotted'' pseudo-class
    
 
@@ -625,8 +641,6 @@ Matching on the Presence of Slot-Assigned Nodes: the '':has-slotted'' pseudo-cla
 	as the latter would not match slotted text nodes, but '':has-slotted'' does.
 
 
-	css-scoping-shadow-slotted-nested.html
-	css-scoping-shadow-slotted-rule.html
 	has-slotted-001.html
 	has-slotted-002.html
 	has-slotted-003.html
@@ -638,17 +652,6 @@ Matching on the Presence of Slot-Assigned Nodes: the '':has-slotted'' pseudo-cla
 	has-slotted-flattened-004.html
 	has-slotted-manual-assignment.html
 	has-slotted-query-selector.html
-	reslot-text-inheritance.html
-	slotted-invalidation.html
-	slotted-link.html
-	slotted-matches.html
-	slotted-nested.html
-	slotted-parsing.html
-	slotted-placeholder.html
-	slotted-slot.html
-	slotted-specificity-002.html
-	slotted-specificity.html
-	slotted-with-pseudo-element.html
 
 
 
 
+
    
+Responsively-sized iframes: the 'frame-sizing' property
    
+
+	
    +	Name: frame-sizing
+	Value: auto | content-width | content-height | content-block-size | content-inline-size
+	Initial: auto
+	Applies to: replaced elements (but see below for details)
+	Inherited: no
+	Computed value: as specified
+	Animation type: discrete
+	
    
+
+	Some [=replaced elements=] can contain "normal" flowed content,
+	such as HTML <{iframe}>s.
+	For privacy and security reasons,
+	these elements do not, by default,
+	expose any information about their internal contents' sizing
+	to the outside page,
+	instead just using a static, predetermined intrinsic size,
+	and making their contents scrollable.
+	The 'frame-sizing' property
+	allows these elements to opt into exposing their actual content size,
+	known as their internal layout intrinsic size.
+	Values have the following meaning:
+
+	
    
+		: auto
+		::
+			The element's [=internal layout intrinsic size=],
+			if any,
+			is ignored.
+
+		: content-width
+		: content-height
+		: content-block-size
+		: content-inline-size
+		::
+			If the element has an [=internal layout intrinsic size=],
+			its [=intrinsic size=]
+			takes the corresponding dimension
+			(either width or height)
+			from the [=internal layout intrinsic size=].
+			(The other dimension is determined normally.)
+
+			Logical directions resolve based on the [=writing mode=] of the element.
+			(Not the embedded document.)
+	
    
+
+	Which elements can have an [=internal layout intrinsic size=],
+	and how it's determined,
+	are decided by the [=document language=].
+	In HTML, only <{iframe}> elements can have an [=internal layout intrinsic size=],
+	and further,
+	only when the contained document has also opted in
+	via a <meta name=responsive-embedded-sizing> element.
+	(See [[#iframe-frame-sizing]].)
+
+	
    
+		When the embedded document has the following HTML:
+
+	  
+			<meta name="responsive-embedded-sizing">
+			<div style="height: 500px"></div>
+		
+
+		and the embedding document has the following CSS:
+
+	  
    +			iframe {
+				frame-sizing: content-height;
+			}
+		
    
+
+		The height of the <{iframe}> will initially be the default iframe height (typically ''150px''),
+		but will be updated to ''500px'' once the iframe's document loads.
+	
    
+
+	In addition,
+	the internal document can call {{Window/requestResize()|window.requestResize()}}
+	to update its [=internal layout intrinsic size=] later.
+
+
+
    
+HTML <{iframe}> Details
    
+
+	In HTML, only the <{iframe}> element can have an [=internal layout intrinsic size=],
+	and only when the <{iframe}>'s embedded document has opted in appropriately.
+
+	An HTML {{Document}} object
+	has an responsive embedded sizing flag associated with it,
+	which is initially unset.
+	It is set to true or false
+	during the initial document parse,
+	depending on which of the following first occurs:
+
+	* If a <meta name=responsive-embedded-sizing> element is encountered,
+		it is set to true.
+	* If the <{body}> element is opened (explicitly or implicitly),
+		or inserted into the document by the parser,
+		it is set to false.
+
+	Once set to either true or false,
+	the flag will not change its value again for the lifetime of the {{Document}}.
+
+	Note: Currently, the HTML <{meta}> element appearing in the <{head}> of an HTML document
+	is the only way for an embedded document to opt into this feature in HTML.
+	This means that SVG documents in <{iframe}> cannot do so.
+
+	Note: Due to quirks of the HTML parser,
+	a <{meta}> element can technically appear between the <{head}> and <{body}> elements,
+	and will be reparented into the <{head}>.
+	This is still a valid location for the <meta name=responsive-embedded-sizing> element,
+	as the <{body}> has not yet been opened.
+	Note that most HTML elements will implicitly open a <{body}> element
+	even if the <{body}> start tag is not present,
+	and if the document completely lacks such an element,
+	an empty one is automatically generated and inserted.
+
+	The [=internal layout intrinsic size=] is first set
+	by the results of the embedded document's first layout
+	after it fires its {{DOMContentLoaded}} event,
+	and again when the {{Window/load}} event is fired at the {{Window}}.
+	Subsequent changes to content, styling or layout of the embedded document
+	do not automatically affect the [=internal layout intrinsic size=],
+	but see {{Window/requestResize()}}.
+
+	An embedded document can additionally have a locked embedded ICB size,
+	which is initially null.
+	If the document's [=responsive embedded sizing flag=] is true
+	when it performs a layout,
+	and its [=locked embedded ICB size=] is null,
+	it records its current [=initial containing block=] size as its [=locked embedded ICB size=].
+	On subsequent layouts,
+	it uses its [=locked embedded ICB size=]
+	instead of calculating its [=initial containing block=] size normally.
+
+	Note: This freezing of the ICB
+	reduces the chance of layout loops
+	(an iframe document sizing to slightly larger than its ICB,
+	then the parent iframe changing size to match,
+	and the next layout again making it slightly larger than the ICB,
+	etc to infinity).
+
+	Issue: Do we want to have a way to force an iframe to forget its [=locked embedded ICB size=]?
+	Maybe turning 'frame-sizing' off and on again?
+
+	Navigating the iframe's document
+	causes it to forget its [=locked embedded ICB size=].
+	It does not forget its [=internal layout intrinsic size=]
+	as long as the new document's [=responsive embedded sizing flag=] is unset.
+	Once the flag is set (to true or false),
+	the [=internal layout intrinsic size=] is forgotten;
+	if the flag is set to true,
+	both are then freshly computed as normal.
+
+
+
    
+Extensions to the {{Window}} Interface
    
+
+	
+	partial interface Window {
+		undefined requestResize();
+	};
+	
+
+	
    
+		When requestResize() is invoked:
+
+		1. Let |navigable| be the [=/navigable=] that has [=this=] as its [=content window=].
+			If |navigable| is not a [=child navigable=],
+			[=throw=] a {{NotAllowedError}} {{DOMException}}.
+
+		1. Let |host element| be the [=navigable container=] whose [=content navigable=] is |navigable|.
+			If |host element| is not an HTML <{iframe}> element,
+			[=throw=] a {{NotAllowedError}} {{DOMException}}.
+
+		1. Let |document| be [=this's=] [=active document=].
+			If |document|'s [=Document/responsive embedded sizing flag=]
+			is unset or false,
+			[=throw=] a {{NotAllowedError}} {{DOMException}}.
+
+		1. If |document| has pending style or layout changes,
+			perform them.
+
+		1. Set the [=internal layout intrinsic size=] of |host element|
+			to the width and height of the [=scrolling area=] of [=this=].
+	
    
+
+
 
    
 Intrinsic Size Contributions
    
 
@@ -1357,8 +1474,9 @@ Stretch-fit Sizing: filling the containing block
 		Typically produces the same size that would be obtained
 		by the [=self-alignment property=] in that axis
 		being set to ''justify-self/stretch''
-		and all [=sizing properties=] and 'aspect-ratio'
-		being set to their initial values.
+		all [=sizing properties=] and 'aspect-ratio'
+		being set to their initial values,
+		and ''margin/auto'' margins treated as zero.
 
 		Note: In [=multi-line flex container|multi-line=] [=flex layout=],
 		the [=stretch-fit size=] resolves against the [=containing block=]
diff --git a/css-sizing-4/responsive-iframes-explainer.md b/css-sizing-4/responsive-iframes-explainer.md
index a1c0912328f7..464487f10cb6 100644
--- a/css-sizing-4/responsive-iframes-explainer.md
+++ b/css-sizing-4/responsive-iframes-explainer.md
@@ -29,9 +29,9 @@ In general, there is a lot of demand for this feature, as evidenced by:
 
 ## Solution
 
-The embedding document opts in via the `contain-intrinsic-size: from-element` CSS property on the `