diff --git a/.github/README.md b/.github/README.md new file mode 100644 index 000000000000..af8c69edbed7 --- /dev/null +++ b/.github/README.md @@ -0,0 +1,6 @@ +Types of Workflows +================== + +* `workflows/build-specs.yml` - builds the entire repository of Editor's Drafts, along with a summary page. Also builds any `.issues` Issues-List files, and Markdown files. Deploys all the results to the repo's gh-pages + +* `workflows/SPEC-NAME-1.yml` - each of these auto-publish *one* spec in the repo. Do not modify them by hand; they are auto-generated by [`generate-auto-publish-workflows.py`](https://github.com/w3c/csswg-drafts/blob/main/.github/generate-auto-publish-workflows.py) and [`auto-publish-template.yml`](https://github.com/w3c/csswg-drafts/blob/main/.github/auto-publish-template.yml). Instead, update and run this `.py` file and commit the results. \ No newline at end of file diff --git a/.github/auto-publish-template.yml b/.github/auto-publish-template.yml new file mode 100644 index 000000000000..2a739765723e --- /dev/null +++ b/.github/auto-publish-template.yml @@ -0,0 +1,37 @@ +###################################################################### +# This is the template used to generate auto-publication workflows for +# the different documents in the repository. Check generate script for +# details. Edit this file and run the script again to update the +# workflows. +###################################################################### + +name: Publish {{shortname}} on /TR + +on: + pull_request: + paths: + - "{{shortname}}/**" + push: + branches: [main] + paths: + - "{{shortname}}/**" + workflow_dispatch: + +jobs: + publish-TR-{{shortname}}: + name: Publish {{shortname}} + if: github.repository == 'w3c/csswg-drafts' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v6 + - uses: w3c/spec-prod@v2 + with: + TOOLCHAIN: bikeshed + SOURCE: {{shortname}}/Overview.bs + DESTINATION: {{shortname}}/index.html + BUILD_FAIL_ON: warning + VALIDATE_MARKUP: false + W3C_ECHIDNA_TOKEN: ${{ secrets.{{tokenName}} }} + W3C_WG_DECISION_URL: https://www.w3.org/2025/08/21-css-minutes.html#fc30 + W3C_BUILD_OVERRIDE: | + status: {{publicationStatus}} diff --git a/.github/generate-auto-publish-workflows.py b/.github/generate-auto-publish-workflows.py new file mode 100644 index 000000000000..d1617672bea0 --- /dev/null +++ b/.github/generate-auto-publish-workflows.py @@ -0,0 +1,110 @@ +#!/usr/bin/env python3 +""" +Script to generate auto publication workflows for given specs +""" + +import re +from pathlib import Path + +# ----------------------------------------------------------------------------- +# List of properties that can appear to describe a spec. +# ----------------------------------------------------------------------------- + +PROPERTIES = [ + "shortname", + "publicationStatus", + "tokenName", +] + +# ----------------------------------------------------------------------------- +# List of specs for which an auto-publish script needs to be created. +# ----------------------------------------------------------------------------- + +SPECS = [ + { + "shortname": "css-color-4", + "publicationStatus": "CRD", + }, + { + "shortname": "css-color-5", + "publicationStatus": "WD", + }, + { + "shortname": "css-color-hdr-1", + "publicationStatus": "WD", + }, + { + "shortname": "css-fonts-4", + "publicationStatus": "WD", + }, + { + "shortname": "css-fonts-5", + "publicationStatus": "WD", + }, + { + "shortname": "css-2026", + "publicationStatus": "NOTE", + }, + { + "shortname": "css-2027", + "publicationStatus": "NOTE", + }, +] + +# ----------------------------------------------------------------------------- +# Main +# ----------------------------------------------------------------------------- + +def main(): + script_path = Path(__file__).parent + template_path = script_path / "auto-publish-template.yml" + workflows_dir = script_path / "workflows" + + workflows_dir.mkdir(parents=True, exist_ok=True) + + template = template_path.read_text(encoding="utf-8") + + # Replace the large comment header block (#####...#####) + template = re.sub( + r"#{5,}.*?#{5,}", + """###################################################################### +# 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. +######################################################################""", + template, + flags=re.S, + ) + + for spec in SPECS: + spec = spec.copy() + + # Derive shortname from source if not provided + if "shortname" not in spec or not spec["shortname"]: + spec["shortname"] = spec["source"].split(".")[0].replace("_", "-") + + # Derive tokenName if not provided + if "tokenName" not in spec or not spec["tokenName"]: + token = ( + spec["shortname"] + .upper() + .replace("-", "_") + ) + spec["tokenName"] = f"TR_TOKEN_{token}" + + # Apply template substitutions + content = template + for prop in PROPERTIES: + value = spec.get(prop, "") + content = content.replace(f"{{{{{prop}}}}}", value) + + # Write workflow file + filename = workflows_dir / f"{spec['shortname']}.yml" + filename.write_text(content, encoding="utf-8", newline="\n") + print(f"Generated {filename}") + + +if __name__ == "__main__": + main() 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 new file mode 100644 index 000000000000..008171aed895 --- /dev/null +++ b/.github/workflows/css-color-4.yml @@ -0,0 +1,38 @@ +###################################################################### +# 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-color-4 on /TR + +on: + pull_request: + paths: + - "css-color-4/**" + push: + branches: [main] + paths: + - "css-color-4/**" + workflow_dispatch: + +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 + - uses: w3c/spec-prod@v2 + with: + TOOLCHAIN: bikeshed + SOURCE: css-color-4/Overview.bs + DESTINATION: css-color-4/index.html + BUILD_FAIL_ON: warning + VALIDATE_MARKUP: false + W3C_ECHIDNA_TOKEN: ${{ secrets.TR_TOKEN_CSS_COLOR_4 }} + W3C_WG_DECISION_URL: https://www.w3.org/2025/08/21-css-minutes.html#fc30 + W3C_BUILD_OVERRIDE: | + status: CRD diff --git a/.github/workflows/css-color-5.yml b/.github/workflows/css-color-5.yml new file mode 100644 index 000000000000..d4bba04747c2 --- /dev/null +++ b/.github/workflows/css-color-5.yml @@ -0,0 +1,38 @@ +###################################################################### +# 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-color-5 on /TR + +on: + pull_request: + paths: + - "css-color-5/**" + push: + branches: [main] + paths: + - "css-color-5/**" + workflow_dispatch: + +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 + - uses: w3c/spec-prod@v2 + with: + TOOLCHAIN: bikeshed + SOURCE: css-color-5/Overview.bs + DESTINATION: css-color-5/index.html + BUILD_FAIL_ON: warning + VALIDATE_MARKUP: false + W3C_ECHIDNA_TOKEN: ${{ secrets.TR_TOKEN_CSS_COLOR_5 }} + W3C_WG_DECISION_URL: https://www.w3.org/2025/08/21-css-minutes.html#fc30 + W3C_BUILD_OVERRIDE: | + status: WD diff --git a/.github/workflows/css-color-hdr-1.yml b/.github/workflows/css-color-hdr-1.yml new file mode 100644 index 000000000000..c1e4d3cbdd8b --- /dev/null +++ b/.github/workflows/css-color-hdr-1.yml @@ -0,0 +1,38 @@ +###################################################################### +# 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-color-hdr-1 on /TR + +on: + pull_request: + paths: + - "css-color-hdr-1/**" + push: + branches: [main] + paths: + - "css-color-hdr-1/**" + workflow_dispatch: + +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 + - uses: w3c/spec-prod@v2 + with: + TOOLCHAIN: bikeshed + SOURCE: css-color-hdr-1/Overview.bs + DESTINATION: css-color-hdr-1/index.html + BUILD_FAIL_ON: warning + VALIDATE_MARKUP: false + W3C_ECHIDNA_TOKEN: ${{ secrets.TR_TOKEN_CSS_COLOR_HDR_1 }} + W3C_WG_DECISION_URL: https://www.w3.org/2025/08/21-css-minutes.html#fc30 + W3C_BUILD_OVERRIDE: | + status: WD diff --git a/.github/workflows/css-fonts-4.yml b/.github/workflows/css-fonts-4.yml new file mode 100644 index 000000000000..adde93a731c2 --- /dev/null +++ b/.github/workflows/css-fonts-4.yml @@ -0,0 +1,38 @@ +###################################################################### +# 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-fonts-4 on /TR + +on: + pull_request: + paths: + - "css-fonts-4/**" + push: + branches: [main] + paths: + - "css-fonts-4/**" + workflow_dispatch: + +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 + - uses: w3c/spec-prod@v2 + with: + TOOLCHAIN: bikeshed + SOURCE: css-fonts-4/Overview.bs + DESTINATION: css-fonts-4/index.html + BUILD_FAIL_ON: warning + VALIDATE_MARKUP: false + W3C_ECHIDNA_TOKEN: ${{ secrets.TR_TOKEN_CSS_FONTS_4 }} + W3C_WG_DECISION_URL: https://www.w3.org/2025/08/21-css-minutes.html#fc30 + W3C_BUILD_OVERRIDE: | + status: WD diff --git a/.github/workflows/css-fonts-5.yml b/.github/workflows/css-fonts-5.yml new file mode 100644 index 000000000000..2e3f71aa31da --- /dev/null +++ b/.github/workflows/css-fonts-5.yml @@ -0,0 +1,38 @@ +###################################################################### +# 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-fonts-5 on /TR + +on: + pull_request: + paths: + - "css-fonts-5/**" + push: + branches: [main] + paths: + - "css-fonts-5/**" + workflow_dispatch: + +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 + - uses: w3c/spec-prod@v2 + with: + TOOLCHAIN: bikeshed + SOURCE: css-fonts-5/Overview.bs + DESTINATION: css-fonts-5/index.html + BUILD_FAIL_ON: warning + VALIDATE_MARKUP: false + W3C_ECHIDNA_TOKEN: ${{ secrets.TR_TOKEN_CSS_FONTS_5 }} + W3C_WG_DECISION_URL: https://www.w3.org/2025/08/21-css-minutes.html#fc30 + W3C_BUILD_OVERRIDE: | + status: WD diff --git a/.gitignore b/.gitignore index 1a828cf51514..05b36344b236 100644 --- a/.gitignore +++ b/.gitignore @@ -20,3 +20,4 @@ node_modules css-color-4/ICCprofiles/old-Display P3.icc .vscode +.idea diff --git a/animation-triggers-1/Overview.bs b/animation-triggers-1/Overview.bs new file mode 100644 index 000000000000..a0e5dbe1a760 --- /dev/null +++ b/animation-triggers-1/Overview.bs @@ -0,0 +1,637 @@ + +
+Title: Animation Triggers
+Group: CSSWG
+Status: ED
+Work Status: revising
+Shortname: animation-triggers
+Level: 1
+Group: CSSWG
+TR: https://www.w3.org/TR/animation-triggers-1/
+ED: https://drafts.csswg.org/animation-triggers-1/
+Abstract: Defines CSS properties and an API for creating mechanisms that affect animation
+		  playback, based on DOM events resulting from user interaction, or on entry/exit
+		  of ranges on animation timelines.
+Editor: Robert Flack, Google, flackr@google.com, w3cid 98451
+Editor: David Awogbemila, Google, awogbemila@google.com
+Editor: Yehonatan Daniv, Wix.com, yehonatand@wix.com, w3cid 136300
+Markup Shorthands: markdown yes
+
+ +
+spec:infra; type:dfn; text:user agent
+spec:dom; type:dfn; for:/; text:shadow root
+
+ +
+urlPrefix: https://www.w3.org/TR/web-animations-1/; type: dfn
+	text: active interval
+	text: playback control
+
+ +# Introduction # {#intro} + + This specification defines mechanisms for + affecting an animation’s playback + based on various user interactions invoking a specified trigger. + By specifying a trigger for an animation, that animation + becomes a triggered animation, making its + playback start delayed until that trigger occurs. + These triggers can be certain {{Event}}s defined in [[!DOM]], + or timeline based, such as [=view progress timelines=]. [[!SCROLL-ANIMATIONS-1]] + + This module provides both an imperative API building on the + Web Animations API as well as a declarative API building + on CSS Animations. [[!CSS-ANIMATIONS-2]] [[!WEB-ANIMATIONS-1]] + +## Relationship to other specifications ## {#other-specs} + + Web Animations [[WEB-ANIMATIONS-1]] defines + an abstract conceptual model for animations on the Web platform, + with elements of the model including [=animations=] and [=timelines=], + and associated programming interfaces. + This specification extends the Web Animations model + by defining [=triggered animation=] + and allowing to perform [=playback control=] functions + on them using triggers. + + This specification introduces both + programming interfaces for interacting with these concepts, + as well as CSS properties that apply these concepts + to CSS Animations [[CSS-ANIMATIONS-2]]. + To the extent the behavior of these CSS properties is described + in terms of the programming interfaces, + [=User Agents=] that do not support scripting + may still conform to this specification + by implementing the CSS features to behave + as if the underlying programming interfaces were in place. + + This specification uses the timeline and ranges concept introduced + in the Scroll-Driven Animations module [[!SCROLL-ANIMATIONS-1]] for + specifying progress-based timelines and animations. + + Like most operations in CSS besides [=selector=] matching, + features in this specification operate over + the [=flattened element tree=]. + +## Value Definitions ## {#values} + + 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. + + 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. + + + +# Triggers # {#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=]). + + 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.) + + * [=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 trigger 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. + + If a single element attempts to define multiple [=triggers=] of different types + with the same [=trigger name=], + it only exposes one of the [=triggers=], + 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. + +## Trigger Name Scoping: the 'trigger-scope' property ## {#trigger-scope} + + [=Trigger names=] are global by default, + usable by other elements regardless of their position. + (Though they are [=tree-scoped names=], + so have interactions with [=shadow roots=]). + If multiple elements define [=triggers=] with the same [=trigger name=], + the [=trigger=] defined by the later element in [=tree order=] is used. + + The 'trigger-scope' property can limit the scope of a name + to a subtree of the document, + so elements outside won't see the chosen [=trigger name=], + and elements inside will only see the version of the [=trigger name=] + defined inside the scope. + + 
+	Name: trigger-scope
+	Value: none | all | <>#
+	Initial: none
+	Applies to: all elements
+	Inherited: no
+	Animation type: not animatable
+	Computed value: as specified
+
+ + This property scopes [=trigger names=] to the subtree of the matching element. + Its values are: + +
+
none +
+ No changes in [=trigger name=] scope. + +
all +
+ Specifies that all [=trigger names=] defined by this element or its descendants-- + whose scope is not already limited by a descendant using 'trigger-scope'-- + to be in scope only for this element's [=flat tree=] descendants; + and limits descendants to only match [=trigger names=] + to [=triggers=] within this subtree. + + This value only affects [=trigger names=] in the same tree scope, + as if it were a [=tree-scoped name/strictly matched=] [=tree-scoped name=]. + (That is, ''trigger-scope: all'' acts identically + to ''trigger-scope: --foo, --bar, ...'', + listing all relevant [=trigger names=].) + +
<> +
+ Specifies that a matching [=trigger name=] defined by this element or its descendants-- + whose scope is not already limited by a descendant using 'trigger-scope'-- + to be in scope only for this element's [=flat tree=] descendants; + and limits descendants to only match these [=trigger names=] + to [=triggers=] within this subtree. + + The <> represents a [=tree-scoped name/strictly matched=] [=tree-scoped name=], + i.e. it can only match against [=trigger names=] in the same shadow tree.[[!CSS-SCOPING-1]] +
+ + + +## Timeline Triggers ## {#timeline-triggers} + + A timeline trigger is a [=trigger=] + which is activated when some [=timeline=] + enters the trigger's activation range, + or leaves the trigger's active 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 "inactive". + While it's "inactive", + the associated [=timeline=] entering (or starting in) the trigger's [=activation range=] + performs an associated entry action + and switches the [=timeline trigger/trigger state=] to "active"; + while it's "active", + the associated timeline leaving the trigger's [=active range=] + performs an associated exit action + and switches the [=timeline trigger/trigger state=] to "inactive". + + Note: By default, the [=active range=] is the same as the [=activation range=]; + even when manually specified, + the [=active range=] is always a superset of the [=activation range=]. + The two ranges allow, for example, + an 'animation-trigger' to start an animation + when an element is scrolled close to the center of the screen + (using a [=view progress timeline=] with a relatively small window as the [=activation range=]), + but not stop it until the element is fully off-screen + (using ''animation-timeline-range/cover'' as the [=active 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/entry 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/entry 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 ### {#timeline-trigger-name} + + 
+	Name: timeline-trigger-name
+	Value: none | <>#
+	Initial: none
+	Applies to: all elements
+	Inherited: no
+	Percentages: N/A
+	Computed value: as specified
+	Canonical order: per grammar
+	Animation type: not animatable
+
+ + If ''timeline-trigger-name/none'' is specified, + the element does not define any [=timeline triggers=]. + + If the same <> appears multiple times in the list, + only the last one defines a [=timeline trigger=]; + the preceding ones have no effect. + +### Linking a Timeline: the 'timeline-trigger-source' property ### {#timeline-trigger-source} + + 
+	Name: timeline-trigger-source
+	Value: <>#
+	Initial: auto
+	Applies to: all elements
+	Inherited: no
+	Percentages: N/A
+	Computed value: list, each item either
+	  the keyword ''single-animation-timeline/none'',
+	  the keyword ''single-animation-timeline/auto'',
+	  a case-sensitive [=css identifier=],
+	  a computed ''scroll()'' function,
+	  or
+	  a computed ''view()'' function
+	Canonical order: per grammar
+	Animation type: not animatable
+
+ + 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=]. + +### The Activation Range: the 'timeline-trigger-activation-range' property ### {#timeline-trigger-activation-range-prop} + + 
+	Name: timeline-trigger-activation-range
+	Value: [ <<'timeline-trigger-activation-range-start'>> <<'timeline-trigger-activation-range-end'>>? ]#
+
+ + The 'timeline-trigger-activation-range' property is a [=shorthand property=] + that sets 'timeline-trigger-activation-range-start' and 'timeline-trigger-activation-range-end' + together in a single declaration. + It has the same syntax as the 'animation-range' property. + + The behavior of 'timeline-trigger-activation-range' is defined in [[web-animations-2#trigger-ranges]]. + + 
+	Name: timeline-trigger-activation-range-start, timeline-trigger-activation-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 ''timeline-trigger-activation-range-start/normal'' or a timeline range and progress percentage
+	Animation type: not animatable
+
+ + The 'timeline-trigger-activation-range-start' and 'timeline-trigger-activation-range-end' properties + specify the [=timeline trigger=]’s associated [=timeline trigger/activation range=]. + Values have the same meaning as 'animation-range-start' and 'animation-range-end'. + +### The Active Range: the 'timeline-trigger-active-range' property ### {#timeline-trigger-active-range-prop} + + 
+	Name: timeline-trigger-active-range
+	Value: [ <<'timeline-trigger-active-range-start'>> <<'timeline-trigger-active-range-end'>>? ]#
+
+ + The 'timeline-trigger-active-range' property is a [=shorthand property=] + that sets 'timeline-trigger-active-range-start' and 'timeline-trigger-active-range-end' + together in a single declaration. + It has the same syntax as the 'animation-range' property. + + The behavior of 'timeline-trigger-active-range' is defined in [[web-animations-2#trigger-ranges]]. + + 
+	Name: timeline-trigger-active-range-start, timeline-trigger-active-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 ''timeline-trigger-active-range-start/normal'' or a timeline range and progress percentage
+	Animation type: not animatable
+
+ + The 'timeline-trigger-active-range-start' and 'timeline-trigger-active-range-end' properties + specify the [=timeline trigger=]’s associated [=timeline trigger/active range=]. + Values have the same meaning as 'animation-range-start' and 'animation-range-end', + with the following addition: + +
+ : auto + :: + The start (for 'timeline-trigger-active-range-start') + or end (for 'timeline-trigger-active-range-end') + is equal to the start/end of the [=timeline trigger's=] [=activation range=]. +
+ +### The 'timeline-trigger' Shorthand ### {#timeline-trigger-shorthand} + + 
+	Name: timeline-trigger
+	Value: none | [ <<'timeline-trigger-name'>> <<'timeline-trigger-source'>> <<'timeline-trigger-activation-range'>> [ / <<'timeline-trigger-active-range'>> ]? ]#
+
+ + The 'timeline-trigger' [=shorthand property=] + sets all of 'timeline-trigger-name', + 'timeline-trigger-source', + 'timeline-trigger-activation-range', + and optionally 'timeline-trigger-active-range' + at once. + + A value of none + is equivalent to ''none none normal''. + + Note: Due to significant potential ambiguities in the syntax + ('timeline-trigger-name' vs [=timeline=] names in 'timeline-trigger-source'; + [=activation ranges=] vs [=active ranges=]), + this shorthand's values must be given in the specified order, + rather than being settable in any order as is more common. + + + +## Event Triggers ## {#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 "inactive": + while "inactive", 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 "active"; + while "active", it only deactivates when it receives one of its [=exit events=], + performing an associated exit action + and switching its [=event trigger/trigger state=] back to "inactive". + + 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 ### {#event-trigger-name} + + 
+	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
+
+ + If ''event-trigger-name/none'' is specified, + the element does not define any [=event triggers=]. + + If the same <> appears multiple times in the list, + only the last one defines an [=event trigger=]; + the preceding ones have no effect. + +### Linking an Event: the 'event-trigger-source' property ### {#event-trigger-source} + + 
+	Name: event-trigger-source
+	Value: [ none | <>+ [ / <>+ ]? ]#
+	Initial: none
+	Applies to: all elements
+	Inherited: no
+	Percentages: N/A
+	Computed value: as specified
+	Animation type: not animatable
+
+ + The 'event-trigger-source' property + specifies what event or events activate the [=event trigger=]. + Its values are: + +
+ : none + :: The corresponding entry in the [=coordinated value list=] does not define a trigger. + + : <>+ [ / <>+ ]? + :: Defines what event(s) the [=event trigger=] responds to. + + If a ''/'' is used in the value, + the [=event trigger=] is stateful; + the set of events before the ''/'' are the [=event trigger's=] [=enter events=], + while those after the ''/'' are the [=exit events=]. + (The same events can occur in both sets.) + + Otherwise, + the [=event trigger=] is stateless, + and the provided events are its [=enter events=]. +
+ + 
+	<> = activate | interest | click | touch | dblclick | keypress(<>) | ...
+
+ + Issue: Figure out the full set of events we want to handle. + +### The 'event-trigger' Shorthand ### {#event-trigger-shorthand} + + 
+	Name: event-trigger
+	Value: none | [ <<'event-trigger-name'>> <<'event-trigger-source'>> ]#
+	Initial: none
+	Applies to: all elements
+	Inherited: no
+	Percentages: N/A
+	Computed value: as specified
+	Animation type: not animatable
+
+ + The 'event-trigger' [=shorthand property=] + sets both 'event-trigger-name' and 'event-trigger-source' at once. + + A value of none + is equivalent to ''none none''. + +### The 'animation-trigger' property ### {#animation-trigger-shorthand} + + 
+	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: + + + + + +
KeywordExtra Effectinitialplayingpausedfinished +
none————— +
play—{{play()}}—{{play()}}{{play()}} +
play-once—{{play()}}—{{play()}}— +
play-forwardsset playback rate to positive{{play()}}—{{play()}}{{play()}} +
play-backwardsset playback rate to negative{{play()}}—{{play()}}{{play()}} +
pause——{{pause()}}—— +
resetset progress to 0—{{pause()}}{{pause()}}{{pause()}} +
replayset progress to 0{{play()}}—{{play()}}{{play()}} +
+ If there is an "effect", + it happens regardless of the current state, + before the state-specific action +
+ +# Privacy Considerations # {#privacy-considerations} + + There are no known privacy impacts of the features in this specification. + +# Security Considerations # {#security-considerations} + + There are no known security impacts of the features in this specification. 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/bin/build-index.py b/bin/build-index.py index 340b2be81b6f..7404dfacea24 100644 --- a/bin/build-index.py +++ b/bin/build-index.py @@ -644,6 +644,7 @@ def escape_html(text): }); function sortRecent() { + window.localStorage.setItem('index-sort', 'recent'); specList.querySelectorAll('.group-header').forEach(function(h) { h.remove(); }); specs.sort(function(a, b) { return parseInt(b.dataset.ts) - parseInt(a.dataset.ts); @@ -657,6 +658,7 @@ def escape_html(text): } function sortGrouped() { + window.localStorage.setItem('index-sort', 'grouped'); specList.querySelectorAll('.group-header').forEach(function(h) { h.remove(); }); specs.sort(function(a, b) { var c = a.dataset.shortname.localeCompare(b.dataset.shortname); @@ -685,6 +687,9 @@ def escape_html(text): btnRecent.addEventListener('click', sortRecent); btnGrouped.addEventListener('click', sortGrouped); + if (window.localStorage.getItem('index-sort') === 'grouped') { + sortGrouped(); + } // Mobile: tap spec header to expand/collapse (accordion) specs.forEach(function(el) { diff --git a/css-2026/Overview.bs b/css-2026/Overview.bs index cad24466fe58..7197d81dba07 100644 --- a/css-2026/Overview.bs +++ b/css-2026/Overview.bs @@ -7,6 +7,7 @@ Prepare for TR: no Group: CSSWG Work Status: revising URL: https://drafts.csswg.org/css-2026/ +TR: https://www.w3.org/TR/css-2026/ Editor: Tab Atkins Jr., Google, http://xanthir.com/, w3cid 42199 Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400 Editor: Florian Rivoal, Invited Expert, https://florian.rivoal.net, w3cid 43241 @@ -32,8 +33,10 @@ 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 type:selector; text::fullscreen text::open @@ -636,6 +639,14 @@ Modules with Rough Interoperability
This module defines basic basic geometric interfaces to represent points, rectangles, quadrilaterals, and transformation matrices. +
CSS Nesting Module Level 1 + [[CSS-NESTING-1]] +
+ This module introduces the ability to nest one style rule + inside another, with the selector of the child rule + relative to the selector of the parent rule. + This increases the modularity and maintainability of CSS stylesheets. +

@@ -981,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 @@ -1040,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: @@ -1070,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 98b975ee7e3c..023b07495c7c 100644 --- a/css-align-3/Overview.bs +++ b/css-align-3/Overview.bs @@ -2036,185 +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''. @@ -2554,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).
+
 
-
-
    
-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 trigger 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.
-
-If a single element attempts to define multiple [=triggers=] of different types
-with the same [=trigger name=],
-it only exposes one of the [=triggers=],
-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.
-
-
-
    
-Trigger Name Scoping: the 'trigger-scope' property
    
-
-[=Trigger names=] are global by default,
-usable by other elements regardless of their position.
-(Though they are [=tree-scoped names=],
-so have interactions with [=shadow roots=]).
-If multiple elements define [=triggers=] with the same [=trigger name=],
-the [=trigger=] defined by the later element in [=tree order=] is used.
-
-The 'trigger-scope' property can limit the scope of a name
-to a subtree of the document,
-so elements outside won't see the chosen [=trigger name=],
-and elements inside will only see the version of the [=trigger name=]
-defined inside the scope.
-
-
    -Name: trigger-scope
-Value: none | all | <>#
-Initial: none
-Applies to: all elements
-Inherited: no
-Animation type: not animatable
-Computed value: as specified
-
    
-
-This property scopes [=trigger names=] to the subtree of the matching element.
-Its values are:
-
-
    
-  
    none
-  
    
-    No changes in [=trigger name=] scope.
-
-  
    all
-  
    
-    Specifies that all [=trigger names=] defined by this element or its descendants--
-    whose scope is not already limited by a descendant using 'trigger-scope'--
-    to be in scope only for this element's [=flat tree=] descendants;
-    and limits descendants to only match [=trigger names=]
-    to [=triggers=] within this subtree.
-
-    This value only affects [=trigger names=] in the same tree scope,
-    as if it were a [=tree-scoped name/strictly matched=] [=tree-scoped name=].
-    (That is, ''trigger-scope: all'' acts identically
-    to ''trigger-scope: --foo, --bar, ...'',
-    listing all relevant [=trigger names=].)
-
-  
    <>
-  
    
-    Specifies that a matching [=trigger name=] defined by this element or its descendants--
-    whose scope is not already limited by a descendant using 'trigger-scope'--
-    to be in scope only for this element's [=flat tree=] descendants;
-    and limits descendants to only match these [=trigger names=]
-    to [=triggers=] within this subtree.
-
-    The <> represents a [=tree-scoped name/strictly matched=] [=tree-scoped name=],
-    i.e. it can only match against [=trigger names=] in the same shadow tree.[[!CSS-SCOPING-1]]
-
    
-
-
-
-
    
-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: as specified
-Canonical order: per grammar
-Animation type: not animatable
-
    
-
-If ''timeline-trigger-name/none'' is specified,
-the element does not define any [=timeline triggers=].
-
-If the same <> appears multiple times in the list,
-only the last one defines a [=timeline trigger=];
-the preceding ones have no effect.
-
-
-
    
-Linking a Timeline: the 'timeline-trigger-source' property
    
-
-
    -Name: timeline-trigger-source
-Value: <>#
-Initial: auto
-Applies to: all elements
-Inherited: no
-Percentages: N/A
-Computed value: list, each item either
-  the keyword ''single-animation-timeline/none'',
-  the keyword ''single-animation-timeline/auto'',
-  a case-sensitive [=css identifier=],
-  a computed ''scroll()'' function,
-  or
-  a computed ''view()'' function
-Canonical order: per grammar
-Animation Type: not animatable
-
    
-
-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=].
-
-
    
-The Enter Range: the 'timeline-trigger-range' property
    
-
-
    -Name: timeline-trigger-range
-Value: [ <<'timeline-trigger-range-start'>> <<'timeline-trigger-range-end'>>? ]#
-
    
-
-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 'timeline-trigger-range' is defined in [[web-animations-2#trigger-ranges]].
-
-Issue: Need to rewrite WebAnim2 to use the term "enter range".
-
-
    -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 '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 Exit Range: the 'timeline-trigger-exit-range' property
    
-
-
    -Name: timeline-trigger-exit-range
-Value: [ <<'timeline-trigger-exit-range-start'>> <<'timeline-trigger-exit-range-end'>>? ]#
-
    
-
-The 'timeline-trigger-exit-range' property is a [=shorthand property=]
-that sets 'timeline-trigger-exit-range-start' and 'timeline-trigger-exit-range-end'
-together in a single declaration.
-It has the same syntax as the 'animation-range' property.
-
-The behavior of 'timeline-trigger-exit-range' is defined in [[web-animations-2#trigger-ranges]].
-
-
-
    -Name: timeline-trigger-exit-range-start, timeline-trigger-exit-range-end
-Value: [ auto | normal | <> | <> <>? ]#
-Initial: 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: timeline-trigger
-Value: none | [ <<'timeline-trigger-name'>> <<'timeline-trigger-source'>> <<'timeline-trigger-range'>> [ '/' <<'timeline-trigger-exit-range'>> ]? ]#
-
    
+
 
-
    
-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
-
    
-
-If ''event-trigger-name/none'' is specified,
-the element does not define any [=event triggers=].
-
-If the same <> appears multiple times in the list,
-only the last one defines a [=event trigger=];
-the preceding ones have no effect.
-
-
    
-Linking an Event: the 'event-trigger-source' property
    
-
-
    -Name: event-trigger-source
-Value: [ none | <>+ [ / <>+ ]? ]#
-Initial: none
-Applies to: all elements
-Inherited: no
-Percentages: N/A
-Computed value: as specified
-Animation type: not animatable
-
    
-
-The 'event-trigger-source' property
-specifies what event or events activate the [=event trigger=].
-Its values are:
-
-
    
-    : none
-    :: The corresponding entry in the [=coordinated value list=] does not define a trigger.
-
-    : <>+ [ / <>+ ]?
-    :: Defines what event(s) the [=event trigger=] responds to.
-
-        If a ''/'' is used in the value,
-        the [=event trigger=] is stateful;
-        the set of events before the ''/'' are the [=event trigger's=] [=enter events=],
-        while those after the ''/'' are the [=exit events=].
-        (The same events can occur in both sets.)
-
-        Otherwise,
-        the [=event trigger=] is stateless,
-        and the provided events are its [=enter events=].
-
    
-
-
    -<> = activate | click | touch | dblclick | keypress(<>) | ...
-
    
-
-Issue: Figure out the full set of events we want to handle.
-
-
-
    
-The 'event-trigger' Shorthand
    
-
-
    -Name: event-trigger
-Value: none | [ <<'event-trigger-name'>> <<'event-trigger-source'>> ]#
-Initial: none
-Applies to: all elements
-Inherited: no
-Percentages: N/A
-Computed value: as specified
-Animation type: not animatable
-
    
-
-The 'event-trigger' [=shorthand property=]
-sets both 'event-trigger-name' and 'event-trigger-source' at once.
-
-A value of none
-is equivalent to ''none none''.
-
-
-
-
 # Animation Events # {#events}
 
 ## Event dispatch ## {#event-dispatch}
@@ -1436,6 +882,33 @@ expressed in milliseconds, it must be divided by 1,000 to produce a value in
 seconds before being assigned to the {{AnimationEvent/elapsedTime}} member of
 the {{AnimationEvent}}.
 
+## The AnimationEvent Interface ## {#interface-animationevent}
+
+### IDL Definition ### {#interface-animationevent-idl}
+
+Add {{AnimationEvent/animation}} to the {{AnimationEvent}} interface and {{AnimationEventInit}} dictionary as follows:
+
+
    +[Exposed=Window]
+partial interface AnimationEvent {
+  readonly attribute CSSAnimation? animation;
+};
+
+partial dictionary AnimationEventInit {
+  CSSAnimation? animation = null;
+};
+
    
+
+### Attributes ### {#interface-animationevent-attributes}
+
+Add attribute descriptions as follows:
+
+
    
+  
    animation
+  
    
+    The CSS Animation that fired the event.
+
    
+
 # DOM Interfaces # {#interface-dom}
 
 ## The CSSAnimation interface ## {#the-CSSAnimation-interface}
@@ -1507,7 +980,54 @@ console.log(anim.playState); // Should be 'running'.
 
 
    Recent Changes
    
 
-
    Changes since the 2 March 2023 Working Draft include:
+
    Changes since the 2 June 2023 Working Draft:
    
+
+
      
+  
+  
    • 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 b51561c765f4..502d9ddb0803 100644
--- a/css-borders-4/Overview.bs
+++ b/css-borders-4/Overview.bs
@@ -379,12 +379,18 @@ Line Thickness: the 'border-width' properties
    
 	i.e. the border width.
 	Where
 
-	
    <> = <> | thin | medium | thick
    
+	
    <> = <> | hairline | thin | medium | thick
    
 
 	
    
 	Negative values are invalid.
 	The thin, medium, and thick keywords
 	are equivalent to ''1px'', ''3px'', and ''5px'', respectively.
+	The hairline keyword is a UA-defined length,
+	less than or equal to ''1px''
+	and equal to an integer number of device pixels at the default page zoom,
+	which represents a "just visible" line.
+	(While it can be as large as ''1px'',
+	on many devices it will be approximately ''0.3px'' to ''0.5px''.)
 
 	The [=resolved value=] for the 'border-width' properties is the [=used value=].
 
@@ -3341,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 +
  • if abs(|d|) < 1E-12
    • let |inv_d| be 1 / |d|
      • -
    • let |t1| be (|bmin|[i] - |a|) * |inv_d|
      • -
    • let |t2| be (|bmax|[i] - |a|) * |inv_d|
      • -
    • let |tnear| be max(min(|t1|, |t2|), |tnear|)
      • -
    • let |tfar| be min(max(|t1|, |t2|), |tfar|)
      • +
    • let |t1| be (|bmin| [i] - |a| ) * |inv_d|
      • +
    • let |t2| be (|bmax| [i] - |a| ) * |inv_d|
      • +
    • let |tnear| be max(min(|t1|, |t2|), |tnear| )
      • +
    • let |tfar| be min(max(|t1|, |t2|), |tfar| )
    • @@ -6196,7 +6394,7 @@ Sample Pseudocode for the Ray Trace Gamut Mapping
  • for (i =0; i < 3; i++):
      -
    • let |result|[i] be |start|[i] + |direction|[i] * |tnear|
      • +
    • let |result| [i] be |start| [i] + |direction| [i] * |tnear|
  • return |result|
    • @@ -6207,31 +6405,31 @@ Sample Pseudocode for the Ray Trace Gamut Mapping
    1. It is assumed the minimum value is 0 - and that all channels have the same minimum. - The value should be small relative to the unit type. + and that all channels have the same minimum. + The value should be small relative to the unit type. 64 bit could easily be as small as 1e-14, but 1e-6 is fine in practice.
    2. 1.0 represents the maximum in-gamut channel value, and it is assumed all channels have the same maximum.
    3. - This places the current color back on the chroma reduction curve, + This places the |current| color back on the chroma reduction curve, if it has deviated.
    4. - This means |origin_rgb| is below the gamut surface, + This means |origin_rgb| is below the gamut surface, so we use it as an anchor closer to the gamut surface.
    5. - This is provided for catastrophic failures - where a specific, perceptual mapping space - completely breaks down + This is provided for catastrophic failures + where a specific, perceptual mapping space + completely breaks down due to ridiculously wide colors (outside the visible spectrum). It is expected that non-imaginary colors in CSS should never trigger this.
    6. - For typical RGB spaces + For typical RGB spaces where the gamut bounds are 0 and 1 for each component this simplifies to a single constant rather than a 3-element array.
    7. - favoring the first intersection in the direction |start| -> |end|. + favoring the first intersection in the direction |start| -> |end| .
    @@ -6405,7 +6603,7 @@ Resolving Lab and LCH values 
     lch(52.2345% 72.2 56.2)
    - Although the values of a, b and C + Although the values of a, b and C are theoretically unbounded, there may be an [=implementation-defined limit for values approaching infinity=]. @@ -6433,7 +6631,7 @@ Resolving Oklab and OkLCh values 
     oklch(42.1% 0.192 328.6)
    - Although the values of a, b and C + Although the values of a, b and C are theoretically unbounded, there may be an [=implementation-defined limit for values approaching infinity=]. @@ -6470,7 +6668,7 @@ Resolving values of the ''color()'' function 
     color(xyz-d65 0.472 0.372 0.131)
    - Although the values of r, g, b, x, y and z + Although the values of r, g, b, x, y and z are theoretically unbounded, there may be an [=implementation-defined limit for values approaching infinity=]. @@ -6492,7 +6690,7 @@ Resolving values of the ''color()'' function The computed value is the corresponding color in its color space. However, such colors must not be altered by - 'forced colors mode'. + [=forced colors mode=].
    For example, in this html: @@ -6510,7 +6708,7 @@ Resolving values of the ''color()'' function The ''currentcolor'' keyword computes to itself. In the 'color' property, - the used value of ''color>/currentcolor'' is the + the used value of ''color>/currentcolor'' is the resolved [=inherited value=]. In any other property, its used value is the used value of the 'color' property on the same element. @@ -6777,7 +6975,18 @@ Serializing sRGB values During serialization, any [=missing=] values - are converted to 0. + are converted to 0 + if the chosen serialization form + (such as the legacy color syntax with comma separators, + or the + HTML-compatible serialization + of sRGB values) + cannot represent the ''none'' keyword. + When at least one component is [=missing=] + and the value can be serialized in a form which supports ''none'', + the form is chosen as described in + [[#css-serialization-of-srgb]] + so that [=missing color components=] are preserved as ''none''.

    HTML-compatible serialization of sRGB values

    @@ -6797,13 +7006,13 @@ Serializing sRGB values
    For example, fill style is set to magenta: - 
    +		
     			context.fillStyle = "rgb(255, 0, 255)"
 			console.log(context.fillStyle); // "#ff00ff"
 		
    
 
-		The color space is sRGB, the representation is 8 bits per component, 
-		the data format does not produce ''none'' values nor does it support extended range values, 
+		The color space is sRGB, the representation is 8 bits per component,
+		the data format does not produce ''none'' values nor does it support extended range values,
 		and the alpha is 1.
 
 		The HTML-compatible serialization is the string "#ff00ff" (not "#FF00FF").
@@ -6814,7 +7023,7 @@ Serializing sRGB values
 	
    
 		For example, fill style is set to   a dark brown, in CIE Lab:
 
-		
    +		
     			context.fillStyle = "lab(29% 39 20)";
 			console.log(context.fillStyle); // "lab(29 39 20)"
 		
    
@@ -6825,30 +7034,31 @@ Serializing sRGB values
 	
    
 		For example, fill style is set to  semi-transparent magenta:
 
-		
    +		
     			context.fillStyle = "#ff00ffed";
 			console.log(context.fillStyle); // "rgba(255, 0, 255, 0.93)"
 		
    
 
-		The alpha is not 1, so the CSS serialization is the string 
+		The alpha is not 1, so the CSS serialization is the string
 		"rgba(255, 0, 255, 0.93)".
 	
    
 
 	
 
 	
    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.
@@ -6875,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
    
@@ -6907,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 <>.
@@ -7263,14 +7571,14 @@ Serializing other colors
 
 	The serialized form of ''currentColor'' is the string "currentcolor".
 
-
 
@@ -7284,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
+		(Issue 10579)
+	
    • 
+	
  • Added pseudocode for the ray trace gamut mapping algorithm
+		(Issue 10579)
+	
    • 
+	
  • Added EdgeSeeker and Ray Trace Gamut Mapping Algorithms. Allowed choice of three GMA
+		(Issue 10579)
+	
    • 
+	
  • 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,
+		showing some cases which give acceptable results
+		(Issue 10579)
+	
    • 
+	
  • Fixed discrepency in ΔE2000 sample implementation
+		(Issue 13322)
+	
    • 
 	
 	
  • Updated ''AccentColor'' to take its value from 'accent-color', unless in [=Forced Colors Mode=]
 		(Issue 5900)
@@ -7796,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
@@ -7813,7 +8171,6 @@ Changes
 
    Changes since the Candidate Recommendation Draft of 13 Feb 2024
    
 
 
      
-	
 	
    • Clarified that inside the color property, it is the resolved inherited value (not the raw inherited value) that is used
      • 
 	
    • Listed categories of colors, such as those that resolve to sRGB or support legacy color syntax
      • 
 	
    • Added hue normalization examples
      • 
diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs
index 03841e19cfd4..240843095d65 100644
--- a/css-color-5/Overview.bs
+++ b/css-color-5/Overview.bs
@@ -2,9 +2,8 @@
 Title: CSS Color Module Level 5
 Shortname: css-color
 Level: 5
-Status: WD
-Date: 2026-01-13
-Prepare for TR: yes
+Status: ED
+Prepare for TR: no
 Group: csswg
 TR: https://www.w3.org/TR/css-color-5/
 ED: https://drafts.csswg.org/css-color-5/
@@ -19,6 +18,7 @@ Abstract: This module extends CSS Color [[css-color-4]] to add color modificatio
 Repository: w3c/csswg-drafts
 WPT Path Prefix: css/css-color/
 WPT Display: open
+At Risk: Custom Color Spaces, '@color-profile', 'device-cmyk()', Relative Alpha Colors
 
    • 
 
 
    @@ -125,7 +125,7 @@ Introduction {#intro}
 
 	
     	<color> = <> | currentColor | <> | 
-				<> | <>  | <>
+				<> | <>  | <>
 
 	<color-base> = <> | <> | <> | <> | transparent
 	<color-function> = <> | <> |
@@ -142,7 +142,7 @@ Introduction {#intro}
 
 	* ''currentColor'' (which depends on the value of the 'color' property)
 	* a <> (which depends on the color mode)
-	* <> (which depends on the color mode)
+	* <> (which depends on the color mode)
 	* <> (which depends on the color mode)
 	* <> (which has no colorimetric basis)
 
@@ -237,6 +237,16 @@ Mixing Colors: the ''color-mix()'' Function {#color-mix}
 If no color interpolation method is specified, assume Oklab.
 Otherwise, use the specified colorspace for mixing.
 
+
    
+	For example, these two are exactly equivalent:
+
+	
    +		color-mix(in oklab, firebrick, goldenrod)
+		color-mix(firebrick, goldenrod)
+	
    
+
+
    
+
 
    
 	Percentage Normalization
 
    
@@ -285,12 +295,14 @@ Otherwise, use the specified colorspace for mixing.
 	1. [=Normalize mix percentages=] from the list of [=mix items=] passed to the function,
 		with the "forced normalization" flag set to true,
 		letting |items| and |leftover| be the result.
+	
+	2. Let |alpha mult| be 1 - |leftover|,
 		interpreting |leftover| as a number between 0 and 1.
-	4. If |items| is length 1,
+	3. If |items| is length 1,
 		set |color| to the color of that sole item,
 		converted to the specified interpolation <>.
 
@@ -304,7 +316,10 @@ Otherwise, use the specified colorspace for mixing.
 				Let |combined percentage| be the sum of |a| and |b|’s percentages.
 			2. Interpolate |a| and |b|’s colors
 				as described in [[css-color-4#interpolation]],
-				with a progress percentage equal to (|b|’s percentage) / |combined percentage|).
+				with a progress percentage equal to
+				(|b|’s percentage) / |combined percentage|),
+				if |combined percentage| is greater than 0,
+				and 0.5 otherwise.
 				If the specified color space is a [=cylindrical polar color=] space,
 				then the <> controls the
 				interpolation of hue, as described in
@@ -315,8 +330,8 @@ Otherwise, use the specified colorspace for mixing.
 				and a percentage of |combined percentage|,
 				and [=stack/push=] it onto |item stack|.
 		3. Set |color| to the color of the sole remaining item in |item stack|.
-	5. Multiply the alpha component of |color| by |alpha mult|.
-	6. Return |color|.
+	4. Multiply the alpha component of |color| by |alpha mult|.
+	5. Return |color|.
 
 	Note: In [=cylindrical polar color=] spaces,
 	mixing is order-dependent,
@@ -439,6 +454,23 @@ Otherwise, use the specified colorspace for mixing.
 	 oklch(0% 0 none / 0)
 
    
 
+
    
+	In this example three colors are mixed, 
+	and no percentages are given 
+	so each color contributes one-third of the final result.
+
+	
    color-mix(in oklab, teal, olive, blue);
    
+
+	The calculation is as follows:
+	*  teal (#008080) is oklab(54.31% -0.0896 -0.0236)
+	*   olive (#808000) is oklab(58.07% -0.0428 0.1191)
+	*   blue (#0000FF) is oklab(45.20% -0.0325 -0.3115)
+	* mixed lightness is (54.31 + 58.07 + 45.20) / 3 = 52.53%
+	* mixed a is (-0.0896 + -0.0428 + -0.0325) / 3 = -0.0550
+	* mixed b is (-0.0236 + 0.1191 + -0.3115) / 3 = -0.0720
+	* mixed result is  oklab(52.53% -0.0550 -0.0720)
+
    
+
 
    
 	Effect of Mixing Color Space on color-mix
 
    
@@ -1052,6 +1084,9 @@ in the range [0, 360].
 	relative-currentcolor-lab-01.html
 	relative-currentcolor-rec2020-02.html
 	relative-currentcolor-visited-getcomputedstyle.html
+	parsing/alpha-color-computed.html
+	parsing/alpha-color-parsing-invalid.html
+	parsing/alpha-color-parsing-valid.html
 	parsing/color-computed-relative-color.html
 	parsing/color-invalid-relative-color.html
 	parsing/color-valid-relative-color.html
@@ -1746,6 +1781,12 @@ The color components of the [=origin color=] are unchanged,
 the alpha component is modified or replaced.
 The result of this function is in the color space of the origin color.
 
+
+	parsing/alpha-color-computed.html
+	parsing/alpha-color-parsing-invalid.html
+	parsing/alpha-color-parsing-valid.html
+
+
 
    
 	For example, here the result is the same as the origin color,
 	but the alpha is changed to 80%
@@ -2035,7 +2076,7 @@ or any other color or monochrome output device which has been characterized.
 
 		The ''@color-profile'' rule accepts the descriptors defined in this specification.
 
-		
    +		
     		Name: src
 		Value: <>
 		For: @color-profile
@@ -2167,7 +2208,7 @@ or any other color or monochrome output device which has been characterized.
 				but fall just inside the gamut.
 		
 
-		
    +		
     			Name: components
 			Value: <>#
 			For: @color-profile
@@ -2745,21 +2786,102 @@ or any other color or monochrome output device which has been characterized.
 	Reacting to the used color-scheme: the ''light-dark()'' Function
 
 
-	System colors have the ability to react to the current used ''color-scheme'' value.
+	[=System colors=] have the ability to react to an element's [=color scheme=].
 	The ''light-dark()'' function exposes the same capability to authors.
 
+	There are two forms of this function: one takes a pair of colors
+	while the other takes a pair of images. 
+	Attempting to use one image and one color
+	will result in a parse-time error.
+
+	
+
 	
    -		light-dark() = light-dark( <>, <> )
+		light-dark() = <> | <>
+		<> = light-dark(<>, <>)
+		<> = light-dark( [ <> | none ] , [ <> | none ] ) 
 	
    
 
-	This function computes to the computed value of the first color,
-	if the used color scheme is ''light'' or unknown,
+	For the color form, this function computes to the computed value of the first color,
+	if the element color scheme is ''light'',
 	or to the computed value of the second color,
-	if the used color scheme is ''dark''.
+	if the element color scheme is ''dark''.
+
+	For the image form, this function returns the first image,
+	if the element color scheme is ''light'',
+	or the second image,
+	if the element color scheme is ''dark''.
+
+	The none keyword 
+	computes to ''image(transparent)''
+	(a fully transparent image with no natural size).
+
+	
    
+		For example, to maintain a legible contrast on links,
+		for light mode and dark mode:
+
+		
    +			a:link {
+			    color: light-dark(blue, #81D9FE);
+			    background-color: light-dark(white, black);
+		}
+		
    
+
+		The traditional  blue link text 
+		is legible on a  white background
+		(WCAG contrast 8.59:1, AAA pass)
+		but would not be legible on a  black background
+		(WCAG contrast 2.44:1, AA fail).
+		Instead, a lighter blue  #81D9FE 
+		is used in dark mode.
+		(WCAG contrast 13.28:1, AAA pass).
+
+		
    
+		
     Legible link text
    
+		
     Illegible link text
    
+		
     Legible link text
    
+		
    
+	
    
+
+	
    
+		For example, to provide easily visible list bullets
+		for light mode and dark mode:
+
+		
    +		ul.fancy {
+			list-style-image: light-dark(
+				url("icons/deep-maroon-ball.png"),
+				url("icons/pale-yellow-star.png")
+			);
+		}
+	
    
+	
    
+
+	
    
+		For example, a raster image is used in light mode,
+		while in dark mode we want a fully-transparent image.
+
+		
    +			background-image: light-dark(url(my-light-image.png), none);
+		
    
+
+		This is equivalent to:
+
+		
    +			background-image: light-dark(url(my-light-image.png), image(transparent));
+		
    
+	
    
+
+	
 
 	
 		light-dark-basic.html
 		light-dark-currentcolor.html
+		light-dark-image.html
+		light-dark-image-none-interpolation.html
+		light-dark-image-none.html
 		light-dark-inheritance.html
 		light-dark-currentcolor-in-color.html
 		/css/css-pseudo/highlight-styling-004.html
@@ -2802,9 +2924,12 @@ or any other color or monochrome output device which has been characterized.
 
 	
 		contrast-color-001.html
+		contrast-color-currentcolor-inherited.html
+		animation/contrast-color-interpolation.html
 		parsing/color-computed-contrast-color-function.html
 		parsing/color-invalid-contrast-color-function.html
 		parsing/color-valid-contrast-color-function.html
+		parsing/contrast-color-function-calc-container.html
 	
 
 
-		- else, |p1| is serialized as is. 
-	- else if ONLY the first percentage |p1| is specified:
-		- if |p1| is equal to 50%, nothing is serialized. 
-		- else, |p1| is serialized as is. 
-	- else if ONLY the second percentage |p2| is specified:
-		- if |p2| equals 50%, nothing is serialized. 
-		- if |p2| is not ''calc()'', the value of 100% - |p2| is serialized. 
-		- else, nothing is serialized. 
-	- else if NEITHER is specified:
-		- nothing is serialized. 
-
-The serialization of the second percentage of a declared value of a ''color-mix()'' function is defined as:
-
-	- If BOTH the first percentage p1 and second percentages p2 are specified:
-		- if neither p1 nor p2 is calc(), and p1 + p2 equals 100%, nothing is serialized. 
-		- else, p2 is serialized as is. 
-	- else if ONLY the first percentage p1 is specified:
-		- nothing is serialized. 
-	- else if ONLY the second percentage p2 is specified:
-		- if p2 equals 50%, nothing is serialized. 
-		- if p2 is not calc(), nothing is serialized. 
-		- else, p2 is serialized as is. 
-	- else if NEITHER is specified:
-		- nothing is serialized. 
-
-Note: ''calc()'' values are consider to be unknown, 
-so are never equal 50%,
-and never sum with something else to equal 100%.
+Each color argument is serialized as
+the serialized <>,
+followed by, if a percentage is serialized for this argument (see below),
+	" " and the serialized percentage.
+
+Each color argument is serialized individually;
+in particular,
+identical colors are not collapsed into a single argument.
+
+The serialized percentages
+of the declared value of a ''color-mix()'' function
+are determined as follows.
+Let |N| be the number of color arguments.
+
+For each argument,
+let its effective percentage be:
+	- its specified <>,
+		if one was explicitly provided
+		and is not a ''calc()'' expression;
+	- if its <> was omitted,
+		and none of the other specified <>s
+		are ''calc()'' expressions:
+		(100% − |specified sum|) / |omitted count|,
+		where |specified sum| is the sum of the explicitly specified <>s
+		and |omitted count| is the number of arguments
+		with omitted <>s;
+	- otherwise, unknown.
+
+If all [=effective percentage=]s are known
+and equal to 100% / |N|,
+no percentages are serialized.
+Otherwise, each argument's percentage is serialized as follows:
+	- If a <> was explicitly specified,
+		it is serialized as-is.
+	- If a <> was omitted
+		and none of the other specified <>s
+		are ''calc()'' expressions:
+		the value
+		(100% − |specified sum|) / |omitted count|
+		is serialized,
+		where |specified sum| and |omitted count| are as defined above.
+	- Otherwise (a <> was omitted
+		but another argument has a ''calc()'' <>):
+		nothing is serialized.
+
+Note: ''calc()'' values are considered unknown,
+so are never equal to 100% / |N|,
+and prevent computation of omitted <>s.
 
 
    
 	For example, the serialized declared value of
 	
    color-mix(in oklab, teal, peru 40%)
    
-	would be the string "color-mix(in oklab, teal 60%, peru)".
+	would be the string "color-mix(teal 60%, peru 40%)":
+	the color space is omitted because it is the default (''oklab''),
+	and all percentages are serialized
+	because they are not all equal to 100%/2 = 50%.
 
 	The serialized declared value of
 	
    color-mix(in oklab, teal 50%, peru 50%)
    
-	would be the string "color-mix(in oklab, teal, peru)".
+	would be the string "color-mix(teal, peru)":
+	both percentages equal 100%/2 = 50%, so they are all omitted.
 
 	The serialized declared value of
 	
    color-mix(in oklab, teal 70%, peru 70%)
    
-	would be the string "color-mix(in oklab, teal 70%, peru 70%)"
-	because the fact that these normalize to 50% each
-	is only discovered after percentage normalization.
+	would be the string "color-mix(teal 70%, peru 70%)":
+	the specified percentages are 70%, not 50%,
+	so they are not omitted,
+	even though they normalize to 50% each during computation.
+
+	The serialized declared value of
+	
    color-mix(in oklch longer hue, red, green, blue)
    
+	would be the string "color-mix(in oklch longer hue, red, green, blue)":
+	the color space (''oklch'') is not the default,
+	the hue interpolation method (''longer'') is not the default (''shorter''),
+	and all percentages equal 100%/3, so they are all omitted.
+
+	The serialized declared value of
+	
    color-mix(red 50%, green, blue)
    
+	would be the string "color-mix(red 50%, green 25%, blue 25%)":
+	the percentages are not all equal to 100%/3,
+	so all are serialized,
+	including the omitted ones
+	which each get (100% − 50%) / 2 = 25%.
 
    
 
 The serialization of the result of a ''color-mix()'' function
@@ -3168,6 +3333,16 @@ depends on the color space specified with "in":
 
 
 
+However, if the result of mixing in the ''hsl'' or ''hwb'' [=color space=]
+has at least one [=missing color component=]
+(including a [=missing=] alpha [=carried forward=]
+per [[css-color-4#interpolation-missing]]),
+the form used is the modern ''hsl(h s l / a)'' or ''hwb(h w b / a)'' syntax respectively,
+preserving the original color function and each ''none'' value
+per [[css-color-4#css-serialization-of-srgb]],
+rather than degrading to ''color(srgb r g b)'' (which would lose
+the ''hsl''/''hwb'' identity).
+
 
 	parsing/color-valid-color-mix-function.html
 	color-mix-currentcolor-visited-getcomputedstyle.html
@@ -3351,6 +3526,23 @@ while the serialization of the computed value
 is the string "color(srgb 0.55 0.45 0.45)".
 
    
 
+
    
+For example, the serialization of the declared value of
+
+
    hsl(from rebeccapurple none none none / none);
    
+
+is the string "hsl(from rebeccapurple none none none / none)".
+
+The computed value carries forward the [=missing=] alpha
+(alpha is its own [=analogous components|analogous component=]),
+giving an ''hsl()'' [=relative color=]
+whose hue, saturation, lightness, and alpha are all [=missing=].
+Because the resolved value contains [=missing color components=],
+the serialization uses the modern ''hsl()'' form,
+yielding the string "hsl(none none none / none)"
+rather than ''color(srgb 0 0 0 / none)''.
+
    
+
 
    
 For example, the serialization of the declared value of
 
@@ -3459,6 +3651,19 @@ depends on the color space of the [=relative color=]:
 	
 
 
+However, if the resolved value of an ''hsl()'' or ''hwb()'' [=relative color=]
+has at least one [=missing color component=]
+(including a [=missing=] alpha [=carried forward=]
+from the [=origin color=] per [[css-color-4#interpolation-missing]]),
+the form used is the modern ''hsl(h s l / a)'' or ''hwb(h w b / a)'' syntax respectively,
+preserving the original color function and each ''none'' value,
+rather than degrading to ''color(srgb r g b)'' (which would lose
+the ''hsl''/''hwb'' identity).
+This parallels [[#serial-origin-color]],
+which always emits the modern slash syntax for origin colors,
+and follows the general sRGB serialization rules in
+[[css-color-4#css-serialization-of-srgb]].
+
 
 
 
@@ -3700,6 +3905,43 @@ This specification adds a way to ensure adequate contrast for text whose backgro
 	Changes
 
 
+
    
+	Since the Working Draft of 13 January 2026
+
    
+
+
      
+	
    • Removed special casing of 100% from the color-mix() algorithm,
+		thus avoiding a discontinuity near fully-transparent colors
+		(Issue 14014),
+		(Issue 13996)
+	
      • 
+	
    • 
+		Guarded against division by zero in the color-mix() algorithm
+		(Issue 14013),
+		(Issue 13996)
+	
      • 
+	
    • Added a backlink from Color Interpolation in this specification,
+		to the same section in CSS Color 4 where most of this is defined
+		(Issue 13788)
+	
      • 
+	
    • Added a second form of the light-dark() function, 
+		which takes a pair of images rather than a pair of colors
+		(Issue 12513)
+	
      • 
+	
    • Added a "none" option to the image form of light-dark()
+		(Issue 12513)
+	
      • 
+	
    • Added a color-mix() example with three colors, now that it is no longer restricted to just two.
      • 
+	
    • Updated color-mix() serialization:
+		omit color space when it is the default (oklab),
+		serialize hue interpolation method when non-default,
+		generalize percentage rules for N colors
+		(omit all when equal to 100%/N, otherwise serialize all),
+		and clarify that identical colors are not collapsed
+		(Issue 13320)
+	
      • 
+
    
+
 
    
 	Since the Working Draft of 18 March 2025
 
    
diff --git a/css-color-adjust-1/Overview.bs b/css-color-adjust-1/Overview.bs
index ab79a23479fd..6add2cb7d4d6 100644
--- a/css-color-adjust-1/Overview.bs
+++ b/css-color-adjust-1/Overview.bs
@@ -20,7 +20,6 @@ Editor: Tab Atkins Jr., Google, http://www.xanthir.com/contact/, w3cid 42199
 Abstract: This module introduces a model and controls over automatic color adjustment by the user agent to handle user preferences, such as "Dark Mode", contrast adjustment, or specific desired color schemes.
 Ignored Terms: -webkit-tap-highlight-color, name, the head element
 WPT Path Prefix: css/css-color-adjust/
-WPT Display: open
 
     spec:css2; type:dfn; text:canvas
@@ -124,30 +123,131 @@ Preferred Color Schemes {#preferred}
 		consists of the opposite,
 		with dark background colors and light foreground/text colors.
 
-	Advisement: The [=light=] and [=dark color schemes=]
-	don't represent an exact color palette (such as black-and-white),
+	Note: [=Light=] and [=dark=] [=color schemes=]
+	are not specific color palettes,
 	but a range of possible palettes.
-	To guarantee specific colors, authors must specify those colors themselves.
+	For example,
+	a stark black-on-white scheme and a sepia dark-on-tan scheme
+	would both be considered [=light color schemes=].
+	To guarantee specific colors, authors must specify those colors themselves.
 	Note also that, consequently,
 	pairing default or <> colors with author-specified colors
 	cannot guarantee any particular contrast level;
-	it might be necessary to set both foreground and background colors together
-	to ensure legibility [[WCAG22]].
-
-	To enable pages to adapt to the user's [=preferred color scheme=],
-	user agents will match the '@media/prefers-color-scheme' media query
-	to the user's [=preferred color scheme=].
-	[[!MEDIAQUERIES-5]]
-	Complementing this, the 'color-scheme' property defined here
-	lets the author indicate appropriate [=color schemes=]
-	for UA-provided UI and colors in the page.
+	to ensure legibility,
+	generally either both foreground and background should be paired [=system colors=]
+	or both be manually specified colors.
+	[[WCAG22]]
+
+	The user's [=preferred color scheme=]
+	is then combined with the [=page's supported color schemes=]
+	to produce a page color scheme.
+	The [=page color scheme=] also records whether it's default or not.
+	The [=page color scheme=] is queryable with the '@media/prefers-color-scheme' [=media query=]. [[!MEDIAQUERIES-5]]
+
+	Individual elements have an element color scheme,
+	which by default matches the [=page color scheme=],
+	but can be overriden using the 'color-scheme' property.
+	The [=element color scheme=] affects things such as the value of [=system colors=] on the element,
+	the value of the ''light-dark()'' function,
+	and how user interface elements (like scrollbars) render.
+	(See [[#color-scheme-effect]].)
 
 	User agents may support additional [=color schemes=],
 	however CSS does not support negotiation of additional [=color schemes=]:
 	user agents should pursue standardization of these schemes,
 	so that '@media/prefers-color-scheme' and 'color-scheme' can reflect the additional values.
 
-Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme-prop}
+	Note: Because many pages were authored before [=color scheme=] support existed,
+	and thus pages were authored with the assumption of the default ([=light=]) color scheme,
+	user agents cannot automatically adapt the colors used in elements under their control,
+	as it might cause unreadable color contrast with the surrounding page.
+	Pages have to opt into [=color scheme=] support
+	by setting the [=page color scheme=],
+	or manually setting the 'color-scheme' property on individual elements.
+
+Opting Into a Preferred Color Scheme {#color-scheme-page}
+------------------------------------
+
+	The [=page color scheme=]
+	represents the [=color scheme=] that will be used for the page overall
+	(queryable with the ''prefers-color-scheme'' [=media feature=])
+	and for all elements that don't specifically override the [=page color scheme=] with the 'color-scheme' property.
+	See [[#color-scheme-effect]] for a full description of what the [=color scheme=] effects.
+
+	Note: In HTML, the <{meta/name/color-scheme|color-scheme <meta>}>
+	sets the [=page color scheme=].
+
+	Authors should generally set the [=page color scheme=],
+	rather than using the 'color-scheme' property,
+	so that the '@media/prefers-color-scheme' [=media feature=]
+	is consistent with the elements on the page.
+
+	The [=page color scheme=] is determined by finding the [=used color scheme=],
+	given the [=preferred color scheme=]
+	and the page's supported color schemes
+	(a [=color scheme support=]).
+
+	In embedded documents
+	(such as an <{iframe}> or an SVG <{img}>),
+	the embedding element's [=element color scheme=]
+	is used as the embedded document's [=preferred color scheme=]
+	(treated as a normal [=color scheme preference=]),
+	rather than the user's preference.
+	This allows embedded documents to match the negotiated color scheme
+	for the page or an element,
+	similar to other elements in the parent document.
+
+
+	
    
+		A page that responds to user preferences for light or dark display
+		by using the ''@media/prefers-color-scheme'' media feature
+		to alter the colors it uses
+		can easily opt the browser-controlled UI
+		(scrollbars, inputs, etc)
+		to match
+		with a simple global declaration:
+
+		
+			<meta name=color-scheme contents="light dark">
+		
+
+		(Or, in languages that don't have a way to set the [=page color scheme=] directly,
+		a '':root { color-scheme: light dark;}'' rule.)
+
+		If a page limits itself to using only the <>s,
+		the 'color-scheme' declaration
+		will support the user's preferred color scheme
+		even without the author needing to use ''@media'' at all.
+	
    
+
+	
    
+		If a page cannot reasonably accommodate all color schemes,
+		such as for branding or theatrical reasons,
+		<{meta/name/color-scheme}> or 'color-scheme'
+		can still indicate which color schemes the page can support,
+		causing the UI to match.
+
+		If the page's color scheme is primarily light,
+		the following will indicate that explicitly:
+
+		
+			<meta name=color-scheme contents="light">
+		
+
+		While if the page is primarily dark,
+		indicating that explicitly will make the page look more coherent as well:
+
+		
+			<meta name=color-scheme contents="dark">
+		
+
+		However, it is better to support both color schemes,
+		of course.
+	
    
+
+
+
+Overriding the Page Color Scheme: the 'color-scheme' property {#color-scheme-prop}
 -----------------------------------------------------------------
 
 	
    @@ -156,7 +256,7 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
 	Initial: normal
 	Applies to: all elements and text
 	Inherited: yes
-	Computed Value: the keyword ''normal'', or an ordered list of specified color scheme keywords
+	Computed Value: the keyword ''normal'', or a [=color scheme support=]
 	Animation type: discrete
 	
    
 
@@ -184,48 +284,34 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
 		rendering/dark-color-scheme/color-scheme-visited-link-initial.html
 	
 
-	While the prefers-color-scheme media feature
-	allows an author to adapt the page’s colors to the user’s preferred color scheme,
-	many parts of the page are not under the author's control
-	(such as form controls, scrollbars, etc).
-	The 'color-scheme' property allows an element to indicate
-	which [=color schemes=] it is designed to be rendered with.
-	These values are negotiated with the user's preferences,
-	resulting in a used color scheme
-	that affects things such as
-	the default colors of form controls and scrollbars.
-	(See [[#color-scheme-effect]].)
-
-	Note: Because many pages were authored before color scheme support existed,
-	user agents cannot automatically adapt the colors used in elements under their control,
-	as it might cause unreadable color contrast with the surrounding page.
-
-	Host languages can define the page's supported color schemes,
-	a list of [=color schemes=] supported by default for all elements on that page.
-
-	Note: [[HTML]] specifies a
-	color-scheme
-	<{meta}> tag which can be used to set the [=page's supported color schemes=].
-
+	While the [=page color scheme=] should generally be used
+	to control what [=color scheme=] a page uses,
+	occasionally there is need to override that [=color scheme=]
+	on a particular subtree.
+	The 'color-scheme' property allows this,
+	manually setting the [=element color scheme=]
+	for an element and its descendants.
 	Values are defined as follows:
 
 	
    
 		: normal
 		::
-			Indicates that the element supports the [=page's supported color schemes=],
-			if they are set, or that it supports no [=color schemes=] at all otherwise.
+			The [=element color scheme=] is the same as the [=page color scheme=].
+			(This includes noting whether the [=color scheme=] was [=color scheme/defaulted=].)
 
 		: light
-		::
-			Indicates that the element supports a [=light color scheme=].
-
 		: dark
 		::
-			Indicates that the element supports a [=dark color scheme=].
+			Indicates that the element supports a [=light=] and/or [=dark=] color scheme,
+			as appropriate.
+			The element's [=color scheme support=] will include the keywords,
+			in the order they're specified.
 
 		: only
 		::
 			Forbids the user agent from [=overriding the color scheme=] for the element.
+			The element's [=color scheme support=] will have a flag
+			indicating sole support.
 
 		: <>
 		::
@@ -245,95 +331,11 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
 			are not valid <>s in this property.
 	
    
 
-	Note: [=Light=] and [=dark=] [=color schemes=]
-	are not specific color palettes.
-	For example,
-	a stark black-on-white scheme and a sepia dark-on-tan scheme
-	would both be considered [=light color schemes=].
-	To ensure particular foreground or background colors,
-	they need to be specified explicitly.
-
-	
    
-		To determine the used color scheme of an element:
-
-		1. If the user's [=preferred color scheme=],
-			as indicated by the prefers-color-scheme media feature,
-			is present among the listed [=color schemes=],
-			and is supported by the user agent,
-			that's the element's [=used color scheme=].
-
-		2. Otherwise,
-			if the user has indicated an overriding preference for their chosen color scheme,
-			and the ''only'' keyword is not present in 'color-scheme' for the element,
-			the user agent must [=override the color scheme=]
-			with the user's [=preferred color scheme=].
-			See [[#color-scheme-override]].
-
-		3. Otherwise,
-			if the user agent supports at least one of the listed [=color schemes=],
-			the [=used color scheme=] is
-			the first supported [=color scheme=] in the list.
-
-		4. Otherwise,
-			the [=used color scheme=] is the browser default.
-			(Same as ''color-scheme/normal''.)
-	
    
-
-	Note: User agents are not required
-	to support any particular [=color scheme=],
-	so only using a single keyword,
-	such as ''color-scheme: dark'',
-	to indicate a required [=color scheme=]
-	is still not guaranteed to have any effect on the rendering of the element.
-
-	
    
-		A page that responds to user preferences for light or dark display
-		by using the prefers-color-scheme media feature
-		to alter the colors it uses
-		can easily opt the browser-controlled UI
-		(scrollbars, inputs, etc)
-		to match
-		with a simple global declaration:
-
-		
    -		:root {
-			color-scheme: light dark;
-		}
-		
    
-
-		If a page limits itself to using only the <>s,
-		the 'color-scheme' declaration, above,
-		will support the user's preferred color scheme
-		even without the author needing to use ''@media'' at all.
-	
    
-
-	
    
-		If a page cannot reasonably accommodate all color schemes,
-		such as for branding or theatrical reasons,
-		'color-scheme' can still indicate which color schemes the page can support,
-		causing the UI to match.
-
-		If the page's color scheme is primarily light,
-		the following will indicate that explicitly:
-
-		
    -		:root {
-			color-scheme: light;
-		}
-		
    
-
-		While if the page is primarily dark,
-		indicating that explicitly will make the page look more coherent as well:
-
-		
    -		:root {
-			color-scheme: dark;
-		}
-		
    
-
-		However, it is better to support both color schemes,
-		of course.
-	
    
+	If an element has any value other than ''color-scheme: normal'',
+	its [=element color scheme=] is determined by finding the [=used color scheme=],
+	given the user's [=preferred color scheme=]
+	and the element's [=color scheme support=]
+	specified by this property.
 
 	
    
 		A page might be generally capable of handling multiple color schemes,
@@ -344,22 +346,21 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
 		showing off the light or dark theme specifically.
 		This can be indicated as:
 
-		
    -		:root {
-			color-scheme: light dark;
-		}
-
-		.light-theme-example {
-			color-scheme: light;
-		}
+		
+			<meta name=color-scheme content="light dark">
+			<style>
+			.light-theme-example {
+				color-scheme: light;
+			}
 
-		.dark-theme-example {
-			color-scheme: dark;
-		}
-		</pre>
+			.dark-theme-example {
+				color-scheme: dark;
+			}
+			</style>
+		
 
 		Only the subsections rooted at ''.light-theme-example'' or ''.dark-theme-example''
-		will be opted into the ''light'' or ''dark'' themes specifically;
+		will be opted into the [=light=] or [=dark=] themes specifically;
 		the rest of the page will respect the user's preference.
 	
    
 
@@ -368,33 +369,125 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
 	beyond what the first instance of the keyword provides.
 
 
+Resolving Color Schemes {#color-scheme-resolution}
+-----------------------
+
+	While it's important for a page to respect the user's preferred [=color scheme=],
+	it's also important to only use a [=color scheme=] the page author expects,
+	or else it is very easy to render a page unreadable
+	by causing the foreground and background elements to accidentally have minimal (or zero!) contrast.
+
+	For example, an author expecting the default light color scheme
+	might set the page background to a light cream
+	while leaving the text color unset,
+	expecting it to use the default black text color.
+	If the page unexpectedly opted into a user's preferred [=dark color scheme=],
+	however,
+	and adjusted the default text color to white,
+	that would make the text virtually unreadable.
+
+	To balance these competing concerns,
+	a user's [=color scheme preference=]
+	is compared against a page's [=color scheme support=]
+	to produce a used [=color scheme=].
+
+	A color scheme preference
+	is either no preference,
+	a [=color scheme=] preference ([=light=] or [=dark=]),
+	or an overriding [=color scheme=] preference.
+
+	A color scheme support
+	is null,
+	or an ordered list of one or more supported [=color schemes=],
+	along with a flag indicating whether or not it solely supports the indicated [=color schemes=].
+
+	
    
+		To determine the used color scheme,
+		given a [=color scheme support=] |support|
+		and a [=color scheme preference=] |preference|:
+
+		1. If |support| is null,
+			or none of the [=color schemes=] in |support|
+			are supported by the UA,
+			return the UA default [=color scheme=],
+			and annotate that this [=color scheme=] was [=color scheme/defaulted=].
+
+		1. If |preference| is no preference,
+			return the first supported [=color scheme=] in |support|.
+
+		1. If |preference|'s [=color scheme=] is in |support|
+			and supported by the UA,
+			return that [=color scheme=].
+
+		1. If |support| is flagged as sole support,
+			return the first supported [=color scheme=] in |support|.
+
+		1. If |preference| is an [=overriding preference=],
+			return |preference|'s [=color scheme=].
+			If this [=color scheme=] is used as an [=element color scheme=],
+			also [=override the color scheme=] on the element
+			to this [=color scheme=].
+
+		1. Otherwise,
+			return the first supported [=color scheme=] in |support|.
+
+		Note: The basic logic here is that,
+		if the page hasn't opted into color schemes at all (null |supports|),
+		we go with the safe UA default that it was probably implicitly designed for.
+		If there is a usable |supports|,
+		and it matches |preference|,
+		we use the preference.
+		Otherwise |preference| and |supports| disagree,
+		and we go back and forth down the preference hierarchy to see who wins:
+		sole support in |support| wins,
+		then overriding preference in |preference| wins
+		(and we adjust the element's colors to make sure this actually works),
+		then |support| finally wins.
+	
    
+
+	Note: User agents are not required
+	to support any particular [=color scheme=],
+	so only using a single keyword,
+	such as ''color-scheme: dark'',
+	to indicate a required [=color scheme=]
+	is still not guaranteed to have any effect on the rendering of the element.
+
+	Note: User agents might not actually support preference levels in a [=color scheme preferences=].
+	At the time of writing,
+	UAs generally only support an ordinary [=light=] or [=dark=] preference,
+	which considerably simplifies the above logic.
+
+
 Effects of the Used Color Scheme {#color-scheme-effect}
 --------------------------------
 
 	For all elements,
-	the user agent must match the following to the [=used color scheme=]:
+	the user agent must match the following to the [=element color scheme=]:
 
 	* the default colors of scrollbars and other interaction UI
 	* the default colors of form controls and other "specially-rendered" elements
 	* the default colors of other browser-provided UI, such as "spellcheck" underlines
+	* the value of [=system colors=]
+	* the value of the ''light-dark()'' function
 
 	On the root element,
-	the [=used color scheme=] additionally must affect
+	the [=element color scheme=] additionally must affect
 	the surface color of the [=canvas=],
 	and the viewport's scrollbars.
 
 	In order to preserve expected color contrasts,
 	in the case of embedded documents typically rendered over a transparent [=canvas=]
 	(such as provided via an HTML <{iframe}> element),
-	if the [=used color scheme=] of the element
-	and the [=used color scheme=] of the embedded document’s root element
+	if the [=element color scheme=] of the element
+	and the [=element color scheme=] of the embedded document’s root element
 	do not match,
 	then the UA must use an opaque [=canvas=] of the ''Canvas'' color
-	appropriate to the embedded document’s [=used color scheme=]
+	appropriate to the embedded document’s root element's [=element color scheme=]
 	instead of a transparent canvas.
 	This rule does not apply to documents embedded
 	via elements intended for graphics
-	(such as <{img}> elements embedding an SVG document).
+	(such as <{img}> elements embedding an SVG document);
+	their canvases remain the default transparent regardless.
 
 	Note: Aside from the small list of adjustments given above,
 	user agents generally do not further adjust a page
@@ -408,12 +501,11 @@ Effects of the Used Color Scheme {#color-scheme-effect}
 Overriding the Color Scheme {#color-scheme-override}
 ---------------------------
 
-If the user has indicated an overriding preference for a particular color scheme,
+If the user has indicated an [=color scheme/overriding preference=] for a particular color scheme that the author does not explicitly support,
 and the author has not disallowed this (by using the ''only'' keyword),
-the user agent may override the color scheme,
-forcing the [=used color scheme=] to the user's [=preferred color scheme=].
-If the element does not support that [=color scheme=],
-the user agent must also auto-adjust other colors into this chosen [=color scheme=],
+the user agent must override the color scheme:
+in addition to the effects described in [[#color-scheme-effect]],
+it must also auto-adjust other colors into this chosen [=color scheme=],
 such as by inverting their brightness,
 while preserving any color contrast necessary for readability of the page.
 In this case, UA may also auto-adjust colors within replaced elements, background images, and other external resources as appropriate.
@@ -1193,6 +1285,15 @@ Privacy Considerations {#privacy}
 		for discussion on this topic.
    + Embedded documents (even cross-origin ones) + recieve their embedding element's [=element color scheme=] + as their [=preferred color scheme=], + which is technically a bit of cross-site communication. + This was not considered a significant problem by browser security reviewers, + and the user benefit of having pages and, particularly, SVG images + automatically adapt to the parent page's color scheme + was considered valuable enought to warrant it. + Security Considerations {#security} =================================== diff --git a/css-color-hdr-1/Overview.bs b/css-color-hdr-1/Overview.bs index 462a47b36b21..9ee820929175 100644 --- a/css-color-hdr-1/Overview.bs +++ b/css-color-hdr-1/Overview.bs @@ -529,7 +529,8 @@ Mixing Dynamic Range Limits: the ''dynamic-range-limit-mix()'' function {#dynami <> | <> | <> | <> | <> | <> | <> | <> | - <> + <> | + <> ictcp() = ictcp([from <>]? [<> | <> | none] [<> | <> | none] @@ -1894,7 +1895,11 @@ in a user stylesheet.
      - + +
    • Added missing hdr-color() to the grammar of the color function
      • +
    • Added missing Jzazbz_to_XYZ to sample code + #9934 +
    • Removed mention of SMPTE-ST-2094-50 as justification for eps (#12873, #11788) diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs index 10fd5bd0997d..f48574071950 100644 --- a/css-conditional-5/Overview.bs +++ b/css-conditional-5/Overview.bs @@ -31,12 +31,6 @@ WPT Display: open 
      -	spec:css2; type:dfn; text:stacking context
-	spec:css2; type:property; text:content
-	spec:css-display-3; type:property; text:display
-	spec:css2; type:property; text:counter-increment
-	spec:css-ui-3; type:property; text:text-overflow
-	spec:css-grid-1; type:property; text:grid
 	spec:css-break-3; type:dfn; text:forced break
 	spec:css-break-3; type:dfn; text:fragmentation
 	spec:css-break-3; type:dfn; text:fragmentation container
@@ -48,24 +42,31 @@ WPT Display: open
 	spec:css-conditional-4; type:type; text:
 	spec:css-contain-2; type:dfn; text:layout containment box
 	spec:css-contain-2; type:dfn; text:size containment box
+	spec:css-display-3; type:property; text:display
 	spec:css-fonts-4; type:type; text:
 	spec:css-fonts-4; type:type; text:
+	spec:css-grid-1; type:property; text:grid
 	spec:css-pseudo-4; type:dfn; text:fictional tag sequence
 	spec:css-pseudo-4; type:selector; text:::file-selector-button
 	spec:css-pseudo-4; type:selector; text:::placeholder
 	spec:css-scroll-snap-2; type:dfn; text:scrollsnapchanging
-	spec:css-sizing-4; type:property; text:contain-intrinsic-size
-	spec:css-sizing-4; type:property; text:aspect-ratio
-	spec:intersection-observer; type:dfn; text:intersection root
-	spec:css-sizing-3; type:property;
-		text:min-width
-		text:min-height
-	spec:css-sizing-3; type:dfn; text:width
-	spec:css-sizing-3; type:property; text:height
 	spec:css-sizing-3; type:dfn; text:height
 	spec:css-sizing-3; type:dfn; text:size
-	spec:css-values-4; type:dfn; text:relative length
+	spec:css-sizing-3; type:dfn; text:width
+	spec:css-sizing-3; type:property; text:height
+	spec:css-sizing-3; type:property; text:min-height
+	spec:css-sizing-3; type:property; text:min-width
+	spec:css-sizing-4; type:property; text:aspect-ratio
+	spec:css-sizing-4; type:property; text:contain-intrinsic-size
+	spec:css-ui-3; type:property; text:text-overflow
 	spec:css-values-4; type:dfn; text:identifier
+	spec:css-values-4; type:dfn; text:relative length
+	spec:css2; type:dfn; text:stacking context
+	spec:css2; type:property; text:content
+	spec:css2; type:property; text:counter-increment
+	spec:infra; type:dfn; text:list
+	spec:intersection-observer; type:dfn; text:intersection root
+	spec:selectors-4; type:dfn; text:pseudo-elements
 	spec:web-animations-1; type:dfn; text:effect values
      @@ -118,44 +119,58 @@ Extensions to the ''@supports'' rule <supports-feature> = <> | <> | <> | <> | <> - | <> + | <> | <> <supports-decl> = ( [ <> | <> ] ) <supports-font-tech-fn> = font-tech( <> ) <supports-font-format-fn> = font-format( <> ) <supports-at-rule-fn> = at-rule( <> ) <supports-named-feature-fn> = named-feature( <> ) + <supports-env-fn> = env( <> ) - : <> - :: - The result is true if the UA - supports the named condition. - If the name is not recognized, - the result is false. - - : <> - :: - The result is true if the UA - supports the font tech - provided as an argument to the function. - - : <> - :: - The result is true if the UA - supports the font format - provided as an argument to the function. - - : <> - :: - The result is true if the UA - supports the at-rule - provided as an argument to the function. - - : <> - :: - The result is true if the UA - supports the named feature - provided as an argument to the function. + <declaration> here matches anything that would be successfully parsed by [=consume a declaration=], + ignoring the context-validation check at the end of that algorithm. + Notably, this includes a trailing ''!important'', + which is valid but ignored for the purpose of ''@supports''. + +
      + : <> + :: + The result is true if the UA + supports the named condition. + If the name is not recognized, + the result is false. + + : font-tech( <> ) + :: + The result is true if the UA + [=supports the font tech=] + provided as an argument to the function. + + : font-format( <> ) + :: + The result is true if the UA + [=supports the font format=] + provided as an argument to the function. + + : at-rule( <> ) + :: + The result is true if the UA + [=supports the at-rule=] + provided as an argument to the function. + + : named-feature( <> ) + :: + The result is true if the UA + [=supports the named feature=] + provided as an argument to the function. + + : env( <> ) + :: + The result is true if the UA + [=supports the environment variable=] + provided as an argument to the function. +

      Extensions to the definition of support

      @@ -168,12 +183,12 @@ Font techs and formats A CSS processor is considered to - support a font tech + support a font tech when it is capable of utilizing the specified [[css-fonts-4#font-tech-definitions]] in layout and rendering. A CSS processor is considered to - support a font format + support a font format when it is capable of utilizing the specified [[css-fonts-4#font-format-definitions]] in layout and rendering, and this format is not specified as a <>. @@ -186,7 +201,7 @@ At-rules A CSS processor is considered to - support an at-rule + support an at-rule if it would accept an [=at-rule=] beginning with the specified at-keyword within any context. @@ -197,11 +212,26 @@ At-rules Named features A CSS processor is considered to - support an named feature + support a named feature if it supports the named feature based on the feature definition described in the following list: - [ No features are currently defined. ] +
      + : anchor-position-follows-transforms + :: Anchoring to a transformed element automatically takes into account the anchor's transforms, + causing the positioned element to shift to match it. + [[CSS-ANCHOR-POSITIONING]] + + (An earlier version of the specification did not take transforms into account.) + + : single-axis-scroll-container + :: The ability to have [=single-axis scroll containers=], + where one axis is scrollable and the other is ''overflow/clip''. + [[CSS-OVERFLOW-4]] + + (Previously, specifying ''overflow/clip'' alongside a scrollable value caused it to compute to ''overflow/hidden'', + which is still a scrollable value even if it doesn't generate a scrollbar.) +
      If the feature is not listed the processor does not support the named feature. @@ -214,9 +244,16 @@ Named features Named conditions A CSS processor is considered to - support a named condition + support a named condition when the related [=named supports condition=] returns true. +

      +Environment variables

      + + A CSS processor is considered to + support an environment variable + if the <> is a supported [=environment variable=]. +

      Generalized Conditional Rules: the ''@when'' rule

      @@ -437,6 +474,22 @@ Container Queries can be conditioned by querying against it, using the ''@container'' [=conditional group rule=]. + An ancestor element that generates a box is not an eligible container for + [=container size queries=] if that box is not an ancestor box of any boxes + generated by the querying element. + +
      + There are cases where the box for a [=pseudo-element=] is generated as a + sibling box of its originating element's box. If we allowed querying the size + of a sibling box, it would introduce layout cycles. + + For example, the ''::scroll-marker-group'' and ''::scroll-button()'' pseudo-elements + generate sibling boxes of their originating element's box. + These pseudo-elements will not be able to query their originating scroller + for [=container size queries=]. They will, however, be able to query other + eligible [=query container=] ancestors. +
      +
      For example, we can define the main content area and sidebar as containers, and then describe a ''.media-object'' that changes @@ -989,7 +1042,7 @@ Container Queries: the ''@container'' rule is a [=conditional group rule=] whose condition contains a container query, which is a boolean combination of [=container size queries=] and/or [=container style queries=]. - Style declarations within the <> block of an ''@container'' rule + Style declarations within the ''@container'' rule are [[css-cascade-4#filtering|filtered]] by its condition to only match when the [=container query=] is true for their element’s [=query container=]. @@ -998,7 +1051,7 @@ Container Queries: the ''@container'' rule 
       	@container <># {
-	  <>
+	  <>
 	}
      @@ -1434,7 +1487,7 @@ Style Container Features The <> can be either a [=supported CSS property=] or a valid <>. The <> production matches any valid <> - as long as it doesn't contain <>, <> and <> tokens. + as long as it doesn't contain <>, <> and <> tokens. container-queries/style-query-registered-custom-rem-change.html @@ -1816,8 +1869,8 @@ Container Relative Lengths: the ''cqw'', ''cqh'', ''cqi'', ''cqb'', ''cqmin'', ' For each element, [=container query length=] units are evaluated - as [=container size queries=] on the relevant axis (or axes) - described by the unit. + using the same rules as [=container size queries=] + on the relevant axis (or axes) described by the unit. The [=query container=] for each axis is the nearest ancestor container that accepts [=container size queries=] on that axis. @@ -1940,13 +1993,23 @@ The CSSContainerRule interface The {{CSSContainerRule}} interface represents an ''@container'' rule. 
      +	dictionary CSSContainerCondition {
+	  required CSSOMString name;
+	  required CSSOMString query;
+	};
+
 	[Exposed=Window]
 	interface CSSContainerRule : CSSConditionRule {
 		readonly attribute CSSOMString containerName;
 		readonly attribute CSSOMString containerQuery;
+		readonly attribute FrozenArray<CSSContainerCondition> conditions;
 	};
      + Issue: We should try to remove {{CSSContainerRule/containerName}} and + {{CSSContainerRule/containerQuery}}, since they don't deal with multiple + conditions correctly. + container-queries/container-rule-cssom.html @@ -1956,39 +2019,67 @@ The CSSContainerRule interface
      The conditionText attribute (defined on the CSSConditionRule parent rule), on getting, must return a value as follows: -
      -
      The ''@container'' rule has an associated <> -
      The result of getting the containerName and - containerQuery attributes, joined by a single whitespace. -
      Otherwise -
      The result of getting the containerQuery attribute. -
      +
      + 1. Let |conditions| be the result of getting the {{CSSContainerRule/conditions}} attribute. + 1. Let |first| be true. + 1. Let |result| be the empty string. + 1. [=list/For each=] |condition| in |conditions|: + 1. If |first| is false, append ", " to |result|. + 1. Set |first| to false. + 1. If |condition|'s {{CSSContainerCondition/name}} is not empty: + 1. Append |condition|'s {{CSSContainerCondition/name}} to |result|. + 1. If |condition|'s {{CSSContainerCondition/query}} is not empty, + append a single space to |result|. + 1. Append |condition|'s {{CSSContainerCondition/query}} to |result|. + 1. Return |result| +
      containerName of type CSSOMString
      The containerName attribute, on getting, must return a value as follows: - -
      -
      The ''@container'' rule has an associated <> -
      The result of serializing that <>. -
      Otherwise -
      An empty string. -
      +
      + 1. Let |conditions| be the result of getting the {{CSSContainerRule/conditions}} attribute. + 1. If the length of |conditions| is 1: + 1. Return the only |conditions| item's {{CSSContainerCondition/name}}. + 1. return "". +
      containerQuery of type CSSOMString
      The containerQuery attribute, - on getting, must return the <> that was specified, - without any logical simplifications, - so that the returned query will evaluate to the same result - as the specified query - in any conformant implementation of this specification - (including implementations that implement future extensions - allowed by the <> extensibility mechanism in this specification). - In other words, - token stream simplifications are allowed - (such as reducing whitespace to a single space - or omitting it in cases where it is known to be optional), - but logical simplifications (such as removal of unneeded parentheses, - or simplification based on evaluating results) are not allowed. + on getting, must return a value as follows: +
      + 1. Let |conditions| be the result of getting the {{CSSContainerRule/conditions}} attribute. + 1. If the length of |conditions| is 1: + 1. Return the only |conditions| item's {{CSSContainerCondition/query}}. + 1. Return "". +
      + +
      conditions of type FrozenArray<CSSContainerCondition?> +
      The conditions attribute, on getting, + must return a value as follows: +
      + 1. Let |result| be an empty [=list=]. + 1. [=list/For each=] <> |condition| specified in the rule: + 1. Let |dict| be a new {{CSSContainerCondition}} with + {{CSSContainerCondition/name}} set to the + serialized <> + of |condition| if specified, or "" otherwise, + and {{CSSContainerCondition/query}} set to the + <> specified in |condition| + without any logical simplifications, + so that the returned query will evaluate to the same result + as the specified query + in any conformant implementation of this specification + (including implementations that implement future extensions + allowed by the <> extensibility mechanism in this specification). + In other words, + token stream simplifications are allowed + (such as reducing whitespace to a single space + or omitting it in cases where it is known to be optional), + but logical simplifications (such as removal of unneeded parentheses, + or simplification based on evaluating results) are not allowed. + 1. [=list/Append=] |dict| to |result|. + 1. Return |result|. +
      Issue(6205): Container Queries should have a matchContainer method. @@ -2045,6 +2136,11 @@ Changes since the #3576) +
    • Clarified that the last @supports-condition in document order wins (#12973)
      • @@ -2081,7 +2177,7 @@ Changes since the #11183) -
    • Renamed overflowing to scrollable +
    • Renamed overflowing to scrollable (#11182)
    • Made <> optional (#9192) diff --git a/css-contain-2/Overview.bs b/css-contain-2/Overview.bs index 0d7ff0280603..bb532e301f94 100644 --- a/css-contain-2/Overview.bs +++ b/css-contain-2/Overview.bs @@ -112,7 +112,7 @@ Strong Containment: the 'contain' property Initial: none Inherited: no Applies to: See below - Computed value: the keyword ''contain/none'' or one or more of ''size'', ''layout'', ''paint'' + Computed value: the keyword ''contain/none'' or one or more of ''size'', ''layout'', ''style'', ''paint'' Animation type: not animatable diff --git a/css-display-3/Overview.bs b/css-display-3/Overview.bs index 86069fae7357..3b914e992017 100644 --- a/css-display-3/Overview.bs +++ b/css-display-3/Overview.bs @@ -9,6 +9,7 @@ Shortname: css-display Group: csswg Level: 3 TR: https://www.w3.org/TR/css-display-3/ +Previous version: https://www.w3.org/TR/2023/CR-css-display-3-20230330/ Previous Version: https://www.w3.org/TR/2021/CRD-css-display-3-20210903/ Previous Version: https://www.w3.org/TR/2020/CRD-css-display-3-20201218/ Previous Version: https://www.w3.org/TR/2020/CR-css-display-3-20200519/ @@ -74,6 +75,7 @@ spec: svg2; .code-and-figure img { background: transparent; } +.order-example a.self-link { display: none; }

      @@ -1374,7 +1376,7 @@ Display Order: the 'order' property

       		<article class="sale-item">
-			<h1>Computer Starter Kit</h1>
+			<h3>Computer Starter Kit</h3>
 			<p>This is the best computer money can buy, if you don’t have much money.
 			<ul>
 				<li>Computer
@@ -1391,7 +1393,7 @@ Display Order: the 'order' property
 		
      
 			
      
 				You get: a white desktop computer with matching keyboard and monitor.
-				
      Computer Starter Kit
      
+				
      Computer Starter Kit
      
 				
      
 					This is the best computer money can buy,
 					if you don't have much money.
@@ -2055,8 +2057,8 @@ Appendix A: Glossary
 				* (very loosely) any block-level box that establishes a new [=formatting context=]
 					(other than an inline formatting context)
 
-		
      out-of-flow
-		
      in-flow
+		
      out-of-flow
+		
      in-flow
 		
      
 			A box is out-of-flow if it is
 			extracted from its expected position and interaction with surrounding content
diff --git a/css-display-4/Overview.bs b/css-display-4/Overview.bs
index f4b3f780698d..22b6f3e30743 100644
--- a/css-display-4/Overview.bs
+++ b/css-display-4/Overview.bs
@@ -2600,8 +2600,8 @@ Appendix A: Glossary
 				* (very loosely) any block-level box that establishes a new [=formatting context=]
 					(other than an inline formatting context)
 
-		
      out-of-flow
-		
      in-flow
+		
      out-of-flow
+		
      in-flow
 		
      
 			A box is out-of-flow if it is
 			extracted from its expected position and interaction with surrounding content
diff --git a/css-easing-2/Overview.bs b/css-easing-2/Overview.bs
index d7a53684de95..6dae1b21adfa 100644
--- a/css-easing-2/Overview.bs
+++ b/css-easing-2/Overview.bs
@@ -9,12 +9,12 @@ Group: csswg
 ED: https://drafts.csswg.org/css-easing/
 TR: https://www.w3.org/TR/css-easing-2/
 Editor: Brian Birtles, Mozilla https://www.mozilla.org/, bbirtles@mozilla.com, w3cid 43194
-Editor: Dean Jackson, Apple Inc https://www.apple.com/, dino@apple.com, w3cid 42080
 Editor: Tab Atkins Jr., Google, http://xanthir.com/contact, w3cid 42199
 Editor: Chris Lilley, W3C, https://svgees.us/, w3cid 1438
 Former Editor: Matt Rakow, Microsoft, w3cid 62267
 Former Editor: Shane Stephens, Google, shans@google.com, w3cid 47691
 Former Editor: Jake Archibald, Google, jakearchibald@google.com, w3cid 76394
+Former Editor: Dean Jackson, Apple Inc https://www.apple.com/, dino@apple.com, w3cid 42080
 Implementation Report: https://wpt.fyi/results/css/css-easing
 Markup Shorthands: markdown yes
 Indent: 2
diff --git a/css-easing-2/images/linear-easing-curve.svg b/css-easing-2/images/linear-easing-curve.svg
index 909eb6720f73..3b05d35594b4 100644
--- a/css-easing-2/images/linear-easing-curve.svg
+++ b/css-easing-2/images/linear-easing-curve.svg
@@ -103,7 +103,7 @@
     
     0
     
-    
+    
     
     
     P1
diff --git a/css-env-1/Overview.bs b/css-env-1/Overview.bs
index 2d63b8b650ee..f5f0429a216e 100644
--- a/css-env-1/Overview.bs
+++ b/css-env-1/Overview.bs
@@ -78,9 +78,13 @@ A CSS environment variable is a name associated with a
 (a sequence of zero more CSS tokens, with almost no restrictions on what tokens can exist),
 similar to a [=custom property=].
 [=Environment variables=] can be defined by the user agent,
-or by the user.
-(In the latter case, the names are <>s,
-and start with `--` per standard for custom identifiers.)
+or by the author.
+
+If author-defined,
+they are a custom environment variable.
+The name of a [=custom environment variable=]
+must conform to the <> grammar.
+This specification does not yet define how authors can define [=custom environment variables=].
 
 Issue: Is the set of UA-defined [=environment variables=] visible to script?
 If so, define an API on {{Document}} to expose them.
@@ -291,6 +295,16 @@ use the ''env()'' function:
 	env() = env( <> <>*, <>? )
      +The ''env()'' function's [=argument grammar=] is: + +
      +	<> = env( <>, <>? )
+
      + +Like ''var()'', a bare comma can be used with nothing following it, +indicating that the second <> was passed, +just as an empty sequence. + The ''env()'' function can be used in place of any part of a value in any property on any element, or any part of a value in any descriptor on any [=at-rule=], and in several other places where CSS values are allowed. diff --git a/css-env-1/explainers/env-preferred-text-scale.md b/css-env-1/explainers/env-preferred-text-scale.md index ec5f03f25515..0cc76176eea7 100644 --- a/css-env-1/explainers/env-preferred-text-scale.md +++ b/css-env-1/explainers/env-preferred-text-scale.md @@ -226,7 +226,7 @@ However, for the _few_ sites where Blink’s text autosizer ([bookmark](#bookmar #### macOS – no effect -Not many native macOS apps seem to scale. +Not many native macOS apps seem to scale. (This Settings dialog is accessed via System Settings > Accessibility > Display > Text size in Sequoia.) ![](images/existing-os-macos.png) diff --git a/css-flexbox-1/Overview.bs b/css-flexbox-1/Overview.bs index 526fb26b9511..610af7882949 100644 --- a/css-flexbox-1/Overview.bs +++ b/css-flexbox-1/Overview.bs @@ -413,6 +413,7 @@ Module interactions flexbox_first-letter.html flexbox_first-line.html + getcomputedstyle/first-line-computed-style.html flexbox-ignores-first-letter.html @@ -763,6 +764,7 @@ Flex Containers: the ''flex'' and ''inline-flex'' 'display' values min-size-auto-overflow-clip.html negative-overflow-002.html negative-overflow-003.html + negative-overflow-004-no-padding.html negative-overflow.html overflow-area-001.html overflow-area-002.html @@ -777,6 +779,8 @@ Flex Containers: the ''flex'' and ''inline-flex'' 'display' values overflow-auto-008.html overflow-top-left.html padding-overflow.html + select-as-flex-item-child-with-overflow.html + select-as-flex-item-with-overflow.html text-overflow-on-flexbox-001.html synthesize-vrl-baseline.html @@ -857,6 +861,8 @@ Flex Items anonymous-flex-item-004.html anonymous-flex-item-005.html anonymous-flex-item-006.html + anonymous-flex-item-document-white-space-crash.html + anonymous-flex-item-restyle.html canvas-dynamic-change-001.html column-flex-child-with-max-width.html flexbox-whitespace-handling-001a.xhtml @@ -1463,6 +1469,7 @@ Grid doesn't have similarly meaningful shrinkability, so it doesn't need to care flex-minimum-width-flex-items-014.html flex-minimum-width-flex-items-015.html flex-minimum-width-flex-items-016.html + checkbox-percentage-width-in-flex.html getcomputedstyle/flexbox_computedstyle_min-auto-size.html getcomputedstyle/flexbox_computedstyle_min-height-auto.html getcomputedstyle/flexbox_computedstyle_min-width-auto.html @@ -2127,6 +2134,7 @@ Flex Lines align-content-005.htm align-content-006.htm align-content-007.htm + flex-wrap-column-grow.html flexbox-lines-must-be-stretched-by-default.html @@ -2264,6 +2272,7 @@ The 'flex' Shorthand parsing/flex-grow-valid.html table-item-flex-percentage-min-width.html table-item-flex-percentage-width.html + flex-rounding.html
      @@ -2650,6 +2659,7 @@ The 'flex-basis' property flex-basis-011.html flex-basis-012.html flex-basis-013.html + flex-basis-content-percentage-height.html flex-basis-intrinsics-001.html flex-basis-item-margins-001.html flexbox-flex-basis-content-001a.html @@ -2758,6 +2768,7 @@ Aligning with auto margins flexbox-margin-auto-horiz-002.xhtml flexbox_margin-auto.html flexbox_margin-auto-overflow.html + main-axis-margin-rounding.html Note: If free space is distributed to auto margins, @@ -2926,6 +2937,7 @@ Axis Alignment: the 'justify-content' property scrollbars-auto.html scrollbars.html scrollbars-no-margin.html + justify-content-rounding.html The 'justify-content' property aligns flex items along the main axis of the current line of the flex container. @@ -3385,6 +3397,7 @@ Packing Flex Lines: the 'align-content' property align-content-horiz-001a.html align-content-horiz-001b.html align-content-horiz-002.html + align-content-stretch-rounding.html align-content_space-around.html align-content_space-between.html align-content_stretch.html @@ -3414,6 +3427,7 @@ Packing Flex Lines: the 'align-content' property getcomputedstyle/flexbox_computedstyle_align-content-flex-start.html getcomputedstyle/flexbox_computedstyle_align-content-space-around.html getcomputedstyle/flexbox_computedstyle_align-content-space-between.html + align-content-rounding.html + +

      +Flex Containers: the ''flex'' and ''inline-flex'' 'display' values

      + +
      + 
      +		Name: display
+		New values: flex | inline-flex
+
      +
      + + + inheritance.html + + +
      +
      flex +
      + This value causes an element to generate a flex container box + that is block-level when placed in flow layout. + + + baseline-synthesis-001.html + baseline-synthesis-002.html + baseline-synthesis-003.html + baseline-synthesis-004.html + baseline-synthesis-vert-lr-line-under.html + display-flex-001.htm + dynamic-change-simplified-layout-002.html + dynamic-change-simplified-layout.html + fixedpos-video-in-abspos-quirk-crash.html + flexbox_flex-0-0-0.html + flexbox_flex-0-0-0-unitless.html + flexbox_flex-0-0-1-unitless-basis.html + flexbox_flex-0-0-auto.html + flexbox_flex-0-0-auto-shrink.html + flexbox_flex-0-0.html + flexbox_flex-0-0-N.html + flexbox_flex-0-0-Npercent.html + flexbox_flex-0-0-Npercent-shrink.html + flexbox_flex-0-0-N-shrink.html + flexbox_flex-0-0-N-unitless-basis.html + flexbox_flex-0-1-0.html + flexbox_flex-0-1-0-unitless.html + flexbox_flex-0-1-1-unitless-basis.html + flexbox_flex-0-1-auto.html + flexbox_flex-0-1-auto-shrink.html + flexbox_flex-0-1.html + flexbox_flex-0-1-N.html + flexbox_flex-0-1-Npercent.html + flexbox_flex-0-1-Npercent-shrink.html + flexbox_flex-0-1-N-shrink.html + flexbox_flex-0-1-N-unitless-basis.html + flexbox_flex-0-auto.html + flexbox_flex-0-N-0.html + flexbox_flex-0-N-0-unitless.html + flexbox_flex-0-N-auto.html + flexbox_flex-0-N-auto-shrink.html + flexbox_flex-0-N.html + flexbox_flex-0-N-N.html + flexbox_flex-0-N-Npercent.html + flexbox_flex-0-N-Npercent-shrink.html + flexbox_flex-0-N-N-shrink.html + flexbox_flex-1-0-0.html + flexbox_flex-1-0-0-unitless.html + flexbox_flex-1-0-auto.html + flexbox_flex-1-0-auto-shrink.html + flexbox_flex-1-0.html + flexbox_flex-1-0-N.html + flexbox_flex-1-0-Npercent.html + flexbox_flex-1-0-Npercent-shrink.html + flexbox_flex-1-0-N-shrink.html + flexbox_flex-1-1-0.html + flexbox_flex-1-1-0-unitless.html + flexbox_flex-1-1-auto.html + flexbox_flex-1-1-auto-shrink.html + flexbox_flex-1-1.html + flexbox_flex-1-1-N.html + flexbox_flex-1-1-Npercent.html + flexbox_flex-1-1-Npercent-shrink.html + flexbox_flex-1-1-N-shrink.html + flexbox_flex-1-N-0.html + flexbox_flex-1-N-0-unitless.html + flexbox_flex-1-N-auto.html + flexbox_flex-1-N-auto-shrink.html + flexbox_flex-1-N.html + flexbox_flex-1-N-N.html + flexbox_flex-1-N-Npercent.html + flexbox_flex-1-N-Npercent-shrink.html + flexbox_flex-1-N-N-shrink.html + flexbox_flex-N-0-0.html + flexbox_flex-N-0-0-unitless.html + flexbox_flex-N-0-auto.html + flexbox_flex-N-0-auto-shrink.html + flexbox_flex-N-0.html + flexbox_flex-N-0-N.html + flexbox_flex-N-0-Npercent.html + flexbox_flex-N-0-Npercent-shrink.html + flexbox_flex-N-0-N-shrink.html + flexbox_flex-N-1-0.html + flexbox_flex-N-1-0-unitless.html + flexbox_flex-N-1-auto.html + flexbox_flex-N-1-auto-shrink.html + flexbox_flex-N-1.html + flexbox_flex-N-1-N.html + flexbox_flex-N-1-Npercent.html + flexbox_flex-N-1-Npercent-shrink.html + flexbox_flex-N-1-N-shrink.html + flexbox_flex-N-N-0.html + flexbox_flex-N-N-0-unitless.html + flexbox_flex-N-N-auto.html + flexbox_flex-N-N-auto-shrink.html + flexbox_flex-N-N.html + flexbox_flex-N-N-N.html + flexbox_flex-N-N-Npercent.html + flexbox_flex-N-N-Npercent-shrink.html + flexbox_flex-N-N-N-shrink.html + flexbox_flex-formatting-interop.html + flexbox_generated-flex.html + flexbox_generated.html + flexbox_generated-nested-flex.html + flexbox-iframe-intrinsic-size-001.html + flexbox_item-bottom-float.html + flexbox_item-clear.html + flexbox_item-float.html + flexbox_item-top-float.html + flexbox_item-vertical-align.html + flexbox_block.html + flexbox_box-clear.html + flexbox_display.html + flexbox_fbfc2.html + flexbox_fbfc.html + flexbox_nested-flex.html + flexbox-root-node-001a.html + flexbox-root-node-001b.html + flexbox_stf-fixpos.html + flexbox_stf-float.html + flexbox_stf-inline-block.html + flexbox_stf-table-caption.html + flexbox_stf-table-cell.html + flexbox_stf-table.html + flexbox_stf-table-row-group.html + flexbox_stf-table-row.html + flexbox_stf-table-singleline-2.html + flexbox_stf-table-singleline.html + flexbox_table-fixed-layout.html + flexbox-with-multi-column-property.html + getcomputedstyle/flexbox_computedstyle_display.html + grid-flex-item-001.html + grid-flex-item-002.html + grid-flex-item-003.html + grid-flex-item-004.html + grid-flex-item-005.html + grid-flex-item-006.html + grid-flex-item-007.html + interactive/flexbox_interactive_flex-transitions.html + interactive/flexbox_interactive_order-transitions-2.html + interactive/flexbox_interactive_order-transitions.html + nested-flex-image-loading-invalidates-intrinsic-sizes.html + percentage-margins-001.html + stretch-after-sibling-size-change.html + stretched-child-in-nested-flexbox-001.html + stretched-child-in-nested-flexbox-002.html + stretched-child-in-nested-flexbox-003.html + stretched-child-shrink-on-relayout.html + stretch-flex-item-checkbox-input.html + stretch-flex-item-radio-input.html + stretching-orthogonal-flows.html + table-with-percent-intrinsic-width.html + + +
      inline-flex +
      + This value causes an element to generate a flex container box + that is inline-level when placed in flow layout. + + + flexbox_inline.html + flex-inline.html + flexbox_inline-float.html + inline-flexbox-absurd-block-size-crash.html + inline-flexbox-wrap-vertically-width-calculation.html + inline-flex-editing-crash.html + inline-flex-editing-with-updating-text-crash.html + inline-flex-frameset-main-axis-crash.html + inline-flex.html + inline-flex-min-content-height.html + getcomputedstyle/flexbox_computedstyle_display-inline.html + intrinsic-width-orthogonal-writing-mode.html + +
      + + A flex container establishes a new flex formatting context for its contents. + This is the same as establishing a block formatting context, + except that flex layout is used instead of block layout. + For example, floats do not intrude into the flex container, + and the flex container's margins do not collapse with the margins of its contents. + Flex containers form a containing block for their contents + exactly like block containers do. [[!CSS2]] + The 'overflow' property applies to flex containers. + + + flexbox-overflow-horiz-001.html + flexbox-overflow-horiz-002.html + flexbox-overflow-horiz-003.html + flexbox-overflow-horiz-004.html + flexbox-overflow-horiz-005.html + flexbox-overflow-padding-001.html + flexbox-overflow-padding-002.html + flexbox-overflow-vert-001.html + flexbox-overflow-vert-002.html + flexbox-overflow-vert-003.html + flexbox-overflow-vert-004.html + flexbox-overflow-vert-005.html + flexbox_rowspan-overflow-automatic.html + flexbox_rowspan-overflow.html + flexbox-safe-overflow-position-001.html + flexbox-safe-overflow-position-002.html + flexbox-safe-overflow-position-003.html + flexbox-safe-overflow-position-004.html + flexbox-safe-overflow-position-005.html + flexbox-safe-overflow-position-006.html + flexbox_width-overflow.html + min-size-auto-overflow-clip.html + negative-overflow-002.html + negative-overflow-003.html + negative-overflow-004-no-padding.html + negative-overflow.html + overflow-area-001.html + overflow-area-002.html + overflow-area-003.html + overflow-auto-001.html + overflow-auto-002.html + overflow-auto-003.html + overflow-auto-004.html + overflow-auto-005.html + overflow-auto-006.html + overflow-auto-007.html + overflow-auto-008.html + overflow-top-left.html + padding-overflow.html + text-overflow-on-flexbox-001.html + synthesize-vrl-baseline.html + + + Flex containers are not block containers, + and so some properties that were designed with the assumption of block layout don't apply in the context of flex layout. + In particular: + + * 'float' and 'clear' do not create floating or clearance of flex item, + 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 + to their ancestors. + + + + + align-content-wrap-004.html + align-items-baseline-column-vert-lr-table-item.html + align-items-baseline-vert-lr-column-horz-table-item.html + align-items-baseline-vert-rl-column-horz-table-item.html + flexbox_box-clear.html + flexbox_first-letter.html + flexbox_first-line.html + flexbox-ignores-first-letter.html + flexbox_item-vertical-align.html + flexbox-with-pseudo-elements-001.html + flexbox-with-pseudo-elements-002.html + flexbox-with-pseudo-elements-003.html + flexible-box-float.html + flex-item-vertical-align.html + flex-vertical-align-effect.html + hittest-before-pseudo.html + + + If an element's specified 'display' is ''inline-flex'', + then its 'display' property computes to ''flex'' + in certain circumstances: + the table in CSS 2.1 Section 9.7 + is amended to contain an additional row, + with ''inline-flex'' in the "Specified Value" column + and ''flex'' in the "Computed Value" column. + + + +

      +Flex Items

      + + Loosely speaking, the flex items of a flex container + are boxes representing its in-flow contents. + + 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. + However, if the entire text sequences contains only + [=document white space characters=] + (i.e. characters that can be affected by the 'white-space' property) + it is instead not rendered (just as if its text nodes were ''display:none''). + + + anonymous-block.html + anonymous-flex-item-001.html + anonymous-flex-item-002.html + anonymous-flex-item-003.html + anonymous-flex-item-004.html + anonymous-flex-item-005.html + anonymous-flex-item-006.html + anonymous-flex-item-document-white-space-crash.html + anonymous-flex-item-restyle.html + canvas-dynamic-change-001.html + column-flex-child-with-max-width.html + flexbox-whitespace-handling-001a.xhtml + flexbox-whitespace-handling-001b.xhtml + flexbox-whitespace-handling-002.xhtml + hittest-anonymous-box.html + percentage-descendant-of-anonymous-flex-item.html + percentage-size-subitems-001.html + whitespace-in-flexitem-001.html + + +
      +

      Examples of flex items: + 

      +		<div style="display:flex">
+
+		    <!-- flex item: block child -->
+		    <div id="item1">block</div>
+
+		    <!-- flex item: floated element; floating is ignored -->
+		    <div id="item2" style="float: left;">float</div>
+
+		    <!-- flex item: anonymous block box around inline content -->
+		    anonymous item 3
+
+		    <!-- flex item: inline child -->
+		    <span>
+		        item 4
+		        <!-- flex items do not split around blocks -->
+		        <q style="display: block" id=not-an-item>item 4</q>
+		        item 4
+		    </span>
+		</div>
+
      + +
      +
      Flex items determined from above code block
      + + +
        +
      1. Flex item containing block. +
      2. Flex item containing float. +
      3. (Anonymous, unstyleable) flex item containing anonymous item 3. +
      4. Flex item containing three blocks in succession: +
          +
        • Anonymous block containing item 4. +
        • <q> element block containing item 4. +
        • Anonymous block containing item 4. +
        +
      +       +       +
      + + Note that the inter-element white space disappears: + it does not become its own flex item, + even though the inter-element text does get wrapped in an anonymous flex item. + + Note also that the anonymous item's box is unstyleable, + since there is no element to assign style rules to. + Its contents will however inherit styles (such as font settings) from the flex container. +
      + + A flex item [=establishes an independent formatting context=] for its contents. + However, flex items themselves are flex-level boxes, not block-level boxes: + they participate in their container's flex formatting context, + not in a block formatting context. + +
      + + Note: Authors reading this spec may want to + skip past the following box-generation and static position details. + + If the [=computed value|computed=] 'display' value of an element's nearest ancestor element + (skipping ''display:contents'' ancestors) + is ''flex'' or ''inline-flex'', + the element's own 'display' value is [=blockified=]. + (See CSS2.1§9.7 [[!CSS2]] + and [[css-display-3#transformations]] + for details on this type of 'display' value conversion.) + + Note: Blockification still occurs even when the ''flex'' or ''inline-flex'' element does not end up generating a [=flex container=] box, + e.g. when it is [=replaced element|replaced=] + or in a ''display: none'' subtree. + + Note: Some values of 'display' normally trigger the creation of anonymous boxes around the original box. + If such a box is a flex item, + it is blockified first, + and so anonymous box creation will not happen. + For example, two contiguous flex items with ''display: table-cell'' + will become two separate ''display: block'' flex items, + instead of being wrapped into a single anonymous table. + + In the case of flex items with ''display: table'', + the table wrapper box becomes the flex item, + so the 'align-self' property applies to it. + The contents of any caption boxes contribute to the calculation of + the table wrapper box's min-content and max-content sizes. + However, like 'width' and 'height', the 'flex' longhands apply to the table box as follows: + the flex item’s final size is calculated + by performing layout as if the distance between + the table wrapper box's edges and the table box's content edges + were all part of the table box's border+padding area, + and the table box were the flex item. + + + flexbox-table-fixup-001.xhtml + table-as-item-large-intrinsic-size.html + table-with-float-paint.html + + + + +

      +Absolutely-Positioned Flex Children

      + + 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=] + of an absolutely-positioned child of a flex container + are the [=content edges=] of the [=flex container=]. + The [=main-axis=] edges of the [=static-position rectangle=] + are where the [=margin edges=] of the child would be positioned + if it were the sole flex item in the flex container, + assuming both the child and the flex container + were fixed-size boxes of their used size. + (For this purpose, + the child's ''margin/auto'' margins are treated as zero.) + + + abspos/abspos-autopos-htb-ltr.html + abspos/abspos-autopos-htb-rtl.html + abspos/abspos-autopos-vlr-ltr.html + abspos/abspos-autopos-vlr-rtl.html + abspos/abspos-autopos-vrl-ltr.html + abspos/abspos-autopos-vrl-rtl.html + abspos/dynamic-align-self-001.html + abspos/flex-abspos-staticpos-align-self-safe-002.html + abspos/flex-abspos-staticpos-align-self-safe-003.html + abspos/abspos-descendent-001.html + abspos/flex-abspos-staticpos-align-content-001.html + abspos/flex-abspos-staticpos-align-self-001.html + abspos/flex-abspos-staticpos-align-self-002.html + abspos/flex-abspos-staticpos-align-self-003.html + abspos/flex-abspos-staticpos-align-self-004.html + abspos/flex-abspos-staticpos-align-self-005.html + abspos/flex-abspos-staticpos-align-self-006.html + abspos/flex-abspos-staticpos-align-self-007.html + abspos/flex-abspos-staticpos-align-self-008.html + abspos/flex-abspos-staticpos-align-self-rtl-001.html + abspos/flex-abspos-staticpos-align-self-rtl-002.html + abspos/flex-abspos-staticpos-align-self-rtl-003.html + abspos/flex-abspos-staticpos-align-self-rtl-004.html + abspos/flex-abspos-staticpos-align-self-safe-001.html + abspos/flex-abspos-staticpos-align-self-vertWM-001.html + abspos/flex-abspos-staticpos-align-self-vertWM-002.html + abspos/flex-abspos-staticpos-align-self-vertWM-003.html + abspos/flex-abspos-staticpos-align-self-vertWM-004.html + abspos/flex-abspos-staticpos-fallback-justify-content-001.html + abspos/flex-abspos-staticpos-justify-content-001.html + abspos/flex-abspos-staticpos-justify-content-002.html + abspos/flex-abspos-staticpos-justify-content-003.html + abspos/flex-abspos-staticpos-justify-content-004.html + abspos/flex-abspos-staticpos-justify-content-005.html + abspos/flex-abspos-staticpos-justify-content-006.html + abspos/flex-abspos-staticpos-justify-content-007.html + abspos/flex-abspos-staticpos-justify-content-008.html + abspos/flex-abspos-staticpos-justify-content-rtl-001.html + abspos/flex-abspos-staticpos-justify-content-rtl-002.html + abspos/flex-abspos-staticpos-justify-content-vertWM-001.html + abspos/flex-abspos-staticpos-justify-content-vertWM-002.html + abspos/flex-abspos-staticpos-justify-self-001.html + abspos/flex-abspos-staticpos-margin-001.html + abspos/flex-abspos-staticpos-margin-002.html + abspos/flex-abspos-staticpos-margin-003.html + abspos/flexbox_absolute-atomic.html + abspos/flexbox-abspos-child-001a.html + abspos/flexbox-abspos-child-001b.html + abspos/flexbox-abspos-child-002.html + abspos/flexbox_inline-abspos.html + abspos/position-absolute-001.html + abspos/position-absolute-002.html + abspos/position-absolute-003.html + abspos/position-absolute-004.html + abspos/position-absolute-005.html + abspos/position-absolute-006.html + abspos/position-absolute-007.html + abspos/position-absolute-008.html + abspos/position-absolute-009.html + abspos/position-absolute-010.html + abspos/position-absolute-011.html + abspos/position-absolute-012.html + abspos/position-absolute-013.html + abspos/position-absolute-014.html + abspos/position-absolute-015.html + abspos/position-absolute-containing-block-001.html + abspos/position-absolute-containing-block-002.html + alignment/flex-content-alignment-with-abspos-001.html + dynamic-grid-flex-abspos.html + flexbox_stf-abspos.html + flex-item-position-relative-001.html + position-relative-percentage-top-004.html + position-relative-stretch-height-001.html + + +
      + The effect of this is that if you set, for example, + ''align-self: center;'' on an absolutely-positioned child of a flex container, + auto offsets on the child will center it in the flex container's cross axis. +
      + +

      +Flex Item Margins and Paddings

      + + The margins of adjacent flex items do not + collapse. + + Percentage margins and paddings on flex items, + like those on block boxes, + are resolved against the inline size of their containing block, + e.g. left/right/top/bottom percentages + all resolve against their containing block’s width + in horizontal writing modes. + + Auto margins expand to absorb extra space in the corresponding dimension. + They can be used for alignment, + or to push adjacent flex items apart. + See Aligning with auto margins. + + + empty-flex-box-and-margin-collapsing.html + flex-container-margin.html + flexitem-no-margin-collapsing.html + flex-margin-no-collapse.html + negative-margins-001.html + + +

      +Flex Item Z-Ordering

      + + Flex items paint exactly the same as inline blocks [[!CSS2]], + except that 'order'-modified document order is used in place of raw document order, + and 'z-index' + values other than ''z-index/auto'' create a stacking context + even if 'position' is ''static'' + (behaving exactly as if 'position' were ''relative''). + + Note: Descendants that are positioned outside a flex item still participate + in any stacking context established by the flex item. + + + flexbox-paint-ordering-001.xhtml + flexbox-paint-ordering-002.xhtml + flexbox-paint-ordering-003.html + flex-item-z-ordering-001.html + flex-item-z-ordering-002.html + flexbox-items-as-stacking-contexts-001.xhtml + flexbox-items-as-stacking-contexts-002.html + flexbox-items-as-stacking-contexts-003.html + hittest-overlapping-margin.html + hittest-overlapping-order.html + hittest-overlapping-relative.html + + + + +

      +Collapsed Items

      + + Specifying ''visibility:collapse'' on a flex item + causes it to become a collapsed flex item, + producing an effect similar to ''visibility:collapse'' on a table-row or table-column: + the [=collapsed flex item=] is removed from rendering entirely, + but leaves behind a "strut" that keeps the flex line's cross-size stable. + Thus, if a flex container has only one flex line, + dynamically collapsing or uncollapsing items + may change the flex container's main size, but + 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. + + Though [=collapsed flex items=] aren't rendered, + they do appear in the formatting structure. + Therefore, unlike on ''display:none'' items [[!CSS2]], + effects that depend on a box appearing in the formatting structure + (like incrementing counters or running animations and transitions) + still operate on collapsed items. + + + flexbox_visibility-collapse.html + flexbox_visibility-collapse-line-wrapping.html + + +
      + In the following example, + a sidebar is sized to fit its content. + ''visibility: collapse'' is used to dynamically hide parts of a navigation sidebar + without affecting its width, even though the widest item (“Architecture”) + is in a collapsed section. + +
      +
      Sample live rendering for example code below
      +
      + + +
      + Hover over the menu to the left: + each section expands to show its sub-items. + In order to keep the sidebar width (and this main area width) stable, + ''visibility: collapse'' is used instead of ''display: none''. + This results in a sidebar that is always wide enough for the word “Architecture”, + even though it is not always visible. +
      +
      +
      + + 
      +			  @media (min-width: 60em) {
+			    /* two column layout only when enough room (relative to default text size) */
+			    div { display: flex; }
+			    #main {
+			      flex: 1;         /* Main takes up all remaining space */
+			      order: 1;        /* Place it after (to the right of) the navigation */
+			      min-width: 12em; /* Optimize main content area sizing */
+			    }
+			  }
+			  /* menu items use flex layout so that visibility:collapse will work */
+			  nav > ul > li {
+			    display: flex;
+			    flex-flow: column;
+			  }
+			  /* dynamically collapse submenus when not targeted */
+			  nav > ul > li:not(:target):not(:hover) > ul {
+			    visibility: collapse;
+			  }
+
      + 
      +			<div>
+			  <article id="main">
+			    Interesting Stuff to Read
+			  </article>
+			  <nav>
+			    <ul>
+			      <li id="nav-about"><a href="#nav-about">About</a>
+			        …
+			      <li id="nav-projects"><a href="#nav-projects">Projects</a>
+			        <ul>
+			          <li><a href="…">Art</a>
+			          <li><a href="…">Architecture</a>
+			          <li><a href="…">Music</a>
+			        </ul>
+			      <li id="nav-interact"><a href="#nav-interact">Interact</a>
+			        …
+			    </ul>
+			  </nav>
+			</div>
+			<footer>
+			…
+
      +
      + + 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. + See the Flex Layout Algorithm + for the normative definition of how ''visibility:collapse'' + interacts with flex layout. + + Note: Using ''visibility:collapse'' on any flex items + will cause the flex layout algorithm to repeat partway through, + re-running the most expensive steps. + It's recommended that authors continue to use ''display:none'' to hide items + if the items will not be dynamically collapsed and uncollapsed, + as that is more efficient for the layout engine. + (Since only part of the steps need to be repeated when 'visibility' is changed, + however, 'visibility: collapse' is still recommended for dynamic cases.) + + + +

      +Automatic Minimum Size of Flex Items

      + + Note: The ''min-width/auto'' keyword, + representing an automatic minimum size, + is the new initial value of the 'min-width' and 'min-height' properties. + The keyword was previously defined in this specification, + but is now defined in the [[!CSS-SIZING-3|CSS Sizing]] module. + + To provide a more reasonable default minimum size for flex items, + the used value of a main axis automatic minimum size + on a flex item whose [=computed value|computed=] 'overflow' value is [=non-scrollable overflow value|non-scrollable=] + is its [=content-based minimum size=]; + for scroll containers the automatic minimum size is zero, as usual. + + The content-based minimum size of a [=flex item=] + differs depending on whether the [=flex item=] is [=replaced element|replaced=] or not: + + : For [=replaced elements=] + :: + Use the smaller of the [=content size suggestion=] + and the [=transferred size suggestion=] + (if one exists), + capped by the [=specified size suggestion=] + (if one exists). + + : For [=non-replaced elements=] + :: + Use the larger of the [=content size suggestion=] + and the [=transferred size suggestion=] + (if one exists), + capped by the [=specified size suggestion=] + (if one exists). + + In either case, + the size is clamped by the [=maximum size|maximum=] [=main size=] + if it's definite. + + + image-items-flake-001.html + + + + + The content size suggestion, specified size suggestion, and transferred size suggestion + used in this calculation account for the relevant min/max/preferred size properties + so that the content-based minimum size does not interfere with any author-provided constraints, + and are defined below: + +
      +
      specified size suggestion +
      + If the item’s [=preferred size|preferred=] [=main size=] is definite and not [=automatic size|automatic=], + then the specified size suggestion is that size. + It is otherwise undefined. + +
      transferred size suggestion +
      + If the item has a [=preferred aspect ratio=] + and its [=preferred size|preferred=] [=cross size=] is definite, + then the transferred size suggestion is that size + (clamped by its [=minimum size|minimum=] and [=maximum size|maximum=] [=cross sizes=] if they are definite), + converted through the aspect ratio. + It is otherwise undefined. + +
      content size suggestion +
      + The content size suggestion is the min-content size in the main axis, + clamped, if it has a [=preferred aspect ratio=], + by any definite [=minimum size|minimum=] and [=maximum size|maximum=] [=cross sizes=] converted through the aspect ratio. +
      + + + content-height-with-scrollbars.html + fieldset-as-item-dynamic.html + fieldset-as-item-overflow.html + flex-aspect-ratio-img-column-001.html + flex-aspect-ratio-img-column-002.html + flex-aspect-ratio-img-column-003.html + flex-aspect-ratio-img-column-004.html + flex-aspect-ratio-img-column-005.html + flex-aspect-ratio-img-column-006.html + flex-aspect-ratio-img-column-007.html + flex-aspect-ratio-img-column-008.html + flex-aspect-ratio-img-column-009.html + flex-aspect-ratio-img-column-010.html + flex-aspect-ratio-img-column-011.html + flex-aspect-ratio-img-column-012.html + flex-aspect-ratio-img-column-013.html + flex-aspect-ratio-img-column-014.html + flex-aspect-ratio-img-column-015.html + flex-aspect-ratio-img-column-016.html + flex-aspect-ratio-img-column-017.html + flex-aspect-ratio-img-column-018.html + flex-aspect-ratio-img-row-001.html + flex-aspect-ratio-img-row-002.html + flex-aspect-ratio-img-row-003.html + flex-aspect-ratio-img-row-004.html + flex-aspect-ratio-img-row-005.html + flex-aspect-ratio-img-row-006.html + flex-aspect-ratio-img-row-007.html + flex-aspect-ratio-img-row-008.html + flex-aspect-ratio-img-row-009.html + flex-aspect-ratio-img-row-010.html + flex-aspect-ratio-img-row-011.html + flex-aspect-ratio-img-row-012.html + flex-aspect-ratio-img-row-013.html + flex-aspect-ratio-img-row-014.html + flex-aspect-ratio-img-row-015.html + flex-aspect-ratio-img-row-016.html + flex-aspect-ratio-img-row-017.html + flex-aspect-ratio-img-vert-lr.html + flexbox-definite-cross-size-constrained-percentage.html + flexbox-min-height-auto-001.html + flexbox-min-height-auto-002a.html + flexbox-min-height-auto-002b.html + flexbox-min-height-auto-002c.html + flexbox-min-height-auto-003.html + flexbox-min-height-auto-004.html + flexbox-min-width-auto-001.html + flexbox-min-width-auto-002a.html + flexbox-min-width-auto-002b.html + flexbox-min-width-auto-002c.html + flexbox-min-width-auto-003.html + flexbox-min-width-auto-004.html + flexbox-min-width-auto-005.html + flexbox-min-width-auto-006.html + flex-item-compressible-001.html + flex-item-compressible-002.html + flexitem-stretch-image.html + flexitem-stretch-range.html + flex-minimum-height-flex-items-001.xht + flex-minimum-height-flex-items-002.xht + flex-minimum-height-flex-items-003.xht + flex-minimum-height-flex-items-004.xht + flex-minimum-height-flex-items-005.xht + flex-minimum-height-flex-items-006.xht + flex-minimum-height-flex-items-007.xht + flex-minimum-height-flex-items-008.xht + flex-minimum-height-flex-items-009.html + flex-minimum-height-flex-items-010.html + flex-minimum-height-flex-items-011.xht + flex-minimum-height-flex-items-012.html + flex-minimum-height-flex-items-013.html + flex-minimum-height-flex-items-014.html + flex-minimum-height-flex-items-015.html + flex-minimum-height-flex-items-016.html + flex-minimum-height-flex-items-017.html + flex-minimum-height-flex-items-018.html + flex-minimum-height-flex-items-019.html + flex-minimum-height-flex-items-020.html + flex-minimum-height-flex-items-021.html + flex-minimum-height-flex-items-022.html + flex-minimum-height-flex-items-023.html + flex-minimum-height-flex-items-024.html + flex-minimum-height-flex-items-025.html + flex-minimum-height-flex-items-026.html + flex-minimum-height-flex-items-027.html + flex-minimum-height-flex-items-028.html + flex-minimum-height-flex-items-029.html + flex-minimum-height-flex-items-030.html + flex-minimum-height-flex-items-031.html + flex-minimum-size-001.html + flex-minimum-size-002.html + flex-minimum-size-003.html + flex-minimum-width-flex-items-001.xht + flex-minimum-width-flex-items-002.xht + flex-minimum-width-flex-items-003.xht + flex-minimum-width-flex-items-004.xht + flex-minimum-width-flex-items-005.xht + flex-minimum-width-flex-items-006.xht + flex-minimum-width-flex-items-007.xht + flex-minimum-width-flex-items-008.xht + flex-minimum-width-flex-items-009.html + flex-minimum-width-flex-items-010.html + flex-minimum-width-flex-items-011.html + flex-minimum-width-flex-items-012.html + flex-minimum-width-flex-items-013.html + flex-minimum-width-flex-items-014.html + flex-minimum-width-flex-items-015.html + flex-minimum-width-flex-items-016.html + scrollbars-auto-min-content-sizing.html + getcomputedstyle/flexbox_computedstyle_min-auto-size.html + getcomputedstyle/flexbox_computedstyle_min-height-auto.html + getcomputedstyle/flexbox_computedstyle_min-width-auto.html + checkbox-percentage-width-in-flex.html + select-as-flex-item-child-with-overflow.html + select-as-flex-item-with-overflow.html + select-element-multiple.html + select-element-zero-height-001.html + select-element-zero-height-002.html + + + Note: The [=content-based minimum size=] is a type of [=intrinsic size contribution=], + and thus the cyclic percentage provisions in [[css-sizing-3#intrinsic-contribution]] apply. + + For the purpose of calculating an intrinsic size of the box + (e.g. the box’s min-content size), + a content-based minimum size causes the box’s size in that axis to become indefinite + (even if e.g. its 'width' property specifies a definite size). + Note this means that percentages calculated against this size + will [=behave as auto=]. + + For any purpose other than calculating intrinsic sizes, + a [=content-based minimum size=] + (unlike an explicit ''min-content''/etc [=minimum size=]) + does not force the box's size to become indefinite. + However, if a percentage resolved against the box's size before this minimum was applied, + it must be re-resolved against the new size after it is applied. + +
      + Note that while a content-based minimum size is often appropriate, + and helps prevent content from overlapping or spilling outside its container, + in some cases it is not: + + In particular, if flex sizing is being used for a major content area of a document, + it is better to set an explicit font-relative minimum width such as ''min-width: 12em''. + A content-based minimum width could result in a large table or large image + stretching the size of the entire content area into an overflow zone, + and thereby making lines of text gratuitously long and hard to read. + + Note also, when content-based sizing is used on an item with large amounts of content, + the layout engine must traverse all of this content before finding its minimum size, + whereas if the author sets an explicit minimum, this is not necessary. + (For items with small amounts of content, however, + this traversal is trivial and therefore not a performance concern.) +
      + + + aspect-ratio-intrinsic-size-001.html + aspect-ratio-intrinsic-size-002.html + aspect-ratio-intrinsic-size-003.html + aspect-ratio-intrinsic-size-004.html + aspect-ratio-intrinsic-size-005.html + aspect-ratio-intrinsic-size-006.html + aspect-ratio-intrinsic-size-007.html + aspect-ratio-intrinsic-size-008.html + aspect-ratio-intrinsic-size-009.html + aspect-ratio-intrinsic-size-010.html + aspect-ratio-transferred-max-size.html + flex-item-content-is-min-width-max-content.html + + + +

      +Ordering and Orientation

      + + The contents of a flex container can be laid out in any direction and in any order. + This allows an author to trivially achieve effects that would previously have required complex or fragile methods, + such as hacks using the 'float' and 'clear' properties. + This functionality is exposed through the 'flex-direction', 'flex-wrap', and 'order' properties. + + Note: The reordering capabilities of flex layout intentionally affect + only the visual rendering, + leaving speech order and navigation based on the source order. + This allows authors to manipulate the visual presentation + while leaving the source order intact for non-CSS UAs and for + linear models such as speech and sequential navigation. + See [[css-display-3#order-accessibility]] + and the Flex Layout Overview for examples + that use this dichotomy to improve accessibility. + + Advisement: + Authors must not use 'order' or the ''*-reverse'' values of 'flex-flow'/'flex-direction' + as a substitute for correct source ordering, + as that can ruin the accessibility of the document. + + + +

      +Flex Flow Direction: the 'flex-direction' property

      + + 
      +	Name: flex-direction
+	Value: row | row-reverse | column | column-reverse
+	Initial: row
+	Applies to: flex containers
+	Inherited: no
+	Computed value: specified keyword
+	Animation type: discrete
+
      + + The 'flex-direction' property specifies how flex items are placed in the flex container, + by setting the direction of the flex container's main axis. + This determines the direction in which flex items are laid out. + +
      +
      row +
      + The flex container's main axis has the same orientation as the + inline axis + of the current writing mode. + The main-start and main-end directions are equivalent to the + inline-start and + inline-end directions, respectively, + of the current writing mode. + + + flex-child-percent-basis-resize-1.html + flexbox-flex-basis-content-001a.html + flexbox-flex-basis-content-001b.html + flexbox-flex-direction-row.htm + flexbox_justifycontent-left-001.html + flexbox-writing-mode-010.html + flexbox-writing-mode-011.html + flexbox-writing-mode-012.html + flexbox-writing-mode-016.html + percentage-size.html + + +
      row-reverse +
      + Same as ''row'', + except the main-start and main-end directions are swapped. + + + flexbox_direction-row-reverse.html + flexbox-mbp-horiz-001-reverse.xhtml + flexbox-mbp-horiz-001-rtl-reverse.xhtml + flex-lines/multi-line-wrap-with-row-reverse.html + flexbox_justifycontent-right-001.html + flexbox_justifycontent-start.html + flexbox_justifycontent-start-rtl.html + + +
      column +
      + The flex container's main axis has the same orientation as the + block axis + of the current writing mode. + The main-start and main-end directions are equivalent to the + block-start and + block-end directions, respectively, + of the current writing mode. + + + columns-height-set-via-top-bottom.html + dynamic-bsize-change.html + flexbox_direction-column.html + flexbox_direction-column-reverse.html + flexbox_rtl-flow.html + flex-column-relayout-assert.html + flex-item-max-height-min-content.html + flex-item-transferred-sizes-padding-border-sizing.html + flex-item-transferred-sizes-padding-content-sizing.html + flex-outer-flexbox-column-recalculate-height-on-resize-001.html + image-nested-within-definite-column-flexbox.html + layout-with-inline-svg-001.html + nested-orthogonal-flexbox-relayout.html + percentage-max-width-cross-axis.html + percentage-size.html + + +
      column-reverse +
      + Same as ''column'', + except the main-start and main-end directions are swapped. + + + column-reverse-gap.html + flexbox_rtl-direction.html + flex-lines/multi-line-wrap-with-column-reverse.html + +
      + + Note: The reverse values do not reverse box ordering: + like 'writing-mode' and 'direction' [[CSS3-WRITING-MODES]], + they only change the direction of flow. + Painting order, speech order, and sequential navigation orders + are not affected. + + Note: Depending on the value of 'justify-content', + the reverse values of 'flex-direction' can alter the initial scroll position + on [=flex containers=] that are also [=scroll containers=]. + See [[css-align-3#overflow-scroll-position]]. + + + animation/discrete-no-interpolation.html + change-column-flex-width.html + column-flex-child-with-max-width.html + column-flex-child-with-overflow-scroll.html + cross-axis-scrollbar.html + dynamic-orthogonal-flex-item.html + flexbox-writing-mode-001.html + flexbox-writing-mode-002.html + flexbox-writing-mode-003.html + flexbox-writing-mode-004.html + flexbox-writing-mode-005.html + flexbox-writing-mode-006.html + flexbox-writing-mode-007.html + flexbox-writing-mode-008.html + flexbox-writing-mode-009.html + flexbox-writing-mode-010.html + flexbox-writing-mode-011.html + flexbox-writing-mode-012.html + flexbox-writing-mode-013.html + flexbox-writing-mode-014.html + flexbox-writing-mode-015.html + flexbox-writing-mode-016.html + flexbox-writing-mode-slr.html + flexbox-writing-mode-slr-row-mix.html + flexbox-writing-mode-slr-rtl.html + flexbox-writing-mode-srl.html + flexbox-writing-mode-srl-row-mix.html + flexbox-writing-mode-srl-rtl.html + flexbox_object.html + flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom.html + getcomputedstyle/flexbox_computedstyle_flex-direction-column.html + getcomputedstyle/flexbox_computedstyle_flex-direction-column-reverse.html + getcomputedstyle/flexbox_computedstyle_flex-direction-invalid.html + getcomputedstyle/flexbox_computedstyle_flex-direction-row.html + getcomputedstyle/flexbox_computedstyle_flex-direction-row-reverse.html + + + + +

      +Flex Line Wrapping: the 'flex-wrap' property

      + + 
      +	Name: flex-wrap
+	Value: nowrap | [ wrap | wrap-reverse ] || balance
+	Initial: nowrap
+	Applies to: flex containers
+	Inherited: no
+	Computed value: specified keyword
+	Animation type: discrete
+
      + + The 'flex-wrap' property controls whether the flex container is single-line or multi-line, + and the direction of the cross-axis, + which determines the direction new lines are stacked in. + +
      +
      nowrap +
      + The flex container is single-line. + +
      wrap +
      + The flex container is multi-line. + +
      wrap-reverse +
      + The flex container is [=multi-line=], + but the lines are stacked "in reverse" (see below). + +
      balance +
      + The flex container is [=multi-line=], + and attempts to [=balance=] the lengths of the [=flex lines=] + to be as similar as possible. + + ''balance'' can be combined with ''wrap'' or ''wrap-reverse'' + to dictate which direction the [=flex lines=] are stacked in. + If neither are specified, + it behaves as if ''wrap'' was specified. +
      + + By default, the [=cross-start=] direction of the [=flex container=] + is either the inline-start or block-start direction + of the [=flex container's=] writing mode + (whichever is in the cross axis) + and the cross-end direction is the opposite direction of cross-start. + If ''wrap-reverse'' is specified, + the cross-start and cross-end directions + are swapped. + + Note: Depending on the value of 'align-content', + the ''wrap-reverse'' value of 'flex-wrap' can alter the initial scroll position + on [=flex containers=] that are also [=scroll containers=]. + See [[css-align-3#overflow-scroll-position]]. + + + animation/discrete-no-interpolation.html + flexbox-flex-wrap-default.htm + flexbox-flex-wrap-flexing-002.html + flexbox-flex-wrap-flexing-003.html + flexbox-flex-wrap-flexing.html + flexbox-flex-wrap-horiz-001.html + flexbox-flex-wrap-horiz-002.html + flexbox-flex-wrap-nowrap.htm + flexbox-flex-wrap-vert-001.html + flexbox-flex-wrap-vert-002.html + flexbox-flex-wrap-wrap.htm + flexbox-flex-wrap-wrap-reverse.htm + flexbox_rowspan.html + flexbox_rtl-flow.html + flexbox_rtl-flow-reverse.html + flexbox_rtl-order.html + flex-box-wrap.html + flexbox_wrap.html + flexbox_wrap-long.html + flexbox_wrap-reverse.html + flex-wrap-column-grow.html + balance/balance-001.html + balance/balance-002.html + balance/balance-003.html + balance/balance-004.html + balance/balance-005.html + balance/balance-available-size-001.html + balance/balance-available-size-002.html + balance/balance-line-break-crash.html + balance/balance-negative-margin.html + balance/balance-percentage-size-001.html + balance/balance-percentage-size-002.html + balance/flex-wrap-computed.html + balance/flex-wrap-invalid.html + balance/flex-wrap-valid.html + remove-wrapped-001.html + remove-wrapped-002.html + flex-lines/multi-line-wrap-reverse-column-reverse.html + flex-lines/multi-line-wrap-reverse-row-reverse.html + getcomputedstyle/flexbox_computedstyle_flex-wrap-invalid.html + getcomputedstyle/flexbox_computedstyle_flex-wrap-nowrap.html + getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap.html + getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap-reverse.html + multiline-min-preferred-width.html + multiline-reverse-wrap-baseline.html + + + + + +

      +Flex Direction and Wrap: the 'flex-flow' shorthand

      + + 
      +	Name: flex-flow
+	Value: <<'flex-direction'>> || <<'flex-wrap'>>
+
      + + + box-sizing-001.html + button-column-wrap-crash.html + column-intrinsic-size-aspect-ratio-crash.html + css-flexbox-row.html + css-flexbox-row-reverse.html + css-flexbox-row-reverse-wrap.html + css-flexbox-row-reverse-wrap-reverse.html + css-flexbox-row-wrap.html + css-flexbox-row-wrap-reverse.html + css-flexbox-test1.html + flexbox-flex-direction-column.htm + flexbox-flex-direction-column-percentage-ignored.html + flexbox-flex-direction-column-reverse.htm + flexbox-flex-direction-default.htm + flexbox-flex-direction-row.htm + flexbox-flex-direction-row-reverse.htm + flex-direction-column-001-visual.html + flex-direction-column.html + flex-direction-column-overlap-001.html + flex-direction-column-reverse-001-visual.html + flex-direction-column-reverse-002-visual.html + flex-direction-column-reverse.html + flex-direction.html + flex-direction-modify.html + flex-direction-row-001-visual.html + flex-direction-row-002-visual.html + flex-direction-row-reverse-001-visual.html + flex-direction-row-reverse-002-visual.html + flex-direction-row-reverse.html + flex-direction-row-vertical.html + flex-direction-with-element-insert.html + flexbox-flex-flow-001.html + flexbox-flex-flow-002.html + flexbox_flow-column-reverse-wrap.html + flexbox_flow-column-reverse-wrap-reverse.html + flexbox_flow-column-wrap.html + flexbox_flow-column-wrap-reverse.html + flexbox_flow-row-wrap.html + flexbox_flow-row-wrap-reverse.html + flex-flow-001.html + flex-flow-002.html + flex-flow-003.html + flex-flow-004.html + flex-flow-005.html + flex-flow-006.html + flex-flow-007.html + flex-flow-008.html + flex-flow-009.html + flex-flow-010.html + flex-flow-011.html + flex-flow-012.html + flex-flow-013.html + flex-wrap-002.html + flex-wrap-003.html + flex-wrap-004.html + flex-wrap-005.html + flex-wrap-006.html + getcomputedstyle/flexbox_computedstyle_flex-flow-column.html + getcomputedstyle/flexbox_computedstyle_flex-flow-column-nowrap.html + getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse.html + getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-nowrap.html + getcomputedstyle/flexbox_computedstyle_flex-flow-column-reverse-wrap.html + getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap.html + getcomputedstyle/flexbox_computedstyle_flex-flow-column-wrap-reverse.html + getcomputedstyle/flexbox_computedstyle_flex-flow-nowrap.html + getcomputedstyle/flexbox_computedstyle_flex-flow-row.html + getcomputedstyle/flexbox_computedstyle_flex-flow-row-nowrap.html + getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse.html + getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-nowrap.html + getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap.html + getcomputedstyle/flexbox_computedstyle_flex-flow-row-reverse-wrap-reverse.html + getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap.html + getcomputedstyle/flexbox_computedstyle_flex-flow-row-wrap-reverse.html + getcomputedstyle/flexbox_computedstyle_flex-flow-wrap.html + multiline-column-max-height.html + parsing/flex-direction-computed.html + parsing/flex-direction-invalid.html + parsing/flex-direction-valid.html + parsing/flex-flow-computed.html + parsing/flex-flow-invalid.html + parsing/flex-flow-shorthand.html + parsing/flex-flow-valid.html + parsing/flex-wrap-computed.html + parsing/flex-wrap-invalid.html + parsing/flex-wrap-valid.html + + + The 'flex-flow' property is a shorthand for setting the 'flex-direction' and 'flex-wrap' properties, + which together define the flex container's main and cross axes. + +
      + Some examples of valid flows in an English (left-to-right, horizontal writing mode) document: + + + + + +
      + 
      +					div { flex-flow: row; }
+					/* Initial value. Main-axis is inline, no wrapping.
+					   (Items will either shrink to fit or overflow.) */
+
      +       		+
      + 
      +					div { flex-flow: column wrap; }
+					/* Main-axis is block-direction (top to bottom)
+					   and lines wrap in the inline direction (rightwards). */
+
      +       		+
      + 
      +					div { flex-flow: row-reverse wrap-reverse; }
+					/* Main-axis is the opposite of inline direction
+					   (right to left). New lines wrap upwards. */
+
      +       		+
      +
      + +
      + Note that the 'flex-flow' directions are writing mode sensitive. + In vertical Japanese, for example, + a ''row'' flex container lays out its contents from top to bottom, + as seen in this example: + + + + + + + +
      English + Japanese + 
      flex-flow: row wrap;
      writing-mode: horizontal-tb;
      + 
      flex-flow: row wrap;
      writing-mode: vertical-rl;
      +
      + +
      +
      + +

      +Reordering and Accessibility: the 'order' property

      + + Flex items are, by default, displayed and laid out + in the same order as they appear in the source document, + which represents their logical ordering. + This same order is used in rendering to non-visual media + (such as speech), + in the default traversal order of sequential navigation modes + (such as cycling through links, + see e.g. tabindex [[HTML]]), + and when content is represented in non-CSS UAs. + + The 'order' property can be used to change flex items’ ordering, + laying them out in [=order-modified document order=] instead, + in order to make their spatial arrangement on the 2D visual canvas + differ from their logical order in linear presentations + such as speech and sequential navigation. + See [[CSS-DISPLAY-3#order-property]]. + [[!CSS-DISPLAY-3]] + + Note: Since visual perception is two-dimensional and non-linear, + the desired box order is not always the same logical order + used by non-visual media and non-CSS UAs. + + Advisement: + Authors must use 'order' only for visual, not logical, reordering of content. + Style sheets that use 'order' to perform logical reordering are non-conforming. + +
      + Many web pages have a similar shape in the markup, + with a header on top, + a footer on bottom, + and then a content area and one or two additional columns in the middle. + Generally, + it's desirable that the content come first in the page's source code, + before the additional columns. + However, this makes many common designs, + such as simply having the additional columns on the left and the content area on the right, + difficult to achieve. + This has been addressed in many ways over the years, + often going by the name "Holy Grail Layout" when there are two additional columns. + 'order' makes this trivial. + For example, take the following sketch of a page's code and desired layout: + +
      +
      + 
      +					<!DOCTYPE html>
+					<header>...</header>
+					<main>
+					   <article>...</article>
+					   <nav>...</nav>
+					   <aside>...</aside>
+					</main>
+					<footer>...</footer>
+
      +
      +
      In this page the header is at the top and the footer at the bottom, but the article is in the center, flanked by the nav on the right and the aside on the left.
      +
      + + This layout can be easily achieved with flex layout: + + 
      +			main { display: flex; }
+			main > article { order: 2; min-width: 12em; flex:1; }
+			main > nav     { order: 1; width: 200px; }
+			main > aside   { order: 3; width: 200px; }
+
      + + As an added bonus, + the columns will all be equal-height by default, + and the main content will be as wide as necessary to fill the screen. + Additionally, + this can then be combined with media queries to switch to an all-vertical layout on narrow screens: + + 
      +			@media all and (max-width: 600px) {
+				/* Too narrow to support three columns */
+				main { flex-flow: column; }
+				main > article, main > nav, main > aside {
+					/* Return them to document order */
+					order: 0; width: auto;
+				}
+			}
+
      + + (Further use of multi-line flex containers to achieve even more intelligent wrapping left as an exercise for the reader.) +
      + + + +

      +Flex Lines

      + + Flex items in a flex container are laid out and aligned + within flex lines, + hypothetical containers used for grouping and alignment by the layout algorithm. + A flex container can be either single-line or multi-line, + depending on the 'flex-wrap' property: + + * A single-line flex container + (i.e. one with ''flex-wrap: nowrap'') + lays out all of its children in a single line, + even if that would cause its contents to overflow. + * A multi-line flex container + (i.e. one with ''flex-wrap: wrap'' or ''flex-wrap: wrap-reverse'') + breaks its flex items across multiple lines, + similar to how text is broken onto a new line when it gets too wide to fit on the existing line. + When additional lines are created, + they are stacked in the flex container along the cross axis + according to the 'flex-wrap' property. + Every line contains at least one flex item, + unless the flex container itself is completely empty. + + Additionally, a [=multi-line=] flexbox can be + a balanced flex container, + meaning it carefully chooses its linebreaks + to make the line lengths as similar as possible. + (Otherwise, it simply fills the first line, then the second, etc.) + +
      + This example shows four buttons that do not fit side-by-side horizontally, + and therefore will wrap into multiple lines. + + 
      +			#flex {
+				display: flex;
+				flex-flow: row wrap;
+				width: 300px;
+			}
+			.item {
+				width: 80px;
+			}
+
      + 
      +			<div id="flex">
+				<div class="item">1</div>
+				<div class="item">2</div>
+				<div class="item">3</div>
+				<div class="item">4</div>
+			</div>
+
      + + Since the container is 300px wide, only three of the items fit onto a single line. + They take up 240px, with 60px left over of remaining space. + Because the 'flex-flow' property specifies a multi-line flex container + (due to the ''wrap'' keyword appearing in its value), + the flex container will create an additional line to contain the last item. + +
      + +
      An example rendering of the multi-line flex container.
      +
      +
      + + Once content is broken into lines, + each line is laid out independently; + flexible lengths and the 'justify-content' and 'align-self' properties only consider the items on a single line at a time. + + In a multi-line flex container (even one with only a single line), + the cross size of each line + is the minimum size necessary to contain the flex items on the line + (after alignment due to 'align-self'), + and the lines are aligned within the flex container with the 'align-content' property. + In a single-line flex container, + the cross size of the line is the cross size of the flex container, + and 'align-content' has no effect. + The main size of a line is always the same as the main size of the flex container's content box. + + + align-content-001.htm + align-content-002.htm + align-content-003.htm + align-content-004.htm + align-content-005.htm + align-content-006.htm + align-content-007.htm + flexbox-lines-must-be-stretched-by-default.html + + +
      + Here's the same example as the previous, + except that the flex items have all been given ''flex: auto''. + The first line has 60px of remaining space, + and all of the items have the same flexibility, + so each of the three items on that line will receive 20px of extra width, + each ending up 100px wide. + The remaining item is on a line of its own + and will stretch to the entire width of the line, i.e. 300px. + +
      + + +
      + A rendering of the same as above, + but with the items all given ''flex: auto''. +
      +
      +
      + +
      + The above examples show three items fitting on a single line, + leaving a single item on the second line. + ''flex-wrap: balance'' will instead put two items on the first line, + then two on the second line: + +
      + + +
      + The previous example's four items, + but now balanced across the two lines + with ''flex-wrap: balance''. +
      +
      + + This can have more dramatic effects when flexing items to fill the line, + as the items are more likely to flex similar amounts, + rather than the final line's items flexing a lot more: + +
      + + +
      + The same example, + but now with ''flex: auto''. +
      +
      +
      + +

      +Minimum Flex Lines: the 'flex-line-count' property

      + + 
      +	Name: flex-line-count
+	Value: <>
+	Initial: 1
+	Applies to: [=multi-line=] [=flex containers=]
+	Inherited: no
+	Computed value: the specified integer, computed
+	Animation type: as integer
+
      + + By default, a ''balance'' flexbox + will create as many lines as a normal [=multi-line=] flexbox, + then rebalance how the flex items are assigned across that many lines. + In some situations, + an author might want to ensure there are always a certain number of lines, + or might be using a flexbox in a way where there is no limit to the line length + (the standard for a ''column'' flexbox, with unlimited available height) + and so the "default" line number calculation is useless. + The 'flex-line-count' property specifies a minimum flex line count + that the [=flex container=] should create + to balance the items across. + + + balance/balance-line-count-intrinsic-001.html + balance/balance-line-count-intrinsic-002.html + balance/balance-line-count-intrinsic-003.html + balance/balance-line-count-intrinsic-004.html + balance/balance-line-count-intrinsic-005.html + balance/balance-line-count-intrinsic-006.html + balance/balance-line-count-intrinsic-007.html + balance/balance-min-line-count-001.html + balance/balance-min-line-count-002.html + balance/balance-min-line-count-003.html + balance/balance-min-line-count-004.html + balance/balance-min-line-count-005.html + balance/flex-line-count-computed.html + balance/flex-line-count-invalid.html + balance/flex-line-count-valid.html + + + The [=minimum flex line count=] is clamped from above + by the number of [=flex items=] in the [=flex container=]; + it will only create as many lines as there are [=flex items=]. + (That is, if you specify ''flex-line-count: 3'' + but only have two [=flex items=], + the [=minimum flex line count=] is 2, instead.) + + Note: There is no maximum flex line count; + the [=flex container=] will always contain enough lines + to hold all of its [=flex items=], + which might be more than what 'flex-line-count' specifies. + + Unused lines (ones with no [=flex items=] assigned to them) + are discarded and do not affect layout. + This only affects non-''balance'' flexboxes. + A ''balance'' flexbox will always assign at least one [=flex item=] to each line, + and if it has less items than 'flex-line-count', + that's handled specially, above. + + In addition to setting a minimum number of lines that are used by ''balance'', + 'flex-line-count' changes the [=available space=] in the [=cross axis=] for [=flex items=]: + subtracting the size of N-1 gaps from the normal [=available space=], + then dividing the leftover by N, + where N is the 'flex-line-count' value. + This uses the actual 'flex-line-count' value, + not the [=minimum flex line count=] + or the actual number of generated lines + (which can be higher or lower than what is specified). + + Note: This [=available space=] adjustment is the only effect 'flex-line-count' has + on non-''balance'' flexboxes. + + Percentages continue to resolve as normal, + unaffected by this [=available space=] adjustment. + (To have a [=flex item=] fill the [=cross-axis=] [=available space=], + use ''width/height: stretch'', + rather than ''width/height: 100%''.) + + If the [=flex container=] is [=single-line=] + (aka, ''flex-wrap: nowrap''), + this property has no effect. + + + +

      +Flexibility

      + + The defining aspect of flex layout is the ability to make the flex items “flex”, + altering their width/height to fill the available space in the main dimension. + This is done with the 'flex' property. + A flex container distributes free space to its items (proportional to their flex grow factor) to fill the container, + or shrinks them (proportional to their flex shrink factor) to prevent overflow. + + A flex item is fully inflexible + if both its 'flex-grow' and 'flex-shrink' values are zero, + and flexible otherwise. + + + flex-factor-less-than-one.html + + +

      +The 'flex' Shorthand

      + + 
      +	Name: flex
+	Value: none | [ <<'flex-grow'>> <<'flex-shrink'>>? || <<'flex-basis'>> ]
+	Initial: 0 1 auto
+	Applies to: flex items
+	Inherited: no
+	Animation type: by computed value type
+
      + + + flexbox-dyn-resize-001.html + flex-item-max-width-min-content.html + flex-item-min-height-min-content.html + flex-item-min-width-min-content.html + flex-shorthand-calc.html + parsing/flex-computed.html + parsing/flex-invalid.html + parsing/flex-shorthand.html + parsing/flex-valid.html + + + The 'flex' property specifies the components of a [=flexible=] size: + the flex factors + (grow and shrink) + and the flex basis. + When a box is a flex item, + 'flex' is consulted instead of the main size property + to determine the main size of the box. + If a box is not a flex item, + 'flex' has no effect. + + Note: The initial values of the 'flex' longhands are equivalent to + flex: 0 1 auto. + This differs from their defaults when omitted in the 'flex' shorthand + (effectively ''1 1 0px'') + so that the 'flex' shorthand can better accommodate + the most common cases. + +
      +
      <<'flex-grow'>> +
      + This <> component sets 'flex-grow' longhand + and specifies the flex grow factor, + which determines how much the flex item will grow + relative to the rest of the flex items in the flex container + when positive free space is distributed. + When omitted, it is set to ''1''. + + + animation/flex-grow-interpolation.html + flex-001.htm + flex-003.htm + flex-grow-001.xht + flex-grow-002.html + flex-grow-003.html + flex-grow-004.html + flex-grow-005.html + flex-grow-006.html + flex-grow-007.html + flex-grow-008.html + flexbox_flex-natural.html + flexbox_flex-natural-mixed-basis-auto.html + flexbox_flex-natural-mixed-basis.html + flexbox_flex-natural-variable-auto-basis.html + flexbox_flex-natural-variable-zero-basis.html + flexbox_flex-none.html + flexbox_flex-none-wrappable-content.html + flex-factor-less-than-one.html + getcomputedstyle/flexbox_computedstyle_flex-shorthand-0-auto.html + getcomputedstyle/flexbox_computedstyle_flex-shorthand-auto.html + getcomputedstyle/flexbox_computedstyle_flex-shorthand.html + getcomputedstyle/flexbox_computedstyle_flex-shorthand-initial.html + getcomputedstyle/flexbox_computedstyle_flex-shorthand-invalid.html + getcomputedstyle/flexbox_computedstyle_flex-shorthand-none.html + getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.html + getcomputedstyle/flexbox_computedstyle_flex-grow-0.html + getcomputedstyle/flexbox_computedstyle_flex-grow-invalid.html + getcomputedstyle/flexbox_computedstyle_flex-grow-number.html + interactive/flexbox_interactive_flex-grow-transitions.html + parsing/flex-grow-computed.html + parsing/flex-grow-invalid.html + parsing/flex-grow-valid.html + table-item-flex-percentage-min-width.html + table-item-flex-percentage-width.html + + +
      + Flex values between 0 and 1 have a somewhat special behavior: + when the sum of the flex values on the line is less than 1, + they will take up less than 100% of the free space. + + An item’s 'flex-grow' value + is effectively a request for some proportion of the free space, + with ''1'' meaning “100% of the free space”; + then if the items on the line are requesting more than 100% in total, + the requests are rebalanced to keep the same ratio but use up exactly 100% of it. + However, if the items request less than the full amount + (such as three items that are each ''flex-grow: .25'') + then they'll each get exactly what they request + (25% of the free space to each, + with the final 25% left unfilled). + See [[#resolve-flexible-lengths]] for the exact details + of how free space is distributed. + + This pattern is required for continuous behavior as 'flex-grow' approaches zero + (which means the item wants none of the free space). + Without this, a ''flex-grow: 1'' item would take all of the free space; + but so would a ''flex-grow: 0.1'' item, + and a ''flex-grow: 0.01'' item, + etc., + until finally the value is small enough to underflow to zero + and the item suddenly takes up none of the free space. + With this behavior, + the item instead gradually takes less of the free space + as 'flex-grow' shrinks below ''1'', + smoothly transitioning to taking none of the free space at zero. + + Unless this “partial fill” behavior is specifically what's desired, + authors should stick to values ≥ 1; + for example, using ''1'' and ''2'' is usually better + than using ''.33'' and ''.67'', + as they're more likely to behave as intended + if items are added, removed, or line-wrapped. +
      + +
      <<'flex-shrink'>> +
      + This <> component sets 'flex-shrink' longhand + and specifies the flex shrink factor, + which determines how much the flex item will shrink + relative to the rest of the flex items in the flex container + when negative free space is distributed. + When omitted, it is set to ''1''. + + + animation/flex-shrink-interpolation.html + flex-002.htm + flex-004.htm + flex-factor-less-than-one.html + flex-shrink-001.html + flex-shrink-002.html + flex-shrink-003.html + flex-shrink-004.html + flex-shrink-005.html + flex-shrink-006.html + flex-shrink-007.html + flex-shrink-008.html + flex-shrink-large-value-crash.html + getcomputedstyle/flexbox_computedstyle_flex-shrink-0.html + getcomputedstyle/flexbox_computedstyle_flex-shrink-invalid.html + getcomputedstyle/flexbox_computedstyle_flex-shrink-number.html + interactive/flexbox_interactive_flex-shrink-transitions.html + interactive/flexbox_interactive_flex-shrink-transitions-invalid.html + parsing/flex-shrink-computed.html + parsing/flex-shrink-invalid.html + parsing/flex-shrink-valid.html + table-item-flex-percentage-min-width.html + table-item-flex-percentage-width.html + + + Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. + This distributes negative space in proportion to how much the item is able to shrink, + so that e.g. a small item won't shrink to zero before a larger item has been noticeably reduced. + + + flex-item-max-width-min-content-002.html + + +
      <<'flex-basis'>> +
      + This component sets the 'flex-basis' longhand, + which specifies the flex basis: + the initial main size of the flex item, + before free space is distributed according to the flex factors. + + + animation/flex-basis-composition.html + animation/flex-basis-content-crash.html + animation/flex-basis-interpolation.html + dynamic-isize-change-001.html + dynamic-isize-change-002.html + dynamic-isize-change-003.html + dynamic-isize-change-004.html + flex-basis-001.html + flex-basis-002.html + flex-basis-003.html + flex-basis-004.html + flex-basis-005.html + flex-basis-006.html + flex-basis-007.html + flex-basis-008.html + flex-basis-009.html + flex-basis-010.html + flex-basis-011.html + flex-basis-012.html + flex-basis-013.html + flex-basis-intrinsics-001.html + flex-basis-item-margins-001.html + flexbox-flex-basis-content-001a.html + flexbox-flex-basis-content-001b.html + flexbox-flex-basis-content-002a.html + flexbox-flex-basis-content-002b.html + flexbox-flex-basis-content-003a.html + flexbox-flex-basis-content-003b.html + flexbox-flex-basis-content-004a.html + flexbox-flex-basis-content-004b.html + flexbox_flex-basis.html + flexbox_flex-basis-shrink.html + flex-one-sets-flex-basis-to-zero-px.html + flex-shorthand-flex-basis-middle.html + getcomputedstyle/flexbox_computedstyle_flex-basis-0.html + getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html + getcomputedstyle/flexbox_computedstyle_flex-basis-auto.html + getcomputedstyle/flexbox_computedstyle_flex-basis-percent.html + interactive/flexbox_interactive_flex-basis-transitions.html + parsing/flex-basis-computed.html + parsing/flex-basis-invalid.html + parsing/flex-basis-valid.html + flex-basis-content-percentage-height.html + table-as-item-percent-width-cell-001.html + + + <<'flex-basis'>> accepts the same values as the 'width' and 'height' properties + (except that ''flex-basis/auto'' is treated differently) + plus the ''content'' keyword: + +
      +
      auto +
      + When specified on a flex item, the ''flex-basis/auto'' keyword + retrieves the value of the main size property as the used 'flex-basis'. + If that value is itself ''auto'', then the used value is ''flex-basis/content''. + +
      content +
      + Indicates an [=automatic size=] + based on the flex item’s content. + (This is typically equivalent to the max-content size, + but with adjustments to handle [=preferred aspect ratios=], + intrinsic sizing constraints, + and orthogonal flows; + see details in [[#layout-algorithm]].) + + Note: This value was not present in the initial release of Flexible Box Layout, + and thus some older implementations will not support it. + The equivalent effect can be achieved by using ''flex/auto'' + together with a main size ('width' or 'height') of ''width/auto''. + +
      <<'width'>> +
      + For all other values, + 'flex-basis' is resolved the same way as for 'width' and 'height'. +
      + + When omitted from the 'flex' shorthand, its specified value is ''0''. + +
      none +
      + The keyword ''flex/none'' expands to ''0 0 auto''. +
      + +
      + +
      + A diagram showing the difference between "absolute" flex + (starting from a basis of zero) + and "relative" flex + (starting from a basis of the item's content size). + The three items have flex factors of ''1'', ''1'', and ''2'', respectively: + notice that the item with a flex factor of ''2'' grows twice as fast as the others. +
      +
      + + A unitless zero that is not already preceded by two flex factors + must be interpreted as a flex factor. + To avoid misinterpretation or invalid declarations, + authors must specify a zero <<'flex-basis'>> component + with a unit or precede it by two flex factors. + +

      +Basic Values of 'flex'

      + + This section is informative. + + The list below summarizes the effects of the four 'flex' values + that represent most commonly-desired effects: + +
      +
      ''flex: initial'' +
      + Equivalent to ''flex: 0 1 auto''. (This is the initial value.) + Sizes the item based on the 'width'/'height' properties. + (If the item's main size property computes to auto, + this will size the flex item based on its contents.) + Makes the flex item inflexible when there is positive free space, + but allows it to shrink to its minimum size when there is insufficient space. + The alignment abilities or auto margins + can be used to align flex items along the main axis. + +
      ''flex: auto'' +
      + Equivalent to ''flex: 1 1 auto''. + Sizes the item based on the 'width'/'height' properties, + but makes them fully flexible, so that they absorb any free space along the main axis. + If all items are either ''flex: auto'', ''flex: initial'', or ''flex: none'', + any positive free space after the items have been sized will be distributed evenly to the items with ''flex: auto''. + +
      ''flex: none'' +
      + Equivalent to ''flex: 0 0 auto''. + This value sizes the item according to the 'width'/'height' properties, + but makes the flex item fully inflexible. + This is similar to ''initial'', + except that flex items are not allowed to shrink, + even in overflow situations. + +
      ''flex: <number [1,∞]>'' +
      + Equivalent to ''flex: <number [1,∞]> 1 0''. + Makes the flex item flexible and sets the flex basis to zero, + resulting in an item that receives the specified proportion of the free space in the flex container. + If all items in the flex container use this pattern, + their sizes will be proportional to the specified flex factor. +
      + + + flexbox_flex-auto.html + flexbox_flex-initial-2.html + flexbox_flex-initial.html + radiobutton-min-size.html + + + By default, flex items won't shrink below their minimum content size + (the length of the longest word or fixed-size element). + To change this, set the 'min-width' or 'min-height' property. + (See [[#min-size-auto]].) + +

      +Components of Flexibility

      + + Individual components of flexibility can be controlled by independent longhand properties. + + Advisement: Authors are encouraged to control flexibility using the 'flex' shorthand + rather than with its longhand properties directly, + as the shorthand correctly resets any unspecified components + to accommodate common uses. + +

      +The 'flex-grow' property

      + + 
      +	Name: flex-grow
+	Value: <>
+	Initial: 0
+	Applies to: flex items
+	Inherited: no
+	Computed value: specified number
+	Animation type: by computed value type
+
      + + + + animation/flex-grow-interpolation.html + flex-001.htm + flex-003.htm + flex-grow-001.xht + flex-grow-002.html + flex-grow-003.html + flex-grow-004.html + flex-grow-005.html + flex-grow-006.html + flex-grow-007.html + flex-grow-008.html + getcomputedstyle/flexbox_computedstyle_flex-grow-0.html + getcomputedstyle/flexbox_computedstyle_flex-grow-invalid.html + getcomputedstyle/flexbox_computedstyle_flex-grow-number.html + interactive/flexbox_interactive_flex-grow-transitions.html + parsing/flex-grow-computed.html + parsing/flex-grow-invalid.html + parsing/flex-grow-valid.html + + + Advisement: Authors are encouraged to control flexibility using the 'flex' shorthand + rather than with 'flex-grow' directly, + as the shorthand correctly resets any unspecified components + to accommodate common uses. + + The 'flex-grow' property sets the flex grow factor + to the provided <>. + Negative values are not allowed. + +

      +The 'flex-shrink' property

      + + 
      +	Name: flex-shrink
+	Value: <>
+	Initial: 1
+	Applies to: flex items
+	Inherited: no
+	Computed value: specified value
+	Animation type: number
+
      + + + animation/flex-shrink-interpolation.html + flex-002.htm + flex-004.htm + flex-shrink-001.html + flex-shrink-002.html + flex-shrink-003.html + flex-shrink-004.html + flex-shrink-005.html + flex-shrink-006.html + flex-shrink-007.html + flex-shrink-008.html + flex-shrink-large-value-crash.html + getcomputedstyle/flexbox_computedstyle_flex-shrink-0.html + getcomputedstyle/flexbox_computedstyle_flex-shrink-invalid.html + getcomputedstyle/flexbox_computedstyle_flex-shrink-number.html + interactive/flexbox_interactive_flex-shrink-transitions.html + interactive/flexbox_interactive_flex-shrink-transitions-invalid.html + parsing/flex-shrink-computed.html + parsing/flex-shrink-invalid.html + parsing/flex-shrink-valid.html + + + Advisement: Authors are encouraged to control flexibility using the 'flex' shorthand + rather than with 'flex-shrink' directly, + as the shorthand correctly resets any unspecified components + to accommodate common uses. + + The 'flex-shrink' property sets the flex shrink factor + to the provided <>. + Negative values are not allowed. + +

      +The 'flex-basis' property

      + + 
      +	Name: flex-basis
+	Value: content | <<'width'>>
+	Initial: auto
+	Applies to: flex items
+	Inherited: no
+	Percentages: relative to the flex container's inner main size
+	Computed value: specified keyword or a computed <> value
+	Animation type: by computed value type
+
      + + + animation/flex-basis-composition.html + animation/flex-basis-content-crash.html + animation/flex-basis-interpolation.html + dynamic-isize-change-001.html + dynamic-isize-change-002.html + dynamic-isize-change-003.html + dynamic-isize-change-004.html + flex-basis-001.html + flex-basis-002.html + flex-basis-003.html + flex-basis-004.html + flex-basis-005.html + flex-basis-006.html + flex-basis-007.html + flex-basis-008.html + flex-basis-009.html + flex-basis-010.html + flex-basis-011.html + flex-basis-012.html + flex-basis-013.html + flex-basis-intrinsics-001.html + flex-basis-item-margins-001.html + flexbox-flex-basis-content-001a.html + flexbox-flex-basis-content-001b.html + flexbox-flex-basis-content-002a.html + flexbox-flex-basis-content-002b.html + flexbox-flex-basis-content-003a.html + flexbox-flex-basis-content-003b.html + flexbox-flex-basis-content-004a.html + flexbox-flex-basis-content-004b.html + flexbox_flex-basis.html + flexbox_flex-basis-shrink.html + flex-one-sets-flex-basis-to-zero-px.html + flex-shorthand-flex-basis-middle.html + getcomputedstyle/flexbox_computedstyle_flex-basis-0.html + getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html + getcomputedstyle/flexbox_computedstyle_flex-basis-auto.html + getcomputedstyle/flexbox_computedstyle_flex-basis-percent.html + interactive/flexbox_interactive_flex-basis-transitions.html + parsing/flex-basis-computed.html + parsing/flex-basis-invalid.html + parsing/flex-basis-valid.html + + + Advisement: Authors are encouraged to control flexibility using the 'flex' shorthand + rather than with 'flex-basis' directly, + as the shorthand correctly resets any unspecified components + to accommodate common uses. + + The 'flex-basis' property sets the flex basis. + It accepts the same values as the 'width' and 'height' property, plus ''content''. + + For all values other than ''flex-basis/auto'' and ''content'' (defined above), + 'flex-basis' is resolved the same way as 'width' in horizontal writing modes [[!CSS2]], + except that if a value would resolve to ''width/auto'' for 'width', + it instead resolves to ''content'' for 'flex-basis'. + For example, percentage values of 'flex-basis' are resolved against + the flex item's containing block (i.e. its flex container); + and if that containing block's size is indefinite, + the used value for 'flex-basis' is ''content''. + As another corollary, + 'flex-basis' determines the size of the content box, + unless otherwise specified + such as by 'box-sizing' [[CSS3UI]]. + +

      +Alignment

      + + After a flex container's contents have finished their flexing + and the dimensions of all flex items are finalized, + they can then be aligned within the flex container. + + The 'margin' properties can be used to align items in a manner similar to, but more powerful than, what margins can do in block layout. + Flex items also respect the alignment properties from CSS Box Alignment, + which allow easy keyword-based alignment of items in both the main axis and cross axis. + These properties make many common types of alignment trivial, + including some things that were very difficult in CSS 2.1, + like horizontal and vertical centering. + + Note: While the alignment properties are defined in CSS Box Alignment [[!CSS-ALIGN-3]], + Flexible Box Layout reproduces the definitions of the relevant ones here + so as to not create a normative dependency that may slow down advancement of the spec. + These properties apply only to flex layout + until CSS Box Alignment Level 3 is finished + and defines their effect for other layout modes. + Additionally, any new values defined in the Box Alignment module + will apply to Flexible Box Layout; + in other words, the Box Alignment module, once completed, + will supersede the definitions here. + + + baseline-outside-flex-item.html + fieldset-baseline-alignment.html + + + + +

      +Aligning with auto margins

      + + This section is non-normative. + The normative definition of how margins affect flex items is in the Flex Layout Algorithm section. + + Auto margins on flex items have an effect very similar to auto margins in block flow: + + * During calculations of flex bases and flexible lengths, auto margins are treated as ''0''. + * Prior to alignment via 'justify-content' and 'align-self', + any positive free space is distributed to auto margins in that dimension. + * Overflowing boxes ignore their auto margins and overflow in the end direction. + + + auto-height-column-with-border-and-padding.html + auto-height-with-flex.html + auto-margins-001.html + auto-margins-002.html + auto-margins-003.html + flexbox-margin-auto-horiz-001.xhtml + flexbox-margin-auto-horiz-002.xhtml + flexbox_margin-auto.html + flexbox_margin-auto-overflow.html + main-axis-margin-rounding.html + + + Note: If free space is distributed to auto margins, + the alignment properties will have no effect in that dimension + because the margins will have stolen all the free space + left over after flexing. + +
      + One use of ''margin/auto'' margins in the main axis is to separate flex items into distinct "groups". + The following example shows how to use this to reproduce a common UI pattern - + a single bar of actions with some aligned on the left and others aligned on the right. + +
      +
      + Sample rendering of the code below. +
      + +
      + + 
      +			nav > ul {
+				display: flex;
+			}
+			nav > ul > #login {
+				margin-left: auto;
+			}
+
      + 
      +			<nav>
+				<ul>
+					<li><a href=/about>About</a>
+					<li><a href=/projects>Projects</a>
+					<li><a href=/interact>Interact</a>
+					<li id="login"><a href=/login>Login</a>
+				</ul>
+			</nav>
+
      +
      + +
      + The figure below illustrates the difference in cross-axis alignment in overflow situations between + using auto margins + and using the alignment properties. + +
      +
      +
      +
      +
      About
      +
      Authoritarianism
      +
      Blog
      +
      +
      +
      +
      +
      About
      +
      Authoritarianism
      +
      Blog
      +
      +
      +
      +
      + The items in the figure on the left are centered with margins, + while those in the figure on the right are centered with 'align-self'. + If this column flex container was placed against the left edge of the page, + the margin behavior would be more desirable, + as the long item would be fully readable. + In other circumstances, + the true centering behavior might be better. +
      +
      +
      + + + +

      +Axis Alignment: the 'justify-content' property

      + + 
      +	Name: justify-content
+	Value: flex-start | flex-end | center | space-between | space-around
+	Initial: flex-start
+	Applies to: flex containers
+	Inherited: no
+	Computed value: specified keyword
+	Animation type: discrete
+
      + + + dynamic-isize-change-001.html + dynamic-isize-change-002.html + dynamic-isize-change-003.html + dynamic-isize-change-004.html + flexbox_justifycontent-center.html + flexbox_justifycontent-center-overflow.html + flexbox_justifycontent-end.html + flexbox_justifycontent-end-rtl.html + flexbox_justifycontent-flex-end.html + flexbox_justifycontent-flex-start.html + flexbox-justify-content-horiz-001a.xhtml + flexbox-justify-content-horiz-001b.xhtml + flexbox-justify-content-horiz-002.xhtml + flexbox-justify-content-horiz-003.xhtml + flexbox-justify-content-horiz-004.xhtml + flexbox-justify-content-horiz-005.xhtml + flexbox-justify-content-horiz-006.xhtml + flexbox_justifycontent-left-001.html + flexbox_justifycontent-left-002.html + flexbox_justifycontent-right-001.html + flexbox_justifycontent-right-002.html + flexbox_justifycontent-rtl-001.html + flexbox_justifycontent-rtl-002.html + flexbox_justifycontent-spacearound.html + flexbox_justifycontent-spacearound-negative.html + flexbox_justifycontent-spacearound-only.html + flexbox_justifycontent-spacebetween.html + flexbox_justifycontent-spacebetween-negative.html + flexbox_justifycontent-spacebetween-only.html + flexbox_justifycontent-start.html + flexbox_justifycontent-start-rtl.html + flexbox_justifycontent-stretch.html + flexbox-justify-content-vert-001a.xhtml + flexbox-justify-content-vert-001b.xhtml + flexbox-justify-content-vert-002.xhtml + flexbox-justify-content-vert-003.xhtml + flexbox-justify-content-vert-004.xhtml + flexbox-justify-content-vert-005.xhtml + flexbox-justify-content-vert-006.xhtml + flexbox-justify-content-wmvert-001.xhtml + flexbox-justify-content-wmvert-002.html + flexbox-justify-content-wmvert-003.html + flexbox_margin.html + flexbox_margin-left-ex.html + getcomputedstyle/flexbox_computedstyle_justify-content-center.html + getcomputedstyle/flexbox_computedstyle_justify-content-flex-end.html + getcomputedstyle/flexbox_computedstyle_justify-content-flex-start.html + getcomputedstyle/flexbox_computedstyle_justify-content-space-around.html + getcomputedstyle/flexbox_computedstyle_justify-content-space-between.html + justify-content-001.htm + justify-content-002.htm + justify-content-003.htm + justify-content-004.htm + justify-content-005.htm + justify-content-006.html + justify-content-007.html + justify-content_center.html + justify-content_flex-end.html + justify-content_flex-start.html + justify-content-sideways-001.html + justify-content_space-around.html + justify-content_space-between-001.html + justify-content_space-between-002.html + scrollbars-auto.html + scrollbars.html + scrollbars-no-margin.html + justify-content-rounding.html + + + The 'justify-content' property aligns flex items along the main axis of the current line of the flex container. + This is done after any flexible lengths and any auto margins have been resolved. + Typically it helps distribute extra free space leftover when either + all the flex items on a line are inflexible, + or are flexible but have reached their maximum size. + It also exerts some control over the alignment of items when they overflow the line. + +
      +
      flex-start +
      + Flex items are packed toward the start of the line. + The main-start margin edge of the first flex item on the line + is placed flush with the main-start edge of the line, + and each subsequent flex item is placed flush with the preceding item. + + + flexbox_justifycontent-start.html + flexbox_justifycontent-start-rtl.html + + +
      flex-end +
      + Flex items are packed toward the end of the line. + The main-end margin edge of the last flex item + is placed flush with the main-end edge of the line, + and each preceding flex item is placed flush with the subsequent item. + + + css-box-justify-content.html + flexbox_justifycontent-end.html + flexbox_justifycontent-end-rtl.html + flexbox_justifycontent-flex-end.html + + +
      center +
      + Flex items are packed toward the center of the line. + The flex items on the line are placed flush with each other + and aligned in the center of the line, + with equal amounts of space between the main-start edge of the line and the first item on the line + and between the main-end edge of the line and the last item on the line. + (If the leftover free-space is negative, + the flex items will overflow equally in both directions.) + + + flexbox_justifycontent-center.html + flexbox_justifycontent-center-overflow.html + + +
      space-between +
      + Flex items are evenly distributed in the line. + If the leftover free-space is negative + or there is only a single flex item on the line, + this value falls back to ''safe flex-start''. + Otherwise, + the main-start margin edge of the first flex item on the line + is placed flush with the main-start edge of the line, + the main-end margin edge of the last flex item on the line + is placed flush with the main-end edge of the line, + and the remaining flex items on the line are distributed + so that the spacing between any two adjacent items is the same. + + + flexbox_justifycontent-spacebetween.html + flexbox_justifycontent-spacebetween-negative.html + flexbox_justifycontent-spacebetween-only.html + + +
      space-around +
      + Flex items are evenly distributed in the line, + with half-size spaces on either end. + If the leftover free-space is negative or + there is only a single flex item on the line, + this value falls back to ''safe center''. + Otherwise, the flex items on the line are distributed + such that the spacing between any two adjacent flex items on the line is the same, + and the spacing between the first/last flex items and the flex container edges + is half the size of the spacing between flex items. + + + flexbox-column-row-gap-001.html + flexbox-column-row-gap-002.html + flexbox-column-row-gap-003.html + flexbox-column-row-gap-004.html + flexbox_columns-flexitems-2.html + flexbox_columns-flexitems.html + flexbox_justifycontent-spacearound.html + flexbox_justifycontent-spacearound-negative.html + flexbox_justifycontent-spacearound-only.html + + +
      + +
      + +

      An illustration of the five 'justify-content' keywords and their effects on a flex container with three colored items. +

      + + + +

      +Cross-axis Alignment: the 'align-items' and 'align-self' properties

      + + 
      +	Name: align-items
+	Value: flex-start | flex-end | center | baseline | stretch
+	Initial: stretch
+	Applies to: flex containers
+	Inherited: no
+	Computed value: specified keyword
+	Animation type: discrete
+
      + + + align-items-007.html + align-items-008.html + align-items-009.html + align-items-baseline-column-horz.html + align-items-baseline-column-vert.html + align-items-baseline-column-vert-lr-flexbox-item.html + align-items-baseline-column-vert-lr-grid-item.html + align-items-baseline-column-vert-lr-items.html + align-items-baseline-column-vert-lr-table-item.html + align-items-baseline-column-vert-rl-flexbox-item.html + align-items-baseline-column-vert-rl-grid-item.html + align-items-baseline-column-vert-rl-items.html + align-items-baseline-column-vert-rl-table-item.html + align-items-baseline-overflow-non-visible.html + align-items-baseline-row-horz.html + align-items-baseline-row-vert.html + align-items-baseline-vert-lr-column-horz-flexbox-item.html + align-items-baseline-vert-lr-column-horz-grid-item.html + align-items-baseline-vert-lr-column-horz-items.html + align-items-baseline-vert-lr-column-horz-table-item.html + align-items-baseline-vert-rl-column-horz-flexbox-item.html + align-items-baseline-vert-rl-column-horz-grid-item.html + align-items-baseline-vert-rl-column-horz-items.html + align-items-baseline-vert-rl-column-horz-table-item.html + alignment/multiline-align-self.html + column-flex-child-with-max-width.html + dynamic-stretch-change.html + flexbox_align-items-baseline.html + flexbox_align-items-center-2.html + flexbox_align-items-center-3.html + flexbox_align-items-center.html + flexbox-align-items-center-nested-001.html + flexbox_align-items-flexend-2.html + flexbox_align-items-flexend.html + flexbox_align-items-flexstart-2.html + flexbox_align-items-flexstart.html + flexbox_align-items-stretch-2.html + flexbox_align-items-stretch-3.html + flexbox_align-items-stretch-4.html + flexbox_align-items-stretch.html + getcomputedstyle/flexbox_computedstyle_align-items-baseline.html + getcomputedstyle/flexbox_computedstyle_align-items-center.html + getcomputedstyle/flexbox_computedstyle_align-items-flex-end.html + getcomputedstyle/flexbox_computedstyle_align-items-flex-start.html + getcomputedstyle/flexbox_computedstyle_align-items-invalid.html + getcomputedstyle/flexbox_computedstyle_align-items-stretch.html + position-relative-percentage-top-001.html + position-relative-percentage-top-002.html + position-relative-percentage-top-003.html + relayout-align-items.html + stretch-input-in-column.html + stretch-requires-computed-auto-size.html + table-as-item-stretch-cross-size-2.html + table-as-item-stretch-cross-size-3.html + table-as-item-stretch-cross-size-4.html + table-as-item-stretch-cross-size-5.html + table-as-item-stretch-cross-size.html + + + 
      +	Name: align-self
+	Value: auto | flex-start | flex-end | center | baseline | stretch
+	Initial: auto
+	Applies to: flex items
+	Inherited: no
+	Computed value: specified keyword
+	Animation type: discrete
+
      + + + align-self-006.html + align-self-010.html + align-self-013.html + align-self-014.html + align-self-015.html + align-self-016.html + flexbox_align-self-auto.html + flexbox-align-self-baseline-compatability.html + flexbox-align-self-baseline-horiz-001a.xhtml + flexbox-align-self-baseline-horiz-001b.xhtml + flexbox-align-self-baseline-horiz-002.xhtml + flexbox-align-self-baseline-horiz-003.xhtml + flexbox-align-self-baseline-horiz-004.xhtml + flexbox-align-self-baseline-horiz-005.xhtml + flexbox-align-self-baseline-horiz-006.xhtml + flexbox-align-self-baseline-horiz-007.xhtml + flexbox-align-self-baseline-horiz-008.xhtml + flexbox_align-self-baseline.html + flexbox_align-self-center.html + flexbox_align-self-flexend.html + flexbox_align-self-flexstart.html + flexbox-align-self-horiz-001-block.xhtml + flexbox-align-self-horiz-001-table.xhtml + flexbox-align-self-horiz-002.xhtml + flexbox-align-self-horiz-003.xhtml + flexbox-align-self-horiz-004.xhtml + flexbox-align-self-horiz-005.xhtml + flexbox_align-self-stretch.html + flexbox-align-self-stretch-vert-001.html + flexbox-align-self-stretch-vert-002.html + flexbox-align-self-vert-001.xhtml + flexbox-align-self-vert-002.xhtml + flexbox-align-self-vert-003.xhtml + flexbox-align-self-vert-004.xhtml + flexbox-align-self-vert-rtl-001.xhtml + flexbox-align-self-vert-rtl-002.xhtml + flexbox-align-self-vert-rtl-003.xhtml + flexbox-align-self-vert-rtl-004.xhtml + flexbox-align-self-vert-rtl-005.xhtml + getcomputedstyle/flexbox_computedstyle_align-self-baseline.html + getcomputedstyle/flexbox_computedstyle_align-self-center.html + getcomputedstyle/flexbox_computedstyle_align-self-flex-end.html + getcomputedstyle/flexbox_computedstyle_align-self-flex-start.html + getcomputedstyle/flexbox_computedstyle_align-self-invalid.html + getcomputedstyle/flexbox_computedstyle_align-self-stretch.html + + + Flex items can be aligned in the cross axis of the current line of the flex container, + similar to 'justify-content' but in the perpendicular direction. + 'align-items' sets the default alignment for all of the flex container's items, + including anonymous flex items. + 'align-self' allows this default alignment to be overridden for individual flex items. + (For anonymous flex items, + 'align-self' always matches the value of 'align-items' on their associated flex container.) + + If either of the flex item's cross-axis margins are auto, + 'align-self' has no effect. + + Values have the following meanings: + +
      +
      auto +
      + Defers cross-axis alignment control + to the value of 'align-items' on the parent box. + (This is the initial value of 'align-self'.) + + + align-self-007.html + align-self-008.html + align-self-009.html + align-self-011.html + align-self-012.html + + +
      flex-start +
      + The cross-start margin edge of the flex item + is placed flush with the cross-start edge of the line. + + + align-items-002.htm + align-items-006.html + align-self-001.html + + +
      flex-end +
      + The cross-end margin edge of the flex item + is placed flush with the cross-end edge of the line. + + + align-items-003.htm + align-self-002.html + + +
      center +
      + The flex item’s margin box is centered in the cross axis within the line. + (If the cross size of the flex line is less than that of the flex item, + it will overflow equally in both directions.) + + + align-items-001.htm + align-self-003.html + + +
      baseline +
      + The flex item participates in baseline alignment: + all participating flex items on the line + are aligned such that their baselines align, + and the item with the largest distance between its baseline and its cross-start margin edge + is placed flush against the cross-start edge of the line. + If the item does not have a baseline in the necessary axis, + then one is synthesized + from the flex item’s border box. + + + align-items-004.htm + align-baseline.html + dynamic-baseline-change.html + dynamic-baseline-change-nested.html + + +
      stretch +
      + If the cross size property of the flex item computes to ''width/auto'', + and neither of the cross-axis margins are ''margin/auto'', + the flex item is stretched. + Its used value is the length necessary to make the cross size of the item's margin box as close to the same size as the line as possible, + while still respecting the constraints imposed by 'min-height'/'min-width'/'max-height'/'max-width'. + + Note: If the flex container's height is constrained + this value may cause the contents of the flex item + to overflow the item. + + The cross-start margin edge of the flex item + is placed flush with the cross-start edge of the line. + + + align-items-005.htm + align-self-004.html + align-self-005.html + css-flexbox-height-animation-stretch.html + +
      + +
      + +

      An illustration of the five 'align-items' keywords and their effects on a flex container with four colored items. +

      + + + +

      +Packing Flex Lines: the 'align-content' property

      + + 
      +	Name: align-content
+	Value: flex-start | flex-end | center | space-between | space-around | stretch
+	Initial: stretch
+	Applies to: multi-line flex containers
+	Inherited: no
+	Computed value: specified keyword
+	Animation type: discrete
+
      + + The 'align-content' property aligns a flex container's lines within the flex container + when there is extra space in the cross-axis, + similar to how 'justify-content' aligns individual items within the main-axis. + Note, this property has no effect on a single-line flex container. + Values have the following meanings: + +
      +
      flex-start +
      + Lines are packed toward the start of the flex container. + The cross-start edge of the first line in the flex container + is placed flush with the cross-start edge of the flex container, + and each subsequent line is placed flush with the preceding line. + +
      flex-end +
      + Lines are packed toward the end of the flex container. + The cross-end edge of the last line + is placed flush with the cross-end edge of the flex container, + and each preceding line is placed flush with the subsequent line. + +
      center +
      + Lines are packed toward the center of the flex container. + The lines in the flex container are placed flush with each other + and aligned in the center of the flex container, + with equal amounts of space + between the cross-start content edge of the flex container + and the first line in the flex container, + and between the cross-end content edge of the flex container + and the last line in the flex container. + (If the leftover free-space is negative, + the lines will overflow equally in both directions.) + +
      space-between +
      + Lines are evenly distributed in the flex container. + If the leftover free-space is negative + or there is only a single flex line in the flex container, + this value falls back to ''safe flex-start''. + Otherwise, + the cross-start edge of the first line in the flex container + is placed flush with the cross-start content edge of the flex container, + the cross-end edge of the last line in the flex container + is placed flush with the cross-end content edge of the flex container, + and the remaining lines in the flex container are distributed + so that the spacing between any two adjacent lines is the same. + +
      space-around +
      + Lines are evenly distributed in the flex container, + with half-size spaces on either end. + If the leftover free-space is negative + this value falls back to ''safe center''. + Otherwise, the lines in the flex container are distributed + such that the spacing between any two adjacent lines is the same, + and the spacing between the first/last lines and the flex container edges + is half the size of the spacing between flex lines. + +
      stretch +
      + Lines stretch to take up the remaining space. + If the leftover free-space is negative, + this value falls back to ''align-content/flex-start''. + Otherwise, + the free-space is split equally between all of the lines, + increasing their cross size. +
      + + Note: Only multi-line flex containers + ever have free space in the cross-axis for lines to be aligned in, + because in a single-line flex container + the sole line automatically stretches to fill the space. + +
      + +

      + An illustration of the 'align-content' keywords and their effects on a multi-line flex container. +

      + + + align-content_center.html + align-content_flex-end.html + align-content_flex-start.html + align-content-horiz-001a.html + align-content-horiz-001b.html + align-content-horiz-002.html + align-content_space-around.html + align-content_space-between.html + align-content_stretch.html + align-content-vert-001a.html + align-content-vert-001b.html + align-content-vert-002.html + align-content-wmvert-001.html + align-content-wrap-001.html + align-content-wrap-002.html + align-content-wrap-003.html + align-content-wrap-004.html + align-content-wrap-005.html + flex-align-content-center.html + flex-align-content-end.html + flex-align-content-space-around.html + flex-align-content-space-between.html + flex-align-content-start.html + flexbox_align-content-center.html + flexbox_align-content-flexend.html + flexbox_align-content-flexstart.html + flexbox_align-content-spacearound.html + flexbox_align-content-spacebetween.html + flexbox_align-content-stretch-2.html + flexbox_align-content-stretch.html + getcomputedstyle/flexbox_computedstyle_align-content-center.html + getcomputedstyle/flexbox_computedstyle_align-content-flex-end.html + getcomputedstyle/flexbox_computedstyle_align-content-flex-start.html + getcomputedstyle/flexbox_computedstyle_align-content-space-around.html + getcomputedstyle/flexbox_computedstyle_align-content-space-between.html + align-content-rounding.html + align-content-stretch-rounding.html + + + + +

      +Flex Container Baselines

      + + In order for a flex container to itself participate in baseline alignment + (e.g. when the flex container is itself a flex item in an outer flex container), + it needs to submit the position of the baselines that will best represent its contents. + To this end, + the baselines of a flex container are determined as follows + (after reordering with 'order', + and taking 'flex-direction' into account): + +
      +
      first/last + main-axis baseline set +
      + When the inline axis of the flex container + matches its main axis, + its baselines are determined as follows: + + 1. If any of the flex items on the flex container's [=startmost=]/[=endmost=] flex line + participate in baseline alignment, + the flex container's first/last main-axis baseline set + is generated from + the shared alignment baseline of those flex items. + + 2. Otherwise, if the flex container has at least one flex item, + the flex container's first/last main-axis baseline set + is generated from + the alignment baseline of the [=startmost=]/[=endmost=] flex item. + (If that item has no alignment baseline + parallel to the flex container's main axis, + then one is first synthesized + from its border edges.) + + 3. Otherwise, the flex container has no first/last main-axis baseline set, + and one is synthesized if needed + according to the rules of its alignment context. + +
      first/last + cross-axis baseline set +
      + When the inline axis of the flex container + matches its cross axis, + its baselines are determined as follows: + + 1. If the flex container has at least one flex item, + the flex container's first/last cross-axis baseline set + is generated from + the alignment baseline of the [=startmost=]/[=endmost=] flex item. + (If that item has no alignment baseline + parallel to the flex container's cross axis, + then one is first synthesized + from its border edges.) + + 2. Otherwise, the flex container has no first/last cross-axis baseline set, + and one is synthesized if needed + according to the rules of its alignment context. + +
      + + When calculating the baseline according to the above rules, + if the box contributing a baseline has an 'overflow' value that allows scrolling, + the box must be treated as being in its initial scroll position + for the purpose of determining its baseline. + + When determining the baseline of a table cell, + a flex container provides a baseline just as a line box or table-row does. [[!CSS2]] + + See [[css-writing-modes-3#intro-baselines]] + and [[css-align-3#baseline-rules]] + for more information on baselines. + + + alignment/flex-align-baseline-001.html + alignment/flex-align-baseline-002.html + alignment/flex-align-baseline-003.html + alignment/flex-align-baseline-004.html + alignment/flex-align-baseline-005.html + alignment/flex-align-baseline-006.html + alignment/flex-align-baseline-007.html + alignment/flex-align-baseline-column-rtl-direction.html + alignment/flex-align-baseline-column-vert-lr-rtl-wrap-reverse.html + alignment/flex-align-baseline-column-vert-rl-rtl-wrap-reverse.html + alignment/flex-align-baseline-fieldset-001.html + alignment/flex-align-baseline-fieldset-002.html + alignment/flex-align-baseline-fieldset-003.html + alignment/flex-align-baseline-flex-001.html + alignment/flex-align-baseline-flex-002.html + alignment/flex-align-baseline-flex-003.html + alignment/flex-align-baseline-flex-004.html + alignment/flex-align-baseline-grid-001.html + alignment/flex-align-baseline-grid-002.html + alignment/flex-align-baseline-grid-003.html + alignment/flex-align-baseline-multicol-001.html + alignment/flex-align-baseline-multicol-002.html + alignment/flex-align-baseline-multicol-003.html + alignment/flex-align-baseline-overflow-001.html + alignment/flex-align-baseline-overflow-002.html + alignment/flex-align-baseline-overflow-003.html + alignment/flex-align-baseline-table-001.html + alignment/flex-align-baseline-table-002.html + alignment/flex-align-baseline-table-003.html + flexbox-baseline-align-self-baseline-horiz-001.html + flexbox-baseline-align-self-baseline-vert-001.html + flexbox-baseline-empty-001a.html + flexbox-baseline-empty-001b.html + flexbox-baseline-multi-item-horiz-001a.html + flexbox-baseline-multi-item-horiz-001b.html + flexbox-baseline-multi-item-vert-001a.html + flexbox-baseline-multi-item-vert-001b.html + flexbox-baseline-multi-line-horiz-001.html + flexbox-baseline-multi-line-horiz-002.html + flexbox-baseline-multi-line-horiz-003.html + flexbox-baseline-multi-line-horiz-004.html + flexbox-baseline-multi-line-vert-001.html + flexbox-baseline-multi-line-vert-002.html + flexbox-baseline-nested-001.html + flexbox-baseline-single-item-001a.html + flexbox-baseline-single-item-001b.html + flex-baseline-overflow-hidden.html + flex-order-last-baseline-multiple.html + flex-order-last-baseline.html + flex-order-wrap-reverse-baseline.html + + + + +

      +Flex Layout Algorithm

      + + This section contains normative algorithms + detailing the exact layout behavior of a flex container and its contents. + The algorithms here are written to optimize readability and theoretical simplicity, + and may not necessarily be the most efficient. + Implementations may use whatever actual algorithms they wish, + but must produce the same results as the algorithms described here. + + Note: This section is mainly intended for implementors. + Authors writing web pages should generally be served well by the individual property descriptions, + and do not need to read this section unless they have a deep-seated urge to understand arcane details of CSS layout. + + The following sections define the algorithm for laying out a flex container and its contents. + + Note: Flex layout works with the flex items in order-modified document order, + not their original document order. + + + flexbox-basic-block-horiz-001v.xhtml + flexbox-basic-block-horiz-001.xhtml + flexbox-basic-block-vert-001v.xhtml + flexbox-basic-block-vert-001.xhtml + flexbox-basic-canvas-horiz-001v.xhtml + flexbox-basic-canvas-horiz-001.xhtml + flexbox-basic-canvas-vert-001v.xhtml + flexbox-basic-canvas-vert-001.xhtml + flexbox-basic-fieldset-horiz-001.xhtml + flexbox-basic-fieldset-vert-001.xhtml + flexbox-basic-iframe-horiz-001.xhtml + flexbox-basic-iframe-vert-001.xhtml + flexbox-basic-img-horiz-001.xhtml + flexbox-basic-img-vert-001.xhtml + flexbox-basic-textarea-horiz-001.xhtml + flexbox-basic-textarea-vert-001.xhtml + flexbox-basic-video-horiz-001.xhtml + flexbox-basic-video-vert-001.xhtml + flexbox-dyn-resize-001.html + flexbox-mbp-horiz-001-rtl.xhtml + flexbox-mbp-horiz-001.xhtml + flexbox-mbp-horiz-002a.xhtml + flexbox-mbp-horiz-002b.xhtml + flexbox-mbp-horiz-002v.xhtml + flexbox-mbp-horiz-003-reverse.xhtml + flexbox-mbp-horiz-003v.xhtml + flexbox-mbp-horiz-003.xhtml + flexbox-mbp-horiz-004.xhtml + flexbox-sizing-horiz-001.xhtml + flexbox-sizing-horiz-002.xhtml + flexbox-sizing-vert-001.xhtml + flexbox-sizing-vert-002.xhtml + percentage-max-height-001.html + percentage-max-height-002.html + percentage-max-height-003.html + percentage-max-height-004.html + percentage-max-height-005.html + percent-height-flex-items-cross-sizes-with-mutations.html + table-as-item-auto-min-width.html + table-as-item-change-cell.html + table-as-item-fixed-min-width-2.html + table-as-item-fixed-min-width-3.html + table-as-item-fixed-min-width.html + table-as-item-narrow-content-2.html + table-as-item-narrow-content.html + table-as-item-specified-height.html + table-as-item-specified-width.html + table-as-item-specified-width-vertical.html + flex-rounding.html + relayout-intrinsic-block-size.html + shrinking-column-flexbox.html + total-min-max-violation-zero.html + + +

      +Initial Setup

      + +
        +
      1. + Generate anonymous flex items + as described in [[#flex-items]]. +
      + +

      +Line Length Determination

      + +
        +
      1. + Determine the available main and cross space for the flex items. + For each dimension, + if that dimension of the flex container’s content box is a definite size, use that; + if that dimension of the flex container is being sized under a min or max-content constraint, + the available space in that dimension is that constraint; + otherwise, subtract the flex container’s margin, border, and padding + from the space available to the flex container in that dimension + and use that value. + This might result in an infinite value. + + + If the [=available space=] in the [=cross axis=] is [=definite=], + then additionally modify it based on 'flex-line-count'. + +
        + + For example, the [=available space=] to a flex item + in a 'float|floated' [=width/auto=]-sized [=flex container=] is: + + * the width of the [=flex container=] containing block + minus the [=flex container's=] margin, border, and padding + in the horizontal dimension + * infinite in the vertical dimension +
        + +
      2. + Determine the flex base size and hypothetical main size of each item: + + + flex-item-percentage-height-img-001.html + image-as-flexitem-size-001.html + image-as-flexitem-size-001v.html + image-as-flexitem-size-002.html + image-as-flexitem-size-002v.html + image-as-flexitem-size-003.html + image-as-flexitem-size-003v.html + image-as-flexitem-size-004.html + image-as-flexitem-size-004v.html + image-as-flexitem-size-005.html + image-as-flexitem-size-005v.html + image-as-flexitem-size-006.html + image-as-flexitem-size-006v.html + image-as-flexitem-size-007.html + image-as-flexitem-size-007v.html + item-with-table-with-infinite-max-intrinsic-width.html + multiline-min-max.html + orthogonal-writing-modes-and-intrinsic-sizing.html + svg-root-as-flex-item-001.html + svg-root-as-flex-item-002.html + svg-root-as-flex-item-003.html + svg-root-as-flex-item-004.html + svg-root-as-flex-item-005.html + svg-root-as-flex-item-006.html + table-as-item-min-height-1.html + table-as-item-wide-content.html + table-with-infinite-max-intrinsic-width.html + + +
          +
        1. + If the item has a definite used flex basis, + that's the flex base size. + +
        2. + If the flex item has ... + + then the flex base size is calculated from + its used cross size + and the flex item’s aspect ratio. + +
        3. + If the used flex basis is ''content'' or depends on its available space, + and the flex container is being sized under a min-content or max-content constraint + (e.g. when performing automatic table layout [[!CSS2]]), + size the item under that constraint. + The flex base size is the item's resulting main size. + +
        4. + Otherwise, + if the used flex basis is ''content'' or depends on its available space, + the available main size is infinite, + and the flex item's inline axis is parallel to the main axis, + lay the item out using + the rules for a box in an orthogonal flow [[!CSS3-WRITING-MODES]]. + The flex base size is the item's max-content main size. + + Note: This case occurs, for example, + in an English document (horizontal writing mode) + containing a column flex container + containing a vertical Japanese (vertical writing mode) flex item. + +
        5. + Otherwise, + size the item into the available space + using its used flex basis in place of its main size, + treating a value of ''content'' as ''width/max-content''. + If a cross size is needed to determine the main size + (e.g. when the flex item’s main size is in its block axis, + or when it has a [=preferred aspect ratio=]) + and the flex item’s cross size is ''auto'' and not definite, + in this calculation use ''width/fit-content'' as the flex item’s cross size. + The flex base size is the item's resulting main size. + + + css-flexbox-img-expand-evenly.html + fit-content-item-001.html + fit-content-item-002.html + fit-content-item-003.html + fit-content-item-004.html + flexbox-vert-lr-with-img.html + flex-container-max-content-001.html + flex-container-min-content-001.html + flex-height-min-content.html + +
        + + When determining the flex base size, + the item’s min and max main sizes are ignored + (no clamping occurs). + Furthermore, the sizing calculations that floor the content box size at zero + when applying 'box-sizing' are also ignored. + (For example, an item with a specified size of zero, + positive padding, and ''box-sizing: border-box'' + will have an outer flex base size of zero-- + and hence a negative inner flex base size.) + + The hypothetical main size is the item's flex base size + clamped according to its used min and max main sizes + (and flooring the content box size at zero). + + + text-as-flexitem-size-001.html + + +
      3. + Determine the main size of the flex container + using the rules of the formatting context in which it participates. + +
        + The [=automatic block size=] of a [=block-level=] [=flex container=] + is its [=max-content size=]. + + The Block Layout spec should define this equivalency, but it doesn't exist yet. +
        +
      + +

      +Main Size Determination

      + +
        +
      1. + Collect flex items into flex lines: + +
        +
        If the flex container is single-line, +
        Collect all the flex items into a single flex line. + +
        If the flex container is [=multi-line=] + but not [=balancing=], +
        Starting from the first uncollected item, + collect consecutive items one by one + until the first time that the next collected item + would not fit into the flex container's [=inner size|inner=] main size + (or until a forced break is encountered, + see [[#pagination]]). + If the very first uncollected item wouldn't fit, + collect just it into the line. + +

        + For this step, + the size of a flex item is its [=outer size|outer=] hypothetical main size. + (Note: This can be negative.) + +

        + Repeat until all flex items have been collected into flex lines. + +

        + Note that the "collect as many" line will collect zero-sized flex items + onto the end of the previous line + even if the last non-zero item exactly "filled up" the line. +

        If the flex container is [=multi-line=] and [=balancing=], +
        + First determine how many [=flex lines=] will be produced + by the non-balancing algorithm, above. + For this purpose, + floor the [=outer size|outer=] [=hypothetical main size=] of each [=flex item=] + at zero. + This can, if the items have large negative margins, + result in a higher line count than a non-balancing flexbox. + Let the |balancing line count| + be the larger of this line count + and the [=minimum flex line count=]. + + Then, + [=balance flex items=] + across |balancing line count| number of lines. +
        + +
      2. + Resolve the flexible lengths of all the flex items + to find their used main size. See [[#resolve-flexible-lengths]]. +
      + + + flexbox_quirks_body.html + ortho-table-item-001.html + percentage-heights-000.html + percentage-heights-001.html + percentage-heights-002.html + percentage-heights-003.html + percentage-heights-004.html + percentage-heights-005.html + percentage-heights-006.html + percentage-heights-007.html + percentage-heights-008.html + percentage-heights-009.html + percentage-heights-010.html + percentage-heights-011.html + percentage-heights-012.html + percentage-heights-013.html + percentage-heights-014.html + percentage-heights-015.html + percentage-heights-016.html + percentage-heights-017.html + percentage-heights-018.html + percentage-heights-019.html + percentage-heights-020.html + percentage-heights-021.html + percentage-heights-022.html + percentage-heights-023.html + + +

      +Cross Size Determination

      + +
        +
      1. + Determine the hypothetical cross size of each item + by performing layout as if it were an [=in-flow=] [=block-level box=] + with the used [=main size=] and the given available space, + treating auto as ''fit-content''. + + + canvas-contain-size.html + inline-flex-column-image-load.html + + +
      2. + Calculate the cross size of each flex line. + +

        + If the flex container is single-line + and has a definite cross size, + the cross size of the flex line + is the flex container's inner cross size. + +

        + Otherwise, + for each flex line: + +

          +
        1. + Collect all the flex items whose inline-axis is parallel to the main-axis, + whose 'align-self' is ''align-self/baseline'', + and whose cross-axis margins are both non-auto. + Find the largest of the distances between each item's baseline and its hypothetical outer cross-start edge, + and the largest of the distances between each item's baseline and its hypothetical outer cross-end edge, + and sum these two values. + +
        2. + Among all the items not collected by the previous step, + find the largest outer hypothetical cross size. + +
        3. + The used cross size of the flex line is the largest of the numbers found in the previous two steps and zero. + + If the flex container is single-line, + then clamp the line's cross-size to be within + the container's computed min and max cross sizes. + Note that if CSS 2.1's definition of min/max-width/height applied more generally, + this behavior would fall out automatically. +
        + + + flexbox-single-line-clamp-1.html + flexbox-single-line-clamp-2.html + flexbox-single-line-clamp-3.html + flex-item-contains-size-layout-001.html + flex-item-contains-strict.html + layout-algorithm_algo-cross-line-001.html + layout-algorithm_algo-cross-line-002.html + + + +
      3. + Handle 'align-content: stretch'. + If the flex container has a definite cross size, + 'align-content' is stretch, + and the sum of the flex lines' cross sizes is less than the flex container's inner cross size, + increase the cross size of each flex line by equal amounts + such that the sum of their cross sizes exactly equals the flex container's inner cross size. + +
      4. + Collapse ''visibility:collapse'' items. + If any flex items have ''visibility: collapse'', + note the cross size of the line they're in as the item's |strut size|, + and restart layout from the beginning. + + In this second layout round, + when collecting items into lines, + treat the collapsed items as having zero main size. + For the rest of the algorithm following that step, + ignore the collapsed items entirely + (as if they were ''display:none'') + except that after calculating the cross size of the lines, + if any line's cross size is less than + the largest strut size + among all the collapsed items in the line, + set its cross size to that strut size. + + Skip this step in the second layout round. + + + flexbox-collapsed-item-baseline-001.html + flexbox-collapsed-item-horiz-001.html + flexbox-collapsed-item-horiz-002.html + flexbox-collapsed-item-horiz-003.html + + +
      5. + Determine the used cross size of each flex item. + If a flex item's [=cross size=] depends on the available space + in the [=cross axis=], + recalculate its cross size using the [=flex line's=] [=cross size=] + (rather than the [=flex container's=]) as the available space. + Otherwise, + the used cross size is the item's hypothetical cross size. + + If the flex item's [=cross size=] changed as a result, + redo layout for its contents, + treating this used size as its definite cross size + so that percentage-sized children can be resolved. + + + table-as-item-cross-size.html + + + Note: This step does not affect the main size of the flex item, + even if it has a [=preferred aspect ratio=]. +
      + + + flex-item-and-percentage-abspos.html + + +

      +Main-Axis Alignment

      + +
        +
      1. + Distribute any remaining free space. + For each flex line: + +
          +
        1. + If the remaining free space is positive + and at least one main-axis margin on this line is auto, + distribute the free space equally among these margins. + Otherwise, set all auto margins to zero. + +
        2. + Align the items along the main-axis per 'justify-content'. +
        +
      + +

      +Cross-Axis Alignment

      + +
        +
      1. + Resolve cross-axis auto margins. + If a flex item has auto cross-axis margins: + +
          +
        • + If its outer cross size + (treating those auto margins as zero) + is less than the cross size of its flex line, + distribute the difference in those sizes equally + to the auto margins. +
        • + Otherwise, + if the block-start or inline-start margin (whichever is in the cross axis) + is auto, set it to zero. + Set the opposite margin so that the outer cross size of the item + equals the cross size of its flex line. +
        + + +
      2. + Align all flex items along the cross-axis per 'align-self', + if neither of the item's cross-axis margins are auto. + +
      3. + Determine the flex container's used cross size + using the rules of the [=formatting context=] in which it participates. + If a content-based [=cross size=] is needed, + use the sum of the [=flex lines=]' [=cross sizes=]. + +
      4. + Align all flex lines per 'align-content'. +
      + +

      +Balancing Flex Items

      + +
      + + To balance flex items + for a [=flex container=] + across a number of [=flex lines=] |line count|, + divide its [=flex items=] + into exactly |line count| numbers of contiguous sequences, + under the following conditions: + + * At least one [=flex item=] is assigned to each sequence. + * The sum of the [=flex item=] sizes + of all the [=flex items=] in the sequence + (the |line size|) + do not exceed the [=inner size|inner=] [=main size=] of the [=flex container=] + (unless it's a single overflowing item). + * If a [=flex item's=] size is zero, + the preceding sequence was not overflowing, + and it could be assigned either to the end of the preceding sequence + or the beginning of the next sequence, + it is assigned to the end of the preceding sequence. + Otherwise, it's assigned to the beginning of the next sequence. + * Calling the difference between the |line size| + and the [=flex container's=] [=inner size|inner=] [=main size=] + a sequence's |error|, + the sum of the squared |error| across all sequences + is minimized. + + For the purpose of this algorithm, + a [=flex item's=] size + is its [=outer size|outer=] [=hypothetical main size=], + floored at 0. + + If multiple possible sequence assignments + have equal minimum |error|, + select the sequence that assigns the most items to the first line; + if multiple sequences tie by that metric, + select the sequence among them that assigns the most items to the second line; + etc. + + Assign each sequence of [=flex items=] + to the corresponding [=flex line=]. +
      + + Note: Because all items have zero or positive size, + and thus adding an item to a line never increases the error, + there are efficient, nearly linear algorithms + to minimize the sum of squared error, + such as SMAWK algorithm. + (A naive minimization algo is O(n^2) in the number of items being balanced, + which is not usable in practice.) + + +

      +Resolving Flexible Lengths

      + +

      + To resolve the flexible lengths of the items within a flex line: + +

        +
      1. + Determine the used flex factor. + Sum the outer hypothetical main sizes of all items on the line. + If the sum is less than the flex container's inner main size, + use the flex grow factor for the rest of this algorithm; + otherwise, use the flex shrink factor. + +
      2. + Each item in the flex line has a target main size, + initially set to its [=flex base size=]. + Each item is initially unfrozen + and may become frozen. + + Note: An item’s [=target main size=] doesn’t change after freezing. + +
      3. + Size inflexible items. + Freeze, + setting its [=target main size=] + to its hypothetical main size… + + +
      4. + Calculate initial free space. + Sum the outer sizes of all items on the line, + and subtract this from the flex container's inner main size. + For frozen items, use their outer target main size; + for other items, use their outer flex base size. + +
      5. + Loop: + +
          +
        1. + Check for flexible items. + If all the flex items on the line are frozen, exit this loop. + +
        2. + Calculate the remaining free space + as for initial free space, above. + If the sum of the unfrozen flex items’ flex factors is less than one, + multiply the initial free space by this sum. + If the magnitude of this value is less than the magnitude of the remaining free space, + use this as the remaining free space. + +
        3. + If the [=remaining free space=] is non-zero, + distribute it proportional to the flex factors: + +
          +
          If using the flex grow factor +
          + For every unfrozen item on the line, + find the ratio of the item's flex grow factor + to the sum of the flex grow factors of all unfrozen items on the line. + Set the item's target main size to its flex base size + plus a fraction of the remaining free space proportional to the ratio. + +
          If using the flex shrink factor +
          + For every unfrozen item on the line, + multiply its flex shrink factor by its inner flex base size, + and note this as its scaled flex shrink factor. + Find the ratio of the item's scaled flex shrink factor + to the sum of the scaled flex shrink factors of all unfrozen items on the line. + Set the item's target main size to its flex base size + minus a fraction of the absolute value of the remaining free space proportional to the ratio. + Note this may result in a negative inner main size; + it will be corrected in the next step. +
          + +
        4. + Fix min/max violations. + Clamp each non-frozen item's target main size by + its used min and max main sizes + and floor its content-box size at zero. + If the item's target main size was made smaller by this, + it's a max violation. + If the item's target main size was made larger by this, + it's a min violation. + +
        5. + Freeze over-flexed items. + The total violation is the sum of the adjustments from the previous step + ∑(clamped size - unclamped size). + If the total violation is: + +
          +
          Zero +
          + Freeze all items. + +
          Positive +
          + Freeze all the items with min violations. + +
          Negative +
          + Freeze all the items with max violations. +
          + + Note: This freezes at least one item, + ensuring that the loop makes progress and eventually terminates. + +
        6. + Return to the start of this loop. +
        + +
      6. + Set each item’s used main size to its target main size. +
      + + + item-with-max-height-and-scrollbar.html + item-with-max-height-and-scrollbar.html + max-width-violation.html + relayout-image-load.html + table-as-item-inflexible-in-column-1.html + table-as-item-inflexible-in-column-2.html + table-as-item-inflexible-in-row-1.html + table-as-item-inflexible-in-row-2.html + + + + +

      +Definite and Indefinite Sizes

      + + Although CSS Sizing [[!CSS-SIZING-3]] defines definite and indefinite lengths, + Flexbox has several additional cases where a length can be considered definite: + + 1. If the [=flex container=] has a [=definite=] [=main size=], + then the post-flexing [=main sizes=] + of its [=flex items=] + are treated as [=definite=]. + + 2. If a [=flex item’s=] [=flex basis=] is [=definite=], + then its post-flexing [=main size=] is also [=definite=]. + + 3. If a single-line flex container has a definite cross size, + the [=automatic size|automatic=] [=preferred size|preferred=] [=outer size|outer=] [=cross size=] + of any stretched flex items + is the flex container's inner cross size + (clamped to the flex item’s min and max cross size) + and is considered definite. + + 4. Once the cross size of a flex line has been determined, + the cross sizes of items in auto-sized flex containers + are also considered definite for the purpose of layout; + see step 11. + + + flexbox-definite-cross-size-constrained-percentage.html + flexbox-definite-sizes-001.html + flexbox-definite-sizes-002.html + flexbox-definite-sizes-003.html + flexbox-definite-sizes-004.html + flexbox-definite-sizes-005.html + flexbox-definite-sizes-006.html + height-percentage-with-dynamic-container-size.html + percentage-widths-001.html + position-fixed-001.html + stretch-obeys-min-max-001.html + stretch-obeys-min-max-002.html + stretch-obeys-min-max-003.html + + + Note: This means that within [=flex layout=], + “definite” sizes can require performing layout. + This was done to allow percentages inside of [=flex items=] + to resolve where authors expected them to resolve. + + + + +

      +Intrinsic Sizes

      + + The intrinsic sizing of a flex container is used + to produce various types of content-based automatic sizing, + such as shrink-to-fit logical widths (which use the ''fit-content'' formula) + and content-based logical heights (which use the max-content size). + For these computations, auto margins on flex items are treated as ''0''. + + See [[!CSS-SIZING-3]] for a definition of the terms in this section. + + + flexbox-gap-position-absolute.html + gap-001-lr.html + gap-001-ltr.html + gap-001-rl.html + gap-001-rtl.html + gap-002-lr.html + gap-002-ltr.html + gap-002-rl.html + gap-002-rtl.html + gap-003-lr.html + gap-003-ltr.html + gap-003-rl.html + gap-003-rtl.html + gap-004-lr.html + gap-004-ltr.html + gap-004-rl.html + gap-004-rtl.html + gap-005-lr.html + gap-005-ltr.html + gap-005-rl.html + gap-005-rtl.html + gap-006-lr.html + gap-006-ltr.html + gap-006-rl.html + gap-006-rtl.html + gap-007-lr.html + gap-007-ltr.html + gap-007-rl.html + gap-007-rtl.html + gap-008-ltr.html + gap-009-ltr.html + gap-010-ltr.html + gap-011.html + gap-012.html + gap-013.html + gap-014.html + gap-015.html + gap-016.html + gap-017.html + gap-018.html + gap-019.html + gap-020.html + gap-021.html + intrinsic-size/auto-min-size-001.html + intrinsic-size/col-wrap-001.html + intrinsic-size/col-wrap-002.html + intrinsic-size/col-wrap-003.html + intrinsic-size/col-wrap-004.html + intrinsic-size/col-wrap-005.html + intrinsic-size/col-wrap-006.html + intrinsic-size/col-wrap-007.html + intrinsic-size/col-wrap-008.html + intrinsic-size/col-wrap-009.html + intrinsic-size/col-wrap-010.html + intrinsic-size/col-wrap-011.html + intrinsic-size/col-wrap-012.html + intrinsic-size/col-wrap-013.html + intrinsic-size/col-wrap-014.html + intrinsic-size/col-wrap-015.html + intrinsic-size/col-wrap-016.html + intrinsic-size/col-wrap-017.html + intrinsic-size/col-wrap-018.html + intrinsic-size/col-wrap-019.html + intrinsic-size/col-wrap-020.html + intrinsic-size/col-wrap-crash.html + intrinsic-size/row-001.html + intrinsic-size/row-002.html + intrinsic-size/row-003.html + intrinsic-size/row-004.html + intrinsic-size/row-005.html + intrinsic-size/row-006.html + intrinsic-size/row-007.html + intrinsic-size/row-008.html + intrinsic-size/row-compat-001.html + intrinsic-size/row-use-cases-001.html + intrinsic-size/row-wrap-001.html + multiline-shrink-to-fit.html + svg-no-natural-size-grandchild.html + + +

      +Flex Container Intrinsic Main Sizes

      + + The max-content main size of a flex container + is, theoretically, the smallest size the flex container can take + such that when flex layout is run with that container size, + each [=flex item=] ends up at least as large as + its [[#intrinsic-item-contributions|max-content contribution]], + to the extent allowed by the items’ flexibility. + + The [=min-content=] [=main size=] of a flex container + is, theoretically, the smallest size the [=flex container=] can take + such that no items overflow it, + and no item's contents overflow the item-- + setting aside the cases in which the boxes layouts are defined to overflow + (for example with negative margins or percentage sizes that add up to more than 100%). + + + flex-container-max-content-001.html + flex-container-min-content-001.html + + + For the min-content size of a multi-line flex container, + see [[#intrinsic-main-sizes-multiline]]. + For max-content sizes and for single-line min-content sizes, + an implementation is conformant to CSS Flexible Box Layout + if it conforms to either the Ideal Algorithm or the Web-compatible Algorithm, + as defined below. + +
      +Ideal Algorithm: Max-content Size and Min-content Single-line Size
      + + Note: The following algorithm calculates the [=flex container=]’s ideal + intrinsic [=main sizes=]. + However, because it was not implemented correctly initially, + and existing content became dependent on the (unfortunately consistent) incorrect implemented behavior, + it is not Web-compatible. + Implementers and the CSS Working Group are investigating to what extent + Web browser implementations can safely approach this behavior, + and further experimentation is welcome. + + Considering only non-[=collapsed=] [=flex items=]; + +
        +
      1. + For each flex item, + subtract its outer flex base size from its [[#intrinsic-item-contributions|max-content contribution]] size. + If that result is positive, + divide it by the item's flex grow factor + if the flex grow factor is ≥ 1, + or multiply it by the flex grow factor + if the flex grow factor is < 1; + if the result is negative, + divide it by the item's scaled flex shrink factor + (if dividing by zero, treat the result as negative infinity). + This is the item's desired flex fraction. + +
      2. + Place all flex items into lines of infinite length. + Within each line, + find the greatest (most positive) + desired flex fraction + among all the flex items. + This is the line’s chosen flex fraction. + +
      3. + If the chosen flex fraction is positive, + and the sum of the line’s flex grow factors + is less than 1, + divide the chosen flex fraction by that sum. + + If the chosen flex fraction is negative, + and the sum of the line’s flex shrink factors + is less than 1, + multiply the chosen flex fraction by that sum. + +
      4. + Add each item’s flex base size + to the product of its flex grow factor + (scaled flex shrink factor, if shrinking) + and the chosen flex fraction, + then clamp that result by the max main size + floored by the min main size. + +
      5. + The flex container’s max-content size is + the largest sum (among all the lines) + of the afore-calculated sizes of all items within a single line. +
      + + The min-content main size of a single-line flex container + is calculated identically to the max-content main size, + except that the flex items’ [[#intrinsic-item-contributions|min-content contributions]] are used + instead of their [[#intrinsic-item-contributions|max-content contributions]]. + +
      + Implications of this algorithm when the sum of flex is less than 1 + + The above algorithm is designed to give the correct behavior for two cases in particular, + and make the flex container’s size continuous as you transition between the two: + + 1. If all items are inflexible, + the flex container is sized to the sum of their flex base size. + (An inflexible flex base size basically substitutes for a 'width'/'height', + which, when specified, is what a max-content contribution is based on in Block Layout.) + + 2. When all items are flexible with flex factors ≥ 1, + the flex container is sized to the sum of the max-content contributions of its items + (or perhaps a slightly larger size, + so that every flex item is at least the size of its max-content contribution, + but also has the correct ratio of its size to the size of the other items, + as determined by its flexibility). + + For example, if a flex container has a single flex item + with ''flex-basis: 100px;'' but a max-content size of ''200px'', + then when the item is ''flex-grow: 0'', the flex container (and flex item) is ''100px'' wide, + but when the item is ''flex-grow: 1'' or higher, the flex container (and flex item) is ''200px'' wide. + + There are several possible ways to make the overall behavior continuous between these two cases, + but all of them have drawbacks. + We chose one we feel has the least bad implications; + unfortunately, it "double-applies" the flexibility in cases with [=flex factors=] that are < 1. + In the above example, if the item has ''flex-grow: .5'', + then the flex container ends up ''150px'' wide, + but the item then sizes normally into that available space, + ending up ''125px'' wide. + +
      + Even more involved notes on the specific behavior chosen + + Principles: + + 1. Don't explode any sizes, whether growing or shrinking, as inputs approach zero. + 2. When flex factors are all >=1, return the minimum size necessary for every item to be >= max-content size. + 3. Items with a zero flex shouldn't affect the sizes at all. + 4. Keep it continuous over variance of flex factors and item sizes. + 5. Keep sizing variance as linear as possible with respect to linear changes to any input variable (size, flex factor). + 6. When the sum of flex factors is >=1, return the minimum size necessary for every item to be >= max-content size. + + To get these all to work together, + we have to apply some correction when either flex factors + or the sum of flex factors on a line + is < 1. + + For shrink our behavior is somewhat easier; + since the explosive case of 0 shrink + results in a negative infinity desired fraction + which we'll never choose (since we always take the largest), + we can just apply the correction at the line level, + giving us double-application only when the sum is < 1. + + For positives it's more complicated. + 0 grow naively explodes into *positive* infinity, + which we'd choose, + so we need to apply the correction at the individual item level. + We do that by multiplying the space by the factor when factor is <1. + Leaving it at that would result in a double-application for items < 1 + but sum >= 1, + but a *triple*-application when the sum is < 1. + To avoid *that* ridiculousness, + we apply a *reverse* correction when the sum is 1, + dividing by the sum instead. + This leaves us with a double correction in all cases for items with factors < 1. + + We can't eliminate the double-applications entirely + without giving up other, more important principles + (in particular, principle 3 -- + try to come up with rules that don't double-apply + when you have two items with ''flex-grow: .5'', + but also don't give a ''flex-grow: 0'' item any power + over a ''flex-grow: 1'' sibling; + you can't, as far as we can tell.) +
      +
      + +
      +Web-compatible Intrinsic Sizing Algorithm: Max-content Size and Min-content Single-line Size
      + + Note: The following algorithm has been demonstrated to be Web-compatible. + It may be altered in the future to bring it closer to the ideal algorithm above, + if possible. + + * For the [=max-content size=] of a [=flex container=], + take the sum of the [[#intrinsic-item-contributions|max-content contributions]] + of all the non-[=collapsed=] flex items in the flex container. + * For the [=min-content size=] of a single-line container, + take the sum of the [[#intrinsic-item-contributions|min-content contributions]] + of all the non-[=collapsed=] flex items in the flex container. + + +
      +Multi-line Min-content Algorithm
      + + For a multi-line container, + the [=min-content=] [=main size=] is simply the largest [[#intrinsic-item-contributions|min-content contribution]] + of all the non-[=collapsed=] flex items in the flex container. + +

      +Flex Container Intrinsic Cross Sizes

      + + The min-content/max-content cross size of a single-line flex container + is the largest min-content contribution/max-content contribution (respectively) + of its flex items. + + For a multi-line flex container, + the behavior depends on whether it's a row or column flexbox: + + : ''flex-direction/row'' [=multi-line=] [=flex container=] [=cross size=] + :: The min-content/max-content cross size + is the sum of the flex line cross sizes + resulting from sizing the flex container + under a cross-axis min-content constraint/max-content constraint (respectively). + + : ''flex-direction/column'' [=multi-line=] [=flex container=] [=cross size=] + :: The [=min-content=] [=cross size=] + is the largest [=min-content contribution=] among all of its [=flex items=]. + + Note: This heuristic effectively assumes a single flex line, + in order to guarantee that the [=min-content size=] + is smaller than the [=max-content size=]. + If the flex container has a height constraint, + this will result in overflow, + but if the [=flex container=] is also a [=scroll container=], + it will at least be large enough to fit + any given column entirely within its [=scrollport=]. + + The [=max-content=] [=cross size=] is the sum of the [=flex line=] cross sizes + resulting from sizing the [=flex container=] + under a cross-axis max-content constraint, + using the largest max-content cross-size contribution among the flex items + as the available space in the cross axis + for each of the flex items during layout. + + Note: This heuristic gives a reasonable approximation + of the size that the flex container should be, + with each [=flex item=] laid out at its [=max-content contribution=] or larger, + and each flex line no larger than its largest flex item. + It's not a perfect fit in some cases, + but doing it completely correct is insanely expensive, + and this works reasonably well. + + + flexbox_width-change-and-relayout-children.html + table-as-flex-item-max-content.html + table-as-item-flex-cross-size.html + + + +

      +Flex Item Intrinsic Size Contributions

      + + The main-size min-content contribution of a flex item + is the larger of its outer min-content size + and outer preferred size + if that is not an [=automatic size=]. + + The main-size max-content contribution of a flex item + is the larger of its outer max-content size + and outer preferred size + if that is not an [=automatic size=]. + + For this purpose, + each contribution + is capped by the item’s [=flex base size=] if the item is not growable, + floored by the item’s [=flex base size=] if the item is not shrinkable, + and then further clamped by the item's min/max main size. + + + +

      +Fragmenting Flex Layout

      + +

      + Flex containers can break across pages + between items, + between lines of items (in multi-line mode), + and inside items. + The break-* properties apply to flex containers as normal for block-level or inline-level boxes. + This section defines how they apply to flex items + and the contents of flex items. + See the CSS Fragmentation Module + for more context [[!CSS3-BREAK]]. + +

      + The following breaking rules refer to the fragmentation container as the “page”. + The same rules apply in any other fragmentation context. + (Substitute “page” with the appropriate fragmentation container type as needed.) + For readability, in this section the terms "row" and "column" refer to the relative orientation + of the flex container with respect to the block flow direction of the fragmentation context, + rather than to that of the flex container itself. + +

      + The exact layout of a fragmented flex container + is not defined in this level of Flexible Box Layout. + However, breaks inside a flex container are subject to the following rules + (interpreted using order-modified document order): + +

        +
      • + In a row flex container, + the 'break-before' and 'break-after' values on flex items + are propagated to the flex line. + The 'break-before' values on the first line + and the 'break-after' values on the last line + are propagated to the flex container. + + Note: Break propagation + (like 'text-decoration' propagation) + does not affect computed values. + +
      • + In a column flex container, + the 'break-before' values on the first item + and the 'break-after' values on the last item + are propagated to the flex container. + Forced breaks on other items are applied to the item itself. + +
      • + A forced break inside a flex item effectively increases the size of its contents; + it does not trigger a forced break inside sibling items. + +
      • + In a row flex container, + Class A break opportunities occur between sibling flex lines, + and Class C break opportunities occur between the first/last flex line and the flex container's content edges. + In a column flex container, + Class A break opportunities occur between sibling flex items, + and Class C break opportunities occur between the first/last flex items on a line and the flex container's content edges. + [[!CSS3-BREAK]] + +
      • + When a flex container is continued after a break, + the space available to its flex items + (in the block flow direction of the fragmentation context) + is reduced by the space consumed by flex container fragments on previous pages. + The space consumed by a flex container fragment is + the size of its content box on that page. + If as a result of this adjustment the available space becomes negative, + it is set to zero. + +
      • + If the first fragment of the flex container is not at the top of the page, + and none of its flex items fit in the remaining space on the page, + the entire fragment is moved to the next page. + +
      • + When breaking a multi-line column flex container, + the UA may organize each fragment into its own “stack” of flex lines-- + just like each fragment of a multi-column container + has its own row of column boxes-- + in order to ensure that content presented on earlier pages + corresponds to content earlier in the box order. + +
      • + Aside from the rearrangement of items imposed by the previous point, + UAs should attempt to minimize distortion of the flex container + with respect to unfragmented flow. +
      + + + interactive/flexbox_interactive_break-after-column-item.html + interactive/flexbox_interactive_break-after-column-lastitem.html + interactive/flexbox_interactive_break-after-container.html + interactive/flexbox_interactive_break-after-item.html + interactive/flexbox_interactive_break-after-line.html + interactive/flexbox_interactive_break-after-line-order.html + interactive/flexbox_interactive_break-after-multiline.html + interactive/flexbox_interactive_break-before-column-firstitem.html + interactive/flexbox_interactive_break-before-column-item.html + interactive/flexbox_interactive_break-before-container.html + interactive/flexbox_interactive_break-before-item.html + interactive/flexbox_interactive_break-before-multiline.html + interactive/flexbox_interactive_break-natural.html + + + +

      +Sample Flex Fragmentation Algorithm

      + +

      + This informative section presents a possible fragmentation algorithm for flex containers. + Implementors are encouraged to improve on this algorithm and provide feedback to the CSS Working Group. + +

      + +

      + This algorithm assumes that pagination always proceeds only in the forward direction; + therefore, in the algorithms below, alignment is mostly ignored prior to pagination. + Advanced layout engines may be able to honor alignment across fragments. + +

      +
      single-line column flex container +
      +
        +
      1. + Run the flex layout algorithm (without regards to pagination) + through Cross Sizing Determination. + +
      2. + Lay out as many consecutive flex items or item fragments as possible + (but at least one or a fragment thereof), + starting from the first, + until there is no more room on the page + or a forced break is encountered. + +
      3. + If the previous step ran out of room + and the free space is positive, + the UA may reduce the distributed free space on this page + (down to, but not past, zero) + in order to make room for the next unbreakable flex item or fragment. + Otherwise, + the item or fragment that does not fit is pushed to the next page. + The UA should pull up if more than 50% of the fragment would have fit in the remaining space + and should push otherwise. + +
      4. + If there are any flex items or fragments not laid out by the previous steps, + rerun the flex layout algorithm + from Line Length Determination + through Cross Sizing Determination + with the next page's size + and all the contents (including those already laid out), + and return to the previous step, + but starting from the first item or fragment not already laid out. + +
      5. + For each fragment of the flex container, + continue the flex layout algorithm + from Main-Axis Alignment + to its finish. +
      + +

      + It is the intent of this algorithm that column-direction single-line flex containers + paginate very similarly to block flow. + As a test of the intent, + a flex container with ''justify-content:start'' + and no flexible items + should paginate identically to + a block with in-flow children with same content, + same used size and same used margins. + +

      multi-line column flex container +
      +
        +
      1. + Run the flex layout algorithm + with regards to pagination + (limiting the flex container's maximum line length to the space left on the page) + through Cross Sizing Determination. + +
      2. + Lay out as many flex lines as possible + (but at least one) + until there is no more room in the flex container + in the cross dimension + or a forced break is encountered: + +
          +
        1. + Lay out as many consecutive flex items as possible + (but at least one), + starting from the first, + until there is no more room on the page + or a forced break is encountered. + Forced breaks within flex items are ignored. + +
        2. + If this is the first flex container fragment, + this line contains only a single flex item + that is larger than the space left on the page, + and the flex container is not at the top of the page already, + move the flex container to the next page + and restart flex container layout entirely. + +
        3. + If there are any flex items not laid out by the first step, + rerun the flex layout algorithm + from Main Sizing Determination + through Cross Sizing Determination + using only the items not laid out on a previous line, + and return to the previous step, + starting from the first item not already laid out. +
        + +
      3. + If there are any flex items not laid out by the previous step, + rerun the flex layout algorithm + from Line Sizing Determination + through Cross Sizing Determination + with the next page's size + and only the items not already laid out, + and return to the previous step, + but starting from the first item not already laid out. + +
      4. + For each fragment of the flex container, + continue the flex layout algorithm + from Main-Axis Alignment + to its finish. +
      + +

      + A shortcoming of this sample algorithm is that + if a flex item does not entirely fit on a single page, + it will not be paginated in multi-line column flex containers. + +

      single-line row flex container +
      +
        +
      1. + Run the entire flex layout algorithm (without regards to pagination), + except treat any 'align-self' other than ''align-self/flex-start'' or ''baseline'' + as ''align-self/flex-start''. + +
      2. + If an unbreakable item doesn't fit within the space left on the page, + and the flex container is not at the top of the page, + move the flex container to the next page + and restart flex container layout entirely. + +
      3. + For each item, + lay out as much of its contents as will fit in the space left on the page, + and fragment the remaining content onto the next page, + rerunning the flex layout algorithm + from Line Length Determination + through Main-Axis Alignment + into the new page size + using all the contents (including items completed on previous pages). + +

        + Any flex items that fit entirely into previous fragments + still take up space in the main axis in later fragments. + +

      4. + For each fragment of the flex container, + rerun the flex layout algorithm + from Cross-Axis Alignment + to its finish. + For all fragments besides the first, + treat 'align-self' and 'align-content' as being ''align-self/flex-start'' for all item fragments and lines. + +
      5. + If any item, + when aligned according to its original 'align-self' value + into the combined cross size of all the flex container fragments, + would fit entirely within a single flex container fragment, + it may be shifted into that fragment + and aligned appropriately. +
      + +
      multi-line row flex container +
      +
        +
      1. + Run the flex layout algorithm (without regards to pagination), + through Cross Sizing Determination. + +
      2. + Lay out as many flex lines as possible + (but at least one), + starting from the first, + until there is no more room on the page + or a forced break is encountered. + +

        + If a line doesn't fit on the page, + and the line is not at the top of the page, + move the line to the next page + and restart the flex layout algorithm entirely, + using only the items in and following this line. + +

        + If a flex item itself causes a forced break, + rerun the flex layout algorithm + from Main Sizing Determination + through Main-Axis Alignment, + using only the items on this and following lines, + but with the item causing the break automatically starting a new line + in the line breaking step, + then continue with this step. + Forced breaks within flex items are ignored. + +

      3. + If there are any flex items not laid out by the previous step, + rerun the flex layout algorithm + from Line Length Determination + through Main-Axis Alignment + with the next page's size + and only the items not already laid out. + Return to the previous step, + but starting from the first line not already laid out. + +
      4. + For each fragment of the flex container, + continue the flex layout algorithm + from Cross Axis Alignment + to its finish. +
      +
      +
      + +

      +Appendix A: Axis Mappings

      + + This appendix is non-normative. + + + + + + + + + + + + + + + + + +
      Axis Mappings for ''ltr'' + ''horizontal-tb'' Writing Mode (e.g. English)
      'flex-flow' + main axis + start + end + cross axis + start + end +
      ''row'' + ''nowrap''/''wrap'' + horizontal + left + right + vertical + top + bottom +
      ''row-reverse'' + ''nowrap''/''wrap'' + right + left +
      ''row'' + ''wrap-reverse'' + left + right + bottom + top +
      ''row-reverse'' + ''wrap-reverse'' + right + left +
      ''column'' + ''nowrap''/''wrap'' + vertical + top + bottom + horizontal + left + right +
      ''column-reverse'' + ''nowrap''/''wrap'' + bottom + top +
      ''column'' + ''wrap-reverse'' + top + bottom + right + left +
      ''column-reverse'' + ''wrap-reverse'' + bottom + top +
      + + + + + + + + + + + + + + + + + +
      Axis Mappings for ''rtl'' + ''horizontal-tb'' Writing Mode (e.g. Farsi)
      'flex-flow' + main axis + main-start + main-end + cross axis + cross-start + cross-end +
      ''row'' + ''nowrap''/''wrap'' + horizontal + right + left + vertical + top + bottom +
      ''row-reverse'' + ''nowrap''/''wrap'' + left + right +
      ''row'' + ''wrap-reverse'' + right + left + bottom + top +
      ''row-reverse'' + ''wrap-reverse'' + left + right +
      ''column'' + ''nowrap''/''wrap'' + vertical + top + bottom + horizontal + right + left +
      ''column-reverse'' + ''nowrap''/''wrap'' + bottom + top +
      ''column'' + ''wrap-reverse'' + top + bottom + left + right +
      ''column-reverse'' + ''wrap-reverse'' + bottom + top +
      + + + + + + + + + + + + + + + + + +
      Axis Mappings for ''ltr'' + ''vertical-rl'' Writing Mode (e.g. Japanese)
      'flex-flow' + main axis + start + end + cross axis + start + end +
      ''row'' + ''nowrap''/''wrap'' + vertical + top + bottom + horizontal + right + left +
      ''row-reverse'' + ''nowrap''/''wrap'' + bottom + top +
      ''row'' + ''wrap-reverse'' + top + bottom + left + right +
      ''row-reverse'' + ''wrap-reverse'' + bottom + top +
      ''column'' + ''nowrap''/''wrap'' + vertical + right + left + horizontal + top + bottom +
      ''column-reverse'' + ''nowrap''/''wrap'' + left + right +
      ''column'' + ''wrap-reverse'' + right + left + bottom + top +
      ''column-reverse'' + ''wrap-reverse'' + left + right +
      + +

      +Appendix B: -webkit- Legacy Properties

      + + This appendix is normative. + + Advisement: These aliases are deprecated + and authors should not use them + unless their content needs to support actively-used legacy UAs. + + For compatibility with general Web content, + UAs that are Web browsers must and other UAs may + implement the following [=legacy name aliases=]: + + + + +
      Alias Standard +
      -webkit-align-contentalign-content +
      -webkit-align-itemsalign-items +
      -webkit-align-selfalign-self +
      -webkit-flexflex +
      -webkit-flex-basisflex-basis +
      -webkit-flex-directionflex-direction +
      -webkit-flex-flowflex-flow +
      -webkit-flex-growflex-grow +
      -webkit-flex-shrinkflex-shrink +
      -webkit-flex-wrapflex-wrap +
      -webkit-justify-contentjustify-content +
      -webkit-orderorder +
      + + + flexbox_width-wrapping-column.html + parsing/webkit-aliases.html + webkit-box-vertical-writing-mode.html + + +

      Acknowledgments

      + +

      Thanks for feedback and contributions to + +Erik Anderson, +Christian Biesinger, +Tony Chang, +Phil Cupp, +Arron Eicholz, +James Elmore, +Andrew Fedoniouk, +Brian Heuston, +Shinichiro Hamaji, +Daniel Holbert, +Ben Horst, +John Jansen, +Brad Kemper, +Kang-hao Lu, +Markus Mielke, +Peter Moulder, +Robert O'Callahan, +Christoph Päper, +Ning Rogers, +Peter Salas, +Elliott Sprehn, +Morten Stenshorne, +Christian Stockwell, +Ojan Vafai, +Eugene Veselov, +Greg Whitworth, +Boris Zbarsky. + + + +

      Changes

      + + This section documents the changes since previous publications. + +

      +Changes since the 14 October 2025 CRD +

      + +
        +
      • + Defined the web-compatible intrinsic sizing algo in [[#intrinsic-main-sizes-compat]]. + (Issue 8884) + +
      • + Clarified that the used cross size of an item is recalculated + with the line's cross size as its available space. + (Issue 11784) + +
      • + Added the ''flex-wrap: balance'' feature. + (Issue 3070, + Issue 12222, + and Issue 13414) +
      + + +

      Privacy Considerations

      + +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-2/examples/flex-item-determination.html b/css-flexbox-2/examples/flex-item-determination.html new file mode 100644 index 000000000000..49233d0b832d --- /dev/null +++ b/css-flexbox-2/examples/flex-item-determination.html @@ -0,0 +1,39 @@ + + + + +
      + + +
      block
      + + +
      float
      + + + anonymous item 3 + + + + + item 4 + + item 4 + item 4 + +
      diff --git a/css-flexbox-2/images/OK.png b/css-flexbox-2/images/OK.png new file mode 100644 index 000000000000..0b7577eab59c Binary files /dev/null and b/css-flexbox-2/images/OK.png differ diff --git a/css-flexbox-2/images/align-content-example.svg b/css-flexbox-2/images/align-content-example.svg new file mode 100644 index 000000000000..fcd90d70c8e4 --- /dev/null +++ b/css-flexbox-2/images/align-content-example.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + flex-start + + + + + + + + center + + + + + + + + flex-end + + + + + + + + space-between + + + + + + + + space-around + + + + + + + + stretch + + diff --git a/css-flexbox-2/images/basic-flexbox.png b/css-flexbox-2/images/basic-flexbox.png new file mode 100644 index 000000000000..3901c3e11c83 Binary files /dev/null and b/css-flexbox-2/images/basic-flexbox.png differ diff --git a/css-flexbox-2/images/basic-vertical-flexbox.png b/css-flexbox-2/images/basic-vertical-flexbox.png new file mode 100644 index 000000000000..6a07d225b163 Binary files /dev/null and b/css-flexbox-2/images/basic-vertical-flexbox.png differ diff --git a/css-flexbox-2/images/computer.jpg b/css-flexbox-2/images/computer.jpg new file mode 100644 index 000000000000..0d531c7825e5 Binary files /dev/null and b/css-flexbox-2/images/computer.jpg differ diff --git a/css-flexbox-2/images/flex-align.svg b/css-flexbox-2/images/flex-align.svg new file mode 100644 index 000000000000..1753e807cb0c --- /dev/null +++ b/css-flexbox-2/images/flex-align.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + flex-start + + + + + + + + + flex-end + + + + + + + + + center + + + + + + + + + stretch + + + + + + foo foo foo + + + + foo foo foo + + + + foo foo foo foo foo + + + + foo foo foo + + + + baseline + + \ No newline at end of file diff --git a/css-flexbox-2/images/flex-direction-terms.svg b/css-flexbox-2/images/flex-direction-terms.svg new file mode 100644 index 000000000000..70fde881e411 --- /dev/null +++ b/css-flexbox-2/images/flex-direction-terms.svg @@ -0,0 +1,66 @@ + + + + + + cross start + + + + cross end + + + + mainstart + + + + mainend + + + flex container + + + 1 + flex item + + + + 2 + flex item + + + + + + main axis + + + + + + cross axis + + + + main size + + + + cross size + + + \ No newline at end of file diff --git a/css-flexbox-2/images/flex-flow-english.svg b/css-flexbox-2/images/flex-flow-english.svg new file mode 100644 index 000000000000..239ea7a331ff --- /dev/null +++ b/css-flexbox-2/images/flex-flow-english.svg @@ -0,0 +1,24 @@ + + + + + + A + + + + B + + + + C + + + + D + + \ No newline at end of file diff --git a/css-flexbox-2/images/flex-flow-japanese.svg b/css-flexbox-2/images/flex-flow-japanese.svg new file mode 100644 index 000000000000..78e890155454 --- /dev/null +++ b/css-flexbox-2/images/flex-flow-japanese.svg @@ -0,0 +1,24 @@ + + + + + + 一 + + + + 二 + + + + 三 + + + + 四 + + diff --git a/css-flexbox-2/images/flex-flow1.svg b/css-flexbox-2/images/flex-flow1.svg new file mode 100644 index 000000000000..c6986b500a3d --- /dev/null +++ b/css-flexbox-2/images/flex-flow1.svg @@ -0,0 +1,24 @@ + + + + + + 1 + + + + 2 + + + + 3 + + + + 4 + + \ No newline at end of file diff --git a/css-flexbox-2/images/flex-flow2.svg b/css-flexbox-2/images/flex-flow2.svg new file mode 100644 index 000000000000..fec933b099db --- /dev/null +++ b/css-flexbox-2/images/flex-flow2.svg @@ -0,0 +1,24 @@ + + + + + + 1 + + + + 2 + + + + 3 + + + + 4 + + \ No newline at end of file diff --git a/css-flexbox-2/images/flex-flow3.svg b/css-flexbox-2/images/flex-flow3.svg new file mode 100644 index 000000000000..70b33ec3e80e --- /dev/null +++ b/css-flexbox-2/images/flex-flow3.svg @@ -0,0 +1,24 @@ + + + + + + 1 + + + + 2 + + + + 3 + + + + 4 + + \ No newline at end of file diff --git a/css-flexbox-2/images/flex-item-determination.png b/css-flexbox-2/images/flex-item-determination.png new file mode 100644 index 000000000000..dfb9e843ee18 Binary files /dev/null and b/css-flexbox-2/images/flex-item-determination.png differ diff --git a/css-flexbox-2/images/flex-order-example.png b/css-flexbox-2/images/flex-order-example.png new file mode 100644 index 000000000000..3e1fe6adfc30 Binary files /dev/null and b/css-flexbox-2/images/flex-order-example.png differ diff --git a/css-flexbox-2/images/flex-order-page.svg b/css-flexbox-2/images/flex-order-page.svg new file mode 100644 index 000000000000..0863cb9651b4 --- /dev/null +++ b/css-flexbox-2/images/flex-order-page.svg @@ -0,0 +1,32 @@ + + + + + + <header> + + + + <footer> + + + + <nav> + + + + <article> + + + + <aside> + + \ No newline at end of file diff --git a/css-flexbox-2/images/flex-pack.svg b/css-flexbox-2/images/flex-pack.svg new file mode 100644 index 000000000000..33e742b45e4c --- /dev/null +++ b/css-flexbox-2/images/flex-pack.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + flex-start + + + + + + + + flex-end + + + + + + + + center + + + + + + + + space-between + + + + + + + + space-around + + \ No newline at end of file diff --git a/css-flexbox-2/images/multiline-balance-flex.svg b/css-flexbox-2/images/multiline-balance-flex.svg new file mode 100644 index 000000000000..0c1ef7de03aa --- /dev/null +++ b/css-flexbox-2/images/multiline-balance-flex.svg @@ -0,0 +1,24 @@ + + + + + + 1 + + + + 2 + + + + 3 + + + + 4 + + \ No newline at end of file diff --git a/css-flexbox-2/images/multiline-balance.svg b/css-flexbox-2/images/multiline-balance.svg new file mode 100644 index 000000000000..e94a8af99aa0 --- /dev/null +++ b/css-flexbox-2/images/multiline-balance.svg @@ -0,0 +1,24 @@ + + + + + + 1 + + + + 2 + + + + 3 + + + + 4 + + \ No newline at end of file diff --git a/css-flexbox-2/images/multiline-flex.svg b/css-flexbox-2/images/multiline-flex.svg new file mode 100644 index 000000000000..a3782d11ce5a --- /dev/null +++ b/css-flexbox-2/images/multiline-flex.svg @@ -0,0 +1,24 @@ + + + + + + 1 + + + + 2 + + + + 3 + + + + 4 + + \ No newline at end of file diff --git a/css-flexbox-2/images/multiline-no-flex.svg b/css-flexbox-2/images/multiline-no-flex.svg new file mode 100644 index 000000000000..9e77721925d9 --- /dev/null +++ b/css-flexbox-2/images/multiline-no-flex.svg @@ -0,0 +1,24 @@ + + + + + + 1 + + + + 2 + + + + 3 + + + + 4 + + \ No newline at end of file diff --git a/css-flexbox-2/images/printer.png b/css-flexbox-2/images/printer.png new file mode 100644 index 000000000000..d73f781ddca0 Binary files /dev/null and b/css-flexbox-2/images/printer.png differ diff --git a/css-flexbox-2/images/rel-vs-abs-flex.svg b/css-flexbox-2/images/rel-vs-abs-flex.svg new file mode 100644 index 000000000000..ce62e19da1f5 --- /dev/null +++ b/css-flexbox-2/images/rel-vs-abs-flex.svg @@ -0,0 +1,77 @@ + + + + All Space Distributed + (flex-basis:0) + + + + 1 + + + + 1 + + + + 2 + + + + + + short + + looooooong + + short + + + + Extra Space Distributed + (flex-basis:auto) + + + + short + + looooooong + + short + + + + + 1 + + 1 + + + + 1 + + 1 + + + + 2 + + 2 + + + + \ No newline at end of file diff --git a/css-flexbox-2/images/target.png b/css-flexbox-2/images/target.png new file mode 100644 index 000000000000..045d83d5ed6a Binary files /dev/null and b/css-flexbox-2/images/target.png differ diff --git a/css-flexbox-2/images/toolbar-example.svg b/css-flexbox-2/images/toolbar-example.svg new file mode 100644 index 000000000000..e6c2fa09f362 --- /dev/null +++ b/css-flexbox-2/images/toolbar-example.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/css-flexbox-2/images/wp7zxxyu.gif b/css-flexbox-2/images/wp7zxxyu.gif new file mode 100644 index 000000000000..de0baa509d2c Binary files /dev/null and b/css-flexbox-2/images/wp7zxxyu.gif differ diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs index dd0b98cc6ac1..bc543787bd84 100644 --- a/css-fonts-4/Overview.bs +++ b/css-fonts-4/Overview.bs @@ -12,7 +12,7 @@ Previous Version: https://www.w3.org/TR/2024/WD-css-fonts-4-20240201/ Former Editor: John Daggett, Invited Expert, https://twitter.com/nattokirai, w3cid 41498 Former Editor: Myles C. Maxfield, Formerly of Apple Inc., mmaxfield@apple.com, w3cid 77180 Editor: Chris Lilley, W3C, http://svgees.us, w3cid 1438 -Abstract: This specification defines modifications to the existing CSS Fonts 3 specification along with additional features for font feature control, font variations, and color fonts. +Abstract: This specification defines modifications to the existing CSS Fonts 3 specification along with additional features for font feature control, font variations, and chromatic (color) fonts. At Risk: Synthesis of the 'font-variant-position' property At Risk: The 'font-language-override!!property' property At Risk: The 'font-language-override!!descriptor' descriptor @@ -33,6 +33,7 @@ spec:html; type:element; text:font spec:fetch; type:dfn; for:/; text:fetch text:request +spec:css-env-1; type:function; text:env() 
      @@ -102,7 +103,7 @@ Basic Font Properties
 
 	The particular font face used to render a character is determined by
 	the font family and other font properties that apply to a given element.
-	This structure allows settings to be varied independent of each
+	This structure allows settings to be varied independently of each
 	other.
 
 
-
-	
      -		<> = <>| <> | <>
-		<> = ''font-family/generic(fangsong)'' | ''font-family/generic(kai)'' | ''font-family/generic(khmer-mul)'' |  ''font-family/generic(nastaliq)''
-		<> = ''font-family/serif'' | ''font-family/sans-serif'' | ''font-family/system-ui'' | ''font-family/cursive'' | ''font-family/fantasy'' | ''font-family/math'' | ''font-family/monospace''
-		<> = ''font-family/ui-serif'' | ''font-family/ui-sans-serif'' | ''font-family/ui-monospace'' | ''font-family/ui-rounded''
-	
      
+
      +	<> = <>| <> | <>
+	<> = ''generic(fangsong)'' | ''generic(kai)'' | ''generic(khmer-mul)'' |  ''generic(nastaliq)''
+	<> = ''serif'' | ''sans-serif'' | ''system-ui'' | ''cursive'' | ''fantasy'' | ''font-family/math'' | ''monospace''
+	<> = ''ui-serif'' | ''ui-sans-serif'' | ''ui-monospace'' | ''ui-rounded''
+
      
 
 	To make the syntax less succeptible to clashes, more recently defined generic font families are identified using a functional syntax.
 
@@ -400,11 +394,11 @@ Syntax of <>

    -Syntax of <> +Syntax of <> 

    -		<> = ''caption'' | ''icon'' | ''menu'' | ''message-box'' | ''small-caption'' | ''status-bar''
+		<> = ''caption'' | ''icon'' | ''menu'' | ''message-box'' | ''small-caption'' | ''status-bar''

    @@ -464,23 +458,23 @@ Generic font families

    generic-family-keywords-002.html - Note: Generic font families are intended to be widely implemented on many platforms, unlike arbitrary <>s which are usually platform-specific names. They are expected to map to different fonts on different platforms. Authors may specify these generic family names if they desire their text to follow a particular design on many platforms, and are not particular about which specific font is chosen on those platforms. + Note: Generic font families are intended to be widely implemented on many platforms, unlike arbitrary <>s which are usually platform-specific names. They are expected to map to different fonts on different platforms. Authors may specify these generic family names if they desire their text to follow a particular design on many platforms, and are not particular about which specific font is chosen on those platforms. User agents should provide reasonable default choices for the generic font families, that express the characteristics of each family as well as possible, within the limits allowed by the underlying technology. User agents are encouraged to allow users to select alternative faces for the generic font families. -
    -
    serif -
    - Serif fonts represent - glyphs that have finishing strokes, - flared or tapering ends, - or have actual serifed endings (including slab serifs). - Serif fonts are typically proportionately-spaced. - They often display a greater variation between thick and thin strokes - than fonts from the ''sans-serif'' generic font family. +
    +
    serif +
    + Serif fonts represent + glyphs that have finishing strokes, + flared or tapering ends, + or have actual serifed endings (including slab serifs). + Serif fonts are typically proportionately-spaced. + They often display a greater variation between thick and thin strokes + than fonts from the ''sans-serif'' generic font family. Note: ''serif'' and ''sans-serif'' only apply to a small handful of writing scripts. @@ -630,7 +624,7 @@ Generic font families unlike UAs that generally allow users to customise the generic ''sans-serif'' or ''serif'' font family. As the name implies, ''system-ui'' is intended for use with UI elements in web application, and not for large paragraphs of text or articles. -
    math +
    math
    This font family is intended for use with mathematical expressions. @@ -1202,6 +1196,9 @@ Font style: the 'font-style!!property' property variations/font-style-parsing.html variations/slnt-backslant-variable.html variations/slnt-variable.html + variations/variable-avar2-rvrn.html + variations/variable-avar2-warp.html + variations/variable-gpos-avar2.html The 'font-style!!property' property allows italic or oblique faces to be selected. @@ -1344,7 +1341,7 @@ Font size: the 'font-size' property 
     	Name: font-size
-	Value: <> | <> | <> | math
+	Value: <> | <> | <> | ''font-size/math''
 	Initial: medium
 	Applies to: all elements and text
 	Inherited: yes
@@ -1358,6 +1355,7 @@ Font size: the 'font-size' property
 		font-size-zero-1.html
 		font-size-zero-2.html
 		font-size-zero-3.html
+		font-size-zero-ligatures.html
 		font-size-xxx-large.html
 		rem-in-monospace.html
 		animations/font-size-composition.html
@@ -1435,7 +1433,7 @@ Font size: the 'font-size' property
 			Note: Use of percentage values or font-relative lengths
 			such as ''em''s and ''rem''s
 			leads to more robust and cascadable style sheets.
-		
    math
    
+		
    math
    
 		
    
 			Special 
 			mathematical scaling rules must be applied
@@ -1785,7 +1783,7 @@ Shorthand font property: the 'font' property
 		<<'font-weight'>> ||
 		<> ]? <<'font-size'>> [ / <<'line-height'>> ]?
 		<<'font-family'>># ] |
-		<>
+		<>
 	Initial: see individual properties
 	Applies to: all elements and text
 	Inherited: yes
@@ -2171,6 +2169,10 @@ Controlling synthesized oblique: The 'font-synthesis-style' property
 		Skewing is about the center of the glyph.
 	
    
 
+	
+		synthetic-oblique-out-of-capabilities-range.html
+	
+
 	
 	
    
 		synthetic oblique in vertical text
@@ -2272,6 +2274,8 @@ Controlling synthetic faces: the 'font-synthesis' shorthand
 		font-synthesis-07.html
 		font-synthesis-08.html
 		font-synthesis-style-oblique-only.html
+		oblique-last-resort-weight-selection.html
+		oblique-request-italic-only-family-no-crash.html
 		synthetic-bold-space-width.html
 		parsing/font-synthesis-computed.html
 		parsing/font-synthesis-invalid.html
@@ -2691,7 +2695,7 @@ The ''@font-face'' rule
 
 	
     	Name: font-family
-	Value: <>
+	Value: <>
 	For: @font-face
 	Initial: N/A
 	
    
@@ -2753,11 +2757,11 @@ The ''@font-face'' rule
 
 
    Parsing the 'src!!descriptor' descriptor
    
 
-	To parse a <> production, [=parse a list=] of <>s.
+To parse a <> production, [=parse a list=] of <>s.
 
 	
     		<font-src> = <> [ format( <> ) ]? [ tech( <># ) ]?
-			| local( <> )
+			| local( <> )
 	
    
 
 	
    <font-format>
@@ -2945,13 +2949,13 @@ The ''@font-face'' rule
 	a locally available copy of a given font
 	and download it if it's not,
 	local() can be used.
-	The locally-installed <> argument to local()
+	The locally-installed <> argument to local()
 	is a format-specific string
 	that uniquely identifies a single font face
 	within a larger family.
 	The name can optionally be enclosed in quotes.
 	If unquoted,
-	the unquoted font family name processing conventions apply;
+	the unquoted font family name processing conventions apply;
 	in other words,
 	the name must be a sequence of identifiers
 	separated by whitespace
@@ -2960,7 +2964,7 @@ The ''@font-face'' rule
 	separated by a single space;
 	and thus,
 	CSS-wide keywords such as ''inherit'', and
-	<> keywords such as ''serif''
+	<> keywords such as ''serif''
 	are not allowed inside local().
 
 	
    @@ -3215,6 +3219,10 @@ Font property descriptors: the 'font-style!!descriptor', 'font-weight!!descripto
 	to satisfy the requested ''font-weight''),
 	as well as the values supported by the font file itself.
 
+	
+		synthetic-bold-out-of-capabilities-range.html
+	
+
 	
    
 		The font descriptors defined in this section
 		are used for selecting a font
@@ -4492,6 +4500,11 @@ the 'ascent-override!!descriptor',
 
 					If an oblique angle was found in the above search, all faces which don't include that oblique angle are excluded from the matching set. Otherwise, if an italic value was found in the above search, all faces which don't include that italic value are excluded from the matching set.
 
+					
+						oblique-last-resort-weight-selection.html
+						oblique-request-italic-only-family-no-crash.html
+					
+
 					User agents are not required to distinguish between italic and oblique fonts. In such user agents, the 'font-style!!property' matching steps above are performed by mapping both italic values and oblique angles onto a common scale. The exact nature of this mapping is undefined, however, an italic value of 1 must map to the same value that an oblique angle of 11deg maps to. Within font
 					families defined via ''@font-face'' rules, italic and oblique
 					faces must be distinguished using the value of the
@@ -5808,13 +5821,13 @@ Alternates and swashes: the 'font-variant-alternates' property
 
 	
     	Name: font-variant-alternates
-	Value: normal | [ stylistic(<>) ||
+	Value: normal | [ stylistic(<>) ||
 		historical-forms ||
-		styleset(<>#) ||
-		character-variant(<>#) ||
-		swash(<>) ||
-		ornaments(<>) ||
-		annotation(<>) ]
+		styleset(<>#) ||
+		character-variant(<>#) ||
+		swash(<>) ||
+		ornaments(<>) ||
+		annotation(<>) ]
 	Initial: normal
 	Applies to: all elements and text
 	Inherited: yes
@@ -5850,8 +5863,8 @@ Alternates and swashes: the 'font-variant-alternates' property
 		parsing/font-variant-alternates-valid.html
 	
 
-	
    <feature-index> = <>
    
-	
    <feature-value-name> = <>
    
+	
    <font-feature-index> = <>
    
+	
    <font-feature-value-name> = <>
    
 
 	For any given character, fonts can provide a variety of alternate
 	glyphs in addition to the default glyph for that character. This
@@ -5865,8 +5878,8 @@ Alternates and swashes: the 'font-variant-alternates' property
 	of these alternates is font-specific, the
 	''@font-feature-values'' rule is used to define values for a
 	specific font family or set of families that associate a font-specific
-	numeric <> with a custom
-	<>, which is then used in this
+	numeric <> with a custom
+	<>, which is then used in this
 	property to select specific alternates:
 
 	
    @@ -5878,10 +5891,10 @@ Alternates and swashes: the 'font-variant-alternates' property
 	}
 	
    
 
-	When a particular <> has not
+	When a particular <> has not
 	been defined for a given family or for a particular feature type, the
 	computed value must be the same as if it had been defined.  However,
-	property values that contain these undefined <>
+	property values that contain these undefined <>
 	identifiers must be ignored when choosing glyphs.
 
 	
    @@ -5911,16 +5924,16 @@ Alternates and swashes: the 'font-variant-alternates' property
 			
    
 		
    
 
-		
    stylistic(<>)
-		
    Enables display of stylistic alternates ([=font specific=], OpenType feature: salt <>).
+		
    stylistic(<>)
+		
    Enables display of stylistic alternates ([=font specific=], OpenType feature: salt <>).
 
 			
    
 				stylistic alternate example
 			
    
 		
    
 
-		
    styleset(<>#)
-		
    Enables display with stylistic sets ([=font specific=], OpenType feature: ss<>
+		
    styleset(<>#)
+		
    Enables display with stylistic sets ([=font specific=], OpenType feature: ss<>
 			OpenType currently defines ss01 through ss20).
 
 			
    
@@ -5928,20 +5941,20 @@ Alternates and swashes: the 'font-variant-alternates' property
 			
    
 		
    
 
-		
    character-variant(<>#)
-		
    Enables display of specific character variants ([=font specific=], OpenType feature: cv<>
+		
    character-variant(<>#)
+		
    Enables display of specific character variants ([=font specific=], OpenType feature: cv<>
 			OpenType currently defines cv01 through cv99).
    
 
-		
    swash(<>)
-		
    Enables display of swash glyphs ([=font specific=], OpenType feature: swsh <>, cswh <>).
+		
    swash(<>)
+		
    Enables display of swash glyphs ([=font specific=], OpenType feature: swsh <>, cswh <>).
 
 			
    
 				swash example
 			
    
 		
    
 
-		
    ornaments(<>)
-		
    Enables replacement of default glyphs with ornaments, if provided in the font ([=font specific=], OpenType feature: ornm <>).
+		
    ornaments(<>)
+		
    Enables replacement of default glyphs with ornaments, if provided in the font ([=font specific=], OpenType feature: ornm <>).
 			Some fonts may offer ornament glyphs as alternates for a wide collection of characters; however, displaying arbitrary
 			characters (e.g., alphanumerics) as ornaments is poor practice as it distorts the semantics of the data. Font designers
 			are encouraged to encode all ornaments (except those explicitly encoded in the Unicode Dingbats blocks, etc.) as
@@ -5952,8 +5965,8 @@ Alternates and swashes: the 'font-variant-alternates' property
 			
 		
    
 
-		
    annotation(<>)
-		
    Enables display of alternate annotation forms ([=font specific=], OpenType feature: nalt <>).
+		
    annotation(<>)
+		
    Enables display of alternate annotation forms ([=font specific=], OpenType feature: nalt <>).
 
 			
    
 				alternate annotation form example
@@ -6052,7 +6065,7 @@ Defining font specific alternates: the @font-feature-values rule
 	as the corresponding value of the 'font-variant-alternates' property.
 
 	
    -		@font-feature-values = @font-feature-values <># { <> }
+		@font-feature-values = @font-feature-values <># { <> }
 
 		<font-feature-value-type> = <<@stylistic>> | <<@historical-forms>> | <<@styleset>> | <<@character-variant>>
 			| <<@swash>> | <<@ornaments>> | <<@annotation>>
@@ -6072,13 +6085,13 @@ Defining font specific alternates: the @font-feature-values rule
 	
 
 	The ''@font-feature-values'' prelude
-	is a comma-delimited list of font family names that match the definition of <>
+	is a comma-delimited list of font family names that match the definition of <>
 	for the 'font-family!!property' property.
 	This means that only named font families are allowed;
 	rules that include generic or system fonts in the list of font families are syntax errors.
 	However, if a user agent defines a generic font to be a specific named font (e.g. Helvetica),
 	the settings associated with that family name will be used.
-	If syntax errors occur within the <> list,
+	If syntax errors occur within the <> list,
 	the entire rule ''@font-feature-values'' rule is invalid
 	and must be ignored.
 
@@ -6101,11 +6114,21 @@ Defining font specific alternates: the @font-feature-values rule
 	and the value must be a list of one or more non-negative <>s.
 
 	The [=feature value blocks=] accept any declaration name;
-	these names must be identifiers,
+	these names must be <>,
 	per standard CSS syntax rules,
 	and are [=case-sensitive=]
 	(so foo: 1; and FOO: 2 define two different features).
-	Each declaration's value must match the grammar ''<>+'',
+
+	Each declaration's value in ''@annotation'', ''@ornaments'', ''@stylistic'', ''@swash'',
+	must match the grammar <>,
+	or else the declaration is invalid and must be ignored.
+
+	Each declaration’s value in ''@character-variant''
+	must match the grammar <> <>,
+	or else the declaration is invalid and must be ignored.
+
+	Each declaration’s value in ''@styleset''
+	must match the grammar <>+,
 	or else the declaration is invalid and must be ignored.
 
 	Note: Each feature name is unique only within a single [=feature value block=].
@@ -6113,7 +6136,7 @@ Defining font specific alternates: the @font-feature-values rule
 	or the same type of [=feature value blocks=] in separate ''@font-feature-values'' rules,
 	names can be reused without colliding.
 
-	For each <> in the ''@font-feature-values'' prelude,
+	For each <> in the ''@font-feature-values'' prelude,
 	each [=font feature value declaration=] defines a mapping between a
 	(family name, feature block name, declaration name) [=tuple=]
 	and the list of one or more integers from the declaration's value.
@@ -6514,7 +6537,7 @@ Overall shorthand for font rendering: the 'font-variant!!property' property
 
 	
     	Name: font-variant
-	Value:	normal | none | [ [ <> || <> || <> || <> ] || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || [ stylistic(<>) || historical-forms || styleset(<>#) || character-variant(<>#) || swash(<>) || ornaments(<>) || annotation(<>) ] || [ <> || <> || <> || ordinal || slashed-zero ] || [ <> || <> || ruby ] || [ sub | super ] || [ text | emoji | unicode ] ]
+	Value:	normal | none | [ [ <> || <> || <> || <> ] || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || [ stylistic(<>) || historical-forms || styleset(<>#) || character-variant(<>#) || swash(<>) || ornaments(<>) || annotation(<>) ] || [ <> || <> || <> || ordinal || slashed-zero ] || [ <> || <> || ruby ] || [ sub | super ] || [ text | emoji | unicode ] ]
 	Initial: normal
 	Applies to: all elements and text
 	Inherited: yes
@@ -7514,6 +7537,7 @@ Controlling Color Font Palettes: The 'font-palette' property
 		font-palette-remove-2.html
 		font-palette-remove.html
 		font-palette.html
+		font-palette-values-relative-colors.html
 		animations/font-palette-interpolation.html
 		font-palette-vs-shorthand.html
 		parsing/font-palette-computed.html
@@ -7872,7 +7896,7 @@ Font family: the '@font-palette-values/font-family' descriptor
 
 	
     	Name: font-family
-	Value: <>#
+	Value: <>#
 	For: @font-palette-values
 	Initial: N/A
 	
    
@@ -8606,7 +8630,7 @@ Serializing font-related at-rules
 	
    
 		For example, the declaration:
 
-		
    +		
     		/* Repeated declaration names, and multiple blocks of the same type*/
 		@font-feature-values foo {
 			@swash { pretty: 0; cool: 2; }
@@ -8622,6 +8646,10 @@ Serializing font-related at-rules
 			@swash { cool: 2; pretty: 1; }
 		}
 		
    
+
+		
+			font_feature_values_map_iteration.html
+		
 	
    
 
 
    
@@ -9058,6 +9086,54 @@ Changes
    
 Changes from the 1 February 2024 working draft
 
 	
      
+		
+		
    • Clarified range constraints on descriptor values in <>
+			(Issue 13324)
      • 
+		
    • Added font- prefix to production names to avoid ambiguity
+			(Issue 13263, 
+				PR 13272)
      • 
+		
    • Created proper types for <absolute-size> and <relative-size>
+			(Issue 1794)
+		
      • 
+		
    • Defined that if there are multiple @font-palette-values rules, the last one wins
+			(Issue 12981)
+		
      • 
+		
    • Clarified that clamping to the variable range also affects implied variation axes
+			(Issue 7999)
+		
      • 
+		
    • Add some more clarifications on the other ui-* generic font families
+			(Issue 3658)
+		
      • 
+		
    • Add notes for the system-ui generic font family
+			(PR 12831),
+			(Issue 3658)
+		
      • 
+		
    • Cleaned up fetching of font resources
+			(Issue 12261)
+		
      • 
+		
    • Clarify that non-absolute colors in override-colors 
+			make the whole descriptor invalid, 
+			not just the individual color
+			(Issue 9555)
+		
      • 
+		
    • Add left and right to font-style descriptor
+			(Issue 9392)
+		
      • 
+		
    • Add left and right to font-style property
+			(Issue 9392)
+		
      • 
+		
    • Added oblique-only as a value of font-synthesis-style
+			(Issue 9390)
+		
      • 
+		
    • Refered to Cascade 5 for reset-only sub-property, 
+			rather than defining it independently
+			(Issue 11904)
+		
      • 
+		
    • Clarified that override-colors are invalid if an absolute color is not specified
+			(Issue 9555)
+		
      • 
+		
    • Fixed typo in Font Feature and Variation Resolution
      • 
+		
    • Used better fonts for the Khmer example
      • 
 		
 		
    • Added generic(khmer-mul)
      • 
 		
    • Used unicode-range-token instead of urange
      • 
@@ -9432,4 +9508,4 @@ Changes from the 20 September 2018 " dfn-type=value>
+
      
 	
      xxx
 	
      
 		Placeholder text for the xxx generic font family.
@@ -509,7 +509,7 @@ according to section [[css-syntax#parse-comma-separated-list-of-component-values
 Then each component value is parsed according to this grammar:
 
 
-
      <> [ format(<>)]? [ tech( <>#)]? | local(<>)
      
+
      <> [ format(<>)]? [ tech( <>#)]? | local(<>)
      
 
 
      <font-format>
 	 = [<> | collection | embedded-opentype | opentype
@@ -983,9 +983,21 @@ Changes
 
      Changes since the WD of 6 February 2024
      
 
 
        
+	
      • Added text-scale meta tag and preferred-text-scale environment variable support, 
+		with example
+	(Issue 12380),
+	(Issue 12475)
+
        • 
+	
      • Added missing CSSOM superscript-position-override, subscript-position-override,
+		superscript-size-override and subscript-size-override descriptors
        • 
+	
      • Added missing CSSOM size-adjust and font-size descriptors
        • 
+	
      • Added the avar2 font tech 
+		(Issue 10599)
        • 
+	
      • Updated incremental example to latest IFT spec 
+		(Issue 6063)
        • 
+	
      • Explicitly stated that font-size-adjust precedes font metrics overrides 
+		(Issue 8967)
        • 
 	
-	
      • Added the avar2 font tech
        • 
-	
      • Updated the incremental example to conform to the latest IFT specification
        • 
 
      
 
 
      Changes since the WD of 21 December 2021 
      
@@ -1157,6 +1169,7 @@ Changes
 	font-palette-remove.html
 	font-palette-vs-shorthand.html
 	font-palette.html
+	font-palette-values-relative-colors.html
 	font-shorthand-serialization-001.html
 	font-shorthand-serialization-font-stretch.html
 	font-shorthand-serialization-prevention.html
@@ -1500,6 +1513,13 @@ Changes
 	test-synthetic-italic.html
 	font-size-zero-3.html
 	font-synthesis-weight-webfont-bold.html
+	font_feature_values_map_iteration.html
+	synthetic-bold-out-of-capabilities-range.html
+	synthetic-oblique-out-of-capabilities-range.html
+	font-size-zero-ligatures.html
+	variations/variable-avar2-rvrn.html
+	variations/variable-avar2-warp.html
+	variations/variable-gpos-avar2.html
 
 
 
 
-	
      
-	Gaps
      
+
      
+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.
 
-	Various layouts in CSS such as
-	multicol containers, flex containers, grid containers, and grid lanes containers
-	position child boxes adjacent to each other with [=gaps=], also known as gutters, between them.
+	The 'gap' property,
+	and its 'row-gap' and 'column-gap' sub-properties,
+	provide this functionality for
+	multi-column,
+	flex,
+	and grid layout.
 
-	For the purposes of this specification, gap, column gap, and row gap are defined as follows depending on the type of container:
+	A gap is either a column gap or row gap,
+	whose definitions vary by type of container:
 
 	
      
 		
      multi-column containers
 		
      
-			In the column direction, [=gap=] ([=column gap=]) refers to the [=gutter=] between adjacent column boxes within each [=multicol line=],
+			A [=column gap=] is the [=gutter=] between adjacent column boxes,
 			see [[CSS-MULTICOL-1]].
-			In the row direction, [=gap=] ([=row gap=]) refers to the [=gutter=] between the rows of [=column boxes=] established by 'column-height',
+
+			A [=row gap=] is the [=gutter=] between the rows of [=column boxes=] established by 'column-height',
 			see [[CSS-MULTICOL-2]].
 
 		
      flex containers
 		
      
-			In the main axis
-			(e.g. 'column-gap' in a ''flex-flow/row'' flex container),
-			[=gap=] ([=column gap=]) refers to the [=gutter=] between items within a single [=flex line=].
+			When applied to the main axis
+			(e.g. [=column gap=] in a ''flex-flow/row'' flex container),
+			refers to 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),
+			refers to the [=gutter=] between adjacent flex lines.
 
-			In the cross axis
-			(e.g. 'row-gap' in a ''flex-flow/row'' flex container),
-			[=gap=] ([=row gap=]) refers to the [=gutter=] between adjacent flex lines.
 		
      grid containers
 		
      
-			[=row gaps=] and [=column gaps=]
+			[=Row gap=] and [=column gap=],
+			in the context of a grid container,
 			refer to the [=gutters=] between grid rows and grid columns,
 			respectively.
 			See [[css-grid-1#gutters]] for precise details.
 	
      
 
-	Note: As specified in [[CSS-ALIGN-3#column-row-gap]],
-	additional spacing between items added by 'justify-content' and 'align-content'
-	is included in [=gap=] size.
+	Gutters effect a minimum spacing between items:
+	additional spacing may be added by 'justify-content'/'align-content'.
+	Such additional space increases the size of the corresponding [=gaps=].
+
+	In all cases, the [=gap=] 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'').
 
 	
      
 		
      
@@ -140,6 +173,125 @@ Value Definitions
 		
      
 	
      
 
+
      
+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 [=row gap=] or [=column gap=]
+			as defined by the layout modes to which it applies.
+
+			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.
+	
      
+
+
      
+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
+
 
+
+
+
+
+- [CSS Gap Decorations](#css-gap-decorations)
+  - [Authors](#authors)
+  - [Participate](#participate)
+  - [Status of this Document](#status-of-this-document)
+  - [Table of Contents](#table-of-contents)
+  - [Introduction](#introduction)
+  - [Goals](#goals)
+  - [Non-goals](#non-goals)
+  - [User research](#user-research)
+  - [Properties](#properties)
+    - [Width, style, and color](#width-style-and-color)
+    - [Interaction with intersection types](#interaction-with-intersection-types)
+    - [Extending or shortening gap decoration segments](#extending-or-shortening-gap-decoration-segments)
+    - [Paint order](#paint-order)
+    - [Decorations next to empty areas](#decorations-next-to-empty-areas)
+  - [Key scenarios](#key-scenarios)
+    - [Scenario 1: Horizontal lines between CSS grid rows](#scenario-1-horizontal-lines-between-css-grid-rows)
+    - [Scenario 2: Lines dividing items in both directions of a grid](#scenario-2-lines-dividing-items-in-both-directions-of-a-grid)
+    - [Scenario 3: Segmented gap decorations](#scenario-3-segmented-gap-decorations)
+    - [Scenario 4: Grid layout with white space in leading columns](#scenario-4-grid-layout-with-white-space-in-leading-columns)
+    - [Scenario 5: Column decorations only between items](#scenario-5-column-decorations-only-between-items)
+    - [Scenario 6: Calendar layout with alternating line styles](#scenario-6-calendar-layout-with-alternating-line-styles)
+  - [Future ideas](#future-ideas)
+    - [Images](#images)
+    - [Corner joins](#corner-joins)
+    - [Propagation of gap decorations into subgrids](#propagation-of-gap-decorations-into-subgrids)
+    - [Extensions to decoration visibility controls](#extensions-to-decoration-visibility-controls)
+    - [Placement of gap decorations](#placement-of-gap-decorations)
+      - [Scenario: Periodic Table omitting decorations from certain areas](#scenario-periodic-table-omitting-decorations-from-certain-areas)
+  - [Dropped ideas](#dropped-ideas)
+    - [Logical properties](#logical-properties)
+  - [Considered alternatives](#considered-alternatives)
+    - [Alternative 1: 2021 draft specification](#alternative-1-2021-draft-specification)
+    - [Alternative 2: Using pseudo-elements](#alternative-2-using-pseudo-elements)
+  - [References \& acknowledgements](#references--acknowledgements)
+
+
+
+## Introduction
+
+CSS multi-column containers allow for
+[rules](https://drafts.csswg.org/css-multicol-1/#cr) to be drawn between
+columns. Applying similar styling to other container layouts such as grid and
+flex has been widely sought after, as seen in the discussion for CSS Working
+Group issue [2748](https://github.com/w3c/csswg-drafts/issues/2748) and in
+several StackOverflow questions (
+[[1]](https://stackoverflow.com/questions/45884630/css-grid-is-it-possible-to-apply-color-to-grid-gaps)
+[[2]](https://stackoverflow.com/questions/59899641/is-it-possible-to-draw-all-css-grid-lines-as-dotted-borders-or-outlines-if-js-i)
+[[3]](https://stackoverflow.com/questions/47882924/preventing-double-borders-in-css-grid)
+[[4]](https://stackoverflow.com/questions/67479163/css-border-doubling-with-flex)
+). Currently, developers seeking to draw such decorations must resort to
+non-ergonomic workarounds such as these examples:
+
+- https://www.smashingmagazine.com/2017/09/css-grid-gotchas-stumbling-blocks/#how-do-i-add-backgrounds-and-borders-to-grid-areas
+- https://x.com/geddski/status/1004731709764534274
+
+## Goals
+
+* Extend CSS [column rule
+  properties](https://drafts.csswg.org/css-multicol-1/#column-gaps-and-rules) to
+  apply to other container layouts such as grid, flex, and grid-lanes.
+* Introduce row-direction gap decorations on CSS container layouts.
+* Allow gap decorations to vary over a given container to handle cases such as
+  alternating row separators.
+
+## Non-goals
+
+* Gap decorations on CSS Tables. The [CSS Tables
+  specification](https://drafts.csswg.org/css-tables-3/) is currently Not Ready
+  for Implementation, and there are interoperability differences among engines.
+  Additionally, authors can achieve many of the scenarios covered by this
+  explainer in a table already using cell borders.
+* Images in gap decorations. Further exploration is needed into the best way to
+  handle these, so this scenario is left as a [future idea](#images).
+
+## User research
+
+Use cases in this explainer were collected from the discussion in CSSWG issue
+[2748](https://github.com/w3c/csswg-drafts/issues/2748). Additional inspiration
+was drawn from discussions in CSSWG issues
+[5080](https://github.com/w3c/csswg-drafts/issues/5080),
+[6748](https://github.com/w3c/csswg-drafts/issues/6748), and
+[9482](https://github.com/w3c/csswg-drafts/issues/9482).
+
+Comments received on the feature in MSEdgeExplainers issues
+[996](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/996),
+[1099](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/1099),
+[1100](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/1100), and
+[1111](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/1111)
+have also been incorporated into the design.
+
+## Properties
+
+Unless otherwise noted, corresponding `row-` and `column-` properties should be
+assumed to have identical syntax. All such pairs of properties also have
+shorthands that apply the same values in both directions.
+
+For property grammar details, please see the
+[Editor's Draft](https://drafts.csswg.org/css-gaps-1/).
+
+### Width, style, and color
+
+In addition to replicating the existing column-rule properties in the row
+direction, we expand the syntax of both sets of properties to allow for multiple
+definitions. If a given property has fewer list entries than the number of gaps,
+the list is cycled through from the beginning as needed.
+
+Authors may also use familiar syntax from CSS Grid such as `repeat()`
+and `auto` to create patterns of line definitions. Note that while `repeat()` and `auto`
+are inspired by CSS Grid, they may also be used to create patterns of decorations
+in flex, multi-column, and grid-lanes containers.
+
+Shorthands are also available to combine the width, style, and color properties.
+
+```css
+.alternate-red-blue {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-auto-rows: 30px;
+  gap: 10px;
+  row-rule: 1px solid;
+  row-rule-color: red, blue;
+}
+```
+![](images/example-red-blue.png)
+
+```css
+.alternate-heavy-light {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-auto-rows: 30px;
+  gap: 10px;
+  row-rule: 2px solid black, 1px solid lightgray;
+}
+```
+![](images/example-heavy-light.png)
+
+Like column rules in multi-column layout, gap decorations in other layout
+containers do not take up space and do not affect the layout of items in the
+container. Conceptually, gap decorations are considered after layout has
+completed, and in particular after we already know the full extent of the
+[implicit grid](https://drafts.csswg.org/css-grid-2/#implicit-grid) in grid
+layout, or the number of lines in flex layout, or the number of columns in
+multi-column layout, or the number of tracks in grid-lanes layout. Thus, the
+`repeat()` grammar, while modeled after the `grid-template` properties, is
+simpler for gap decorations as there are fewer unknowns to consider.
+
+```css
+.varying-widths {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: 50px repeat(auto-fill, 50px) 50px;
+  row-gap: 10px;
+  row-rule: 5px solid black, repeat(auto, 1px dashed gray), 3px solid black;
+  column-rule: 1px dashed gray;
+  rule-inset: 5px;
+}
+```
+
+![](images/example-varying-widths.png)
+
+### Interaction with intersection types
+
+Authors may change the set of intersections where gap decorations break,
+from the default behavior to either "all intersections" or "no intersections."
+Where gap decorations overlap items in the container, the decoration is painted
+behind the item.
+
+```css
+.normal {
+  rule-break: normal;
+}
+```
+![](images/example-break-normal.png)
+
+```css
+.all-intersections {
+  rule-break: intersection;
+}
+```
+![](images/example-break-intersection.png)
+
+```css
+.no-intersections {
+  rule-break: none;
+}
+```
+![](images/example-break-none.png)
+
+### Extending or shortening gap decoration segments
+
+By default, gap decorations are painted as continuous segments that extend as
+far as possible along the centerline of a given visible gap.
+The decoration is painted from visible intersection to another,
+with each endpoint at the innermost edge of the intersection.
+
+```css
+.grid-with-spans {
+  display: grid;
+  grid-template: repeat(4, 100px) / repeat(4, 100px);
+  gap: 20px;
+  row-rule: 6px solid red;
+  column-rule: 6px solid blue;
+}
+```
+
+![](images/example-grid-with-spans.png)
+
+```css
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  width: 500px;
+  row-rule: 6px solid red;
+  column-rule: 6px solid blue;
+}
+```
+![](images/example-flex.png)
+
+Authors may adjust the positions of endpoints relative to gap intersections,
+either as a fixed distance or as a percentage of the width of the intersection.
+The "zero point" is the edge of the intersection, with negative values extending
+into the intersection and positive values receding from it.
+
+```css
+.inset-0px {
+  column-rule-break: intersection;
+  column-rule-inset: 0px;
+}
+```
+![](images/example-column-inset-0px.png)
+
+```css
+.inset-5px {
+  column-rule-break: intersection;
+  column-rule-inset: 5px;
+}
+```
+![](images/example-column-inset-5px.png)
+
+```css
+.inset-negative-5px {
+  column-rule-break: intersection;
+  column-rule-inset: -5px;
+}
+```
+![](images/example-column-inset-minus-5px.png)
+
+Authors may also adjust endpoints more granularly, making a distinction between "edge"
+endpoints (which fall on the edge of the container),
+and "interior" endpoints (any endpoint that is not an "edge").
+
+```css
+.edge-interior-insets {
+  column-rule-break: intersection;
+  column-rule-edge-inset: 0px;
+  column-rule-interior-inset: -5px;
+}
+```
+
+![](images/example-column-interior-inset-5px.png)
+
+Similarly, authors can have even more granular control to adjust the positions of endpoints,
+making a distinction between "start" and "end" endpoints, in addition to the "edge" and "interior" distinction.
+
+```css
+.start-end-edge-interior-insets {
+  column-rule-break: intersection;
+
+  column-rule-edge-inset-start: 8px;
+  column-rule-interior-inset-start: 8px;
+  /* or shorthand: */
+  column-rule-inset-start: 8px;
+}
+```
+
+![](images/example-column-start-end-edge-interior-insets.png)
+
+### Paint order
+
+When row and column gap decorations overlap, authors can control their painting order.
+By default, row-direction decorations are painted on top of column-direction decorations.
+
+```css
+rule-overlap: [ row-over-column | column-over-row ]
+```
+
+```css
+.row-over-column {
+  row-rule: 6px solid red;
+  column-rule: 6px solid blue;
+  rule-overlap: row-over-column;
+}
+```
+![](images/example-row-over-column.png)
+
+```css
+.column-over-row {
+  row-rule: 5px solid red;
+  column-rule: 5px solid blue;
+  rule-overlap: column-over-row;
+}
+```
+![](images/example-column-over-row.png)
+
+### Decorations next to empty areas
+
+By default, gap decoration segments appear throughout a container.
+In some cases, authors may not want to paint segments next to empty areas.
+The `*-rule-visibility-items` properties allow control over this.
+
+```css
+.container {
+  display: grid;
+  grid-template: repeat(3, 100px) / repeat(3, 100px);
+  gap: 10px;
+  rule: 1px solid black;
+  rule-break: intersection;
+  rule-visibility-items: all; /* initial value */
+}
+.item {
+  background: lightgray;
+}
+```
+```html
+
      
+  
      Item 1
      
+  
      Item 2
      
+  
      Item 3
      
+  
      Item 4
      
+
      
+```
+
+![](images/example-rule-visibility-items-all.png)
+
+```css
+.container {
+  display: grid;
+  grid-template: repeat(3, 100px) / repeat(3, 100px);
+  gap: 10px;
+  rule: 1px solid black;
+  rule-break: intersection;
+  rule-visibility-items: around;
+}
+.item {
+  background: lightgray;
+}
+```
+```html
+
      
+  
      Item 1
      
+  
      Item 2
      
+  
      Item 3
      
+  
      Item 4
      
+
      
+```
+
+![](images/example-rule-visibility-items-around.png)
+
+```css
+.container {
+  display: grid;
+  grid-template: repeat(3, 100px) / repeat(3, 100px);
+  gap: 10px;
+  rule: 1px solid black;
+  rule-break: intersection;
+  rule-visibility-items: between;
+}
+.item {
+  background: lightgray;
+}
+```
+```html
+
      
+  
      Item 1
      
+  
      Item 2
      
+  
      Item 3
      
+  
      Item 4
      
+
      
+```
+
+![](images/example-rule-visibility-items-between.png)
+
+Note that `rule-visibility-items` in the examples above is a shorthand
+for `column-rule-visibility-items` and `row-rule-visibility-items`,
+which can also be set independently:
+
+```css
+.container {
+  display: grid;
+  grid-template: repeat(3, 100px) / repeat(3, 100px);
+  gap: 10px;
+  rule: 1px solid black;
+  rule-break: intersection;
+  column-rule-visibility-items: around;
+  row-rule-visibility-items: between;
+}
+.item {
+  background: lightgray;
+}
+```
+```html
+
      
+  
      Item 1
      
+  
      Item 2
      
+  
      Item 3
      
+  
      Item 4
      
+
      
+```
+
+![](images/example-rule-visibility-items-independent.png)
+
+## Key scenarios
+
+### Scenario 1: Horizontal lines between CSS grid rows
+
+https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-446379068, which
+links to: https://codepen.io/urlyman/pen/yGNOya
+
+> The desired effect is a line appearing only between the grid rows, and
+> extending unbroken across the column gaps.
+>
+> Note that I don't want a line to appear above or beneath all rows, only in the
+> gaps between rows.
+
+```css
+.container {
+  row-rule: 1px solid #ccc;
+}
+```
+
+![](images/csswg-drafts-issues-2748-issuecomment-446379068.png)
+
+### Scenario 2: Lines dividing items in both directions of a grid
+
+https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-595663212
+
+```css
+.container {
+  rule: thick solid green;
+}
+```
+
+![](images/csswg-drafts-issues-2748-issuecomment-595663212.png)
+
+### Scenario 3: Segmented gap decorations
+
+https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-446781218 - last
+example
+
+```css
+.container {
+  rule: 1px solid black;
+  column-rule-inset: 0px;
+}
+```
+
+![](images/csswg-drafts-issues-2748-issuecomment-446781218-last-example.png)
+
+### Scenario 4: Grid layout with white space in leading columns
+
+https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/1099
+
+```css
+.layout {
+  display: grid;
+  grid-template-areas:
+    ". . content author"
+    ". . content social";
+  gap: 5px;
+  rule: 1px solid gray;
+  rule-visibility-items: around;
+  border-top: 1px solid gray;
+}
+```
+
+![](images/explainer-issue-1099.png)
+
+### Scenario 5: Column decorations only between items
+
+https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/1100
+
+```css
+.layout {
+  display: grid;
+  grid-template-columns: 400px 1000px;
+  column-gap: 90px;
+  row-gap: 50px;
+  column-rule: 1px solid white;
+  column-rule-visibility-items: between;
+}
+```
+
+![](images/explainer-issue-1100.png)
+
+### Scenario 6: Calendar layout with alternating line styles
+
+https://codepen.io/samdomekara/pen/NPROrgQ, inspired by 
+https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-595889781
+
+It might appear initially that `` would be a better fit for this use case. But the comment author
+[pointed out](https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-596040343)
+that once you populate the calendar with events, using a CSS grid makes things much simpler.
+
+```css
+.calendar {
+  display: grid;
+  grid-template-columns: 80px repeat(7, 1fr);
+  grid-template-rows: auto repeat(18, minmax(30px, 1fr));
+  column-gap: 2px;
+  column-rule: 2px solid #ddd;
+  column-rule-edge-inset-start: 30px;
+  row-gap: 1px;
+  row-rule: 1px dotted #ddd, 1px solid #ddd;
+  row-rule-edge-inset-start: 80px;
+}
+```
+
+![](images/calendar-codepen.png)
+
+## Future ideas
+
+### Images
+
+Much like `border-image`, support for images in gap decorations would allow for
+more decorative separators to be used. These could be purely design choices, or
+they could be used to achieve practical effects such as coupon borders.
+Examples:
+
+* https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-446781218 - third example
+
+  ![](images/csswg-drafts-issues-2748-issuecomment-446781218-third-example.png)
+
+* https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-621983931
+
+  ![](images/csswg-drafts-issues-2748-issuecomment-621983931-first-example.png)
+
+* https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/1161
+
+  ![](images/explainer-issue-1161.png)
+
+However, unlike `border-image`, gap decoration images need to cover
+significantly more cases, such as T intersections and cross intersections. More
+detail and examination of this issue:
+
+* https://github.com/w3c/csswg-drafts/issues/5080#issuecomment-1526585163
+* https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-623039817
+
+### Corner joins
+
+In [Issue 985](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/985), it
+was suggested that we apply a `border-radius` like property to gap decorations
+to allow for more flexible styling near intersections. We could also potentially
+reuse concepts from `corner-shape` for even more flexibility. This idea is tracked
+in [CSSWG Issue 12150](https://github.com/w3c/csswg-drafts/issues/12150).
+
+### Propagation of gap decorations into subgrids
+
+CSS Grid Level 2 defines the
+[subgrid](https://www.w3.org/TR/css-grid-2/#subgrids) feature. A subgrid matches
+up its grid lines to lines in the parent grid. Accordingly, gaps will also align
+between a subgrid and its parent grid, though the sizes of these gaps may
+differ. There may be use cases for propagating gap decorations from the parent
+grid into corresponding gaps in the subgrid; we could perhaps do this with a
+special keyword on the `*-rule-width`, `*-rule-style`, and `*-rule-color`
+properties. See [CSSWG Issue
+12326](https://github.com/w3c/csswg-drafts/issues/12326) for further discussion.
+
+### Extensions to decoration visibility controls
+
+Design discussions for `*-rule-visibility-items` also considered companion
+`*-rule-visibility-self` properties which would allow the container-wide value to
+be overridden on specific items. For example, an author who wants to draw 
+decorations only around a specific item in the container might set
+`rule-visibility-items: none` on the container, and
+`rule-visibility-self: around` on the specific item that they want to draw around.
+
+`start-side` and `end-side` have also been suggested as additional values for both
+`*-rule-visibility-items` and `*-rule-visibility-self`, to draw decorations only 
+on one side or the other of items.
+
+### Placement of gap decorations
+
+An author may want to apply different sets of gap decorations to different
+regions of a given container layout. We refer to such regions as a *gap
+decoration areas*. The examples below illustrate how these might work on a grid
+container; gap decoration areas on other container types have not yet been
+explored.
+
+The author defines these areas using the `rule-areas` property. Each area is
+defined by giving it first a name, then a tuple of numbers or line names which
+work exactly as they would in the `grid-area` property:
+
+```css
+  rule-areas: --first-row 1 / 1 / 2 / -1, --first-column 1 / 1 / -1 / 2;
+```
+
+On a grid container, the above value of `rule-areas` would define an area named
+`--first-row` that includes the grid lines within and around the first row (row
+line 1, column line 1 to row line 2, column line -1) and an area named
+`--first-column` that includes the grid lines within and around the first column
+(row line 1, column line 1 to row line -1, column line 2). These areas are
+inclusive of the grid lines on their edges.
+
+Then, on other gap decoration properties such as `*-rule-width`, `*-rule-style`,
+and `*-rule-color`, the author can then specify first a "default" set of values
+for the container, then a named area, then a set of values that applies to that
+area, and so on:
+
+```css
+  rule: 1px solid black, 1px solid gray [--first-row] 3px solid black, 5px solid black [--first-column] 1px solid blue;
+```
+
+Cycling behavior applies in named areas the same as it does elsewhere, and where
+multiple values would cover the same segment of a gap, the last one that applies
+will "win". Thus, the value above would apply alternating 1px solid black and
+1px solid gray rules to the grid in general, then override gaps in the first row
+with alternating 3px solid black and 5px solid black rules, then on top of that
+override gaps in the first column with 1px solid blue rules.
+
+#### Scenario: Periodic Table omitting decorations from certain areas
+
+https://github.com/w3c/csswg-drafts/issues/12024#issuecomment-3086244002
+
+```css
+.container {
+  display: grid;
+  grid-template: repeat(4, 280px) / repeat(8, auto);
+  gap: 20px;
+  rule-areas: --top-center 1 / 4 / 2 / 6, --bottom-left -2 / 1 / -1 / 2, --bottom-right -2 / -1 / -1 / -1;
+  column-rule: 18px solid red [--top-center] none [--bottom-left] none [--bottom-right] none;
+}
+```
+
+![](images/csswg-drafts-issue-12024-issuecomment-3086244002-first-example.png)
+
+## Dropped ideas
+
+### Logical properties
+
+*This idea was dropped based on feedback raised in the [initial proposal discussion](https://github.com/w3c/csswg-drafts/issues/10393).*
+
+These are designed to enable scenarios where authors wish to switch, for example,
+`flex-direction` based on space constraints or other factors.
+
+| Property         | row or row-reverse direction | column or column-reverse direction |
+|------------------|------------------------------|------------------------------------|
+| main-rule-width  | row-rule-width               | column-rule-width                  |
+| main-rule-style  | row-rule-style               | column-rule-style                  |
+| main-rule-color  | row-rule-color               | column-rule-color                  |
+| main-rule        | row-rule                     | column-rule                        |
+| cross-rule-width | column-rule-width            | row-rule-width                     |
+| cross-rule-style | column-rule-style            | row-rule-style                     |
+| cross-rule-color | column-rule-color            | row-rule-color                     |
+| cross-rule       | column-rule                  | row-rule                           |
+
+And so on for other properties.
+
+For flex containers, the logical properties map based on
+`flex-direction` following the convention above.
+
+For grid containers, `main` maps to `row`, and `cross` maps to `column`.
+
+For multi-column containers, `main` maps to `column`, and `cross` maps to `row`.
+
+## Considered alternatives
+
+### Alternative 1: 2021 draft specification
+
+In 2021, Mats Palmgren from Mozilla posted a [draft
+specification](https://matspalmgren.github.io/css-gap-decorations/Overview.html)
+for gap decorations. We believe the proposal in this explainer improves on
+developer ergonomics by (a) reusing concepts from grid layout such as repeat and
+grid lines, and (b) simplifying the model for fine-tuning segment placement. We
+also believe the proposal in this explainer offers developers more flexibility
+even absent support for gap decoration images; see Scenario 3 for one example.
+
+### Alternative 2: Using pseudo-elements
+
+An alternative approach to `column-rule-*` and `row-rule-*` properties would be
+to introduce pseudo-elements representing gaps, for example:
+
+```css
+.container {
+  display: grid;
+  grid-template: auto / auto;
+  gap: 5px;
+}
+.container::column-gaps {
+  background: red;
+  width: 1px;
+}
+.container::row-gaps {
+  background: blue;
+  width: 1px;
+}
+```
+
+In some ways, this would be more powerful, as it would allow for more
+flexibility for what can be placed in the gaps.
+
+However, this approach also comes with drawbacks. Varying gap decorations over a
+container becomes much harder. One might imagine a `::row-gaps::nth(even)`
+pseudo selector to style every other row gap. However, certain container types
+such as grid can automatically generate rows and columns depending on their
+contents. That means we don't know until layout time how many such pseudo styles
+we need to produce, which creates a wrong-way dependency between layout and
+style. It would also mean that, for large containers, we would incur the costs
+of calculating and storing styles for every single gap. That would be a large
+overhead to absorb, especially considering that the more common case is to have
+at most a single decoration style for a given container.
+
+## References & acknowledgements
+
+Many thanks for valuable feedback and advice from:
+
+- @alico-cra
+- Ahmad Shadeed
+- Alison Maher
+- Benoît Rouleau
+- Elika Etemad
+- Ian Kilpatrick
+- Josh Tumath
+- Kurt Catti-Schmidt
+- Lea Verou
+- Oliver Williams
+- Rachel Andrew
+- Sam Davis Omekara Jr.
+- Sebastian Zartner
+- Tab Atkins-Bittner
diff --git a/css-gaps-1/images/calendar-codepen.png b/css-gaps-1/images/calendar-codepen.png
new file mode 100644
index 000000000000..f5c4167279f1
Binary files /dev/null and b/css-gaps-1/images/calendar-codepen.png differ
diff --git a/css-gaps-1/images/csswg-drafts-issue-12024-issuecomment-3086244002-first-example.png b/css-gaps-1/images/csswg-drafts-issue-12024-issuecomment-3086244002-first-example.png
new file mode 100644
index 000000000000..6c7bd49a2aaa
Binary files /dev/null and b/css-gaps-1/images/csswg-drafts-issue-12024-issuecomment-3086244002-first-example.png differ
diff --git a/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-1765376966-1.png b/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-1765376966-1.png
new file mode 100644
index 000000000000..fa12b32a0ae7
Binary files /dev/null and b/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-1765376966-1.png differ
diff --git a/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-1765376966-2.png b/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-1765376966-2.png
new file mode 100644
index 000000000000..c31455b00296
Binary files /dev/null and b/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-1765376966-2.png differ
diff --git a/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-446379068.png b/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-446379068.png
new file mode 100644
index 000000000000..8e4c215ae4f0
Binary files /dev/null and b/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-446379068.png differ
diff --git a/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-446781218-last-example.png b/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-446781218-last-example.png
new file mode 100644
index 000000000000..8b02a8e393f0
Binary files /dev/null and b/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-446781218-last-example.png differ
diff --git a/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-446781218-third-example.png b/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-446781218-third-example.png
new file mode 100644
index 000000000000..01c816a9e56c
Binary files /dev/null and b/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-446781218-third-example.png differ
diff --git a/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-595663212.png b/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-595663212.png
new file mode 100644
index 000000000000..e99ba0ed7e17
Binary files /dev/null and b/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-595663212.png differ
diff --git a/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-621983931-first-example.png b/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-621983931-first-example.png
new file mode 100644
index 000000000000..515fff39a341
Binary files /dev/null and b/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-621983931-first-example.png differ
diff --git a/css-gaps-1/images/example-1-overlap-join.png b/css-gaps-1/images/example-1-overlap-join.png
new file mode 100644
index 000000000000..2b0f5bc343d3
Binary files /dev/null and b/css-gaps-1/images/example-1-overlap-join.png differ
diff --git a/css-gaps-1/images/example-2-overlap-join.png b/css-gaps-1/images/example-2-overlap-join.png
new file mode 100644
index 000000000000..94a4efe499e2
Binary files /dev/null and b/css-gaps-1/images/example-2-overlap-join.png differ
diff --git a/css-gaps-1/images/example-break-intersection.png b/css-gaps-1/images/example-break-intersection.png
new file mode 100644
index 000000000000..e16c55ef1a0c
Binary files /dev/null and b/css-gaps-1/images/example-break-intersection.png differ
diff --git a/css-gaps-1/images/example-break-none.png b/css-gaps-1/images/example-break-none.png
new file mode 100644
index 000000000000..09d692a6a17a
Binary files /dev/null and b/css-gaps-1/images/example-break-none.png differ
diff --git a/css-gaps-1/images/example-break-normal.png b/css-gaps-1/images/example-break-normal.png
new file mode 100644
index 000000000000..b4f8b840c99a
Binary files /dev/null and b/css-gaps-1/images/example-break-normal.png differ
diff --git a/css-gaps-1/images/example-cap-junct-donut-grid.png b/css-gaps-1/images/example-cap-junct-donut-grid.png
new file mode 100644
index 000000000000..1a3aa258a138
Binary files /dev/null and b/css-gaps-1/images/example-cap-junct-donut-grid.png differ
diff --git a/css-gaps-1/images/example-cap-junct-less-simple-grid.png b/css-gaps-1/images/example-cap-junct-less-simple-grid.png
new file mode 100644
index 000000000000..2e67d2cecf94
Binary files /dev/null and b/css-gaps-1/images/example-cap-junct-less-simple-grid.png differ
diff --git a/css-gaps-1/images/example-cap-junct-simple-grid.png b/css-gaps-1/images/example-cap-junct-simple-grid.png
new file mode 100644
index 000000000000..3d4daa7704b4
Binary files /dev/null and b/css-gaps-1/images/example-cap-junct-simple-grid.png differ
diff --git a/css-gaps-1/images/example-column-inset-5px.png b/css-gaps-1/images/example-column-inset-5px.png
index ee3cd4d5e0b8..07b8a2c928de 100644
Binary files a/css-gaps-1/images/example-column-inset-5px.png and b/css-gaps-1/images/example-column-inset-5px.png differ
diff --git a/css-gaps-1/images/example-column-inset-junction-5px.png b/css-gaps-1/images/example-column-inset-junction-5px.png
new file mode 100644
index 000000000000..f1545190302f
Binary files /dev/null and b/css-gaps-1/images/example-column-inset-junction-5px.png differ
diff --git a/css-gaps-1/images/example-column-inset-minus-5px.png b/css-gaps-1/images/example-column-inset-minus-5px.png
index 07b8a2c928de..ee3cd4d5e0b8 100644
Binary files a/css-gaps-1/images/example-column-inset-minus-5px.png and b/css-gaps-1/images/example-column-inset-minus-5px.png differ
diff --git a/css-gaps-1/images/example-column-inset-start-end.png b/css-gaps-1/images/example-column-inset-start-end.png
new file mode 100644
index 000000000000..3407d578b0e3
Binary files /dev/null and b/css-gaps-1/images/example-column-inset-start-end.png differ
diff --git a/css-gaps-1/images/example-column-interior-inset-5px.png b/css-gaps-1/images/example-column-interior-inset-5px.png
deleted file mode 100644
index 60b7e26ea213..000000000000
Binary files a/css-gaps-1/images/example-column-interior-inset-5px.png and /dev/null differ
diff --git a/css-gaps-1/images/example-column-start-end-edge-interior-insets.png b/css-gaps-1/images/example-column-start-end-edge-interior-insets.png
deleted file mode 100644
index eb919c79dea5..000000000000
Binary files a/css-gaps-1/images/example-column-start-end-edge-interior-insets.png and /dev/null differ
diff --git a/css-gaps-1/images/example-heavy-light.png b/css-gaps-1/images/example-heavy-light.png
new file mode 100644
index 000000000000..6b5ee175d788
Binary files /dev/null and b/css-gaps-1/images/example-heavy-light.png differ
diff --git a/css-gaps-1/images/example-inset-direction.png b/css-gaps-1/images/example-inset-direction.png
new file mode 100644
index 000000000000..fa2a94663f43
Binary files /dev/null and b/css-gaps-1/images/example-inset-direction.png differ
diff --git a/css-gaps-1/images/example-red-blue.png b/css-gaps-1/images/example-red-blue.png
new file mode 100644
index 000000000000..eca9c0ab7c85
Binary files /dev/null and b/css-gaps-1/images/example-red-blue.png differ
diff --git a/css-gaps-1/images/example-rule-visibility-items-all.png b/css-gaps-1/images/example-rule-visibility-items-all.png
new file mode 100644
index 000000000000..a7206a775a2e
Binary files /dev/null and b/css-gaps-1/images/example-rule-visibility-items-all.png differ
diff --git a/css-gaps-1/images/example-rule-visibility-items-around.png b/css-gaps-1/images/example-rule-visibility-items-around.png
new file mode 100644
index 000000000000..4e66bec66c75
Binary files /dev/null and b/css-gaps-1/images/example-rule-visibility-items-around.png differ
diff --git a/css-gaps-1/images/example-rule-visibility-items-between.png b/css-gaps-1/images/example-rule-visibility-items-between.png
new file mode 100644
index 000000000000..def736d60473
Binary files /dev/null and b/css-gaps-1/images/example-rule-visibility-items-between.png differ
diff --git a/css-gaps-1/images/example-rule-visibility-items-independent.png b/css-gaps-1/images/example-rule-visibility-items-independent.png
new file mode 100644
index 000000000000..a3d709a575da
Binary files /dev/null and b/css-gaps-1/images/example-rule-visibility-items-independent.png differ
diff --git a/css-gaps-1/images/example-segment-inset-0px.png b/css-gaps-1/images/example-segment-inset-0px.png
new file mode 100644
index 000000000000..0a0f06b9d441
Binary files /dev/null and b/css-gaps-1/images/example-segment-inset-0px.png differ
diff --git a/css-gaps-1/images/example-segment-inset-minus-5px.png b/css-gaps-1/images/example-segment-inset-minus-5px.png
new file mode 100644
index 000000000000..52ead55e1689
Binary files /dev/null and b/css-gaps-1/images/example-segment-inset-minus-5px.png differ
diff --git a/css-gaps-1/images/example-segment-inset-plus-5px.png b/css-gaps-1/images/example-segment-inset-plus-5px.png
new file mode 100644
index 000000000000..bb47fb01c8b7
Binary files /dev/null and b/css-gaps-1/images/example-segment-inset-plus-5px.png differ
diff --git a/css-gaps-1/images/example-varying-widths.png b/css-gaps-1/images/example-varying-widths.png
new file mode 100644
index 000000000000..f0204c24c383
Binary files /dev/null and b/css-gaps-1/images/example-varying-widths.png differ
diff --git a/css-gaps-1/images/example-vis-rules-around-int.png b/css-gaps-1/images/example-vis-rules-around-int.png
deleted file mode 100644
index 645fdd1c2271..000000000000
Binary files a/css-gaps-1/images/example-vis-rules-around-int.png and /dev/null differ
diff --git a/css-gaps-1/images/example-vis-rules-around-spn.png b/css-gaps-1/images/example-vis-rules-around-spn.png
deleted file mode 100644
index 3888f0987fa8..000000000000
Binary files a/css-gaps-1/images/example-vis-rules-around-spn.png and /dev/null differ
diff --git a/css-gaps-1/images/example-vis-rules-btwn-int.png b/css-gaps-1/images/example-vis-rules-btwn-int.png
deleted file mode 100644
index 556b537c3653..000000000000
Binary files a/css-gaps-1/images/example-vis-rules-btwn-int.png and /dev/null differ
diff --git a/css-gaps-1/images/example-visibility-all-normal.png b/css-gaps-1/images/example-visibility-all-normal.png
new file mode 100644
index 000000000000..267098209c42
Binary files /dev/null and b/css-gaps-1/images/example-visibility-all-normal.png differ
diff --git a/css-gaps-1/images/example-visibility-around-normal.png b/css-gaps-1/images/example-visibility-around-normal.png
new file mode 100644
index 000000000000..42cf1693c419
Binary files /dev/null and b/css-gaps-1/images/example-visibility-around-normal.png differ
diff --git a/css-gaps-1/images/example-visibility-between-normal.png b/css-gaps-1/images/example-visibility-between-normal.png
new file mode 100644
index 000000000000..5b6e1aa2cd40
Binary files /dev/null and b/css-gaps-1/images/example-visibility-between-normal.png differ
diff --git a/css-gaps-1/images/explainer-issue-1099.png b/css-gaps-1/images/explainer-issue-1099.png
new file mode 100644
index 000000000000..7e09d4d5c5a3
Binary files /dev/null and b/css-gaps-1/images/explainer-issue-1099.png differ
diff --git a/css-gaps-1/images/explainer-issue-1100.png b/css-gaps-1/images/explainer-issue-1100.png
new file mode 100644
index 000000000000..10d8dea1948c
Binary files /dev/null and b/css-gaps-1/images/explainer-issue-1100.png differ
diff --git a/css-gaps-1/images/explainer-issue-1161.png b/css-gaps-1/images/explainer-issue-1161.png
new file mode 100644
index 000000000000..5208675e7f62
Binary files /dev/null and b/css-gaps-1/images/explainer-issue-1161.png differ
diff --git a/css-align-3/images/gutters-gaps.svg b/css-gaps-1/images/gutters-gaps.svg
similarity index 100%
rename from css-align-3/images/gutters-gaps.svg
rename to css-gaps-1/images/gutters-gaps.svg
diff --git a/css-gaps-1/security-privacy-questionnaire.md b/css-gaps-1/security-privacy-questionnaire.md
new file mode 100644
index 000000000000..26029d54a9af
--- /dev/null
+++ b/css-gaps-1/security-privacy-questionnaire.md
@@ -0,0 +1,76 @@
+# Security and Privacy Questionnaire for CSS Gap Decorations
+
+https://www.w3.org/TR/security-privacy-questionnaire/#questions
+
+## 2.1 What information might this feature expose to Web sites or other parties, and for what purposes is that exposure necessary?
+
+This feature does not expose any new information to Web sites or other parties.
+
+## 2.2 Do features in your specification expose the minimum amount of information necessary to enable their intended uses?
+
+Yes (none).
+
+## 2.3 How do the features in your specification deal with personal information, personally-identifiable information (PII), or information derived from them?
+
+No handling of personal information, PII, or information derived from them.
+
+## 2.4 How do the features in your specification deal with sensitive information?
+
+No handling of sensitive information.
+
+## 2.5 Do the features in your specification introduce new state for an origin that persists across browsing sessions?
+
+No.
+
+## 2.6 Do the features in your specification expose information about the underlying platform to origins?
+
+No.
+
+## 2.7 Does this specification allow an origin to send data to the underlying platform?
+
+No.
+
+## 2.8 Do features in this specification enable access to device sensors?
+
+No.
+
+## 2.9 Do features in this specification enable new script execution/loading mechanisms?
+
+No.
+
+## 2.10 Do features in this specification allow an origin to access other devices?
+
+No.
+
+## 2.11 Do features in this specification allow an origin some measure of control over a user agent’s native UI?
+
+No.
+
+## 2.12 What temporary identifiers do the features in this specification create or expose to the web?
+
+None.
+
+## 2.13 How does this specification distinguish between behavior in first-party and third-party contexts?
+
+No distinction; no special considerations for use of the feature by third-party resources.
+
+## 2.14 How do the features in this specification work in the context of a browser’s Private Browsing or Incognito mode?
+
+No change to behavior in Private Browsing or Incognito modes.
+No features of the specification that would allow for correlation of a single user's activity across normal and private browsing / incognito modes.
+
+## 2.15 Does this specification have both "Security Considerations" and "Privacy Considerations" sections?
+
+Yes.
+
+## 2.16 Do features in your specification enable origins to downgrade default security protections?
+
+No.
+
+## 2.17 How does your feature handle non-"fully active" documents?
+
+Gap decorations are purely a painted effect and should be handled no differently from existing painted effects such as backgrounds and borders.
+
+## 2.18 What should this questionnaire have asked?
+
+No special considerations for this feature.
diff --git a/css-gcpm-3/Overview.bs b/css-gcpm-3/Overview.bs
index 64663fe97bc2..4351045089b7 100644
--- a/css-gcpm-3/Overview.bs
+++ b/css-gcpm-3/Overview.bs
@@ -721,7 +721,7 @@ Page Selectors
 The '':nth()'' page pseudo-class allows the selection of arbitrary document pages. This pseudo-class takes an argument of the form An + B as defined in [[CSS3SYN]]. When applied to the default @page rule, '':nth()'' selects the document page whose index matches the argument.
 
 
      -:nth() = :nth( <> [of <>]? )
+:nth() = :nth( <> [of <>]? )
 
      
diff --git a/css-grid-1/Overview.bs b/css-grid-1/Overview.bs
index 9ad93f19e805..ce44ccbdeb8a 100644
--- a/css-grid-1/Overview.bs
+++ b/css-grid-1/Overview.bs
@@ -3730,36 +3730,41 @@ Aligning the Grid: the 'justify-content' and 'align-content' properties
 
      
 Grid Container Baselines
      
 
-	The first (last) baselines of a grid container
-	are determined as follows:
+	The first [=baseline set=] of a [=grid container=]
+	is taken from the first available of:
 
-	
        
-		
      1. 
-			Find the first (last) row of the [=grid container=]
-			containing at least one [=grid item=].
+	1.  If any [=grid items=] intersecting the first ([=block-start=]–most) non-empty [=track=]
+		participate in first [=baseline alignment=] along the relevant axis,
+		generate a [=baseline set=] from their shared [=alignment baseline=]
+		and the [=grid container=]’s [=first available font=],
+		after alignment has been performed.
 
-			If any of the [=grid items=] intersecting this row
-			participate in [=baseline alignment=] in that row,
-			the grid container's baseline set
-			is generated from
-			the shared alignment baseline of those grid items.
+	2.  Otherwise, if any [=grid items=] intersecting that track participate in
+		last [=baseline alignment=] along the relevant axis,
+		generate from that [=alignment baseline=].
 
-			Otherwise,
-			the grid container's first (last) baseline set
-			is generated from
-			the alignment baseline of the first (last) grid item
-			in row-major grid order (according to the writing mode of the grid container).
-			If the [=grid item=] has no alignment baseline in the grid's inline axis,
-			then one is first synthesized
-			from its border edges.
+	3.  Otherwise, if any [=grid items=] intersecting that track
+		have a [=baseline set=] in the relevant axis at all,
+		take the [=baseline set=] from the first such [=grid item=]
+		in [=grid order=].
 
-		
      2. 
-			If the [=grid container=] does not contain any [=grid items=],
-			the grid container has no first (last) baseline set,
-			and one is synthesized if needed
-			according to the rules of its alignment context.
-			Exit from this algorithm.
-	
      
+	4. Otherwise, if there are any [=grid items=] at all,
+		synthesize a [=baseline set=]
+		from the first [=grid item=] in [=grid order=].
+
+	5. Otherwise, the [=grid container=] has no first baseline set in the relevant axis.
+		(One is synthesized
+		from the [=grid container=] itself if needed,
+		according to the rules of its alignment context.)
+
+	For this purpose,
+	any [=grid item=] that spans multiple tracks
+	is ignored if it’s span does not start in the indicated track;
+	except that for step 2,
+	it's ignored if its span does not end in the track.
+
+	Last baselines are analogous
+	(with “first”/“last” and “start”/“end” inverted).
 
 	Grid-modified document order (grid order)
 	is the order in which grid items are encountered
diff --git a/css-grid-2/Overview.bs b/css-grid-2/Overview.bs
index 7882bcfea94b..82955f59b801 100644
--- a/css-grid-2/Overview.bs
+++ b/css-grid-2/Overview.bs
@@ -4289,36 +4289,40 @@ Aligning the Grid: the 'justify-content' and 'align-content' properties
      
 Grid Container Baselines
      
 
-	The first (last) baselines of a grid container
-	are determined as follows:
+	The first [=baseline set=] of a [=grid container=]
+	is taken from the first available of:
 
-	
        
-		
      1. 
-			Find the first (last) row of the [=grid container=]
-			containing at least one [=grid item=].
+	1.  If any [=grid items=] intersecting the first ([=block-start=]–most) non-empty [=track=]
+		participate in first [=baseline alignment=] along the relevant axis,
+		generate a [=baseline set=] from their shared [=alignment baseline=]
+		and the [=grid container=]’s [=first available font=],
+		after alignment has been performed.
 
-			If any of the [=grid items=] intersecting this row
-			participate in [=baseline alignment=] in that row,
-			the grid container's baseline set
-			is generated from
-			the shared alignment baseline of those grid items.
+	2.  Otherwise, if any [=grid items=] intersecting that track participate in
+		last [=baseline alignment=] along the relevant axis,
+		generate from that [=alignment baseline=].
 
-			Otherwise,
-			the grid container's first (last) baseline set
-			is generated from
-			the alignment baseline of the first (last) grid item
-			in row-major grid order (according to the writing mode of the grid container).
-			If the [=grid item=] has no alignment baseline in the grid's inline axis,
-			then one is first synthesized
-			from its border edges.
+	3.  Otherwise, if any [=grid items=] intersecting that track
+		have a [=baseline set=] in the relevant axis at all,
+		take the [=baseline set=] from the first such [=grid item=] in [=grid order=].
 
-		
      2. 
-			If the [=grid container=] does not contain any [=grid items=],
-			the grid container has no first (last) baseline set,
-			and one is synthesized if needed
-			according to the rules of its alignment context.
-			Exit from this algorithm.
-	
      
+	4. Otherwise, if there are any [=grid items=] at all,
+		synthesize a [=baseline set=]
+		from the first [=grid item=] in [=grid order=].
+
+	5. Otherwise, the [=grid container=] has no first baseline set in the relevant axis.
+		(One is synthesized
+		from the [=grid container=] itself if needed,
+		according to the rules of its alignment context.)
+
+	For this purpose,
+	any [=grid item=] that spans multiple tracks
+	is ignored if it’s span does not start in the indicated track;
+	except that for step 2,
+	it's ignored if its span does not end in the track.
+
+	Last baselines are analogous
+	(with “first”/“last” and “start”/“end” inverted).
 
 	Grid-modified document order (grid order)
 	is the order in which grid items are encountered
diff --git a/css-grid-3/Overview.bs b/css-grid-3/Overview.bs
index f0631b04f340..300a50be4d3a 100644
--- a/css-grid-3/Overview.bs
+++ b/css-grid-3/Overview.bs
@@ -789,7 +789,7 @@ Placement Precision: the 'flow-tolerance' property
       	Name: flow-tolerance
-	Value: normal | <> | infinite
+	Value: normal | <> | infinite
 	Initial: normal
 	Percentages: relative to the [=grid-axis=] [=content box=] size of the [=grid lanes container=]
 	Inherited: no
diff --git a/css-image-animation-1/Overview.bs b/css-image-animation-1/Overview.bs
index cdfc98a163d3..7d0cf6d9d1ed 100644
--- a/css-image-animation-1/Overview.bs
+++ b/css-image-animation-1/Overview.bs
@@ -1,11 +1,13 @@
 
      -Title: CSS Image Animation
+Title: CSS Image Animation Module Level 1
 Shortname: css-image-animation
 Level: 1
 group: csswg
 Status: ED
+Prepare for TR: no
 Work Status: exploring
 ED: https://drafts.csswg.org/css-image-animation-1/
+TR: https://www.w3.org/TR/css-image-animation-1/
 Previous Version: https://webplatform.design/projects/image-animation/image-animation-property/spec/overview
 Editor: Florian Rivoal, http://florian.rivoal.net, w3cid 43241
 Complain About: accidental-2119 yes, missing-example-ids yes
@@ -13,6 +15,9 @@ Infer CSS Dfns: yes
 Markup Shorthands: markdown yes, css yes
 Abstract: This CSS module proposes facilities to control the rendering of animated images.
 
      
+
      +	spec:html; type:element; text:body
+
      
 
       {
 	"IMAGE-ANIMATION-EXPLAINER": {
@@ -20,7 +25,7 @@ Abstract: This CSS module proposes facilities to control the rendering of animat
 		  "Florian Rivoal",
 		  "Lea Verou"
 		],
-		"href": "https://github.com/webplatformco/project-image-animation/blob/main/image-animation-property/README.md",
+		"href": "https://drafts.csswg.org/css-image-animation-1/explainer",
 		"title": "CSS Image Animation Explainer"
 	  },
 	"IMAGE-ANIMATION-TALK": {
@@ -55,7 +60,7 @@ Introduction {#intro}
 	websites need to control the playback experience,
 	separately for each different uses of animated images.
 
-	This specification proposes a CSS property ('image animation')
+	This specification proposes a CSS property ('image-animation')
 	and a pseudo-class ('':animated-image'')
 	to enable authors to control animations,
 	and to target this control and any UI they wish to associate with it
@@ -79,7 +84,7 @@ Controlling Image Animations: the 'image-animation' property {#image-animation}
 
 	
       	Name: image-animation
-	Value: normal | paused | running
+	Value: normal | paused | stopped | running
 	Initial: normal
 	Applies to: [=content images=] and elements with [=decorative images=]
 	Inherited: yes
@@ -105,6 +110,16 @@ Controlling Image Animations: the 'image-animation' property {#image-animation}
 	the different values of this property have no effect.
 	This property does not affect [=videos=] nor [=programmatic images=] either.
 
+	When this property is applied to the [=root element=],
+	its effects on background [=decorative images=] are propagated to the [=canvas background=].
+
+	Note: For legacy reasons,
+	the 'background' property propagates not only from the [=root element=],
+	but also from the HTML <{body}> element.
+	However, newer properties like 'image-animation' only propagate from the [=root element=].
+	Setting it on the <{body}> will not propagate,
+	even if that is where the 'background' is set.
+
 	
      
 		
      normal
 		
      
@@ -123,16 +138,32 @@ Controlling Image Animations: the 'image-animation' property {#image-animation}
 			and therefore does not normatively require the above behavior.
 			This specification does.
 
-		
      paused
+		
      stopped
 		
      
 			[=Animated images=] are rendered as if they were [=static images=]:
 			the user agent must not run any animation it contains.
+			If the image contains a [=cover frame=],
+			that is what the user agent must use;
+			otherwise, it must display the image
+			as it would be in the initial state of the animation.
+
+		
      paused
+		
      
+			The user agent must not run the animation
+			contained in the [=Animated images=],
+			and must continue to display the image
+			as it was when this value started to apply,
+			effectively pausing the animation.
+
+			If the animation had not been playing
+			prior to this value being applied,
+			the behavior is the same as ''stopped''.
 
 		
      running
 		
      
 			Like ''normal'',
 			the animation of [=animated images=] is run normally,
-			as determined by the image format and the host language,
+			as determined by the image format and the host language.
 
 			However,
 			animation timelines are scoped per element:
@@ -141,8 +172,19 @@ Controlling Image Animations: the 'image-animation' property {#image-animation}
 			the same image data,
 			and with an 'image-animation' computed value of ''running''
 			must be rendered synchronized to the same timeline as a group,
-			distinct from the timeline of images in other elements,
-			with the timeline starting at the time of the least recent addition to the group.
+			distinct from the timeline of images in other elements.
+
+			If images are added to the element while the computed value is ''running'',
+			the timeline starts at the time of the least recent addition to the group.
+
+			If the element is created or made visible after having previously been set to ''display: none'',
+			with images already added and with 'image-animation' already set to ''running'',
+			the timeline starts when the element is included in the layout.
+
+			If this property is switched to ''running'' from another value,
+			the beginnig of this timeline is set
+			so that the animation continues from the state that was displayed
+			at the timem of the switch.
 	
      
 
 	
      
@@ -313,6 +355,10 @@ Terminology {#terminology}
 			or the <{image}> [[SVG2]] element
 			represent [=content images=].
 
+			When it represents its poster frame (and only then),
+			the HTML <{video}> element
+			is considered a [=content image=].
+
 		
      decorative image
 		
      
 			An image inserted into the document rendering by CSS,
@@ -350,13 +396,16 @@ Terminology {#terminology}
 
 			
      
 			The <{canvas}> [[HTML]] element represents a [=programmatic image=].
-	
 
-	Issue: Should the <{video}> element
-	when it represents its poster frame
-	be treated as a [=content image=],
-	a [=decorative image=],
-	or as (a state of) a [=video=] and not an image at all?
+		
      cover frame
+		
      
+			Some [=animated image=] formats make it possible
+			for the creator of the image
+			to specify a [=static image=],
+			referred to in this document as the [=cover frame=],
+			to display when the animation is not running,
+			distinctly from the initial state of the animation.
+	
 
 
 Accessibility Considerations {#a11y}
@@ -466,3 +515,13 @@ Security Considerations {#sec}
 
 	This specification is not known to introduce any new security issue.
 
      
+
+Changes {#changes}
+==================
+
+Since the First 
+	Public Working Draft of 9 April 2026
+
+
        
+	
      • none
        • 
+
      
diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
index 06c9dac4b30b..632e9fd495ac 100644
--- a/css-images-4/Overview.bs
+++ b/css-images-4/Overview.bs
@@ -379,193 +379,34 @@ Resolution/Type Negotiation: the ''image-set()'' notation {#image-set-notation}
 Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 ---------------------------------------------------------------------------
 
-	The ''image()'' function allows an author to:
-
-	* use media fragments to clip out a portion of an image
-	* use a solid color as an image
-	* fallback to a solid-color image, when the image at the specified url can't be downloaded or decoded
-	* automatically respect the image orientation specified in the image's metadata
-
-	The ''image()'' notation is defined as:
+	The ''image()'' function allows an author
+	to easily generate a solid-color image from any color.
+	Its syntax is:
 
 	
      -		image() = image( <>? [ <>? , <>? ]! )
-		<image-tags> = [ ltr | rtl ]
-		<image-src> = [ <> | <> ]
+		image() = image( <> )
 	
      
 
-	A <> used in ''image()'' represents a <>.
-	As usual for URLs in CSS,
-	relative URLs are resolved to an absolute URL
-	(as described in Values & Units [[!CSS-VALUES-3]])
-	when a specified ''image()'' value is computed.
-
-	If the image has an orientation specified in its metadata,
-	such as EXIF,
-	the UA must rotate or flip the image to correctly orient it
-	as the metadata specifies.
-
-### Image Fallbacks ### {#image-fallbacks}
-
-	If both a URL and a <> are specified in ''image()'',
-	then whenever the URL represents an [=invalid image=] or [=loading image=],
-	the ''image()'' function renders as if the URL were not specified at all;
-	it generates a solid-color image as specified in [[#color-images]].
-
-	If just a URL is specified (no <>)
-	and it represents an [=invalid image=] or [=loading image=],
-	the ''image()'' function represents the same.
-
-	
-		css-image-fallbacks-and-annotations.html
-		css-image-fallbacks-and-annotations002.html
-		css-image-fallbacks-and-annotations003.html
-		css-image-fallbacks-and-annotations004.html
-		css-image-fallbacks-and-annotations005.html
-	
-
-	
      
-		The fallback color can be used to ensure that text is still readable
-		even when the image fails to load.
-		For example, the following legacy code works fine if the image is rectangular and has no transparency:
-
-		
      -			body      { color: black; background: white; }
-			p.special { color: white; background: url("dark.png") black; }
-		
      
-
-		When the image doesn't load,
-		the background color is still there to ensure that the white text is readable.
-		However, if the image has some transparency,
-		the black will be visible behind it,
-		which is probably not desired.
-		The ''image()'' function addresses this:
-
-		
      -			body      { color: black; background: white; }
-			p.special { color: white; background: image("dark.png", black); }
-		
      
-
-		Now, the black won't show at all if the image loads,
-		but if for whatever reason the image fails,
-		it'll pop in and prevent the white text from being set against a white background.
-	
      
-
-
-
-### Image Fragments ### {#image-fragments}
-
-	When a URL specified in ''image()'' represents a portion of a resource
-	(e.g. by the use of media fragment identifiers)
-	that portion is clipped out of its context and used as a standalone image.
-
-	
      
-		For example, given the following image and CSS:
-
-		
-			[9 circles, with 0 to 8 eighths filled in]
-		
-
-		
      background-image: image('sprites.svg#xywh=40,0,20,20')
      
-
-		...the background of the element will be the portion of the image that starts at (40px,0px) and is 20px wide and tall,
-		which is just the circle with a quarter filled in.
-	
      
-
-	So that authors can take advantage of CSS's forwards-compatible parsing rules to provide a fallback for image slices,
-	implementations that support the ''image()'' notation
-	must support the xywh=#,#,#,# form of media fragment identifiers
-	for images specified via ''image()''. [[!MEDIA-FRAGS]]
-
-	
      
-		Note that image fragments can also be used with the ''url()'' notation.
-		However, a legacy UA that doesn't understand the media fragments notation
-		will ignore the fragment and simply display the entirety of the image.
-
-		Since the ''image()'' notation requires UAs to support media fragments,
-		authors can take advantage of CSS's forward-compatible parsing rules
-		to provide a fallback when using an image fragment URL:
-
-		
      -			background-image: url('swirl.png'); /* old UAs */
-			background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */
-		
      
-	
      
-
-	If a URL uses a fragment identifier syntax that the implementation does not understand,
-	or does not consider valid for that type of image,
-	the URL must be treated as representing an invalid image.
-
-	Note: This error-handling is limited to ''image()'',
-	and not in the definition of URL,
-	for legacy compat reasons.
-
-
-### Solid-color Images ### {#color-images}
-
-	If the ''image()'' function is specified with only a <> argument (no URL),
-	it represents a solid-color image of the specified color with no [=natural dimensions=].
+	The ''image()'' function represents a solid-color image of the specified color
+	with no [=natural dimensions=].
 
 	
      
 		For example,
 		one can use this as a simple way to "tint" a background image,
 		by overlaying a partially-transparent color over the top of the other image:
 
-		
      background-image: image(rgba(0,0,255,.5)), url("bg-image.png");
      
+		
      background-image: image(rgba(0, 0, 255, .5)), url("bg-image.png");
      
 
-		'background-color' does not work for this,
-		as the solid color it generates always lies beneath all the background images.
-	
      
-
-
-### Bidi-sensitive Images ### {#bidi-images}
-
-	Before listing any <image-src>s,
-	the author may specify a directionality for the image,
-	similar to adding a dir attribute to an element in HTML.
-	If a directional image is used on or in an element with opposite direction,
-	the image must be flipped in the inline direction
-	(as if it was transformed by, e.g., scaleX(-1), if the inline direction is the X axis).
-
-	Note: Absent this declaration,
-	images default to no directionality at all,
-	and thus don't care about the directionality of the surrounding element.
+		This is equivalent to a single color stop gradient:
 
-	
      
-		A list may use an arrow for a bullet that points into the content.
-		If the list can contain both LTR and RTL text,
-		though, the bullet may be on the left or the right,
-		and an image designed to point into the text on one side will point out of the text on the other side.
-		This can be fixed with code like:
+		
      background-image: linear-gradient(rgba(0, 0, 255, .5)), url("bg-image.png");
      
 
-		
      -			<ul style="list-style-image: image(ltr 'arrow.png');">
-				<li dir='ltr'>My bullet is on the left!</li>
-				<li dir='rtl'>MY BULLET IS ON THE RIGHT!</li>
-			</ul>
-		
      
-
-			This should render something like:
-
-		
      -			⇒ My bullet is on the left!
-			  !THGIR EHT NO SI TELLUB YM ⇐
-		
      
-
-		In LTR list items, the image will be used as-is.
-		In the RTL list items, however,
-		it will be flipped in the inline direction,
-		so it still points into the content.
+		'background-color' does not work for this,
+		as the solid color it generates always lies beneath all the background images.
 	
      
 
+	Note: This function previously defined a number of additional behaviors,
+	but those have been shifted to [[css-images-5]].
 
 
+
+2D Image Values: the <> type {#image-values}
+===================================================
+
+	...
+
+
+
+
+Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
+---------------------------------------------------------------------------
+
+	[[css-images-4]] defines a simple form of the ''image()'' function,
+	which generates a solid-color dimensionless image.
+	This level introduces a number of additional functions.
+
+	The ''image()'' function allows an author to:
+
+	* use media fragments to clip out a portion of an image
+	* use a solid color as an image
+	* fallback to a solid-color image, when the image at the specified url can't be downloaded or decoded
+	* automatically respect the image orientation specified in the image's metadata
+
+	The ''image()'' notation is defined as:
+
+	
      +		image() = image( <>? [ <>? , <>? ]! )
+		<image-tags> = [ ltr | rtl ]
+		<image-src> = [ <> | <> ]
+	
      
+
+	A <> used in ''image()'' represents a <>.
+	As usual for URLs in CSS,
+	relative URLs are resolved to an absolute URL
+	(as described in Values & Units [[!CSS-VALUES-3]])
+	when a specified ''image()'' value is computed.
+
+	If the image has an orientation specified in its metadata,
+	such as EXIF,
+	the UA must rotate or flip the image to correctly orient it
+	as the metadata specifies.
+
+### Image Fallbacks ### {#image-fallbacks}
+
+	If both a URL and a <> are specified in ''image()'',
+	then whenever the URL represents an [=invalid image=] or [=loading image=],
+	the ''image()'' function renders as if the URL were not specified at all;
+	it generates a solid-color image as specified in [[#color-images]].
+
+	If just a URL is specified (no <>)
+	and it represents an [=invalid image=] or [=loading image=],
+	the ''image()'' function represents the same.
+
+	
+		css-image-fallbacks-and-annotations.html
+		css-image-fallbacks-and-annotations002.html
+		css-image-fallbacks-and-annotations003.html
+		css-image-fallbacks-and-annotations004.html
+		css-image-fallbacks-and-annotations005.html
+	
+
+	
      
+		The fallback color can be used to ensure that text is still readable
+		even when the image fails to load.
+		For example, the following legacy code works fine if the image is rectangular and has no transparency:
+
+		
      +			body      { color: black; background: white; }
+			p.special { color: white; background: url("dark.png") black; }
+		
      
+
+		When the image doesn't load,
+		the background color is still there to ensure that the white text is readable.
+		However, if the image has some transparency,
+		the black will be visible behind it,
+		which is probably not desired.
+		The ''image()'' function addresses this:
+
+		
      +			body      { color: black; background: white; }
+			p.special { color: white; background: image("dark.png", black); }
+		
      
+
+		Now, the black won't show at all if the image loads,
+		but if for whatever reason the image fails,
+		it'll pop in and prevent the white text from being set against a white background.
+	
      
+
+
+
+### Image Fragments ### {#image-fragments}
+
+	When a URL specified in ''image()'' represents a portion of a resource
+	(e.g. by the use of media fragment identifiers)
+	that portion is clipped out of its context and used as a standalone image.
+
+	
      
+		For example, given the following image and CSS:
+
+		
+			[9 circles, with 0 to 8 eighths filled in]
+		
+
+		
      background-image: image('sprites.svg#xywh=40,0,20,20')
      
+
+		...the background of the element will be the portion of the image that starts at (40px,0px) and is 20px wide and tall,
+		which is just the circle with a quarter filled in.
+	
      
+
+	So that authors can take advantage of CSS's forwards-compatible parsing rules to provide a fallback for image slices,
+	implementations that support the ''image()'' notation
+	must support the xywh=#,#,#,# form of media fragment identifiers
+	for images specified via ''image()''. [[!MEDIA-FRAGS]]
+
+	
      
+		Note that image fragments can also be used with the ''url()'' notation.
+		However, a legacy UA that doesn't understand the media fragments notation
+		will ignore the fragment and simply display the entirety of the image.
+
+		Since the ''image()'' notation requires UAs to support media fragments,
+		authors can take advantage of CSS's forward-compatible parsing rules
+		to provide a fallback when using an image fragment URL:
+
+		
      +			background-image: url('swirl.png'); /* old UAs */
+			background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */
+		
      
+	
      
+
+	If a URL uses a fragment identifier syntax that the implementation does not understand,
+	or does not consider valid for that type of image,
+	the URL must be treated as representing an invalid image.
+
+	Note: This error-handling is limited to ''image()'',
+	and not in the definition of URL,
+	for legacy compat reasons.
+
+
+### Solid-color Images ### {#color-images}
+
+	If the ''image()'' function is specified with only a <> argument (no URL),
+	it represents a solid-color image of the specified color with no [=natural dimensions=].
+
+	
      
+		For example,
+		one can use this as a simple way to "tint" a background image,
+		by overlaying a partially-transparent color over the top of the other image:
+
+		
      background-image: image(rgba(0, 0, 255, .5)), url("bg-image.png");
      
+
+		This is equivalent to a single color stop gradient:
+
+		
      background-image: linear-gradient(rgba(0, 0, 255, .5)), url("bg-image.png");
      
+
+		'background-color' does not work for this,
+		as the solid color it generates always lies beneath all the background images.
+	
      
+
+
+### Bidi-sensitive Images ### {#bidi-images}
+
+	Before listing any <image-src>s,
+	the author may specify a directionality for the image,
+	similar to adding a dir attribute to an element in HTML.
+	If a directional image is used on or in an element with opposite direction,
+	the image must be flipped in the inline direction
+	(as if it was transformed by, e.g., scaleX(-1), if the inline direction is the X axis).
+
+	Note: Absent this declaration,
+	images default to no directionality at all,
+	and thus don't care about the directionality of the surrounding element.
+
+	
      
+		A list may use an arrow for a bullet that points into the content.
+		If the list can contain both LTR and RTL text,
+		though, the bullet may be on the left or the right,
+		and an image designed to point into the text on one side will point out of the text on the other side.
+		This can be fixed with code like:
+
+		
      +			<ul style="list-style-image: image(ltr 'arrow.png');">
+				<li dir='ltr'>My bullet is on the left!</li>
+				<li dir='rtl'>MY BULLET IS ON THE RIGHT!</li>
+			</ul>
+		
      
+
+			This should render something like:
+
+		
      +			⇒ My bullet is on the left!
+			  !THGIR EHT NO SI TELLUB YM ⇐
+		
      
+
+		In LTR list items, the image will be used as-is.
+		In the RTL list items, however,
+		it will be flipped in the inline direction,
+		so it still points into the content.
+	
      
+
+
 Sizing Images and Objects in CSS {#sizing}
 ==========================================
 
diff --git a/css-inline-3/Makefile b/css-inline-3/Makefile
index bf812cba39a6..a4c0e65c382a 100755
--- a/css-inline-3/Makefile
+++ b/css-inline-3/Makefile
@@ -7,18 +7,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'
 
 cdate ?=
 status ?=
 group ?= CSS
 opts ?=
 target ?= Overview
-markup ?= html
 
 %.html: %.src.html
 	@echo "Calling post-processor to generate $@..."
@@ -31,11 +27,11 @@ markup ?= html
 	-F group=$(group) -F method=file -F date=$(cdate) -F status=$(status) \
 	$(opts) -o $@ https://www.w3.org/Style/Group/process.cgi
 %.html: %.bs
-	curl -s -L -F file=@$< -F time=$(cdate) -F output=html \
-	-F paragraph=$(markup) $(opts) -o $@ http://api.csswg.org/bikeshed/
+	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 time=$(cdate) -F output=err \
-	-F paragraph=$(markup) $(opts) -o $@ http://api.csswg.org/bikeshed/
+	curl -s -L -F file=@$< -F md-date=$(cdate) -F output=messages \
+	-F type=bikeshed-spec $(opts) -o $@ https://www.w3.org/publications/spec-generator/
 
 # For Dispositions of Comments in css3-background:
 %.html: %.txt; awk -f issues-txt-to-html.awk $< >$@
@@ -52,11 +48,11 @@ markup ?= html
 
 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 $<
-	@if egrep -qv '^(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-inline-3/Overview.bs b/css-inline-3/Overview.bs
index cee518b79606..a8bc28f948b7 100644
--- a/css-inline-3/Overview.bs
+++ b/css-inline-3/Overview.bs
@@ -973,7 +973,7 @@ Line Spacing: the 'line-height' property
 		
      normal
 		
      
 			Determine the [=preferred line height=]
-			automatically based on font metrics.
+			automatically based on the metrics of the used font.
 
 		
      <>
 		
      
@@ -983,7 +983,7 @@ Line Spacing: the 'line-height' property
 		
      <>
 		
      
 			The [=preferred line height=] is this number
-			multiplied by the element's computed 'font-size'.
+			multiplied by the element's used 'font-size'.
 			Negative values are illegal.
 			The [=computed value=] is the same as the [=specified value=].
 
diff --git a/css-link-params-1/Overview.bs b/css-link-params-1/Overview.bs
index 9fb1a4834eed..fa28c4aac9ec 100644
--- a/css-link-params-1/Overview.bs
+++ b/css-link-params-1/Overview.bs
@@ -2,10 +2,11 @@
 Title: CSS Linked Parameters Module Level 1
 Shortname: css-link-params
 Level: 1
-Status: ED
+Status: FPWD
 Group: CSSWG
-Work Status: exploring
+Work Status: refining
 ED: https://drafts.csswg.org/css-link-params/
+TR: https://www.w3.org/TR/css-link-params-1/
 Editor: Tab Atkins-Bittner, Google, http://xanthir.com/contact/
 Editor: Daniel Holbert, Mozilla
 Editor: Jonathan Watt, Mozilla
@@ -19,6 +20,7 @@ spec:html; type:element
 	text: iframe
 	text: a
 spec:fill-stroke-3; type:property; text:fill
+spec:css-env-1; type:function; text:env()
 
      
 
 Introduction {#intro}
@@ -178,11 +180,14 @@ The syntax of an SVG parameter fragment identifie
 
 Multiple [=link parameters=] can be passed to an image
 by appending multiple [=param()=] fragment identifiers to the URL.
+When combined, either with each other or with other "fragment identifiers",
+each value is separated with an & character,
+as in a URL's query parameters.
 
 
      
 	For example, if the image from the previous example also used ''env(--bg-color)'',
 	it could be referenced with a url like
-	“http://example.com/image.svg#param(--text-color,blue)param(--bg-color,white)”
+	“http://example.com/image.svg#param(--text-color,blue)&param(--bg-color,white)”
 	to set both ''env(--text-color)'' and ''env(--bg-color)''.
 
      
 
@@ -258,31 +263,23 @@ accessible with the ''env()'' function in stylesheets.
 	1. On each ''env()'' function, provide a fallback value, like ''fill: env(--color, blue)''.
 	2. If the ''env()'' is going to be used a lot,
 		such that providing a fallback for each individual ''env()'' is troublesome,
-		store the [=custom environment variable=] in a [=scoped environment variable=]
-		of a different name,
+		store the [=custom environment variable=] in a [=custom property=] on the root element
 		with the default specified,
 		like:
 
 		
      -			@env --color2: env(--color, blue);
-
-			/* Alternately, store it in a custom property: */
 			:root {
 				--color: env(--color, blue);
 			}
 		
      
 
 		In this example, if ''--color'' is provided via a [=linked parameter=],
-		''env(--color2)'' will contain its value.
+		''var(--color)'' will contain its value.
 		If not, it will contain the default ''blue'' value.
-		In either case, ''env(--color2)'' can be used in the stylesheet unconditionally,
+		In either case, ''var(--color)'' can be used in the stylesheet unconditionally,
 		secure in the knowledge that it will always have a value.
 
 
-Note: When we define ''env(parent --color)'' to jump up a scope level,
-you won't need to do the rename;
-''@env --color: env(parent --color);'' will work just fine.
-
 
 
      
 Privacy Considerations
      
diff --git a/css-lists-3/Overview.bs b/css-lists-3/Overview.bs
index 4c51068fcf35..d18e3405eba9 100644
--- a/css-lists-3/Overview.bs
+++ b/css-lists-3/Overview.bs
@@ -901,7 +901,7 @@ Manipulating Counter Values: the 'counter-increment' and 'counter-set' propertie
 			h1::before {
 					content: "Chapter " counter(chapter) ". ";
 					counter-increment: chapter;  /* Add 1 to chapter */
-					counter-reset: section;      /* Set section to 0 */
+					counter-set: section;      /* Set section to 0 */
 			}
 			h2::before {
 					content: counter(chapter) "." counter(section) " ";
@@ -1029,31 +1029,29 @@ Inheriting Counters
 		To inherit counters
 		into an |element|:
 
-		1. If |element| is the [=tree/root=] of its document tree,
-			the element has an initially-empty [=CSS counters set=].
-			Return.
+		1. Let |element counters| be an initially empty [=CSS counters set=]
+			representing |element|’s own [=CSS counters set=].
 
-		2. Let |element counters|,
-			representing |element|’s own [=CSS counters set=],
-			be a copy of the [=CSS counters set=]
-			of |element|'s parent element.
+		2. If |element| is the [=tree/root=] of its document tree,
+			return.
+			(The element has an initially-empty counter map
+			and inherits nothing.)
 
-		3. Let |sibling counters| be the [=CSS counters set=]
-			of |element|'s preceding sibling (if it has one),
-			or an empty [=CSS counters set=] otherwise.
-
-			[=map/For each=] |counter| of |sibling counters|,
-			if |element counters| does not already contain a counter with the same [=CSS counter/name=],
-			append a copy of |counter| to |element counters|.
+		3. Let |counter source| be the [=CSS counters set=]
+			of |element|’s preceding sibling,
+			if it has one,
+			or else of |element|’s parent
+			if it does not.
 
 		4. Let |value source| be the [=CSS counters set=]
 			of the element immediately preceding |element| in [=tree order=].
 
-			[=map/For each=] |source counter| of |value source|,
-			if |element counters| [=set/contains=] a [=counter=]
-			with the same [=CSS counter/name=] and [=creator=],
-			then set the [=value=] of that counter
-			to |source counter|'s [=value=].
+		5. [=map/For each=] (|=CSS counter/name=|, |originating element|, |=value=|) of |value source|:
+			1. If |counter source| also [=set/contains=] a [=counter=]
+				with the same |=CSS counter/name=| and |originating element|,
+				then [=set/append=] a copy of |value source|’s [=counter=]
+				(|=CSS counter/name=|, |originating element|, |=value=|)
+				to |element counters|.
 	
 
 	
      
@@ -1148,7 +1146,7 @@ Instantiating Counters
 
 	1. Let |num| be 0.
 
-	2. Let |first| be true.
+	2. Let |lastNonZeroIncrementNegated| be 0.
 
 	3. For each element or pseudo-element |el| that increments or
 		sets the same counter in the same [=scope=]:
@@ -1156,9 +1154,8 @@ Instantiating Counters
 		1. Let |incrementNegated| be |el|'s 'counter-increment' integer value for this counter,
 			multiplied by -1.
 
-		2. If |first| is true,
-			then add |incrementNegated| to |num| and
-			set |first| to false.
+		2. If |incrementNegated| is not zero,
+			then set |lastNonZeroIncrementNegated| to |incrementNegated|.
 
 		3. If |el| sets this counter with 'counter-set',
 			then add that integer value to |num| and
@@ -1166,7 +1163,9 @@ Instantiating Counters
 
 		4. Add |incrementNegated| to |num|.
 
-	4. Return |num|.
+	4. Add |lastNonZeroIncrementNegated| to |num|.
+
+	5. Return |num|.
 
 	Note: Only [=reversed=] counters can be instantiated without an initial value.
 
diff --git a/css-masking-1/Overview.bs b/css-masking-1/Overview.bs
index 2e559da681af..31d40c0b4a03 100644
--- a/css-masking-1/Overview.bs
+++ b/css-masking-1/Overview.bs
@@ -53,6 +53,8 @@ spec:css-backgrounds-3; type:property;
     text:border-image-repeat
     text:border-image-slice
     text:border-image-width
+    text:border-image-source
+    text:border-image-outset
     text:border-radius
     text:border-width
 spec:css-color-4; type:property
@@ -1527,7 +1529,7 @@ These pieces may be sliced, scaled and stretched in various ways to fit the size
 
 
       Name: mask-border-source
-Value: none | <>
+Value: <<'border-image-source'>>
 Initial: none
 Applies to: All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
 Inherited: no
@@ -1587,7 +1589,7 @@ The 'mask-mode' and 'mask-type' properties must have no affect on the mask bo
 
 
       Name: mask-border-slice
-Value: [ <> | <> ]{1,4} fill?
+Value: <<'border-image-slice'>>
 Initial: 0
 Applies to: All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
 Inherited: no
@@ -1612,7 +1614,7 @@ See the 'border-image-slice' property [[!CSS3BG]] for the definitions of the pro
 
 
       Name: mask-border-width
-Value: [ <> | <> | auto ]{1,4}
+Value: <<'border-image-width'>>
 Initial: auto
 Applies to: All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
 Inherited: no
@@ -1638,7 +1640,7 @@ Note: For SVG elements without an associated layout box the 'border-width' is co
 
 
       Name: mask-border-outset
-Value: [ <> | <> ]{1,4}
+Value: <<'border-image-outset'>>
 Initial: 0
 Applies to: All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
 Inherited: no
@@ -1664,7 +1666,7 @@ Note: For SVG elements without associated layout box the 'border-width' is consi
 
 
       Name: mask-border-repeat
-Value: [ stretch | repeat | round | space ]{1,2}
+Value: <<'border-image-repeat'>>
 Initial: stretch
 Applies to: All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
 Inherited: no
diff --git a/css-mixins-1/Overview.bs b/css-mixins-1/Overview.bs
index 4df8e0780054..a20dc5fbc18e 100644
--- a/css-mixins-1/Overview.bs
+++ b/css-mixins-1/Overview.bs
@@ -488,8 +488,8 @@ is the real element at the root of the [=calling context=] stack.
 
 
 
      
-	A [=comma-containing productions|comma-containing value=]
-	may be passed as a single argument
+	A [=free-form production|comma-containing value=]
+	can be passed as a single argument
 	by wrapping the value in curly braces, {}:
 
 	
      @@ -604,7 +604,7 @@ with its [=function parameters=] overriding "inherited" custom properties of the
 		Add the registration to |registrations|.
 	6. If |custom function| has a [=custom function/return type=],
 		create a [=custom property registration=]
-		with the name "return"
+		with the name "result"
 		(violating the usual rules for what a registration's name can be),
 		a syntax of the [=custom function/return type=],
 		an inherit flag of "false",
@@ -1070,13 +1070,13 @@ There are no [=scoping limits=].
 
 
 
 
      
@@ -1406,18 +1406,164 @@ but the mixin not use it.
 		}
 		@apply --two-column {
 			display: grid;
-			grid-template-columns: ;
+			grid-template-columns: 60px 60px;
 		}
 	}
 	
      
 
      
 
 
+
+
+Defining Macros {#macros}
+===============
+
+A macro is a simplified variant of a [=mixin=],
+that very directly substitutes its body into its ''@apply''-ing rule.
+
+It does not take any arguments
+(besides possibly a ''@contents'' block)
+or define local variables
+(and thus doesn't use a ''@result'' rule to separate its result from its (nonexistent) body)
+and does not impose a "scoping" semantic on its result rules.
+Otherwise, it is identical to a [=mixin=].
+
+
      
+	For simple mixins that are just meant
+	to make it easier to include a commonly-repeated block of styles,
+	[=macros=] can be slightly shorter/easier to use:
+
+	
+	@macro --reset-list {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	.foo {
+		@apply --reset-list;
+	}
+	
+
+	In cases like this, the *result* of defining this as a [=mixin=] or [=macro=] are identical.
+	That is, one could equally write this slightly more verbose definition:
+
+	
+	@mixin --reset-list() {
+		@result {
+			margin: 0;
+			padding: 0;
+			list-style: none;
+		}
+	}
+	
+
+	In more complex cases, though, their behaviors can differ;
+	see [[#mixin-macro-diff]].
+
      
+
+
+
      
+The ''@macro'' rule
      
+
+The ''@macro'' rule defines a [=macro=],
+and consists of a name
+and a [=macro body=].
+(Similar to a [=mixin result=] block.)
+
+
      +	<<@macro>> = @macro <>
+	{
+		<>
+	}
+
      
+
+A ''@macro'' rule cannot be a [=nested group rule=];
+it is invalid within the body of a [=style rule=].
+
+
      
+The Macro Prelude
      
+
+The name of the resulting [=macro=] is given by the <> in its prelude.
+
+The name of a ''@macro'' rule is a [=tree-scoped name=],
+and functions identically to a ''@mixin'' name.
+[=Macros=] and [=mixins=] share the same namespace;
+if two are defined with the same name,
+the last one wins
+(just like having two [=mixins=] with the same name).
+
+
+
      
+The Macro Body
      
+
+The body of a ''@macro'' rule
+acts as a [=nested declarations rule=],
+and accepts the same properties and rules that a normal [=nested declarations rule=] would.
+In particular, further [=mixins=] and [=macros=] can be invoked
+(via the ''@apply'' rule)
+within a ''@macro''.
+
+Note: This is identical to the body of a [=mixin's=] ''@result'' rule.
+As [=macros=] don't have any arguments or local variables,
+they don't need to mark their result separately
+to distinguish [=local variables=] from [=custom properties=]
+that will get added to the element's style.
+
+Unknown properties and rules are invalid and ignored,
+but do not make the ''@macro'' rule itself invalid.
+
+Identically to [=mixins=],
+the body of a ''@macro'' rule
+can contain a ''@contents'' rule,
+which will substitute itself with a passed [=contents block=],
+or potentially a fallback block.
+
+
      
+	The ''@contents'' example provided in [[#contents-rule]]
+	used ''@mixin'',
+	but it could equally be written with ''@macro'',
+	as it does not use any arguments:
+
+	
      +	@macro --one-column {
+		@media (width <= 800px) {
+			@contents;
+		}
+	}
+	@macro --two-column {
+		@media (width > 800px) {
+			@contents;
+		}
+	}
+	body {
+		@apply --one-column {
+			display: flex;
+			flex-flow: column;
+		}
+		@apply --two-column {
+			display: grid;
+			grid-template-columns: 60px 60px;
+		}
+	}
+	
      
+
      
 
-The result of a [=mixin=] application
+
+
+
+Using Mixins and Macros {#using-mixins}
+=======================
+
+The result of a [=mixin=] or [=macro=] application
 is substituted into the body of another [=style rule=]
 as a [=nested declarations rule=]
 via the ''@apply'' rule.
@@ -1443,7 +1589,7 @@ via the ''@apply'' rule.
 
      
 The @apply Rule
      
 
-The ''@apply'' rule applies a [=mixin=],
+The ''@apply'' rule applies a [=mixin=] or [=macro=],
 causing it to substitute into the rule
 in place of the ''@apply'' rule itself.
 
@@ -1489,9 +1635,9 @@ as they effectively modify the stylesheet itself.
 adjust which properties and rules are active in a stylesheet
 before styles are applied.)
 
-The ''@apply'' rule applies the [=mixin=]
+The ''@apply'' rule applies the [=mixin=] or [=macro=]
 named by the <> or the <>'s name.
-If no such [=mixin=] exists,
+If no such [=mixin=] or [=macro=] exists,
 the ''@apply'' does nothing.
 
 If passed a <>,
@@ -1503,9 +1649,11 @@ the ''@apply'' application does nothing.
 the missing arguments take their default values instead.)
 A <> passes no arguments.
 (That is, ''@apply --foo;'' is identical to ''@apply --foo();''.)
+For these purposes, a [=macro=] is treated as having a zero-length argument list;
+''@apply --my-macro();'' is valid.
 
 If the ''@apply'' rule has a <> block,
-that block is passed as the mixin's [=contents block=].
+that block is passed as the [=mixin=] or [=macro=]'s [=contents block=].
 
 
      
 	Applying a mixin without arguments, or with an empty argument list,
@@ -1547,12 +1695,12 @@ that block is passed as the mixin's [=contents block=].
 
 
 
@@ -1583,7 +1731,7 @@ with the following properties:
 	containing the original value of the property this anonymous function is replacing.
 
 Additionally, the arguments passed to the mixin
-are evaluated and stored on the ''@apply''@apos;d element,
+are evaluated and stored on the ''@apply'''d element,
 to ensure they obtain the "expected" value from that element,
 rather than unexpectedly evaluating in a descendant element's context:
 
@@ -1960,6 +2108,128 @@ and other element-relative values resolve correctly.
 	
 
      
 
+Evaluating Macros {#eval-macro}
+-----------------
+
+[=Macros=] work similarly to [=mixins=],
+in that they substitute their [=macro body=]
+at the location they're ''@apply'''d.
+Contrary to [=mixins=],
+[=macros=] are substituted simply and literally,
+with no transforms performed on their content.
+
+
+Mixin/Macro Differences {#mixin-macro-diff}
+-----------------------
+
+The basic differences between [=mixins=] and [=macros=] are obvious:
+
+* [=Mixins=] can take arguments; [=macros=] can't.
+* [=Mixins=] can have local variables, and wrap their result in ''@result'';
+	[=macros=] don't, and just use their contents directly as their result.
+
+The subtler difference is that,
+because [=mixins=] have arguments and local variables
+which they don't want to "leak" into the page's general styles,
+and which they want to resolve on the applying element
+(so ''var()'' functions, ''em'' values, etc passed as arguments or set as locals
+all work "as expected"),
+they treat their results as [=scoped style rules=].
+[=Macros=] don't impose this restriction,
+which makes them useful in some cases where [=mixins=] can't be used,
+but which also limits their abilities in some other cases.
+
+
      
+	For example, the following mixin and macro are identical:
+
+	
+	@mixin --mix1() {
+		@result {
+			width: 20em;
+			> .bar {
+				width: 10em;
+			}
+		}
+	}
+	@macro --mac1() {
+		width: 20em;
+		> .bar {
+			width: 10em;
+		}
+	}
+	.foo {
+		@apply --mix1; /* or --mac1 */
+		font-size: 20px;
+		/* width is 20em, so 400px */
+
+		> .bar {
+			font-size: 10px;
+			/* width is 10em, so 100px;
+		}
+	}
+	
+
+	Despite the mixin/macro *appearing* to set the ''.bar'' child
+	to half the ''.foo'' parent's width,
+	because they use ''em'' units and the elements have different 'font-size' values,
+	the child ends up 1/4 the width of the parent instead.
+
+	The mixin could be rewritten like this:
+
+	
+	@function --as-length(--x <length>) { result: var(--x); }
+	@mixin --mix2() {
+		--em: --as-length(1em);
+		@result {
+			width: 20--em; /* using custom units */
+			> .bar {
+				width: 10--em;
+			}
+		}
+	}
+	.foo {
+		@apply --mix2;
+		font-size: 20px;
+		/* width is 20--em and --em is 20px, so 400px */
+
+		> .bar {
+			font-size: 10px;
+			/* width is 10--em and --em is still 20px, so 200px;
+		}
+	}
+	
+
+	...which resolves the ''--em'' local variable on ''.foo''
+	(to a length of ''20px''),
+	and then uses that in both places.
+	A [=macro=] cannot reproduce this,
+	unless you actually emit a ''--em'' [=custom property=] onto the element,
+	where styles outside of the macro could see it.
+
+	On the other hand, the following can be done with a [=macro=]:
+
+	
+	@macro --mac2() {
+		width: 20em;
+		+ .bar { /* sibling, not child! */
+			width: 10em;
+		}
+	}
+	.foo {
+		@apply --mac2;
+		font-size: 20px;
+		/* width is 20em, so 400px */
+		+ .bar { /* again, sibling! */
+			font-size: 10px;
+			/* width is 10em, so 100px;
+		}
+	}
+	
+
+	A [=mixin=] can't reproduce this,
+	unless you lift it up to applying on a parent element,
+	with the mixin styling its two children.
+
      
 
 
 
 
       url: https://html.spec.whatwg.org/multipage/nav-history-apis.html#concept-navigationtransition-from
-	type: dfn; spec: html; text: from entry;
+    type: dfn; spec: html; text: from entry;
 url: https://html.spec.whatwg.org/multipage/nav-history-apis.html#window-navigation-api
-	type: dfn; spec: html; text: navigation API;
+    type: dfn; spec: html; text: navigation API;
+url: https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigation-current-entry
+    type: dfn; spec: html; text: current entry; for: navigation API;
 url: https://html.spec.whatwg.org/multipage/nav-history-apis.html#ongoing-navigate-event
-	type: dfn; spec: html; text: ongoing navigate event;
+    type: dfn; spec: html; text: ongoing navigate event;
 url: https://html.spec.whatwg.org/multipage/nav-history-apis.html#concept-navigation-transition
-	type: dfn; spec: html; text: transition;
+    type: dfn; spec: html; text: transition;
 url: https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigation-activation
-	type: dfn; spec: html; text: activation;
+    type: dfn; spec: html; text: activation;
 url: https://html.spec.whatwg.org/multipage/browsing-the-web.html#has-been-revealed
-	type: dfn; spec: html; text: has been revealed;
+    type: dfn; spec: html; text: has been revealed;
+url: https://html.spec.whatwg.org/multipage/browsing-the-web.html#ongoing-navigation
+    type: dfn; spec: html; text: ongoing navigation;
 url: https://drafts.csswg.org/css-view-transitions-1/#capture-the-image
-	type: dfn; spec: css-view-transitions-1; text: capture the image;
+    type: dfn; spec: css-view-transitions-1; text: capture the image;
 
      
 
-
      Declaring named URL patterns: the ''@route'' rule
      
+
      Defining URL patterns in CSS
      
+
+
      The <> value type
      
+
+
      +<> = <> | <> | <>
+<> = <>
+
      
+
+A <> is defined to
+match a [=/URL=]-or-null input if input is non-null, and:
+
+
      
+
+: the <> is a <>
+:: [=URL pattern/match|match a URL pattern=] is non-null given
+    urlPattern as
+    the [=URL pattern=] represented by the ''@route'' rule referenced by the name and
+    input as input.
+
+: the <> is a <>
+:: [=URL pattern/match|match a URL pattern=] is non-null given
+    urlPattern as
+    the [=URL pattern=] represented by the function (see
+    [=create a URL pattern for url-pattern()=]) and
+    input as input.
+
+: the <> is a <>
+:: The given [=/URL=] [=url/equals=] input.
+
+
      
+
+
      Declaring named URL patterns: the ''@route'' rule
      
 
 The @route rule
-is an at-rule that associates a name with a [=URL pattern=].
+is an at-rule that associates an author-defined name with a [=URL pattern=].
 This name can be referenced in ''@navigation'' rules
-and in '':link-to()'' pseudo-classes.
+and in '':active-navigation()'' pseudo-classes.
 
-The syntax of the ''@route'' rule is:
+The syntax of the ''@route'' rule is described by the <> production in:
 
 
      -@route <> {
-	[ <> | <> ]
-}
+<> = @route <> { <> }
 
      
 
-based on the following definitions:
+This means that the rule accepts a sequence of descriptors
+that have the syntax of declarations.
+However, in valid style sheets the only descriptors must match
+the <> production below.
+Any other descriptors are ignored.
 
-
      -<> = ;* <> ;*
+
      +<> = <> |
+                     <> |
+                     <>
 <> = pattern : <>
-<> = ;* <> [ ;+ <> ]* ;*
 <> = <> : <>
-<> = protocol | hostname | port | pathname | search | hash | base-url
+<> = protocol | hostname | port | pathname |
+                         search | hash
+<> = base-url : stylesheet | document | <>
 
      
 
-This associates an author-defined keyword with a URL pattern,
-so that any URL that matches one of the URL patterns
-matches the route named by the keyword.
+
+If two valid descriptors in a single rule have the same name,
+the last one is used and the others are ignored.
+If a rule has both a valid <>
+and a valid <>
+then it is ignored.
 
 The ''@route'' rule can be defined in one of two ways:
 
 : with the pattern descriptor
 :: in this case the URL pattern represented is
-	the one represented by the <> function
-	given as the descriptor's value.
+    the result of invoking
+    [=create a URL pattern for url-pattern()=] given
+    arg as the argument to the ''url-pattern()'' function
+    and baseURLSpecifier as
+    the (optional) value of the rule's <>.
 : with the other descriptors named by <>
 :: In this case the URL pattern represented is the result of invoking
-	[=URL pattern/create|create a URL pattern=] given
-	input as {{URLPatternInit}}
-	constructed from the descriptors and their values.
-	Each dictionary member is given the value of
-	the descriptor with the same name,
-	except the baseURL member is given the value of
-	the base-url descriptor.
-	If a base-url descriptor is not given then one is created from
-	the [=style resource base URL=] of the rule.
+    [=URL pattern/create|create a URL pattern=] given
+    input as {{URLPatternInit}}
+    constructed from the descriptors and their values.
+    Each dictionary member is given the value of
+    the descriptor with the same name,
+    except the baseURL member is given the result of
+    [=create a URL for a base descriptor=]
+    given baseURLSpecifier as
+    the (optional) value of the rule's <>.
 
 ISSUE: Should this use <>, <>, or <>
 for the route names?
 
-ISSUE: Is there value in being able to provide a list of <>
-rather than just one?
+ISSUE: Should we use base-url or just base as the descriptor name?
 
 NOTE: The list of allowed init descriptors does not include username
 or password since they seem unlikely to be useful.
 
 
      
 It's possible that this syntax with init descriptors in the ''@route'' rule
-would make more sense as part of the ''urlpattern()'' function
+would make more sense as part of the ''url-pattern()'' function
 (that is, as an alternate syntax for what goes inside the function).
 
 This would also give us the option to remove the braces from
@@ -107,18 +154,18 @@ but it could also be added back later if we need it.
 Either this rule:
 
       @route --movie-list {
-	pattern: url-pattern("/movie-list");
+  pattern: url-pattern("/movies");
 }
 
      
 or this rule:
 
       @route --movie-list {
-	pathname: "/movie-list";
+  pathname: "/movies";
 }
 
      
 define an ''@route'' rule that associates
 the name --movie-list
-with the URL "/movie-list" resolved relative to the style sheet.
+with the URL "/movies" resolved relative to the style sheet.
 
      
 
 NOTE: The bracing syntax also allows for future expansion if needed.
@@ -126,6 +173,492 @@ NOTE: The bracing syntax also allows for future expansion if needed.
 NOTE: Some of the design discussion for this feature has been in
 w3c/csswg-drafts#12594.
 
+
      The ''url-pattern()'' function
      
+
+
+
+The url-pattern() function represents a [=URL pattern=],
+which can be used to match URLs.
+
+
      +<> = url-pattern( <> )
+
      
+
+This function represents the [=URL pattern=] resulting from
+invoking [=create a URL pattern for url-pattern()=] with its string argument.
+
+The syntax used in the ''url-pattern()'' function follows that of [=URL Pattern=].
+It is a [=pattern string=] directly based on the syntax used by
+the popular path-to-regexp JavaScript library.
+
+
      
+Pattern strings can contain capture groups, which by default match the shortest possible string,
+up to a component-specific separator (/ in the pathname, . in the hostname).
+
+For example, the pathname pattern "/movies/:id"
+will match "/movies/123"
+but not "/movies/123/cast".
+
+A regular expression enclosed in parentheses can also be used instead,
+so the pathname pattern "/blog/:id(\\d+)"
+will match "/movies/123"
+but not "/movies/css".
+
+You may also omit the name of the capture group by using only a regular expression,
+for example "/blog/(\\d+)".
+
+A group can also be made optional by using the ? modifier or by wrapping it in braces.
+For example, the patterns "/movies/:id?" and "/movies{/:id}"
+will match both "/movies" and "/movies/123" (but not "/movies/").
+
+A full wildcard * can also be used to match as much as possible,
+as in the pattern "/*/movies".
+This too can be given a name, for example "/*lang/movies".
+
      
+
+The steps of the create a URL pattern for url-pattern() algorithm,
+given a string arg and
+an optional baseURLSpecifier
+which can be ''document'', ''stylesheet'', or a URL, are:
+
+1. Let baseURL be the result of
+    [=create a URL for a base descriptor=] given baseURLSpecifier.
+
+1. Return the result of [=URL pattern/create|create a URL pattern=] given
+    arg, baseURL, and an empty [=map=].
+
+NOTE: This function requires that its argument is quoted.
+This differs from the ''url()'' function,
+which allows its argument to be quoted or unquoted.
+
+The create a URL for a base descriptor algorithm, given
+an optional baseURLSpecifier
+which can be ''document'', ''stylesheet'', or a URL, is:
+
+
      
+
+: if baseURLSpecifier is not present or is ''stylesheet''
+:: the [=style resource base URL=] of
+    the rule or declaration block containing the ''url-pattern()'' function.
+
+: if baseURLSpecifier is ''document''
+:: the [=document base URL=] of the document
+
+: if baseURLSpecifier is a URL
+:: baseURLSpecifier
+
+
      
+
+
      
+This rule:
+
      +@route --movie-detail {
+  pattern: url-pattern("/movies/:id");
+}
+
      
+defines an ''@route'' rule that associates
+the name --movie-detail
+with any URL that matches the [=URL pattern=] /movies/:id.
+
+Any of the following URLs (relative to the style sheet) match:
+
+
        
+  
      • /movies/123
        • 
+  
      • /movies/456
        • 
+  
      • /movies/something
        • 
+
      
+
+These URLs will not match:
+
+
        
+  
      • /movies/123/ — The trailing slash is not matched by the pattern
        • 
+  
      • /movies/456/extra — The /extra is not matched by the pattern
        • 
+
      
+
      
+
+
      
+To have the --movie-details route
+match only numeric :id values,
+define the route eiter as:
+
+
      +@route --movie-detail {
+  pattern: url-pattern("/movies/:id(\\d+)");
+}
+
      
+
+or as:
+
+
      +@route --movie-detail {
+  pattern: url-pattern("/movies/(\\d+)");
+}
+
      
+
+This way, /movies/something won’t be matched by the route.
+
+NOTE: Even though the capture groups are not currently exposed,
+it is recommended to give the capture groups a name for future use.
+
      
+
+
      
+Should the default always be ''stylesheet''?
+For use of ''url-pattern()'' in ''@navigation'',
+it's likely more useful for the base URL
+to be the document URL rather than the style sheet URL.
+However, it would be very awkward for ''url-pattern()''
+to be inconsistent with ''url()''.
+
+Also see other proposed uses of {{URLPattern}} in CSS
+in ,
+for '':local-link''.
+
      
+
+
+To serialize a ''url-pattern()'' function f,
+[=serialize a function=] f,
+using [=serialize a string=] on the single argument
+to serialize f's contents.
+
+NOTE: This is defined this way because {{URLPattern}}
+intentionally does not provide a serialization.
+
+
+
+
+
+This specification defines a new
+'':link-to()'' functional pseudo-class
+that matches link elements that link to a certain URL.
+
+
      
+A simple example of a '':link-to()'' selector is this one,
+which matches any links that link to the site's homepage:
+
+
      +:link-to(url-pattern("/")) {
+  font-weight: bold;
+}
+
      
+
+Passing in a named route is also possible:
+
+
      +@route --homepage {
+  pattern: url-pattern("/");
+}
+
+:link-to(--homepage) {
+  font-weight: bold;
+}
+
      
+
+Because there is no dynamic part in the homepage URL,
+you might be tempted to pass in a <> directly:
+
+
      +:link-to(url("/")) {
+  font-weight: bold;
+}
+
      
+
+However, url("/") won't match URLs such as
+/#scroll-to-here or /?utm_id=something
+so it is recommended to use the <>
+or <> variants, or use the following alternative:
+
+
      +@route --homepage {
+  pathname: "/";
+  base-url: document;
+}
+
+:link-to(--homepage) {
+  font-weight: bold;
+}
+
      
+
      
+
+The '':link-to()'' pseudo-class takes a single argument, a <>,
+and the pseudo-class matches any element where both:
+* the element matches '':any-link''
+* the <> [=route-location/matches=] the target of the link
+
+
      The '':active-navigation()'' pseudo-class
      
+
+This specification defines a new
+'':active-navigation()''
+functional pseudo-class
+that matches link elements that link to a certain URL
+that is related to a navigation that is currently active.
+
+The '':active-navigation()'' pseudo-class takes a single argument, a <>,
+and the pseudo-class matches any element where:
+* the element matches '':any-link''
+* the target of the link matches the <>, as defined below.
+
+
      +<> =
+  <>? [ <> | link-href ]?
+<> = at | with | from | to
+
      
+
+ISSUE: Should we use ''at''/''with''/''from''/''to'' or
+''current''/''other''/''from''/''to''?
+
+An <> matches the target linkTarget of the link when
+the following steps return true:
+1. Let navigationURL be
+    the [=current navigation URL=] of the document given the <> in <> (default ''with'').
+
+1. If navigationURL is null, return false.
+1. If ''link-href'' is present, or a <> is not provided:
+    1. Return true if linkTarget [=url/equals=] navigationURL; Otherwise false.
+
+1. If a <> is present:
+    1. Let targetMatchResult be the result of
+        [=URL pattern/match|matching a URL pattern=]
+        given urlPattern and linkTarget.
+
+    1. Let navigationMatchResult be the result of
+         [=URL pattern/match|matching a URL pattern=] given
+         urlPattern and navigationURL.
+
+    1. If navigationMatchResult or targetMatchResult is null, return false.
+
+    1. For each property prop of {{URLPatternResult}} that is a
+        {{URLPatternComponentResult}}:
+
+        1. If {{URLPatternComponentResult/groups}} of prop of
+            targetMatchResult is not equal to
+            {{URLPatternComponentResult/groups}} of prop of
+            navigationMatchResult,
+            then return false.
+
+            ISSUE: Need to formally define equality of ordered maps.
+
+    1. Return true.
+
+
      
+
+The difference between '':link-to()'' and '':active-navigation()''
+is that the latter is only active while a navigation is in progress.
+
+Consider this example:
+
+
      +@route --homepage {
+  pattern: url-pattern("/");
+}
+
+:link-to(--homepage) {
+  color: lime;
+}
+
+:active-navigation(--homepage) {
+  color: hotpink;
+}
+
      
+
+Links that link to the --homepage get a lime color.
+When navigating to or from the --homepage,
+their color changes to hotpink for as long as the animation is active.
+
+Once the navigation has completed, the '':active-navigation()''
+selector no longer applies, and those links revert back to lime.
+
+
      
+
+
      
+
+In the following examples, all links that link to the --movie-detail route,
+get a lime color when a navigation is in progress.
+
+
      +@route --movie-detail {
+  pattern: url-pattern("/movies/:id");
+}
+
+:active-navigation(--movie-detail) {
+  color: lime;
+}
+
      
+
+By adding the following selectors that use a <>,
+the behavior changes a bit.
+
+
      +:active-navigation(from --movie-detail) {
+  color: hotpink;
+}
+
+:active-navigation(to --movie-detail) {
+  color: yellow;
+}
+
      
+
+When navigating from /movies/1 to /movies/2:
+
+
        
+  
      • 
+  	Links that link to the --movie-detail route
+	with any :id
+  	get a lime color
+	during the navigation.
+  
        • 
+  
      • 
+  	Links that link to the --movie-detail route
+  	whose target is /movies/1
+	(the “from” page)
+  	get a hotpink color
+	during the navigation.
+  
        • 
+  
      • 
+  	Links that link to the --movie-detail route
+  	whose target is /movies/2
+	(the “to” page)
+  	get a yellow color
+	during the navigation.
+  
        • 
+
      
+
+When navigating from /movies/2 to /:
+
+
        
+  
      • 
+  	Links that link to the --movie-detail route
+	with any :id
+  	get a lime color
+	during the navigation.
+  
        • 
+  
      • 
+  	Links that link to the --movie-detail route
+  	whose target is /movies/3
+	(the “from” page)
+  	get a hotpink color
+	during the navigation.
+  
        • 
+
      
+
+When navigating from / to /movies/3:
+
+
        
+  
      • 
+  	Links that link to the --movie-detail route
+	with any :id
+  	get a lime color
+	during the navigation.
+  
        • 
+  
      • 
+  	Links that link to the --movie-detail route
+  	whose target is /movies/3
+	(the “to” page)
+  	get a yellow color
+	during the navigation.
+  
        • 
+
      
+
+
      
+
+
      
+
+A an example of the '':active-navigation()'' pseudo-class
+is this example which creates a view transition between
+a item in a list that contains a link (in this document)
+and the details page for that link (in a different document).
+This transition works even when the navigation is a back/forward navigation
+and even if the user has used a language selector UI
+to change the page into a different language (and thus change the URL).
+The use of the '':link-to()'' pseudo-class ensures that
+the view transition animations from or to the correct item in the list
+by matching the relevant parts of the navigation URL to the link URL.
+
+
      +@view-transition {
+  /* allow cross-document view transitions */
+  navigation: auto;
+}
+
+@route --movie-detail {
+  /* match URLs like /en/movies/123 which is the English page
+     about a movie with ID 123.  Be careful to specify the
+     language part with a "*" but the ID part with a named
+     :id parameter so that matching will require equal IDs
+     but allow differences of language. */
+  pattern: url-pattern("/*/movies/:id");
+}
+
+/* capture the overall area representing the movie, and a
+   sub-area for its poster image */
+
+/* match an element with class movie-container with a child
+   link that links to a movie whose id is the same as the
+   movie we are currently navigating to or from.  (lang can
+   be different, though.)
+
+   This depends on the --movie-detail route
+   declaring the ID but not the language with a named
+   parameter, and the use of the 'with' keyword.
+
+   This means that both the of the link and the other URL of
+   the current navigation match the URL pattern defined by
+   the "@route --movie-detail" rule, and that the
+   id named group from both matches be the same.  (However,
+   the URLs can be different because the * part of the
+   match, containing the language, can be different.)
+   */
+.movie-container:has(
+    > .movie-title:active-navigation(with --movie-detail)) {
+
+  view-transition-name: movie-container;
+
+  > .movie-poster {
+    view-transition-name: movie-poster;
+  }
+
+  /* leave the default cross-fade animation for both image
+     captures */
+}
+
      
+
+
      
+
+NOTE: Some of the design discussion for this feature has been in
+w3c/csswg-drafts#13163.
+
+
+
+This specification defines a new
+'':trigger-link''
+that matches link elements that trigger the current navigation.
+
+The '':trigger-link'' pseudo-class matches any element where both:
+* the element matches '':any-link''
+* the [=current navigation state=] is not null, and element is its [=navigation state/source element=].
+
+Issue: should this apply to forms or submit buttons?
+
+
      
+
+A simple example of a '':trigger-link'' selector is this one,
+which sets the ''view-transition-name'' for an image thumbnail that is a child of the link that triggers the current navigation.
+
+
+
      +:trigger-link .thumb {
+  view-transition-name: active-image;
+}
+
      
+
+
      
+
 
      Conditional rules for navigation queries
      
 
 
      Navigation queries: the ''@navigation'' rule
      
@@ -139,14 +672,14 @@ These queries are called navigation queries.
 
 Authors can use it to:
 * write style sheets that apply to multiple pages
-	but behave somewhat differently between those pages,
+    but behave somewhat differently between those pages,
 * write style sheets that apply to
-	single page applications
-	that change their URL over time,
-	so that style changes when the URL changes, and
+    single page applications
+    that change their URL over time,
+    so that style changes when the URL changes, and
 * write style sheets that declaratively start view transitions
-	(or make other appropriate style changes)
-	in response to navigations.
+    (or make other appropriate style changes)
+    in response to navigations.
 
 The syntax of the condition in the ''@navigation'' rule
 is similar to that defined for
@@ -162,8 +695,8 @@ to define styles that only affect a particular page:
 
 
       @navigation (at: url-pattern("/")) {
-	/* These styles only apply to the site's homepage
-	   (including any URL with a search or hash). */
+  /* These styles only apply to the site's homepage
+     (including any URL with a search or hash). */
 }
 
      
 
@@ -178,20 +711,25 @@ styles that cause [=view transitions=].
 
 
       @route --search-results-page {
-	pattern: url-pattern("/search-results");
+  pattern: url-pattern("/search-results");
 }
 @route --product-page {
-	pattern: url-pattern("/product/:id");
+  pattern: url-pattern("/product/:id");
 }
 
-@navigation ((from: --search-results-page) and
-	(to: --product-page)) or
-	((from: --product-page) and
-	(to: --search-results-page)) {
-	/* These styles apply when a navigation is in progress
-	   between a search results page and a product page (as
-	   defined by the @route rules above), in either
-	   direction. */
+@navigation (from: --search-results-page) and
+            (to: --product-page) {
+  /* These styles apply when a navigation is in progress
+     from a search results page to a product page (as
+     defined by the @route rules above), but not in the
+     reverse direction. */
+}
+
+@navigation (between: --search-results-page and --product-page) {
+  /* These styles apply when a navigation is in progress
+     between a search results page and a product page (as
+     defined by the @route rules above), in either
+     direction. */
 }
 
      
 
@@ -201,7 +739,7 @@ The syntax of the ''@navigation'' rule is:
 
 
       @navigation <> {
-	<>
+  <>
 }
 
      
 
@@ -209,20 +747,29 @@ with <> defined as:
 
 
       <> = not <>
-	| <> [ and <> ]*
-	| <> [ or <> ]*
+                     | <> [ and <> ]*
+                     | <> [ or <> ]*
 <> = ( <> ) | ( <> ) | <>
-<> = <> | <>
+<> = <> |
+                    <> |
+                    <> |
+                    <>
 
-<> = <> : <>
-<> = at | from | to
-<> = <> | <>
-<> = <>
+<> = <> : <>
+<> = at | with | from | to
+
+<> =
+    between : <> and <>
 
 <> = history : <>
 <> = traverse | back | forward | reload
+
+<> = phase : <>
+<> = loading | ready | committed
 
      
 
+ISSUE: Should we use ''at''/''with''/''from''/''to'' or ''current''/''other''/''from''/''to''?
+
 The above grammar is purposely very loose for forwards-compatibility reasons,
 since the <> production
 allows for substantial future extensibility.
@@ -237,90 +784,58 @@ Many of these grammar terms are associated with a boolean result,
 as follows:
 
 : <>
-::	: not <>
-	:: The result is the negation of the <> term.
+::    : not <>
+    :: The result is the negation of the <> term.
 
-	: <> [ and <> ]*
-	::
-		The result is true if all of the <> child terms are true,
-		and false otherwise.
+    : <> [ and <> ]*
+    ::
+        The result is true if all of the <> child terms are true,
+        and false otherwise.
 
-	: <> [ or <> ]*
-	::
-		The result is false if all of the <> child terms are false,
-		and true otherwise.
+    : <> [ or <> ]*
+    ::
+        The result is false if all of the <> child terms are false,
+        and true otherwise.
 
 : <>
 :: The result is the result of the child subexpression.
 
 : <>
-::	: at: <>
-	:: The result is whether the result of
-		[=URL pattern/match|match a URL pattern=] is non-null
-		given urlPattern as
-		the [=navigation location URL pattern=] of <>
-		and input as the document's [=Document/URL=].
-
-	: from: <>
-	:: The result is true if
-		the [=current from URL=] from of the document is non-null and
-		[=URL pattern/match|match a URL pattern=] is non-null when
-		given urlPattern as
-		the [=navigation location URL pattern=] of <>
-		and input as from.
-
-	: to: <>
-	:: The result is true if
-		the [=current to URL=] to of the document is non-null and
-		[=URL pattern/match|match a URL pattern=] is non-null when
-		given urlPattern as
-		the [=navigation location URL pattern=] of <>
-		and input as to.
+::  The result is true if
+        the <> [=route-location/matches=] [=current navigation URL=] of the document given the <>.
+
+: <>
+::    : between: <> and <>
+    :: The result is true if
+        the [=current navigation URL=] from of the document given ''from'' is non-null,
+        the [=current navigation URL=] to of the document ''to'' is non-null,
+        one of the two <>s
+        [=route-location/matches=] from,
+        and the other of the two <>s
+        [=route-location/matches=] to.
 
 : <>
-::	: history: traverse
-	:: True if the [=current navigation type=] is {{NavigationType/traverse}}.
-	: history: back
-	:: True if the [=current navigation type=] is {{NavigationType/traverse}} and
-		the [=current navigation delta=] is less than 0.
-	: history: forward
-	:: True if the [=current navigation type=] is {{NavigationType/traverse}} and
-		the [=current navigation delta=] is greater than 0.
-	: history: reload
-	:: True if the [=current navigation type=] is {{NavigationType/reload}}.
+::    : history: traverse
+    :: True if the [=current navigation type=] is {{NavigationType/traverse}}.
+    : history: back
+    :: True if the [=current navigation type=] is {{NavigationType/traverse}} and
+        the document's [=current navigation state=]'s [=navigation state/new index=] is less than its [=navigation state/old index=].
+    : history: forward
+    :: True if the [=current navigation type=] is {{NavigationType/traverse}} and
+        the document's [=current navigation state=]'s [=navigation state/new index=] is greater than its [=navigation state/old index=].
+    : history: reload
+    :: True if the [=current navigation type=] is {{NavigationType/reload}}.
+
+: <>
+:: The [=current navigation state=] is not null, and its [=navigation state/phase=] matches the given ''phase'' value.
 
 : <>
 ::
-	The result is false.
-
-	Authors must not use <> in their stylesheets.
-	It exists only for future-compatibility,
-	so that new syntax additions do not invalidate too much of a <> in older user agents.
-
-The navigation location URL pattern of a <>
-depends on the type of <>:
+    The result is false.
 
-: <>
-::	the URL pattern represented by the ''@route'' rule referenced by the name.
-
-: <>
-::	The [=URL pattern=] represented by the function; see
-	[=create a URL pattern for url-pattern()=].
-
-ISSUE: Should it also be possible to reference
-a name defined in a routemap?
-See the
-route matching explainer
-for details.
-
-A document's navigation API is
-the result of the following steps on document:
-
-1. Let window be the {{Window}} whose [=associated Document=] is document, or null if there is no such {{Window}}.
-
-1. If window is null, return null.
-
-1. Return window's [=navigation API=].
+    Authors must not use <> in their stylesheets.
+    It exists only for future-compatibility,
+    so that new syntax additions do not invalidate too much of a <> in older user agents.
 
 The condition of the ''@navigation'' rule
 is the result of the <> in its prelude.
@@ -354,398 +869,113 @@ ISSUE: This should probably have a more formal definition of the function,
 but I can't find the formal definitions of the existing ''if()'' functions
 to model it after.
 
-
-
-This specification defines a new
-'':link-to()'' functional pseudo-class
-that matches link elements that link to a certain URL.
-
-
      
-
-A simple example of a ''::link-to()'' selector is this one,
-which matches any links that link to the site's homepage:
-
-
      -:link-to(url-pattern("/")) {
-	font-weight: bold;
-}
-
      
-
-
      
-
-
      
-
-A more interesting example of the ''::link-to()'' pseudo-class
-is this example which creates a view transition between
-a item in a list that contains a link (in this document)
-and the details page for that link (in a different document).
-This transition works even when the navigation is a back/forward navigation
-and even if the user has used a language selector UI
-to change the page into a different language (and thus change the URL).
-The use of the '':link-to()'' pseudo-class ensures that
-the view transition animations from or to the correct item in the list
-by matching the relevant parts of the navigation URL to the link URL.
-
-
      -@view-transition {
-	/* allow cross-document view transitions */
-	navigation: auto;
-}
-
-@route --movie-details {
-	/* match URLs like /en/movie/123 which is the English page
-	   about a movie with ID 123 */
-	pattern: url-pattern("/:lang/movie/:id");
-}
-
-/* capture the overall area representing the movie, and a
-	sub-area for its poster image */
-
-/* match an element with class movie-container with a child
-	link that links to a movie whose id is the same as the
-	movie we are currently navigating to or from.  (lang can
-	be different, though.)
-
-	Just :link-to(--movie-details) requires that the target
-	of the link match the URL pattern defined by the "@route
-	--movie-details" rule.
-
-	The navigation-param(id) further requires that either the
-	from or the to URL of the current navigation also match
-	the URL pattern represented by the "@route
-	--movie-details" rule, and that that the 'id' named group
-	from that match be the same as the 'id' named group from
-	the match with the link's target.
-	*/
-.movie-container:has(> .movie-title:link-to(
-	--movie-details with navigation-param(id))) {
-
-	view-transition-name: movie-container;
-
-	> .movie-poster {
-		view-transition-name: movie-poster;
-	}
-
-	/* leave the default cross-fade animation for both image
-	   captures */
-}
-
      
-
-
      
-
-The '':link-to()'' pseudo-class takes a single argument, a <>,
-and the pseudo-class matches any element where:
-* the element matches '':any-link''
-* the target of link matches the <>, as defined below.
-
-
      -<> = <> [ with <> ]?
-<> = <>
-<> = ( <> ) |
-	( <> ) |
-	<>
-<> = <>
-	[ "and" <> ]*
-<> = <>
-	[ "or" <> ]*
-<> = <> | <>
-<> = ( <> : <> )
-<> = navigation-param( <> )
-
      
-
-A <> matches the target of the link when both:
-* the <> matches the target of the link, and
-* the <> matches the target of the link,
-	with the [=URL pattern=] represented by the <> as context
-
-A <> represents a [=URL pattern=].
-If the <> is a <>,
-then it represents the URL pattern
-represented by the <> function
-(see [=create a URL pattern for url-pattern()=]).
-If it is a <>, then it represents the URL pattern
-represented by the ''@route'' rule.
-
-A <> matches a URL
-when [=URL pattern/match|match a URL pattern=] is non-null
-given urlPattern as
-the [=URL pattern=] that it represents and
-input as the given URL.
-
-A <> matches a URL
-(with a [=URL Pattern=] as context)
-based on standard boolean logic for and and or,
-and based on whether each <> matches the URL
-(with the URL Pattern as context).
-
-A <> matches the URL input (with a URL Pattern urlPattern as context)
-if the following steps return true:
-1. Let matchResult be the result of
-	[=URL pattern/match|match a URL pattern=]
-	given urlPattern and input.
-	the [=URL pattern=]
-	represented by the <> function in the <>
-	(see [=create a URL pattern for url-pattern()=])
-1. If matchResult is null, return false.
-
-	NOTE: This doesn't really matter because
-	in this case the <> also doesn't match.
-1. For each property prop of matchResult (a {{URLPatternResult}})
-	that is a {{URLPatternComponentResult}}:
-	1. For each [=map/entry=] entry in its {{URLPatternComponentResult/groups}},
-		then:
-		1. If <> is a <>,
-			return true if
-			entry's [=map/key=] is the <>
-			and entry's [=map/value=] is the <>.
-		1. If <> is a <>,
-			and entry's [=map/key=] is the function's <>,
-			then for each navigationUrl of the
-			[=current to URL=]
-			and [=current from URL=]:
-			1. Let navigationMatchResult be the result of
-				[=URL pattern/match|match a URL pattern=]
-				given urlPattern and navigationUrl.
-			1. If navigationMatchResult is null, [=continue=].
-			1. Return true if navigationMatchResult's
-				property prop
-				has an [=map/entry=]
-				whose [=map/key=] is the same as entry's key
-				and whose [=map/value=] is the same as entry's value.
-
-				NOTE: This step makes the ''navigation-param()'' function
-				perform what is essentially a three-way match,
-				between the target of the link,
-				the provided URL pattern,
-				and the from or to URL of the current navigation.
-
-NOTE: Some of the design discussion for this feature has been in
-w3c/csswg-drafts#13163.
-
-
      Definitions of current navigation state
      
-
-Both the ''@navigation'' rule and the '':link-to()'' pseudo-class
-rely on the following definitions of
-the [=current from URL=] and [=current to URL=].
-
-The current from URL of a [=/document=] is a URL or null.
-It is defined as follows:
-
-1. If the [=document's navigation API=] of the document is non-null and
-	its [=transition=] is non-null,
-	its [=from entry=]'s {{NavigationHistoryEntry/url}}.
-
-	NOTE: This part is for when the old document in the navigation
-	is still the current document.
-
-1. If the [=document's navigation API=] of the document is non-null,
-	its [=activation=] is non-null,
-	the activation's {{NavigationActivation/from}} is non-null, and
-	the document's [=has been revealed=] is false or
-	was false at the start of the current [=task=],
-	the activation's {{NavigationActivation/from}}'s
-	{{NavigationHistoryEntry/url}}.
-
-	NOTE: This part is for when the new document in the navigation
-	has become the current document.
+
      Processing model
      
 
-1. Otherwise, null.
+The at rules and pseudo-classes defined in this document rely on the [=current navigation state=].
 
-	NOTE: The previous two branches can also produce null results.
+A navigation state is a [=struct=] with the following items:
 
-The current to URL of a [=/document=] is a URL or null.
-It is defined as follows:
+
      
+    : old URL
+    : new URL
+    :: a [=/URL=]
+    
+    : type
+    :: a {{NavigationType}}
+    
+    : old index
+    : new index
+    :: an integer
 
-1. If the [=document's navigation API=] of the document is non-null and
-	its [=ongoing navigate event=] is non-null:
+    : phase
+    :: `loading`, `ready`, or `committed`.
 
-	1. if the {{pageswap}} event has fired since that navigation began,
-		and its {{PageSwapEvent/activation}} was non-null,
-		and that {{PageSwapEvent/activation}}'s
-		{{NavigationActivation/entry}}'s
-		{{NavigationHistoryEntry/url}} is non-null,
-		then that
-		{{NavigationHistoryEntry/url}}.
+    : source element
+    :: null or an {{Element}}.
+
      
 
-		NOTE: This part does expose the result of redirects.
+
      
+To get the current navigation state of a {{Document}} |document|:
 
-		NOTE: This part is not relevant to normal page rendering.
-		However, it can be relevant to what is rendered
-		when [=capturing the image=]
-		for a [[css-view-transitions-2#cross-document-view-transitions|cross-document view transition]].
+1. If |document| is not [=Document/fully active=], return null.
 
-		ISSUE: Is the final "non-null" check needed?
+1. Let |navigation| be |document|'s [=relevant global object=]'s [=navigation API=].
 
-	1. otherwise, the [=ongoing navigate event=]'s
-		{{NavigateEvent/destination}}'s
-		{{NavigationDestination/url}}
+1. Let |activation| be |navigation|'s {{Navigation/activation}}.
 
-		NOTE: This part does not expose the result of redirects.
+1. If |document| has not [=has been revealed|been revealed=]:
+    1. If |activation| is null, return null.
 
-	ISSUE: This assumes that the [=ongoing navigate event=]
-	and the [=transition=] have the same lifetime,
-	but this isn't really
-	true if the event is intercepted.
-	After
-	whatwg/html#11690 /
-	whatwg/html#11692.
-	we could probably define this more like "from" above.
-	But which lifetime is the one we want?
+    1. [=Assert=]: |activation|'s {{NavigationActivation/entry}} is not null.
 
-	NOTE: This part is for when the old document in the navigation
-	is still the current document.
+    1. Return a new [=navigation state=] whose
+        [=navigation state/old URL=] is |activation|'s {{NavigationActivation/from}}'s {{NavigationHistoryEntry/url}},
+        [=navigation state/new URL=] is |activation|'s {{NavigationActivation/entry}}'s {{NavigationHistoryEntry/url}},
+        [=navigation state/type=] is |activation|'s {{NavigationActivation/navigationType}},
+        [=navigation state/old index=] is |activation|'s {{NavigationActivation/from}}'s {{NavigationHistoryEntry/index}},
+        [=navigation state/new index=] is |activation|'s {{NavigationActivation/entry}}'s {{NavigationHistoryEntry/index}},
+        [=navigation state/phase=] is `committed`,
+        and [=navigation state/source element=] is null.
 
-1. If the [=document's navigation API=] of the document is non-null and
-	its [=activation=] is non-null,
-	the document's [=has been revealed=] is false or
-	was false at the start of the current [=task=],
-	and the activation's {{NavigationActivation/entry}}'s
-	{{NavigationHistoryEntry/url}}.
+    Note: this means that navigations that occur before the page is revealed, e.g. calling {{History/pushState()}} in the head do not reflect in CSS.
 
-	NOTE: This part is for when the new document in the navigation
-	has become the current document.
+1. Let |navigateEvent| be the [=ongoing navigate event=] of |navigation|.
 
-	ISSUE: Does it make sense to expose this when
-	the activation's {{NavigationActivation/from}} is null,
-	and thus there is no [=current from URL=]?
+1. Let |phase| be `loading`.
 
-1. Otherwise, null.
+1. If |navigateEvent| is null and |navigation|'s [=traversing navigate event=] is not null:
+    1. Set |navigateEvent| to |navigation|'s [=traversing navigate event=].
 
-	NOTE: The previous two branches can also produce null results.
+    1. Set |phase| to `ready`.
 
-ISSUE: The above definitions of from and to apparently don't work right
-if you start a same-document navigation (e.g., with {{History/pushState}})
-in the middle of a cross-document navigation.
+1. If |navigateEvent| is null, return null.
 
-The current navigation type of a [=/document=] is a {{NavigationType}} or null.
-It is defined as follows:
+1. Return a new [=navigation state=] whose
+    [=navigation state/old URL=] is |document|'s [=Document/URL=],
+    [=navigation state/new URL=] is |navigateEvent|'s {{NavigateEvent/destination}}'s {{NavigationDestination/url}},
+    [=navigation state/type=] is |ongoingNavigateEvent|'s {{NavigateEvent/navigationType}},
+    [=navigation state/old index=] is |navigation|'s [=navigation API/current entry=]'s {{NavigationHistoryEntry/index}},
+    [=navigation state/new index=] is |navigateEvent|'s {{NavigateEvent/destination}}'s {{NavigationDestination/index}},
+    [=navigation state/phase=] is |phase|,
+    and [=navigation state/source element=] is |ongoingNavigateEvent|'s {{NavigateEvent/sourceElement}}.
 
-1. If the [=document's navigation API=] of the document is non-null and
-	its [=transition=] is non-null,
-	the transition's {{NavigationTransition/navigationType}}.
-
-	NOTE: This part is for when the old document in the navigation
-	is still the current document.
-
-1. If the [=document's navigation API=] of the document is non-null and
-	its [=activation=] is non-null,
-	the document's [=has been revealed=] is false or
-	was false at the start of the current [=task=],
-	the activation's {{NavigationActivation/navigationType}}.
-
-	NOTE: This part is for when the new document in the navigation
-	has become the current document.
-
-1. Otherwise, null.
-
-The current navigation delta of a [=/document=] is a {{NavigationType}} or null.
-It is defined as follows:
-
-1. If the [=document's navigation API=] of the document is non-null and
-	its [=transition=] is non-null,
-
-	1. If the transition's {{NavigationTransition/navigationType}} is not {{NavigationType/traverse}}, null.
-
-	1. Otherwise,
-		the transition's {{NavigationTransition/to}}'s {{NavigationDestination/index}}
-		minus
-		the transition's {{NavigationTransition/from}}'s {{NavigationHistoryEntry/index}}.
-
-	NOTE: This part is for when the old document in the navigation
-	is still the current document.
-
-1. If the [=document's navigation API=] of the document is non-null,
-	its [=activation=] is non-null,
-	the activation's {{NavigationActivation/from}} is non-null, and
-	the document's [=has been revealed=] is false or
-	was false at the start of the current [=task=],
-
-	1. If the activation's {{NavigationActivation/navigationType}} is not {{NavigationType/traverse}}, null.
-
-	1. Otherwise,
-		the activation's {{NavigationActivation/entry}}'s {{NavigationHistoryEntry/index}}
-		minus
-		the activation's {{NavigationActivation/from}}'s {{NavigationHistoryEntry/index}}.
-
-	NOTE: This part is for when the new document in the navigation
-	has become the current document.
-
-1. Otherwise, null.
-
-ISSUE: Generally improve integration with the HTML spec for these definitions,
-instead of monkeypatching.
-This includes the interaction with [=has been revealed=]
-and the interaction with the {{pageswap}} event,
-and other things where this section links to non-exported definitions.
-
-ISSUE: Generally figure out if these definitions should care about
-the [=ongoing navigate event=] or the [=transition=].
-
-
      The ''url-pattern()'' function
      
-
-
+1. Let |state| be |document|'s [=current navigation state=].
+1. If |state| is null, return null.
+1. Return the result of switching on |relation|:
 
-The url-pattern() function represents a [=URL pattern=],
-which can be used to match URLs.
+
      
+: ''to''
+:: |state|'s [=navigation state/new URL=].
 
-
      -<> = url-pattern( <> )
-
      
+: ''from''
+:: |state|'s [=navigation state/old URL=].
 
-This function represents a [=URL pattern=] that can be created
-using the steps of the create a URL pattern for url-pattern() algorithm:
+: ''at''
+:: |state|'s [=navigation state/new URL=] if |state|'s [=navigation state/phase=] is `committed`; Otherwise |state|'s [=navigation state/old URL=].
 
-1. Let arg be the <> argument to the ''url-pattern()'' function.
+: ''with''
+:: |state|'s [=navigation state/old URL=] if |state|'s [=navigation state/phase=] is `committed`; Otherwise |state|'s [=navigation state/new URL=].
 
-1. Let baseURL be the [=style resource base URL=] of
-	the rule or declaration block containing the ''url-pattern()'' function.
+
      
 
-	
      
-	Do we want this to be the base URL all the time?
-	For use of ''url-pattern()'' in ''@navigation'',
-	it's likely more useful for the base URL
-	to be the document URL rather than the style sheet URL.
-	However, it would be very awkward for ''url-pattern()''
-	to be inconsistent with ''url()''.
+To get the current navigation type of a [=/document=] |document|:
+    1. If |document|'s [=current navigation state=] is non-null, return its [=navigation state/type=].
+    1. Return null.
 
-	Should we allow the base URL of ''url-pattern()''
-	to be defined by the consumer?
-	Should we introduce document-url-pattern()?
-	Should we do something similar to
-	[[css-images-3#ambiguous-urls]]
-	(see )?
+The traversing navigate event is the [=ongoing navigate event=] which was reset when the [=ongoing navigation=] is set to `traversal`.
 
-	Also see other proposed uses of {{URLPattern}} in CSS
-	in ,
-	for '':local-link''.
-	
      
 
-1. Return the result of [=URL pattern/create|create a URL pattern=] given
-	arg, baseURL, and an empty [=map=].
 
-NOTE: This function requires that its argument is quoted.
-This differs from the ''url()'' function,
-which allows its argument to be quoted or unquoted.
-
-To serialize a ''url-pattern()'' function f,
-[=serialize a function=] f,
-using [=serialize a string=] on the single argument
-to serialize f's contents.
-
-NOTE: This is defined this way because {{URLPattern}}
-intentionally does not provide a serialization.
+ISSUE: Improve integration with the HTML standard, especially the concept of [=traversing navigate event=] and unexported definitions.
 
 
      Privacy Considerations
      
 
-No new privacy considerations have been reported on this specification.
+ISSUE: To be written.
 
 
      Security Considerations
      
 
-No new security considerations have been reported on this specification.
+ISSUE: To be written.
diff --git a/css-overflow-3/Overview.bs b/css-overflow-3/Overview.bs
index e32500755dd0..1906c5fa7997 100644
--- a/css-overflow-3/Overview.bs
+++ b/css-overflow-3/Overview.bs
@@ -91,11 +91,12 @@ Introduction
 	which makes sense when the author's intent
 	is that the content not be shown.
 
-	This specification introduces the long-standing de-facto 'overflow-x' and 'overflow-y' properties,
+	This specification defines the long-standing de-facto 'overflow-x' and 'overflow-y' properties,
 	adds a ''overflow/clip'' value,
+	introduces an 'overflow-clip-margin' property,
 	and defines overflow handling more fully.
-
-	[Something something 'max-lines'.]
+	It also introduces control over smooth scrolling via 'scroll-behavior'
+	and for reserving space for the scrollbar via 'scrollbar-gutter'.
 
 	Note: This specification also reproduces the definition of the 'text-overflow' property
 	previously defined in [[CSS-UI-3]],
@@ -123,6 +124,11 @@ Module Interactions
 	and [[!CSS-UI-3]] section
 	5.2. Overflow Ellipsis: the text-overflow property.
 
+	When applied to 'display: table' elements,
+	the properties defined in this module apply to the [=table grid box=]
+	(not the [=table wrapper box=]).
+	[[!CSS2]] [[!CSS-TABLES-3]]
+
 
-
-	Note: The scrollable overflow rectangle is always a rectangle
-	in the box's own coordinate system, but might be non-rectangular
-	in other coordinate systems due to transforms [[CSS3-TRANSFORMS]].
-	This means scrollbars can sometimes appear when not actually necessary.
+	See [[#scrollable-overflow-calculation]] for details.
 
 
      
 Scrolling Overflow
      
@@ -336,8 +234,9 @@ Scrolling Overflow
 	(through which the scrollable overflow area can be viewed)
 	coincides with its padding box,
 	and is called the scrollport.
-	A box’s nearest scrollport
-	is the [=scrollport=] of its nearest [=scroll container=] ancestor.
+	A box’s nearest scroll container
+	is the nearest [=scroll container=] ancestor in the [=containing block chain=].
+	(See [[#overflow-properties]] for control over whether a box clips or scrolls its overflow.)
 
 	Scrolling operations can be initiated by the user
 	(for example, by manipulating a scrollbar, swiping a touchscreen, or using keyboard controls)
@@ -364,12 +263,6 @@ Scrolling Overflow
 	Unless otherwise specified,
 	it is the [=block-start=] [=inline-start=] corner of the [=scrollable overflow rectangle=].
 	(For example, in a [=flex container=] it is the [=main-start=] [=cross-start=] corner.)
-	Unless otherwise adjusted
-	(e.g. [[css-align-3#overflow-scroll-position|by content alignment]] [[css-align-3]]),
-	the area beyond the [=scroll origin=] in either axis
-	is considered the unreachable scrollable overflow region:
-	content rendered here is not accessible to the reader,
-	see [[#scrollable]].
 	A [=scroll container=] is said to be scrolled to its [=scroll origin=]
 	when its [=scroll origin=] coincides with the corresponding corner of its [=scrollport=].
 	This [=scroll position=], the scroll origin position,
@@ -392,6 +285,13 @@ Scrolling Overflow
 	or away from the [=scroll origin=] is not defined.
 	Should each API define its coordinate model?
 
+	Unless otherwise adjusted
+	(e.g. [[css-align-3#overflow-scroll-position|by content alignment]] [[css-align-3]]),
+	the area beyond the [=scroll origin=] in either axis
+	is considered the unreachable scrollable overflow region:
+	content rendered here is not accessible to the reader,
+	see [[#scrollable]].
+
 	The root viewport, which scrolls the page [=canvas=],
 	uses the principal writing mode for determining
 	its [=scroll origin=] and [=initial scroll position=].
@@ -421,20 +321,39 @@ Scrolling Overflow
 -->
 
 
      
-Scrolling and Clipping Overflow
      
+Clipping and Scrolling Overflow
+
+	The properties in this chapter specify whether and where a box’s [=overflow=] is clipped;
+	if so, whether it is a [=scroll container=];
+	and if so, in which axis(es) it is allowed to scroll (its scrollable axis(es)),
+	thus which of the following types of [=scroll container=] it is:
+
+	
      
+		
      single-axis scroll container
+		
      
+			A [=scroll container=] that is scrollable in only one axis.
+
+		
      dual-axis scroll container
+		
      
+			A [=scroll container=] that is scrollable in both axes.
+
+		
      block-axis scroll container
+		
      inline-axis scroll container
+		
      x-axis scroll container
+		
      y-axis scroll container
+		
      
+			A [=scroll container=] that is scrollable in the specified axis,
+			regardless of whether it can also scroll in the other axis.
+	
      
 
 
      
 Managing Overflow: the 'overflow-x', 'overflow-y', and 'overflow' properties
      
 
-	These properties specify whether a box’s [=overflow=] is clipped,
-	and if so,
-	whether it is a [=scroll container=].
-
 	
       		Name: overflow-x, overflow-y, overflow-block, overflow-inline
 		Value: visible | hidden | clip | scroll | auto
 		Initial: ''visible''
-		Applies to: block containers [[!CSS2]], flex containers [[!CSS3-FLEXBOX]], grid containers [[!CSS3-GRID-LAYOUT]]
+		Applies to: [=block containers=] [[!CSS2]], [=flex containers=] [[!CSS-FLEXBOX-1]], [=grid containers=] [[!CSS-GRID-1]], and [=table grid boxes=] [[!CSS-TABLES-3]]
 		Inherited: no
 		Logical property group: overflow
 		Percentages: N/A
@@ -479,20 +398,18 @@ Managing Overflow: the 'overflow-x', 'overflow-y', and 'overflow' properties
      
 			There is no special handling of overflow, that is,
 			the box’s content is rendered outside the box if positioned there.
-			The box is not a scroll container.
 
 		
      hidden
 		
      
 			This value indicates that
-			the box’s content is clipped to its [=padding box=]
+			the box’s content is clipped to its [=overflow clip edge=]
 			and that the UA must not provide any scrolling user interface
 			to view the content outside the clipping region,
 			nor allow scrolling by direct intervention of the user,
 			such as dragging on a touch screen
 			or using the scrolling wheel on a mouse.
 			However, the content must still be scrollable programmatically,
-			for example using the mechanisms defined in [[CSSOM-VIEW]],
-			and the box is therefore still a scroll container.
+			for example using the mechanisms defined in [[CSSOM-VIEW]].
 
 		
      clip
 		
      
@@ -503,21 +420,20 @@ Managing Overflow: the 'overflow-x', 'overflow-y', and 'overflow' propertiesscroll container.
+			through any mechanism.
 
 			Unlike ''hidden'', this value does not cause
 			the element to establish a new formatting context.
 
 			Note: Authors who also want the box to establish a formatting context
-			may use ''display: flow-root'' together with ''overflow: clip''.
+			can use ''display: flow-root'' together with ''overflow: clip''.
 
 		
      scroll
 		
      
 			This value indicates that
-			the content is clipped to the [=padding box=],
-			but can be scrolled into view
-			(and therefore the box is a scroll container).
+			the content is clipped to the [=overflow clip edge=],
+			but can be scrolled into view.
+
 			Furthermore, if the user agent uses a scrolling mechanism
 			that is visible on the screen (such as a scroll bar or a panner),
 			that mechanism should be displayed
@@ -539,25 +455,31 @@ Managing Overflow: the 'overflow-x', 'overflow-y', and 'overflow' properties
 
 	The ''overflow/scroll'', ''overflow/auto'', and ''overflow/hidden'' values
-	are known as the scrollable values of 'overflow'.
+	are known as the scrollable values of 'overflow'.
+	They cause the box to be a [=scroll container=]
+	and the affected axis to be a [=scrollable axis=].
+	A [=block box=] that becomes a [=scroll container=]
+	also establishes an [=independent formatting context=].
+
 	The  ''overflow/visible'' and ''overflow/clip'' values
 	are known as the non-scrollable values.
-
-	The  ''visible''/''overflow/clip'' values of 'overflow'
-	compute to ''overflow/auto''/''hidden'' (respectively)
-	if one of 'overflow-x' or 'overflow-y' is neither ''visible'' nor ''overflow/clip''.
-	On [=replaced elements=],
-	a [=computed value|computed=] ''overflow/hidden'' value further resolves
-	to a [=used value=] of ''overflow/clip''.
-
-	If the computed value of 'overflow' on a block box
-	is neither ''overflow/visible'' nor ''overflow/clip'' nor a combination thereof,
-	it [=establishes an independent formatting context=] for its contents.
+	However, if the other axis specifies a [=scrollable value=],
+	a specified value of  ''visible''
+	[=computed value|computes=] to ''overflow/auto'',
+	enabling scrolling in its axis.
+	If neither axis computes to a [=scrollable value=],
+	the box is not a [=scroll container=].
+	If only one axis computes to a [=scrollable value=]
+	(i.e. the other axis is ''overflow/clip''),
+	the box is a [=single-axis scroll container=].
 
 	User agents must also support
 	the overlay keyword
 	as a [=legacy value alias=] of ''overflow/auto''.
 
+	Note: The 'overflow' properties are expanded to apply to [=replaced elements=]
+	in Level 4.
+
 
      
 Interaction of 'visibility' and 'overflow'
      
 
@@ -618,12 +540,43 @@ Overflow in Print and Other Static Media
 	for example, e-book readers paginate content,
 	but are interactive.
 
+
      
+Overflow Viewport Propagation
      
+
+	UAs must apply the 'overflow' values
+	set on the root element to the viewport
+	when the root element’s 'display' value is not ''display/none''.
+	However,
+	when the root element is an [[!HTML]] <{html}> element
+	(including XML syntax for HTML)
+	whose 'overflow' value is ''overflow/visible'' (in both axes),
+	and that element has as a child
+	a <{body}> element whose 'display' value is also not ''display/none'',
+	user agents must instead apply the 'overflow' values
+	of the first such child element to the viewport.
+	The element from which the value is propagated must then have
+	a used 'overflow' value of ''overflow/visible''.
+
+	Note: Using [=containment=] on the HTML <{html}> or <{body}> elements disables
+	this special handling of the HTML <{body}> element.
+	See the [[CSS-CONTAIN-1#contain-property]] for details.
+
+	Note: ''overflow: hidden'' on the root element
+	might not clip everything outside the [=Initial Containing Block=]
+	if the ICB is smaller than the viewport,
+	which can happen on mobile.
+
+	If ''overflow/visible'' is applied to the viewport,
+	it must be interpreted as ''overflow/auto''.
+	If ''overflow/clip'' is applied to the viewport,
+	it must be interpreted as ''overflow/hidden''.
+
 
      
 Expanding Clipping Bounds: the 'overflow-clip-margin' property
      
 
 	
       	Name: overflow-clip-margin
-	Value: <> || <>
+	Value: <> || <>
 	Initial: ''0px''
 	Inherited: no
 	Applies to: boxes to which 'overflow' applies
@@ -632,10 +585,8 @@ Expanding Clipping Bounds: the 'overflow-clip-margin' property
 	
      
 
 	This property defines the overflow clip edge of the box,
-	i.e. precisely how far outside its bounds
-	the box’s content is allowed to paint
-	before being clipped
-	by effects (such as ''overflow: clip'', above)
+	i.e. precisely where the box's content is allowed to paint
+	before being clipped by effects (such as ''overflow: clip'', above)
 	that are defined to clip to the box’s [=overflow clip edge=].
 
 	Values are defined as follows:
@@ -649,12 +600,12 @@ Expanding Clipping Bounds: the 'overflow-clip-margin' property
 			If omitted,
 			defaults to ''overflow-clip-margin/padding-box''.
 
-		: <>
+		: <>
 		::
 			The specified offset dictates
 			how much the [=overflow clip edge=] is expanded from
-			the specified box edge
-			Negative values are invalid.
+			the specified box edge.
+			Negative values indicate insets, instead.
 			Defaults to zero if omitted.
 	
 
@@ -666,41 +617,139 @@ Expanding Clipping Bounds: the 'overflow-clip-margin' property
 	and [[css-backgrounds-3#shadow-shape]],
 	noting in particular the formula for outsets beyond the [=border edge=].
 
-	Note: This property has no effect on boxes
-	with ''overflow: hidden'' or ''overflow: scroll'',
-	which are not defined to use the [=overflow clip edge=].
+	If the box is a [=scroll container=]:
 
-
      
-Overflow Viewport Propagation
      
+	* the [=overflow clip edge=] is clamped to stay within the element's [=padding box=].
+		(This does not affect the [=computed value|computed=] or [=used value=] of this property.)
+	* the ''overflow-clip-margin/border-box'' value
+		ignores any specified offset
+		(and, due to the previous bullet point,
+		effectively acts as ''overflow-clip-margin/padding-box'')
 
-	UAs must apply the 'overflow-*' values
-	set on the root element to the viewport
-	when the root element’s 'display' value is not ''display/none''.
-	However,
-	when the root element is an [[!HTML]] <{html}> element
-	(including XML syntax for HTML)
-	whose 'overflow' value is ''overflow/visible'' (in both axes),
-	and that element has as a child
-	a <{body}> element whose 'display' value is also not ''display/none'',
-	user agents must instead apply the 'overflow-*' values
-	of the first such child element to the viewport.
-	The element from which the value is propagated must then have
-	a used 'overflow' value of ''overflow/visible''.
+	Note: This property was previously defined to only affect ''overflow: clip''.
+	It now also affects [=scroll containers=],
+	but only to shrink the clipping edge.
 
-	Note: Using [=containment=] on the HTML <{html}> or <{body}> elements disables
-	this special handling of the HTML <{body}> element.
-	See the [[CSS-CONTAIN-1#contain-property]] for details.
+
      
+Calculating the Scrollable Overflow Area
      
 
-	Note: ''overflow: hidden'' on the root element
-	might not clip everything outside the [=Initial Containing Block=]
-	if the ICB is smaller than the viewport,
-	which can happen on mobile.
+	The scrollable overflow area of a box is the union of:
+	
        
+		
      • 
+			Its own [=padding box=].
 
-	If ''overflow/visible'' is applied to the viewport,
-	it must be interpreted as ''overflow/auto''.
-	If ''overflow/clip'' is applied to the viewport,
-	it must be interpreted as ''overflow/hidden''.
+		
      • 
+			All [=line boxes=] it directly contains.
+
+		
      • 
+			The border boxes
+			of all boxes for which it is the containing block
+			and whose border boxes are positioned not wholly
+			within its [=unreachable scrollable overflow region=] (if any),
+			accounting for transforms by projecting each box onto
+			the plane of the element that establishes its 3D rendering context.
+			[[!CSS3-TRANSFORMS]]
+
+			Issue: Is this description of handling transforms
+			sufficiently accurate?
+
+			Border boxes with zero area
+			do not affect the [=scrollable overflow area=].
+
+		
      • 
+			The margin areas of grid item and flex item boxes
+			for which the box establishes a containing block.
+
+			The UA may additionally include
+			the margin areas of other boxes
+			for which the box establishes a containing block;
+			however,
+			the conditions under which such margin areas are included
+			is undefined in this level.
+			This needs further testing and investigation;
+			is therefore deferred in this draft.
 
+		
      • 
+			The [=scrollable overflow rectangles=] of all of the above boxes
+			(including zero-area boxes),
+			clipped to their [=overflow clip edge=]
+			if 'overflow' is not ''overflow/visible'' or 'contain' applies ''contain/paint'',
+			and accounting for transforms as described above.
+
+			Note: The 'clip', 'clip-path', and 'mask-*' properties [[!CSS-MASKING-1]]
+			do not affect the scrollable overflow area.
+			Only effects that clip to the [=overflow clip edge=] are taken into account.
+
+			Note: The [=scrollable overflow rectangle=] is always a rectangle
+			in its box's own coordinate system, but might be non-rectangular
+			in ancestor coordinate systems due to transforms [[CSS3-TRANSFORMS]].
+			This means scrollbars can sometimes appear when not actually necessary.
+
+		
      • 
+			Additional padding added
+			to the [=scrollable overflow rectangle=]
+			as necessary to enable scroll positions
+			that satisfy the requirements of both
+			''place-content: start'' and ''place-content: end'' alignment.
+
+			Note: This padding represents,
+			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
+			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,
+			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.
+
+			
        
+				
+				
        
+					Issue: Replace this image with a proper SVG.
+				
        
+			
        
+
+	
      
+
+	Additionally, due to Web-compatibility constraints
+	(caused by authors exploiting legacy bugs to surreptitiously hide content from visual readers but not search engines and/or speech output),
+	UAs must clip any content in the [=unreachable scrollable overflow region=].
+
+	Note: The [=content-distribution properties=] can
+	[[css-align-3#overflow-scroll-position|alter the unreachable scrollable overflow region]]
+	to ensure that a [=scroll container=]’s [=alignment subject=]
+	is reachable after alignment.
+	[[css-align-3]]
+
+	
+
+
      
+Scrolling Behaviors and Animations
      
+
+CSS provides several controls over how scrolling behaves when triggered.
+	* CSS Scroll Snap allows defining "snap positions",
+		which are scroll positions to which the [=scroll container=] is biased to land.
+	* CSS Overscroll Behavior
+		allows controlling what happens when scrolling past the end of the scrollable area.
+	* 'scroll-behavior', defined below, controls whether programmatic scrolling animates smoothly or not.
+
+	Note: For animating other things in conjunction with scrolling, see [[SCROLL-ANIMATIONS-1]].
 
 
      
 Smooth Scrolling: the 'scroll-behavior' Property
      
@@ -745,11 +794,11 @@ Scrollbars and Layout
 
      
 Scrollbar Contributions to Sizing
      
 
-	When reserving space for a scrollbar placed at the edge of an element's box,
-	the reserved space is inserted between the inner border edge
-	and the outer padding edge.
-	For the purpose of the background positioning area and background painting area however,
-	this reserved space is considered to be part of the [=padding box=].
+	The space reserved for the scrollbar is located between 
+	the [=padding area=] and the [=border area=] of the [=scroll container=] box.
+	However, for the purpose of the background positioning area 
+	and background painting area,
+	this reserved space is treated as part of the [=padding area=].
 
 	
      
 		In the following document fragment,
@@ -1291,6 +1340,15 @@ ellipsis interaction with scrolling interfaces
 
 	This appendix is informative.
 
+	Significant changes since the 7 October 2025 Working Draft:
+	* Allow combining ''overflow: clip'' behavior in one axis with scrolling in the other,
+		to allow single-axis trapping for e.g. [=sticky positioning=].
+		(Issue 12289)
+	* Clarify which clipping affects limit contributions to the scrollable overflow area of the nearest [=scroll container=].
+		(Issue 8607)
+	* Clarify application of 'overflow' to tables.
+		(Isue 10881)
+
 	Significant changes since the 29 March 2023 Working Draft:
 
 	* Define that ''overflow: hidden'' is treated as ''overflow: clip'' on [=replaced elements=].
diff --git a/css-overflow-4/Overview.bs b/css-overflow-4/Overview.bs
index 984390dc8c83..bda42d7115cd 100644
--- a/css-overflow-4/Overview.bs
+++ b/css-overflow-4/Overview.bs
@@ -24,6 +24,7 @@ spec:css-pseudo-4; type:selector; text:::first-letter
 spec:css-pseudo-4; type:selector; text:::first-line
 spec:css-writing-modes-4; type:dfn; text:start
 spec:css-writing-modes-4; type:dfn; text:end
+spec:dom; type:dfn; for: Document; text:mode
 
      
 
       url: https://drafts.csswg.org/selectors-3/#subject; type: dfn; text: subject;
@@ -216,11 +217,11 @@ Managing Overflow: the 'overflow-x', 'overflow-y', and 'overflow' properties
      
-Expanding Clipping Bounds: the 'overflow-clip-margin-*' properties
      
+Changing Clipping Bounds: the 'overflow-clip-margin-*' properties
 
 	
       	Name: overflow-clip-margin-top, overflow-clip-margin-right, overflow-clip-margin-bottom, overflow-clip-margin-left, overflow-clip-margin-block-start, overflow-clip-margin-inline-start, overflow-clip-margin-block-end, overflow-clip-margin-inline-end
-	Value: <> || <>
+	Value: <> || <>
 	Initial: ''0px''
 	Inherited: no
 	Logical property group: overflow-clip-margin
@@ -231,7 +232,7 @@ Expanding Clipping Bounds: the 'overflow-clip-margin-*' properties
 
 	
       	Name: overflow-clip-margin, overflow-clip-margin-inline, overflow-clip-margin-block
-	Value: <> || <>
+	Value: <> || <>
 	Initial: ''0px''
 	Inherited: no
 	Applies to: boxes to which 'overflow' applies
@@ -262,12 +263,12 @@ Expanding Clipping Bounds: the 'overflow-clip-margin-*' properties
 			ISSUE(7144): Application of 'overflow-clip-margin' to [=replaced elements=]
 			is still being worked out.
 
-		: <>
+		: <>
 		::
 			The specified offset dictates
 			how much the [=overflow clip edge=] is expanded from
-			the specified box edge
-			Negative values are invalid.
+			the specified box edge.
+			Negative values shrink the box, instead.
 			Defaults to zero if omitted.
 	
 
@@ -279,10 +280,6 @@ Expanding Clipping Bounds: the 'overflow-clip-margin-*' properties
 	and [[css-backgrounds-3#shadow-shape]],
 	noting in particular the formula for outsets beyond the [=border edge=].
 
-	Note: This property has no effect on boxes
-	with ''overflow: hidden'' or ''overflow: scroll'',
-	which are not defined to use the [=overflow clip edge=].
-
 
 
      
 Automatic Ellipses
      
@@ -350,8 +347,6 @@ Inline Overflow Ellipsis: the 'text-overflow' property
 		
      <>
 		
      
 			Render the given string to represent clipped inline content.
-			The given string is treated as an independent paragraph
-			for bidi purposes.
 
 		
      fade( [ <> ] )
 		
      
@@ -474,6 +469,17 @@ ellipsing details
 			then clip the rendering of the ellipsis itself
 			(on the same side that neutral characters on the line
 			would have otherwise been clipped with the ''text-overflow:clip'' value).
+
+		
    • 
+			For bidi purposes, the ellipsis and string values must be treated
+			as if they were wrapped in an anonymous inline
+			with ''unicode-bidi: isolate''
+			which inherits ''direction'' from the block.
+
+			
+				text-overflow-string-006.html
+				text-overflow-string-007.html
+			
 	
 
 
@@ -743,12 +749,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 +764,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 +885,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''.
 
 		
@@ -862,11 +926,23 @@ Indicating Block-Axis Overflow: the 'block-ellipsis' property
 
 		If this results in the entire contents of the line box being displaced,
 		the line box is considered to contain a [=strut=], as defined in [[CSS2/visudet#leading]].
+		
+		This requirement applies regardless of the document's [=mode=],
+		and is not affected by the [[quirks#the-blocks-ignore-line-height-quirk|line-height quirk]].
+		
+		
+
 
 		
 			block-ellipsis-016.html
 			block-ellipsis-018.html
 			block-ellipsis-025.html
+			block-ellipsis-quirk-001.html
 		
 
 		Displacing content to make room for the [=block overflow ellipsis=]
@@ -881,10 +957,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 +1255,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.
@@ -1245,6 +1318,7 @@ Forcing a Break After a Set Number of Lines: the 'max-lines' property
 		webkit-line-clamp-013.html
 		webkit-line-clamp-027.html
 		webkit-line-clamp-029.html
+		line-clamp-with-floats-007.html
 	
 
 	Note: This implies that 'max-lines' has no effect when applied to [=multi-column containers=],
@@ -1539,8 +1613,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 +1652,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 +1688,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=]:
 
@@ -1624,6 +1710,8 @@ Handling of Excess Content: the 'continue' property
 			line-clamp-033.html
 			line-clamp-auto-033.html
 			line-clamp-auto-with-ruby-002.html
+			line-clamp-with-floats-003.html
+			line-clamp-with-floats-004.html
 		
 
 	- Any [=line boxes=] that follow the [=clamp point=]
@@ -1687,6 +1775,7 @@ Handling of Excess Content: the 'continue' property
 	is always counted as [=ink overflow=] rather than [=scrollable overflow=].
 
 	
+		line-clamp-with-floats-010.html
 		line-clamp-021.html
 		line-clamp-with-abspos-019.html
 	
@@ -1694,9 +1783,26 @@ 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 [=block-end=] [=content edge=]
+	of the [=line-clamp container=].
+	They do not introduce any clearance
+	that would make the [=line-clamp container=] increase its height,
+	and do not contribute to the [=scrollable overflow area=].
+
+	
+		line-clamp-with-floats-001.html
+		line-clamp-with-floats-002.html
+		line-clamp-with-floats-005.html
+		line-clamp-with-floats-006.html
+		line-clamp-with-floats-010.html
+	
+
 	If a [=block container=] contains a [=clamp point=],
 	within itself or in any of its descendants,
-	its [=automatic block size=] will not take into account any invisible boxes.
+	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 +1812,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 d35d5bd74e9a..9e8bfded6364 100644
--- a/css-overscroll-1/Overview.bs
+++ b/css-overscroll-1/Overview.bs
@@ -7,8 +7,8 @@ Work Status: Exploring
 Group: CSSWG
 URL: https://drafts.csswg.org/css-overscroll-1/
 TR: https://www.w3.org/TR/css-overscroll-1/
-Editor: Benoit Girard, Facebook, bgirard@fb.com
-Editor: Majid Valipour, Google, majidvp@google.com, w3cid 81464
+Former Editor: Benoit Girard, Facebook, bgirard@fb.com
+Former Editor: Majid Valipour, Google, majidvp@google.com, w3cid 81464
 
 Abstract: This module defines 'overscroll-behavior' to control the behavior when the scroll position
 Abstract: of a scroll container reaches the edge of the scrollport.
@@ -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-page-3/Overview.bs b/css-page-3/Overview.bs
index e5170f7ae5c5..33ed6d144418 100644
--- a/css-page-3/Overview.bs
+++ b/css-page-3/Overview.bs
@@ -1258,7 +1258,7 @@ properties:
 		is larger than the height of the top page margin,
 		then any ''margin-top/auto'' values for 'margin-top' or 'margin-bottom' are,
 		for the following rules,
-		treated as zero.
+		treated as <>.
 
 	
    • 
 		If at this point all of 'height', 'margin-top', and 'margin-bottom'
@@ -1271,14 +1271,20 @@ properties:
 		follows from the equality.
 
 	
    • 
-		If 'height' is set to ''height/auto'', any other auto values become ''0'' and
-		'height' follows from the resulting equality
+		If 'height' is set to ''height/auto'', any auto margin
+		values become <> and 'height' follows from the
+		resulting equality.
 
 	
    • 
 		If both 'margin-top' and 'margin-bottom' are ''margin-top/auto'',
-		their used values are equal.
+		their used values become equal.
 		This vertically centers the page-margin box content
 		within the top page margin.
+		If <> is not ''0'' here, an additional adjustment step
+		is performed: If the resulting 'margin-top' in the previous step became
+		less than <>, subtract as much as possible of this
+		difference from 'margin-bottom' without making it negative. Then add
+		this value to 'margin-top'.
 
 
 	The same rules apply to the bottom page-margin boxes (bottom-left-corner,
@@ -2060,6 +2066,73 @@ Positioning the page box on the sheet
 	The user agent may wish to consult the user in this
 	regard.
 
+
      
+Staying within the printable area: the '@page/page-margin-safety' property
      
+
+	
      +	Name: page-margin-safety
+	For: @page
+	Value: none | clamp | add
+	Initial: auto
+	Computed Value: as specified
+	
      
+
+	
      
+		
      
+			The "For:" field above should also include the at-rules
+			@top-left-corner, @top-left, @top-center, @top-right,
+			@top-right-corner, @right-top, @right-middle,
+			@right-bottom, @bottom-right-corner, @bottom-right,
+			@bottom-center, @bottom-left, @bottom-left-corner,
+			@left-bottom, @left-middle, @left-top.
+		
      
+		
      However, multiple at-rules here are currently not supported by bikeshed.
      
+	
      
+
+	Most printers have a small region along each edge of the page sheet
+	which is unprintable, typically due to the printer's paper handling
+	mechanism. This property can be used to help staying within the
+	printable area, by adjusting the page margins and page margin box
+	margins.
+
+	Some printers don't have a uniform unprintable area width along each of
+	the four paper edges, and the printer may rotate the print output at
+	their own discretion. The user agent may therefore not be able to make
+	assumptions about which edge will be fed first into the printer, or what
+	orientation the sheet of paper has. If the user agent cannot make such
+	assumptions, only one will be provided (to be used on all 4 sides): The
+	larger of these four values. Otherwise, if the user agent can trust that
+	the four values are usable individually, and that no rotation is going
+	to take place, and so on, each side of the page may have individual
+	values.
+
+	Let this value be <>, which is a <>.
+
+	This property only affects margins that are adjacent to one of the edges
+	of a sheet. For all other margins, i.e. those margins facing the
+	page's page area, its value is 0. In other words, when
+	page-margin-safety is specified in a margin context, it will only have
+	an effect at one or two sides. For instance, @page { @top-right-corner {
+	page-margin-safety: clamp; } } may only clamp top and right margin
+	values, as the bottom and left margins face the document's contents, not
+	the page's edges.
+
+	
      
+		
      none
      
+		
      Margins are not affected by unprintable regions
      
+		
      clamp
      
+		
      
+			The used margin values will be the maximum of the
+			resolved value, and <> for the
+			given side.
+		
      
+		
      add
      
+		
      
+			The used margin values will be the resolved value, plus
+			<> for the given side.
+		
      
+	
      
+
 
      
 		
 		
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
 
      • 
-
+
diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs
index be96afc4cac2..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
      
@@ -1786,15 +1789,13 @@ Additions to the CSS Object Model
      
 {{CSSPseudoElement}} Interface
      
 
-  The {{CSSPseudoElement}} interface
-  allows [=pseudo-elements=] to be event targets.
-
   
           [Exposed=Window]
-    interface CSSPseudoElement : EventTarget {
+    interface CSSPseudoElement {
         readonly attribute CSSOMString type;
         readonly attribute Element element;
         readonly attribute (Element or CSSPseudoElement) parent;
+        readonly attribute CSSOMString selectorText;
         CSSPseudoElement? pseudo(CSSOMString type);
     };
   
      
@@ -1809,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"
@@ -1818,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
@@ -1832,6 +1839,15 @@ Additions to the CSS Object Model
   {{CSSPseudoElement/parent}} will return a {{CSSPseudoElement}}
   while {{CSSPseudoElement/element}} returns an {{Element}}.
 
+  The selectorText attribute
+  is a string representing the full, normalized selector text
+  used to select the pseudo-element.
+  This includes the pseudo-element name and any arguments,
+  serialized in a form that can round-trip.
+  For example, "::after" for a ''::after'' pseudo-element,
+  or "::scroll-button(left)" for a ''::scroll-button()'' pseudo-element
+  with a left argument.
+
   The pseudo(type) method
   returns the {{CSSPseudoElement}} interface
   representing the [=sub-pseudo-element=] referenced in its argument,
@@ -1871,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 `
      
 
 
 
 
 	
      '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'