From 184f6636e56d8ba6e1d5a965dd15d6b3d715991b Mon Sep 17 00:00:00 2001 From: ile-24556 <110268848+ile-24556@users.noreply.github.com> Date: Fri, 10 Apr 2026 23:50:44 +0900 Subject: [PATCH 001/229] [css-fonts-4] Fix typo in overview (#13791) , which is a type of , has `monospace`; `monospaced` is considered to be a typo. --- css-fonts-4/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs index 34c4594ad66f..f15a64cded0d 100644 --- a/css-fonts-4/Overview.bs +++ b/css-fonts-4/Overview.bs @@ -233,7 +233,7 @@ Font family: the 'font-family!!property' property 1. Generics which apply to all Unicode characters and will always match a locally installed font. - For example, ''monospaced''. + For example, ''monospace''. 2. Generics which apply to all Unicode characters but may not match to a locally installed font From f1db79eaf8bd252603ee9354ff1bda24929cf2d2 Mon Sep 17 00:00:00 2001 From: Kevin Babbitt Date: Fri, 10 Apr 2026 13:33:08 -0700 Subject: [PATCH 002/229] [css-gaps-1][explainer] Better examples for varying decorations --- css-gaps-1/explainer.md | 77 ++++++++---------- css-gaps-1/images/calendar-codepen.png | Bin 0 -> 43110 bytes ...fts-issues-2748-issuecomment-595889781.png | Bin 182598 -> 0 bytes css-gaps-1/images/example-multiple-areas.png | Bin 6347 -> 0 bytes css-gaps-1/images/example-varying-widths.png | Bin 0 -> 7180 bytes .../images/example-width-style-color.png | Bin 11521 -> 0 bytes 6 files changed, 33 insertions(+), 44 deletions(-) create mode 100644 css-gaps-1/images/calendar-codepen.png delete mode 100644 css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-595889781.png delete mode 100644 css-gaps-1/images/example-multiple-areas.png create mode 100644 css-gaps-1/images/example-varying-widths.png delete mode 100644 css-gaps-1/images/example-width-style-color.png diff --git a/css-gaps-1/explainer.md b/css-gaps-1/explainer.md index 6cfc75fa7bb1..3825439e6b58 100644 --- a/css-gaps-1/explainer.md +++ b/css-gaps-1/explainer.md @@ -50,14 +50,13 @@ content location of future work and discussions. - [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: Calendar grid with header column](#scenario-calendar-grid-with-header-column) - - [Scenario: Different lines for different gaps, applied to a sub-area of a grid](#scenario-different-lines-for-different-gaps-applied-to-a-sub-area-of-a-grid) - [Scenario: Periodic Table omitting decorations from certain areas](#scenario-periodic-table-omitting-decorations-from-certain-areas) - [Dropped ideas](#dropped-ideas) - [Logical properties](#logical-properties) @@ -179,20 +178,17 @@ simpler for gap decorations as there are fewer unknowns to consider. ```css .varying-widths { - dispay: grid; + display: grid; grid-template-columns: repeat(3, 100px); - grid-auto-rows: 30px; - row-gap: 9px; - row-rule: 5px solid black, repeat(auto, 1px solid black), 3px solid black; -} -.item { - height: 30px; - padding: 5px; - border: 1px dotted lightgray; + 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-width-style-color.png) +![](images/example-varying-widths.png) ### Interaction with intersection types @@ -529,6 +525,31 @@ https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/1100 ![](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 @@ -629,38 +650,6 @@ will "win". Thus, the value above would apply alternating 1px solid black and 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: Calendar grid with header column - -```css -.grid-multiple-decoration-areas { - display: grid; - grid-template-rows: [top] 30px [main-top] repeat(6, 30px) [bottom]; - grid-template-columns: [left] 100px [main-left] repeat(3, 100px) [right]; - gap: 10px; - rule-areas: --month-column left / top / main-left / bottom; - row-rule: 1px solid black [--month-column] 1px solid lightblue; - column-rule: [--month-column] 1px solid lightblue; -} -``` - -![](images/example-multiple-areas.png) - -#### Scenario: Different lines for different gaps, applied to a sub-area of a grid - -https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-595889781 - -```css -.container { - rule-style: solid: - rule-color: lightgray; - rule-areas: --main 2 / 2 / -1 / -1; - column-rule-width: [--main] 1px repeat(auto, 2px) 1px; - row-rule-width: [--main] 0px repeat(auto, 2px 1px); -} -``` - -![](images/csswg-drafts-issues-2748-issuecomment-595889781.png) - #### Scenario: Periodic Table omitting decorations from certain areas https://github.com/w3c/csswg-drafts/issues/12024#issuecomment-3086244002 diff --git a/css-gaps-1/images/calendar-codepen.png b/css-gaps-1/images/calendar-codepen.png new file mode 100644 index 0000000000000000000000000000000000000000..f5c4167279f17f4f390dc2a95fa0746d4c6fcc03 GIT binary patch literal 43110 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 b#^Hryy5rJ=-=mt4>r0Bt-p#pl|M~v{Z3Vlf literal 0 HcmV?d00001 diff --git a/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-595889781.png b/css-gaps-1/images/csswg-drafts-issues-2748-issuecomment-595889781.png deleted file mode 100644 index e631badb69125d6148c897d4107a6a3689657e0b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 182598 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
    WJ_E$LwS0{>dGGM6Q5jA&=kB!*$tNZoo^!P_7ks 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

    *omNAzRQJvMFIOA%TlV} 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 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 0000000000000000000000000000000000000000..f0204c24c383fbff5ac663d212edd96ba35e7e81 GIT binary patch literal 7180 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 literal 0 HcmV?d00001 diff --git a/css-gaps-1/images/example-width-style-color.png b/css-gaps-1/images/example-width-style-color.png deleted file mode 100644 index e52c45bc5483eb74b7a90fc7de1dca657ee1fab8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 11521 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 YZi|wBqxz2T7$#6t(pIdLfBoTq0br{L?f?J) From 225cc38da645d50e972f47d36ae26a94f5d6a6f8 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Fri, 10 Apr 2026 09:49:05 -0400 Subject: [PATCH 003/229] [selectors 4][editoril] Explainer --- selectors-4/Selectors_4_Explainer.md | 123 +++++++++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 selectors-4/Selectors_4_Explainer.md diff --git a/selectors-4/Selectors_4_Explainer.md b/selectors-4/Selectors_4_Explainer.md new file mode 100644 index 000000000000..819ade365f69 --- /dev/null +++ b/selectors-4/Selectors_4_Explainer.md @@ -0,0 +1,123 @@ +# Selectors 4 Explainer + +## Author + + - Chris Lilley (W3C) + +## Participate + +- [Issue tracker](https://github.com/w3c/csswg-drafts/issues?q=state%3Aopen%20label%3A%22selectors-4%22) + +## What are Selectors + +Introduced with [CSS1](https://www.w3.org/TR/CSS1/#basic-concepts) in 1996, +Selectors are a mature and widely deployed way to +select **individual parts** of a (typically HTML) document, +so that they may be **styled** or **manipulated with script**. + +They were further developed in [CSS2.1](https://www.w3.org/TR/CSS2/selector.html#q5.0) +(W3C Recommendation, from 2011) +and in [Selectors 3](https://www.w3.org/TR/selectors-3/) +(W3C Recommendation, 2018). + +[Selectors 4](https://www.w3.org/TR/selectors-4/) +is an incremental improvement to previous Selectors specifications, +responding to common user needs. + +It is now widely deployed, stable, +and is being prepared for W3C Recommendation, +while less-mature Selectors have been moved to +[Selectors 5](https://www.w3.org/TR/selectors-5/). + +However, the Selectors 4 specification +is a _complete specification_ of Selectors, +(including material from levels 1 through 3) +not a delta. This aids readability. + +In view of this widespread use, +this explainer does not address early-review questions +such as general user need or alternatives considered; +instead it motivates the particular changes found in Selectors 4. + +## Why `Selectors` not `CSS Selectors`? + +Selectors have expanded beyond their initial use in CSS; +they are also widely used in the Document Object Model, +to select parts of a document for manipulation by JavaScript. +These are both majority uses, hence the naming of the specification. + +## What is new in Selectors 4 + +(Expanded from [Changes Since Level 3](https://drafts.csswg.org/selectors-4/#changes-level-3)) + +### Conditional Logic + +- The matches-any [`:is`](https://www.w3.org/TR/selectors-4/#matches) pseudo-class, + formerly called `:matches()`, + has been added to allow stylesheet authors to group functionally related elements, + such as any element that is either hovered or focussed. +- The specificity-adjusting [`:where()`](https://www.w3.org/TR/selectors-4/#zero-matches) pseudo-class + has been added to construct zero-specificity filters, + which are easy to override, + replacing the many ugly hacks previously required to simulate this +- The relational [`:has()`]() pseudo-class + +### Interactivity and Forms + +- Added the [`:modal`](https://www.w3.org/TR/selectors-4/#modal-state) pseudo-class, + to select elements which exclude interaction with all other elements until dismissed +- Added [`:open`](https://www.w3.org/TR/selectors-4/#open-state) + and [`:popover-open`](https://www.w3.org/TR/selectors-4/#popover-open-state) pseudo-classes, + primarily but not exclusively to use with HTML forms + +### Hyperlinking Support + +- Added [`:any-link`](https://www.w3.org/TR/selectors-4/#the-any-link-pseudo) to match + any element that acts as the source anchor of a hyperlink + +### Clearer Expression of Authorial Intent + +- Expanded the sibling-counting [`:nth-child()`](https://www.w3.org/TR/selectors-4/#the-nth-child-pseudo) + and negation [`:not()`](https://www.w3.org/TR/selectors-4/#negation) pseudo-classes + to accept a **selector list**. + +### Media State + +- Added the `:playing`, `:paused` and `:seeking` [media playback state](https://www.w3.org/TR/selectors-4/#video-state) pseudo classes, + to enable selecting on the dynamic state of video elements, + functionality which previously required JavaScript +- Added the `:buffered` and `:stalled` + [media loading state](https://www.w3.org/TR/selectors-4/#media-loading-state) pseudo-classes, + again providing functionality that previously needed JavaScript +- Added the [`:fullscreen`](https://www.w3.org/TR/selectors-4/#fullscreen-state) + and [`:picture-in-picture`](https://www.w3.org/TR/selectors-4/#pip-state) pseudo-classes +- Added the `:muted` and `volume-locked` pseudo-classes + for sound-producing elements + +### Internationalization Improvements + +- Expanded the content language + [`:lang()`](https://www.w3.org/TR/selectors-4/#the-lang-pseudo) pseudo-class + to accept **wildcard matching** and **lists of language codes** + for greater flexibility styling related languages +- Added the content language writing direction + [`dir()`](https://www.w3.org/TR/selectors-4/#the-dir-pseudo) pseudo-class + for convenient styling of left-to-right and righ-to-left content +- Clarified case-insensitive string matching + +### Consolidation + +Selectors first introduced in +[CSS Basic UI 3](https://www.w3.org/TR/css-ui-3/), +have been moved to the main Selectors 4 specification. + +## Further reading + +For further information on the use of Selectors in CSS +(covering all levels, but with a focus on level 4), see +[CSS Selectors](https://css-tricks.com/css-selectors/) on CSS-Tricks. + +For selectors in the DOM, see +[NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) on MDN. + +The [Horizontal Review of Selectors 4](https://github.com/w3c/csswg-drafts/issues/13469). \ No newline at end of file From d2ec86072d29858d23b65a032bed1e0217ae4812 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Fri, 10 Apr 2026 09:50:51 -0400 Subject: [PATCH 004/229] whoops, filename --- selectors-4/Selectors _4_Explainer.md | 123 -------------------------- 1 file changed, 123 deletions(-) delete mode 100644 selectors-4/Selectors _4_Explainer.md diff --git a/selectors-4/Selectors _4_Explainer.md b/selectors-4/Selectors _4_Explainer.md deleted file mode 100644 index 819ade365f69..000000000000 --- a/selectors-4/Selectors _4_Explainer.md +++ /dev/null @@ -1,123 +0,0 @@ -# Selectors 4 Explainer - -## Author - - - Chris Lilley (W3C) - -## Participate - -- [Issue tracker](https://github.com/w3c/csswg-drafts/issues?q=state%3Aopen%20label%3A%22selectors-4%22) - -## What are Selectors - -Introduced with [CSS1](https://www.w3.org/TR/CSS1/#basic-concepts) in 1996, -Selectors are a mature and widely deployed way to -select **individual parts** of a (typically HTML) document, -so that they may be **styled** or **manipulated with script**. - -They were further developed in [CSS2.1](https://www.w3.org/TR/CSS2/selector.html#q5.0) -(W3C Recommendation, from 2011) -and in [Selectors 3](https://www.w3.org/TR/selectors-3/) -(W3C Recommendation, 2018). - -[Selectors 4](https://www.w3.org/TR/selectors-4/) -is an incremental improvement to previous Selectors specifications, -responding to common user needs. - -It is now widely deployed, stable, -and is being prepared for W3C Recommendation, -while less-mature Selectors have been moved to -[Selectors 5](https://www.w3.org/TR/selectors-5/). - -However, the Selectors 4 specification -is a _complete specification_ of Selectors, -(including material from levels 1 through 3) -not a delta. This aids readability. - -In view of this widespread use, -this explainer does not address early-review questions -such as general user need or alternatives considered; -instead it motivates the particular changes found in Selectors 4. - -## Why `Selectors` not `CSS Selectors`? - -Selectors have expanded beyond their initial use in CSS; -they are also widely used in the Document Object Model, -to select parts of a document for manipulation by JavaScript. -These are both majority uses, hence the naming of the specification. - -## What is new in Selectors 4 - -(Expanded from [Changes Since Level 3](https://drafts.csswg.org/selectors-4/#changes-level-3)) - -### Conditional Logic - -- The matches-any [`:is`](https://www.w3.org/TR/selectors-4/#matches) pseudo-class, - formerly called `:matches()`, - has been added to allow stylesheet authors to group functionally related elements, - such as any element that is either hovered or focussed. -- The specificity-adjusting [`:where()`](https://www.w3.org/TR/selectors-4/#zero-matches) pseudo-class - has been added to construct zero-specificity filters, - which are easy to override, - replacing the many ugly hacks previously required to simulate this -- The relational [`:has()`]() pseudo-class - -### Interactivity and Forms - -- Added the [`:modal`](https://www.w3.org/TR/selectors-4/#modal-state) pseudo-class, - to select elements which exclude interaction with all other elements until dismissed -- Added [`:open`](https://www.w3.org/TR/selectors-4/#open-state) - and [`:popover-open`](https://www.w3.org/TR/selectors-4/#popover-open-state) pseudo-classes, - primarily but not exclusively to use with HTML forms - -### Hyperlinking Support - -- Added [`:any-link`](https://www.w3.org/TR/selectors-4/#the-any-link-pseudo) to match - any element that acts as the source anchor of a hyperlink - -### Clearer Expression of Authorial Intent - -- Expanded the sibling-counting [`:nth-child()`](https://www.w3.org/TR/selectors-4/#the-nth-child-pseudo) - and negation [`:not()`](https://www.w3.org/TR/selectors-4/#negation) pseudo-classes - to accept a **selector list**. - -### Media State - -- Added the `:playing`, `:paused` and `:seeking` [media playback state](https://www.w3.org/TR/selectors-4/#video-state) pseudo classes, - to enable selecting on the dynamic state of video elements, - functionality which previously required JavaScript -- Added the `:buffered` and `:stalled` - [media loading state](https://www.w3.org/TR/selectors-4/#media-loading-state) pseudo-classes, - again providing functionality that previously needed JavaScript -- Added the [`:fullscreen`](https://www.w3.org/TR/selectors-4/#fullscreen-state) - and [`:picture-in-picture`](https://www.w3.org/TR/selectors-4/#pip-state) pseudo-classes -- Added the `:muted` and `volume-locked` pseudo-classes - for sound-producing elements - -### Internationalization Improvements - -- Expanded the content language - [`:lang()`](https://www.w3.org/TR/selectors-4/#the-lang-pseudo) pseudo-class - to accept **wildcard matching** and **lists of language codes** - for greater flexibility styling related languages -- Added the content language writing direction - [`dir()`](https://www.w3.org/TR/selectors-4/#the-dir-pseudo) pseudo-class - for convenient styling of left-to-right and righ-to-left content -- Clarified case-insensitive string matching - -### Consolidation - -Selectors first introduced in -[CSS Basic UI 3](https://www.w3.org/TR/css-ui-3/), -have been moved to the main Selectors 4 specification. - -## Further reading - -For further information on the use of Selectors in CSS -(covering all levels, but with a focus on level 4), see -[CSS Selectors](https://css-tricks.com/css-selectors/) on CSS-Tricks. - -For selectors in the DOM, see -[NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) on MDN. - -The [Horizontal Review of Selectors 4](https://github.com/w3c/csswg-drafts/issues/13469). \ No newline at end of file From af08cb63372273c8a967b28ecdce4c57a1805f0c Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Fri, 10 Apr 2026 09:56:43 -0400 Subject: [PATCH 005/229] [css-color-4][editorial] Move changes comment to the right place --- css-color-4/Overview.bs | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/css-color-4/Overview.bs b/css-color-4/Overview.bs index dc69a3896226..b3a6c4f1c5be 100644 --- a/css-color-4/Overview.bs +++ b/css-color-4/Overview.bs @@ -7896,7 +7896,10 @@ Changes Candidate Recommendation Draft of 24 April 2025

      - + +
    • 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)
      • @@ -7949,10 +7952,6 @@ Changes

      Changes since the Candidate Recommendation Draft of 13 Feb 2024

        -
      • Expanded the concept of analogous components to analogous sets of components, to minimize ''none'' → ''0'' conversions - (Issue 10210) -
        • -
      • 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
        • From 510e87eb13a66732a61934150dd016758a8ec18e Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Mon, 13 Apr 2026 11:53:37 -0400 Subject: [PATCH 006/229] [css-color] Improve visibility of the constraint that shorter is the default he interpolation method --- css-color-4/Overview.bs | 9 ++++++++- css-color-5/Overview.bs | 8 +++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/css-color-4/Overview.bs b/css-color-4/Overview.bs index b3a6c4f1c5be..d68a1f830d01 100644 --- a/css-color-4/Overview.bs +++ b/css-color-4/Overview.bs @@ -4933,6 +4933,10 @@ Color Space for Interpolation interpolation should take place in, it defaults to Oklab. + For a <> + if the [=hue-interpolation-method=] is not specified, + it defaults to [=shorter=]. + However, user agents must handle interpolation between legacy sRGB color formats (hex colors, named colors, @@ -7896,7 +7900,10 @@ Changes Candidate Recommendation Draft of 24 April 2025
          - + +
        • 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)
          • diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs index d1f651d1fa7f..59318cf78845 100644 --- a/css-color-5/Overview.bs +++ b/css-color-5/Overview.bs @@ -2939,7 +2939,9 @@ or any other color or monochrome output device which has been characterized.

          Color Space for Interpolation

          - The <> is extended to allow use of the + The <>, + as defined in [[css-color-4#interpolation-space]], + is extended to allow use of the custom color spaces: 
          @@ -3859,6 +3861,10 @@ This specification adds a way to ensure adequate contrast for text whose backgro
 
 
 
            
+	
          • 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)

From 70c78d3437f1e431caf55528b24c853b512e7c57 Mon Sep 17 00:00:00 2001
From: Chris Lilley 
Date: Mon, 13 Apr 2026 11:58:07 -0400
Subject: [PATCH 007/229] [css-color-4][editorial] correct autolinking syntax

---
 css-color-4/Overview.bs | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/css-color-4/Overview.bs b/css-color-4/Overview.bs
index d68a1f830d01..c90ff5dde648 100644
--- a/css-color-4/Overview.bs
+++ b/css-color-4/Overview.bs
@@ -42,6 +42,13 @@ spec: css-backgrounds-3; type: property; text: border-bottom-color
 spec: css-backgrounds-3; type: property; text: border-right-color
 spec: css-ui-4;	type: dfn; text: accent color
 spec: css-ui-4; type: property; text: accent-color
+spec:css-color-5; type:value; for:oklab(); 
+	text:a
+	text:b
+	text:l
+spec:css-color-5; type:value; for:oklch(); 
+	text:c
+	text:h
          @@ -4934,7 +4941,7 @@ Color Space for Interpolation it defaults to Oklab. For a <> - if the [=hue-interpolation-method=] is not specified, + if the <> is not specified, it defaults to [=shorter=]. However, user agents must handle interpolation From a3a9e4ef5b6414e1cebbe6b4938ef5c44d30d320 Mon Sep 17 00:00:00 2001 From: Kevin Babbitt Date: Mon, 13 Apr 2026 10:47:09 -0700 Subject: [PATCH 008/229] [css-gaps-1] Clarify application of writing-mode and direction to gap decorations. #13648, #13649 (#13732) --- css-gaps-1/Overview.bs | 41 +++++++++++++++--- css-gaps-1/images/example-inset-direction.png | Bin 0 -> 9537 bytes 2 files changed, 36 insertions(+), 5 deletions(-) create mode 100644 css-gaps-1/images/example-inset-direction.png diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs index e930ba8f3773..e03b56a3b80f 100644 --- a/css-gaps-1/Overview.bs +++ b/css-gaps-1/Overview.bs @@ -169,6 +169,17 @@ Gap decorations note that while the border and background of the container aren't scrolled, the decorations need to scroll along with items in the container. + [=Gap decorations=] follow the definitions of "column" and "row" laid out by the container to which the properties are applied. + They depend on the container type taking writing mode and text direction into account when determining the meanings of these terms. + For examples, see: + [[CSS-MULTICOL-2#the-multi-column-model]], + [[CSS-FLEXBOX-1#flex-direction-property]], + and + [[CSS-GRID-1#grid-concepts]]. + + Properties in this specification whose names begin with "column" apply to [=column gaps=], + and properties in this specification whose names begin with "row" apply to [=row gaps=]. + +
        • 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'. From a8df6533793a262666a80213bc7cb4ef2aa2fb99 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Tue, 14 Apr 2026 13:09:37 -0400 Subject: [PATCH 012/229] [css-color-4] Define color value comparison algorithm #13157 Add a new "Comparing <> Values" section immediately before "Color Interpolation", defining when two <> values are "equivalent colors". The algorithm covers three cases: same color space (component-by-component with epsilon, none only equals none), different color spaces with a missing component (not equal), and different color spaces with no missing components (convert to oklab, compare with epsilon). Legacy sRGB syntaxes (rgb(), hsl(), hwb(), hex, named, system colors) are normatively declared to share the srgb color space. Used by style() container queries and CSS Transitions to detect color changes. Co-authored-by: Claude Sonnet 4.6 --- .claude/settings.local.json | 9 ++++ css-color-4/Overview.bs | 82 ++++++++++++++++++++++++++++++++++++- 2 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 .claude/settings.local.json diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 000000000000..a92f5c48ec8e --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,9 @@ +{ + "permissions": { + "allow": [ + "WebFetch(domain:github.com)", + "WebFetch(domain:api.github.com)", + "Bash(xargs grep:*)" + ] + } +} diff --git a/css-color-4/Overview.bs b/css-color-4/Overview.bs index c90ff5dde648..3f51ff434b94 100644 --- a/css-color-4/Overview.bs +++ b/css-color-4/Overview.bs @@ -4777,6 +4777,81 @@ where |src| and |dest| are different: + + +

          +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 an implementation-defined ε as in step 2. +
            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'' <>. + + + +
        • 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)
          • From debfff8dfbb357059c467461f73ce76bcd78e342 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Tue, 14 Apr 2026 13:42:00 -0400 Subject: [PATCH 013/229] [css-color-4][editorial] Add wpt, see #13157 --- css-color-4/Overview.bs | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css-color-4/Overview.bs b/css-color-4/Overview.bs index 3f51ff434b94..01cbebcb3095 100644 --- a/css-color-4/Overview.bs +++ b/css-color-4/Overview.bs @@ -4851,6 +4851,10 @@ Comparing <> Values [=hex colors=], [=named colors=], and [=system colors=] are all considered to be in the ''srgb'' <>. + + query-style-color.html + + 
           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#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://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

          @@ -69,19 +69,19 @@ 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 one represented by the <> function + given as the descriptor's value. : 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 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. ISSUE: Should this use <>, <>, or <> for the route names? @@ -140,14 +140,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 @@ -238,75 +238,75 @@ 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. +:: : 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. : <> -:: : 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 [=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}}. : <> :: - The result is false. + 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. + 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 URL pattern represented by the ''@route'' rule referenced by the name. +:: 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()=]. +:: 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? @@ -457,7 +457,7 @@ and the pseudo-class matches any element where: 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 + with the [=URL pattern=] represented by the <> as context A <> represents a [=URL pattern=]. If the <> is a <>, @@ -482,43 +482,43 @@ and based on whether each <> matches the URL 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()=]) + [=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. + 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. + 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. @@ -533,86 +533,86 @@ 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}}. + 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. + 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}}. + 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. + NOTE: This part is for when the new document in the navigation + has become the current document. 1. Otherwise, null. - NOTE: The previous two branches can also produce null results. + NOTE: The previous two branches can also produce null results. The current to 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 [=ongoing navigate event=] is non-null: + its [=ongoing navigate event=] is non-null: - 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}}. + 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}}. - NOTE: This part does expose the result of redirects. + NOTE: This part does expose the result of redirects. - 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]]. + 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]]. - ISSUE: Is the final "non-null" check needed? + ISSUE: Is the final "non-null" check needed? - 1. otherwise, the [=ongoing navigate event=]'s - {{NavigateEvent/destination}}'s - {{NavigationDestination/url}} + 1. otherwise, the [=ongoing navigate event=]'s + {{NavigateEvent/destination}}'s + {{NavigationDestination/url}} - NOTE: This part does not expose the result of redirects. + NOTE: This part does not expose the result of redirects. - 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? + 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? - NOTE: This part is for when the old document in the navigation - is still the current document. + 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=], - and the activation's {{NavigationActivation/entry}}'s - {{NavigationHistoryEntry/url}}. + 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 part is for when the new document in the navigation - has become the current document. + NOTE: This part is for when the new document in the navigation + has become the current document. - ISSUE: Does it make sense to expose this when - the activation's {{NavigationActivation/from}} is null, - and thus there is no [=current from URL=]? + 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. Otherwise, null. - NOTE: The previous two branches can also produce null results. + NOTE: The previous two branches can also produce null results. 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}}) @@ -622,20 +622,20 @@ The current navigation type of a [=/document=] is a {{NavigationType} It is defined as follows: 1. If the [=document's navigation API=] of the document is non-null and - its [=transition=] is non-null, - the transition's {{NavigationTransition/navigationType}}. + 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. + 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}}. + 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. + NOTE: This part is for when the new document in the navigation + has become the current document. 1. Otherwise, null. @@ -643,33 +643,33 @@ The current navigation delta of a [=/document=] is a {{NavigationType 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 [=transition=] is non-null, - 1. If the transition's {{NavigationTransition/navigationType}} is not {{NavigationType/traverse}}, 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}}. + 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. + 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=], + 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. 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}}. + 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. + NOTE: This part is for when the new document in the navigation + has become the current document. 1. Otherwise, null. @@ -706,30 +706,30 @@ using the steps of the create a URL pattern for url-pattern() algorit 1. Let arg be the <> argument to the ''url-pattern()'' function. 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()''. - - 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 )? - - Also see other proposed uses of {{URLPattern}} in CSS - in , - for '':local-link''. -
          + 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()''. + + 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 )? + + 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=]. + arg, baseURL, and an empty [=map=]. NOTE: This function requires that its argument is quoted. This differs from the ''url()'' function, From 860489eab94b8f540c50a9c066064dd0a9f58be6 Mon Sep 17 00:00:00 2001 From: "L. David Baron" Date: Thu, 16 Apr 2026 14:49:34 -0400 Subject: [PATCH 038/229] Update make REMOTE=1 commands to show bikeshed messages too. --- css-navigation-1/Makefile | 17 +++++++++++++++++ css-transforms-1/Makefile | 4 +++- css-transforms-2/Makefile | 4 +++- css-viewport-1/Makefile | 4 +++- cssom-1/Makefile | 4 +++- cssom-view-1/Makefile | 4 +++- filter-effects-2/Makefile | 4 +++- web-animations-css-integration/Makefile | 4 +++- 8 files changed, 38 insertions(+), 7 deletions(-) create mode 100644 css-navigation-1/Makefile diff --git a/css-navigation-1/Makefile b/css-navigation-1/Makefile new file mode 100644 index 000000000000..dd2cc9dcffe4 --- /dev/null +++ b/css-navigation-1/Makefile @@ -0,0 +1,17 @@ +# Use "make REMOTE=1" to use remote bikeshed + +SOURCEFILE=Overview.bs +OUTPUTFILE=Overview.html +PREPROCESSOR=bikeshed.py +REMOTE_PREPROCESSOR_URL=https://www.w3.org/publications/spec-generator/ + +all: $(OUTPUTFILE) + +$(OUTPUTFILE): $(SOURCEFILE) Makefile +ifneq (,$(REMOTE)) + curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F output=messages -F type=bikeshed-spec + @echo + curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F type=bikeshed-spec > "$@" +else + $(PREPROCESSOR) -f spec "$<" "$@" +endif diff --git a/css-transforms-1/Makefile b/css-transforms-1/Makefile index 7daaf1c1937f..08b56216e0d6 100755 --- a/css-transforms-1/Makefile +++ b/css-transforms-1/Makefile @@ -9,8 +9,10 @@ REMOTE_PREPROCESSOR_URL=https://www.w3.org/publications/spec-generator/ all: $(OUTPUTFILE) -$(OUTPUTFILE): $(SOURCEFILE) +$(OUTPUTFILE): $(SOURCEFILE) Makefile ifneq (,$(REMOTE)) + curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F output=messages -F type=bikeshed-spec + @echo curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F type=bikeshed-spec > "$@" else $(PREPROCESSOR) -f spec "$<" "$@" diff --git a/css-transforms-2/Makefile b/css-transforms-2/Makefile index 243dd97e8ff8..f6c64a785beb 100755 --- a/css-transforms-2/Makefile +++ b/css-transforms-2/Makefile @@ -11,8 +11,10 @@ REMOTE_PREPROCESSOR_URL=https://www.w3.org/publications/spec-generator/ all: $(OUTPUTFILE) -$(OUTPUTFILE): $(SOURCEFILE) +$(OUTPUTFILE): $(SOURCEFILE) Makefile ifneq (,$(REMOTE)) + curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F output=messages -F type=bikeshed-spec + @echo curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F type=bikeshed-spec > "$@" else $(PREPROCESSOR) -f spec "$<" "$@" diff --git a/css-viewport-1/Makefile b/css-viewport-1/Makefile index 5f8c05558b09..d043b18e4103 100644 --- a/css-viewport-1/Makefile +++ b/css-viewport-1/Makefile @@ -11,8 +11,10 @@ REMOTE_PREPROCESSOR_URL=https://www.w3.org/publications/spec-generator/ all: $(OUTPUTFILE) -$(OUTPUTFILE): $(SOURCEFILE) +$(OUTPUTFILE): $(SOURCEFILE) Makefile ifneq (,$(REMOTE)) + curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F output=messages -F type=bikeshed-spec + @echo curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F type=bikeshed-spec > "$@" else $(PREPROCESSOR) -f spec "$<" "$@" diff --git a/cssom-1/Makefile b/cssom-1/Makefile index 243dd97e8ff8..f6c64a785beb 100755 --- a/cssom-1/Makefile +++ b/cssom-1/Makefile @@ -11,8 +11,10 @@ REMOTE_PREPROCESSOR_URL=https://www.w3.org/publications/spec-generator/ all: $(OUTPUTFILE) -$(OUTPUTFILE): $(SOURCEFILE) +$(OUTPUTFILE): $(SOURCEFILE) Makefile ifneq (,$(REMOTE)) + curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F output=messages -F type=bikeshed-spec + @echo curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F type=bikeshed-spec > "$@" else $(PREPROCESSOR) -f spec "$<" "$@" diff --git a/cssom-view-1/Makefile b/cssom-view-1/Makefile index 243dd97e8ff8..f6c64a785beb 100755 --- a/cssom-view-1/Makefile +++ b/cssom-view-1/Makefile @@ -11,8 +11,10 @@ REMOTE_PREPROCESSOR_URL=https://www.w3.org/publications/spec-generator/ all: $(OUTPUTFILE) -$(OUTPUTFILE): $(SOURCEFILE) +$(OUTPUTFILE): $(SOURCEFILE) Makefile ifneq (,$(REMOTE)) + curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F output=messages -F type=bikeshed-spec + @echo curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F type=bikeshed-spec > "$@" else $(PREPROCESSOR) -f spec "$<" "$@" diff --git a/filter-effects-2/Makefile b/filter-effects-2/Makefile index db38b5e399b9..b18d2a0cb4aa 100755 --- a/filter-effects-2/Makefile +++ b/filter-effects-2/Makefile @@ -8,8 +8,10 @@ REMOTE_PREPROCESSOR_URL=https://www.w3.org/publications/spec-generator/ all: $(OUTPUTFILE) -$(OUTPUTFILE): $(SOURCEFILE) +$(OUTPUTFILE): $(SOURCEFILE) Makefile ifneq (,$(REMOTE)) + curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F output=messages -F type=bikeshed-spec + @echo curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F type=bikeshed-spec > "$@" else $(PREPROCESSOR) -f spec "$<" "$@" diff --git a/web-animations-css-integration/Makefile b/web-animations-css-integration/Makefile index 26c6ded17f4c..e53060dd609a 100755 --- a/web-animations-css-integration/Makefile +++ b/web-animations-css-integration/Makefile @@ -11,8 +11,10 @@ REMOTE_PREPROCESSOR_URL=https://www.w3.org/publications/spec-generator/ all: $(OUTPUTFILE) -$(OUTPUTFILE): $(SOURCEFILE) +$(OUTPUTFILE): $(SOURCEFILE) Makefile ifneq (,$(REMOTE)) + curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F output=messages -F type=bikeshed-spec + @echo curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F type=bikeshed-spec > "$@" else $(PREPROCESSOR) -f spec "$<" "$@" From 02095d62459437a3f2431a94b0c1c011447e8c15 Mon Sep 17 00:00:00 2001 From: Guillaume Date: Thu, 16 Apr 2026 23:44:23 +0200 Subject: [PATCH 039/229] [css-fonts][css-prints][css-values][editorial] Add font- prefix to production names (#13272) Co-authored-by: Chris Lilley --- css-fonts-4/Overview.bs | 193 ++++++++++++++++++++++++++++----------- css-fonts-5/Overview.bs | 4 +- css-print/Overview.bs | 4 +- css-values-3/Overview.bs | 2 +- css-values-4/Overview.bs | 2 +- cssom-1/Overview.bs | 4 +- 6 files changed, 147 insertions(+), 62 deletions(-) diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs index f15a64cded0d..4e3b78307082 100644 --- a/css-fonts-4/Overview.bs +++ b/css-fonts-4/Overview.bs @@ -120,12 +120,12 @@ Font family: the 'font-family!!property' property 
           	Name: font-family
-	Value: [ <> | <> ]#
+	Value: [ <> | <> ]#
 	Initial: depends on user agent
 	Applies to: all elements and text
 	Inherited: yes
 	Percentages: n/a
-	Computed value: list, each item a string and/or <> keywords
+	Computed value: list, each item a string and/or <> keywords
 	Animation type: discrete
          @@ -214,20 +214,20 @@ Font family: the 'font-family!!property' property There are three types of font family names, two of which may be used with this property:
          -
          <> -
          - The name of a font family, such as Helvetica or Verdana in the previous example. +
          <> +
          + The name of a font family, such as Helvetica or Verdana in the previous example. This might be a locally-instaled font, or might be a web font. -
          <> -
          - Each <> keyword represents - a generic font choice, - and behaves as a potential alias for one or more locally-installed fonts - belonging to the specified generic font category. - A <> can thus be used as a fallback - for when an author's more specific font choices are not available. +
          <> +
          + Each <> keyword represents + a generic font choice, + and behaves as a potential alias for one or more locally-installed fonts + belonging to the specified generic font category. + A <> can thus be used as a fallback + for when an author's more specific font choices are not available. There are three types of generic family: @@ -251,12 +251,12 @@ Font family: the 'font-family!!property' property and to use a more specific generic font family, if applicable, to prefer a specific style even if the individual named font family is not available. - Note that <> keywords cannot be quoted - (otherwise they are interpreted as a <>). + Note that <> keywords cannot be quoted + (otherwise they are interpreted as a <>). The set of generic family keywords is defined in [[#generic-font-families]]. -
          <> +
          <>
          A locally installed system font, whose use is subject to certain constraints. In particular, it may not be used with the ''font-family'' property, @@ -286,11 +286,11 @@ Font family: the 'font-family!!property' property
          -

          -Syntax of <> +

          +Syntax of <>

          - 
          <> = <> | <>+
          + 
          <> = <> | <>+
          Font family names other than generic families or system font families must either be given quoted as <>s, @@ -320,7 +320,7 @@ Syntax of <> Note: this means that if you really have a font whose name - is the same as one of the <> names, + is the same as one of the <> names, or the system font names, or the [=CSS-wide keywords=], it must be quoted. @@ -338,7 +338,7 @@ Syntax of <> - If a sequence of identifiers is given as a <>, + If a sequence of identifiers is given as a <>, the computed value is the name converted to a string by joining all the identifiers in the sequence by single spaces. @@ -361,28 +361,28 @@ Syntax of <> Font family names that happen to be the same as a 'font-family!!property' keyword value (e.g. CSS-wide keywords such as ''inherit'', or - <> keywords such as ''serif'') + <> keywords such as ''serif'') must be quoted to prevent confusion with the keywords of the same names. - UAs must not consider these keywords as matching the <> type. + UAs must not consider these keywords as matching the <> type.

          -Syntax of <> +Syntax of <>

          - - 
          -		<> = <>| <> | <>
-		<> = ''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(<>) | <> | <> + <> = kai | fangsong | nastaliq + <> = serif | sans-serif | system-ui | cursive | fantasy | math | monospace + <> = ui-serif | ui-sans-serif | ui-monospace | ui-rounded + --> + +
          +	<> = <>| <> | <>
+	<> = ''generic(fangsong)'' | ''generic(kai)'' | ''generic(khmer-mul)'' |  ''generic(nastaliq)''
+	<> = ''serif'' | ''sans-serif'' | ''system-ui'' | ''cursive'' | ''fantasy'' | ''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 +400,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 +464,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. @@ -1785,7 +1785,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 @@ -2695,7 +2695,7 @@ The ''@font-face'' rule 
           	Name: font-family
-	Value: <>
+	Value: <>
 	For: @font-face
 	Initial: N/A
          @@ -2757,6 +2757,13 @@ The ''@font-face'' rule

          Parsing the 'src!!descriptor' descriptor

          +To parse a <> production, [=parse a list=] of <>s. + +
          <font-src> = <> [ format(<>)]? [ tech( <>#)]? | local(<>)
          + +
          <font-format>
+	 = [<> | collection | embedded-opentype | opentype
+		| svg | truetype | woff | woff2 ]
          To parse a <> production, [=parse a list=] of <>s. 
          @@ -2949,7 +2956,7 @@ 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.
@@ -2964,7 +2971,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().
 
 	
          @@ -6047,6 +6054,32 @@ Defining font specific alternates: the @font-feature-values rule
 
 
          Basic syntax
          
 
+An ''@font-feature-values'' rule's prelude
+contains a list of font family names,
+followed by a block containing multiple ''feature-value-block''s,
+a special type of subsidiary at-rule.
+Each ''feature-value-block''' contains declarations
+mapping author-chosen human-friendly names
+(such as "flowing")
+to feature indexes for the associated feature.
+
+Each <> has the same meaning
+as the corresponding value of the 'font-variant-alternates' property.
+
+
          +@font-feature-values = @font-feature-values <># { <> }
+
+font-feature-value-type = <<@stylistic>> | <<@historical-forms>> | <<@styleset>> | <<@character-variant>>
+	| <<@swash>> | <<@ornaments>> | <<@annotation>>
+
+@stylistic = @stylistic { <> }
+@historical-forms = @historical-forms { <> }
+@styleset = @styleset { <> }
+@character-variant = @character-variant { <> }
+@swash = @swash { <> }
+@ornaments = @ornaments { <> }
+@annotation = @annotation { <> }
+
          
 	An ''@font-feature-values'' rule's prelude
 	contains a list of font family names,
 	followed by a block containing multiple feature value blocks,
@@ -6079,6 +6112,58 @@ Defining font specific alternates: the @font-feature-values rule
 		test_font_feature_values_parsing.html
 	
 
+The ''@font-feature-values'' prelude
+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,
+the entire rule ''@font-feature-values'' rule is invalid
+and must be ignored.
+
+The ''@font-feature-values'' block accepts <> as its contents;
+these list items are either:
+
+- [=at-rules=] named by one of the <> at-keyword tokens
+
+or
+
+- the '@font-feature-values/font-display' descriptor.
+
+
+
+Specifying the same <> more than once is valid;
+their contents are cascaded together.
+Each <> accepts a list of [=declarations=],
+the font feature value declarations,
+where the declaration's name can be any [=identifier=],
+and the value must be a list of one or more non-negative <>s.
+
+The <>s accept any declaration name;
+these names must be identifiers,
+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 ''<>+'',
+or else the declaration is invalid and must be ignored.
+
+Note: Each feature name is unique only within a single <>.
+Between different <>s,
+or the same type of <>s in separate ''@font-feature-values'' rules,
+names can be reused without colliding.
+
+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.
+If the same tuple appears more than once in a document
+(such as if a single block),
+the last-defined one is used.
+
+
          
+	For example, the following all define the exact same set of font feature values:
 	The ''@font-feature-values'' prelude
 	is a comma-delimited list of font family names that match the definition of <>
 	for the 'font-family!!property' property.
@@ -7881,7 +7966,7 @@ Font family: the '@font-palette-values/font-family' descriptor
 
 	
           	Name: font-family
-	Value: <>#
+	Value: <>#
 	For: @font-palette-values
 	Initial: N/A
 	
          
diff --git a/css-fonts-5/Overview.bs b/css-fonts-5/Overview.bs
index 75b76e7503f1..dc672f4ecf35 100644
--- a/css-fonts-5/Overview.bs
+++ b/css-fonts-5/Overview.bs
@@ -212,7 +212,7 @@ in CSS Fonts Level 4, the following new generic font families are also defined.
 
 Issue(4910):
 
-
          
+
          
 	
          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
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-values-3/Overview.bs b/css-values-3/Overview.bs index 12dd0cb8475c..c0587823e447 100644 --- a/css-values-3/Overview.bs +++ b/css-values-3/Overview.bs @@ -418,7 +418,7 @@ Property Value Examples
'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'''overline underline''
font-family - [ <family-name> | <generic-family> ]# + [ <font-family-name> | <generic-font-family> ]# ''"Gill Sans", Futura, sans-serif''
'border-width' diff --git a/css-values-4/Overview.bs b/css-values-4/Overview.bs index a200cd66c655..8c122f39528c 100644 --- a/css-values-4/Overview.bs +++ b/css-values-4/Overview.bs @@ -490,7 +490,7 @@ Property Value Examples ''overline underline''
font-family - [ <family-name> | <generic-family> ]# + [ <font-family-name> | <generic-font-family> ]# ''"Gill Sans", Futura, sans-serif''
'border-width' diff --git a/cssom-1/Overview.bs b/cssom-1/Overview.bs index f573b05291bf..63b58abcb706 100644 --- a/cssom-1/Overview.bs +++ b/cssom-1/Overview.bs @@ -3215,7 +3215,7 @@ For other color functions, see
<> -
<> +
<>
The string serialized as a string. @@ -3235,7 +3235,7 @@ For other color functions, see <border-width>, <border-style>, <bottom>, - <generic-family>, + <generic-font-family>, <generic-voice>, <left>, <margin-width>, From 3f528437709bf44d6e864b1c00c7816745b5c5fb Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Thu, 16 Apr 2026 17:58:34 -0400 Subject: [PATCH 040/229] [css-fonts-4][editorial] wpt --- css-fonts-4/Overview.bs | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs index 4e3b78307082..dac8e49277a1 100644 --- a/css-fonts-4/Overview.bs +++ b/css-fonts-4/Overview.bs @@ -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() 
@@ -1202,6 +1203,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.
@@ -1358,6 +1362,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

From 6e1e2c251375b0445ee26d639716f5b4289eb34e Mon Sep 17 00:00:00 2001
From: Chris Lilley 
Date: Thu, 16 Apr 2026 18:23:45 -0400
Subject: [PATCH 041/229] [css-fonts-4][editorial] Clear up bad merge commit

---
 css-fonts-4/Overview.bs | 94 +----------------------------------------
 1 file changed, 1 insertion(+), 93 deletions(-)

diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs
index dac8e49277a1..906732348108 100644
--- a/css-fonts-4/Overview.bs
+++ b/css-fonts-4/Overview.bs
@@ -371,13 +371,6 @@ Syntax of <>
 Syntax of <>
 
 
-	
-
 
 	<> = <>| <> | <>
 	<> = ''generic(fangsong)'' | ''generic(kai)'' | ''generic(khmer-mul)'' |  ''generic(nastaliq)''
@@ -2764,13 +2757,6 @@ The ''@font-face'' rule
 
 To parse a <> production, [=parse a list=] of <>s.
 
-
<font-src> = <> [ format(<>)]? [ tech( <>#)]? | local(<>)

-
-
<font-format>
-	 = [<> | collection | embedded-opentype | opentype
-		| svg | truetype | woff | woff2 ]

-	To parse a <> production, [=parse a list=] of <>s.
-
 	
 		<font-src> = <> [ format( <> ) ]? [ tech( <># ) ]?
 			| local( <> )
@@ -2967,7 +2953,7 @@ To parse a <> production, [=parse a list=] of <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
@@ -6059,32 +6045,6 @@ Defining font specific alternates: the @font-feature-values rule
 
 
Basic syntax

 
-An ''@font-feature-values'' rule's prelude
-contains a list of font family names,
-followed by a block containing multiple ''feature-value-block''s,
-a special type of subsidiary at-rule.
-Each ''feature-value-block''' contains declarations
-mapping author-chosen human-friendly names
-(such as "flowing")
-to feature indexes for the associated feature.
-
-Each <> has the same meaning
-as the corresponding value of the 'font-variant-alternates' property.
-
-
-@font-feature-values = @font-feature-values <># { <> }
-
-font-feature-value-type = <<@stylistic>> | <<@historical-forms>> | <<@styleset>> | <<@character-variant>>
-	| <<@swash>> | <<@ornaments>> | <<@annotation>>
-
-@stylistic = @stylistic { <> }
-@historical-forms = @historical-forms { <> }
-@styleset = @styleset { <> }
-@character-variant = @character-variant { <> }
-@swash = @swash { <> }
-@ornaments = @ornaments { <> }
-@annotation = @annotation { <> }
-

 	An ''@font-feature-values'' rule's prelude
 	contains a list of font family names,
 	followed by a block containing multiple feature value blocks,
@@ -6117,58 +6077,6 @@ as the corresponding value of the 'font-variant-alternates' property.
 		test_font_feature_values_parsing.html
 	
 
-The ''@font-feature-values'' prelude
-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,
-the entire rule ''@font-feature-values'' rule is invalid
-and must be ignored.
-
-The ''@font-feature-values'' block accepts <> as its contents;
-these list items are either:
-
-- [=at-rules=] named by one of the <> at-keyword tokens
-
-or
-
-- the '@font-feature-values/font-display' descriptor.
-
-
-
-Specifying the same <> more than once is valid;
-their contents are cascaded together.
-Each <> accepts a list of [=declarations=],
-the font feature value declarations,
-where the declaration's name can be any [=identifier=],
-and the value must be a list of one or more non-negative <>s.
-
-The <>s accept any declaration name;
-these names must be identifiers,
-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 ''<>+'',
-or else the declaration is invalid and must be ignored.
-
-Note: Each feature name is unique only within a single <>.
-Between different <>s,
-or the same type of <>s in separate ''@font-feature-values'' rules,
-names can be reused without colliding.
-
-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.
-If the same tuple appears more than once in a document
-(such as if a single block),
-the last-defined one is used.
-
-

-	For example, the following all define the exact same set of font feature values:
 	The ''@font-feature-values'' prelude
 	is a comma-delimited list of font family names that match the definition of <>
 	for the 'font-family!!property' property.

From 9e5464340590c61a61eda655e1211bb310e19279 Mon Sep 17 00:00:00 2001
From: Chris Lilley 
Date: Thu, 16 Apr 2026 18:27:46 -0400
Subject: [PATCH 042/229] [css-fonts-5][editorial] wpt

---
 css-fonts-5/Overview.bs | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/css-fonts-5/Overview.bs b/css-fonts-5/Overview.bs
index dc672f4ecf35..fde5666ac934 100644
--- a/css-fonts-5/Overview.bs
+++ b/css-fonts-5/Overview.bs
@@ -1516,6 +1516,10 @@ Changes
 	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
 
 
 
 
\ No newline at end of file
+

From b23bac6647795740d14c5f7afa42c35133dc2efe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emilio=20Cobos=20=C3=81lvarez?= 
Date: Fri, 17 Apr 2026 18:36:45 +0200
Subject: [PATCH 044/229] [cssom-view] Uplift some of the document-pip changes.
 (#13763)

Closes #13707
---
 cssom-view-1/Overview.bs | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/cssom-view-1/Overview.bs b/cssom-view-1/Overview.bs
index 683c8ce9eb26..16f47f1a6a96 100644
--- a/cssom-view-1/Overview.bs
+++ b/cssom-view-1/Overview.bs
@@ -663,6 +663,7 @@ The moveTo(x, y) method must
 1. Optionally, return.
 1. Let target be [=this=]'s [=relevant global object=]'s [=Window/browsing context=].
 1. If |target| is not an [=auxiliary browsing context=] that was created by a script (as opposed to by an action of the user), then return.
+1. If |target|'s [=top-level traversable=]'s [=Is Document Picture-in-Picture=] boolean is true, then return.
 1. Optionally, clamp x and y in a user-agent-defined manner so that the window does not move outside the available space.
 1. Move target’s window such that the window’s top left corner is at coordinates (x, y) relative to the top left corner of the output device, measured in CSS pixels of target. The positive axes are rightward and downward.
 
@@ -671,6 +672,7 @@ The moveBy(x, y) method must
 1. Optionally, return.
 1. Let target be [=this=]'s [=relevant global object=]'s [=Window/browsing context=].
 1. If |target| is not an [=auxiliary browsing context=] that was created by a script (as opposed to by an action of the user), then return.
+1. If |target|'s [=top-level traversable=]'s [=Is Document Picture-in-Picture=] boolean is true, then return.
 1. Optionally, clamp x and y in a user-agent-defined manner so that the window does not move outside the available space.
 1. Move target's window x CSS pixels of target rightward and y CSS pixels of target downward.
 
@@ -680,6 +682,9 @@ The resizeTo(width, height) m
 1. Optionally, return.
 1. Let target be [=this=]'s [=relevant global object=]'s [=Window/browsing context=].
 1. If |target| is not an [=auxiliary browsing context=] that was created by a script (as opposed to by an action of the user), then return.
+1. If |target|'s [=top-level traversable=]'s [=Is Document Picture-in-Picture=] boolean is true, then:
+    1. If [=this=]'s [=relevant global object=] does not have [=transient activation=], throw a "{{NotAllowedError}}" {{DOMException}}.
+    1. [=Consume user activation=] given [=this=]'s [=relevant global object=].
 1. Optionally, clamp width and height in a user-agent-defined manner so that the window does not get too small or bigger than the available space.
 1. Resize target's window by moving its right and bottom edges such that the distance between the left and right edges of the viewport are width CSS pixels of target and the distance between the top and bottom edges of the viewport are height CSS pixels of target.
 1. Optionally, move target's window in a user-agent-defined manner so that it does not grow outside the available space.
@@ -693,6 +698,9 @@ The resizeBy(x, y) method mus
 1. Optionally, return.
 1. Let target be [=this=]'s [=relevant global object=]'s [=Window/browsing context=].
 1. If |target| is not an [=auxiliary browsing context=] that was created by a script (as opposed to by an action of the user), then return.
+1. If |target|'s [=top-level traversable=]'s [=Is Document Picture-in-Picture=] boolean is true, then:
+    1. If [=this=]'s [=relevant global object=] does not have [=transient activation=], throw a "{{NotAllowedError}}" {{DOMException}}.
+    1. [=Consume user activation=] given [=this=]'s [=relevant global object=].
 1. Optionally, clamp x and y in a user-agent-defined manner so that the window does not get too small or bigger than the available space.
 1. Resize target's window by moving its right edge x CSS pixels of target rightward and its bottom edge y CSS pixels of target downward.
 1. Optionally, move target's window in a user-agent-defined manner so that it does not grow outside the available space.

From 4c2a00ea1e840d3af298e0517470733902430d5c Mon Sep 17 00:00:00 2001
From: Guillaume 
Date: Fri, 17 Apr 2026 18:38:02 +0200
Subject: [PATCH 045/229] [css-fonts-4] Clarify range constraints on descriptor
 values in `` (#13324)

* [css-fonts-4] Rename  to 

* [css-fonts-4] Clarify range constraints on descriptor values in 
---
 css-fonts-4/Overview.bs | 64 ++++++++++++++++++++++++-----------------
 1 file changed, 37 insertions(+), 27 deletions(-)

diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs
index 920c443be6a2..af1d21e79f9d 100644
--- a/css-fonts-4/Overview.bs
+++ b/css-fonts-4/Overview.bs
@@ -5814,13 +5814,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
@@ -5856,8 +5856,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
@@ -5871,8 +5871,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:
 
 	
@@ -5884,10 +5884,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.
 
 	
@@ -5917,16 +5917,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).
@@ -5934,20 +5934,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 @@ -5958,8 +5958,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 @@ -6107,11 +6107,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=]. @@ -6520,7 +6530,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

From 8bb92cb0bfc74f5e1dee45d7957b6758528ac87e Mon Sep 17 00:00:00 2001
From: Guillaume 
Date: Fri, 17 Apr 2026 11:31:52 +0200
Subject: [PATCH 046/229] [css-values-5][editorial] Oversights in 5ef76ec

---
 css-values-5/Overview.bs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/css-values-5/Overview.bs b/css-values-5/Overview.bs
index c910f86450ce..46d6ccf9ee34 100644
--- a/css-values-5/Overview.bs
+++ b/css-values-5/Overview.bs
@@ -2767,13 +2767,13 @@ Sharing (Or Not) Random Values: the <> value
 		If you want the values to be completely uncorrelated,
 		give them distinct names (''--foo'' vs ''--bar'')
 		or mix in additional information that will uniquify their [=random cache names=]
-		(specifying ''--foo property'', or omitting the <> argument entirely)
+		(specifying ''--foo property-scoped'', or omitting the <> argument entirely)
Details about how ''random()/auto'' works - The ''random()/auto'' value is identical to specifying ''--foo element property index'', + The ''random()/auto'' value is identical to specifying ''--foo element-scoped property-index-scoped'', just with an unobservable name that you can't manually match with a <>. Usually, this ensures that every instance of a [=random function=], From bd884c2557d72819be58019066517c43b44f9e99 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Fri, 17 Apr 2026 13:11:59 -0400 Subject: [PATCH 047/229] [css-fonts-4][editorial] bikeshed autolink syntax --- css-fonts-4/Overview.bs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs index af1d21e79f9d..84db6575bb34 100644 --- a/css-fonts-4/Overview.bs +++ b/css-fonts-4/Overview.bs @@ -624,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. @@ -1433,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 From 432b4420ef111b73749c6c3ddb11f0cfa8b91e9f Mon Sep 17 00:00:00 2001 From: "L. David Baron" Date: Fri, 17 Apr 2026 15:00:50 -0400 Subject: [PATCH 048/229] [css-navigation-1] Initial draft of a simpler alternative to navigation-param(). This is a first draft of attempting to replace navigation-param() with a simpler syntax that allows just a 3x4 space of alternatives: 3 matching types (that replace navigation-param()) and 4 match targets (which are actually a new feature relative to navigation-param()). This is a start to addressing the feedback in #13163 (but I expect further changes before the draft is ready for another round of review). --- css-navigation-1/Overview.bs | 156 ++++++++++++++++++++--------------- 1 file changed, 88 insertions(+), 68 deletions(-) diff --git a/css-navigation-1/Overview.bs b/css-navigation-1/Overview.bs index 206244738e32..d81f64589741 100644 --- a/css-navigation-1/Overview.bs +++ b/css-navigation-1/Overview.bs @@ -393,10 +393,14 @@ by matching the relevant parts of the navigation URL to the link URL. navigation: auto; } -@route --movie-details { +@route --movie-details-with-id { /* match URLs like /en/movie/123 which is the English page - about a movie with ID 123 */ - pattern: url-pattern("/:lang/movie/:id"); + 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 using the 'match-params' + keyword (the default) will require equal IDs but allow + differences of language. */ + pattern: url-pattern("/*/movie/:id"); } /* capture the overall area representing the movie, and a @@ -407,19 +411,20 @@ by matching the relevant parts of the navigation URL to the link URL. movie we are currently navigating to or from. (lang can be different, though.) - Just :link-to(--movie-details) requires that the target - of the link match the URL pattern defined by the "@route - --movie-details" rule. + This depends on the --movie-details-with-id route + declaring the ID but not the language with a named + parameter, and the use of match-params(navigation-other). - 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. + This means that both the of the link and the other URL of + the current navigation match the URL pattern defined by + the "@route --movie-details-with-id" rule, and that the + 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:link-to( - --movie-details with navigation-param(id))) { +.movie-container:has( + > .movie-title:link-to(--movie-details-with-id + with match-params(navigation-other))) { view-transition-name: movie-container; @@ -440,24 +445,22 @@ and the pseudo-class matches any element where: * the target of link matches the <>, as defined below. 
-<> = <> [ with <> ]?
+<> = <> [ with <> ]?
 <> = <>
-<> = ( <> ) |
-                                ( <> ) |
-                                <>
-<> = <>
-                         [ "and" <> ]*
-<> = <>
-                        [ "or" <> ]*
-<> = <> | <>
-<> = ( <> : <> )
-<> = navigation-param( <> )
+  // Note: <> is defining three functions
+  // with identical syntax.
+<> = <>( <> )
+<> = match-pattern | match-params | match-url
+<> = navigation-other | navigation-current |
+                            navigation-from | navigation-to
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 +* either: + * a <> is not present, or + * 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 <>, @@ -473,52 +476,59 @@ 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) +A <> matches the URL linkTarget +(with a URL Pattern urlPattern as context) if the following steps return true: -1. Let matchResult be the result of +1. Let targetMatchResult 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. + given urlPattern and linkTarget. +1. If targetMatchResult 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. +1. Let matchType be the <> of the + <>. +1. Let matchTarget be the <> argument + of the <>. +1. Let navigationURL be: + : If matchTarget is ''navigation-other'', + :: the current other URL of the document. + : Otherwise, if matchTarget is ''navigation-current'', + :: the current URL of the document. + : Otherwise, if matchTarget is ''navigation-from'', + :: the current from URL of the document. + : Otherwise (Assert: matchTarget is ''navigation-to''), + :: the current to URL of the document. +1. If navigationURL is null, return false. +1. : If matchType is ''match-pattern'' + :: Return true if + the result of [=URL pattern/match|match a URL pattern=] given + urlPattern and navigationURL is not null; + otherwise return false. + + : If matchType is ''match-params'' + :: 1. Let navigationMatchResult be the result of + [=URL pattern/match|match a URL pattern=] given + navigationURL and urlPattern. + + 1. If either navigationMatchResult 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. + + : If matchType is ''match-url'' + :: Return true if linkTarget equals navigationURL; + otherwise return false. NOTE: Some of the design discussion for this feature has been in w3c/csswg-drafts#13163. @@ -618,6 +628,16 @@ 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. +The current URL of a [=/document=] is a URL. +It is defined as follows: + +1. ISSUE: Write this! + +The current other URL of a [=/document=] is a URL or null. +It is defined as follows: + +1. ISSUE: Write this! + The current navigation type of a [=/document=] is a {{NavigationType}} or null. It is defined as follows: From 71918862c5e4fa48ea44c1f2b472bffaa0848bc1 Mon Sep 17 00:00:00 2001 From: fantasai Date: Fri, 17 Apr 2026 15:35:28 -0400 Subject: [PATCH 049/229] [css-values-5][editorial] Clean up some random() prose. --- css-values-5/Overview.bs | 90 ++++++++++++++++++++-------------------- 1 file changed, 46 insertions(+), 44 deletions(-) diff --git a/css-values-5/Overview.bs b/css-values-5/Overview.bs index 46d6ccf9ee34..481a81f7c838 100644 --- a/css-values-5/Overview.bs +++ b/css-values-5/Overview.bs @@ -2287,11 +2287,6 @@ Generating a Random Numeric Value: the ''random()'' function 
 	<random()> = random( <>? , <>, <>, <>? )
-
-	<> = auto | <> | fixed <>
-	<> =  <> || element-scoped
-	                       || [ property-scoped | property-index-scoped | <> ]
-	<> = <>
See [[#random-evaluation]] and [[#random-caching]] @@ -2580,50 +2575,53 @@ Evaluating Random Values Sharing (Or Not) Random Values: the <> value CSS is a declarative language, - so functions don't have a specific "time" when they're "evaluated"; - the user agent is free to "execute" functions in any order, + so functions don't have a specific “time” when they're evaluated; + the user agent is free to “execute” functions in any order, as many times as they want, as every execution will return the same value. - This is difficult to square with "random" functions, + This is difficult to square with random-value functions, which are inherently stateful and care about when, how often, and in what order they're executed. - To fix this, the [=random functions=] are associated with a [=random cache name=], + To solve this, the [=random functions=] are associated with a [=random cache name=], ensuring that any time the random function is evaluated with the same cache key, it will return the same [=random base value=]; and also that [=random functions=] with different caching keys will return different [=random base value=] from each other (unless they are, randomly, the same). - The <> value controls this behavior: + The <> value controls this behavior, + and defaults to ''random()/auto'' when omitted. + It's syntax is as follows, and interpreted as described below: + + 
+		<> = auto | <> | fixed <>
+		<> =  <> || element-scoped
+		                       || [ property-scoped | property-index-scoped | <> ]
+		<> = <>
+
: auto - :: The [=random function=] is roughly "as random as possible": - every usage in a property, - between different properties, - and between different elements - will get a different [=random cache name=]. + :: The [=random function=] is roughly “as random as possible”: + the [=random cache name=], and thus the result, + varies across every ''random()'' instance in a multi-component value, + across different properties, + and across different elements. + This is equivalent to specifying ''element-scoped property-index-scoped'', and simplifies in exactly the same way. - If the <> is omitted, - it behaves as ''random()/auto''. - : <> - :: The <> specifies the [=random cache name=] directly, - naming the random value and allowing it to be explicitly shared (or not) + :: The <> specifies the [=random cache name=], + allowing it to be explicitly shared (or not) with other uses of [=random functions=]. Every [=random function=] using the same [=random cache name=] will get the same random value; every one using a different [=random cache name=] will get unrelated random values. - The [=random cache name=] is made of several possible parts, - which are all optional - and can be specified in any order: - - * The <>, giving the value an explicit name. + * The <> gives the value an explicit name. If omitted, this part of the name is null. * element-scoped adds an element-specific identifier to the [=random cache name=], @@ -2631,19 +2629,22 @@ Sharing (Or Not) Random Values: the <> value * property-scoped adds the property name the [=random function=] is being used on to the [=random cache name=], so different properties will get different random values. + Note that shorthand declarations will apply the [=shorthand property=]'s name. * property-index-scoped adds the property name and the index of the random function among all the random functions used in the same property value to the [=random cache name=], - so multiple uses of a [=random function=] in the same property - will get different random values. + so multiple instances of a [=random function=] in the same declaration + will each get different [=random cache names=]. + Note this index is assigned before [=shorthand=] expansion. - ''property-scoped'' and ''property-index-scoped'' - are mutually exclusive with each other, - and also with the <> value. - This value, like ''fixed'' below, isn't intended to be specified by authors, + See [[#random-simplify]] for how these values resolve. + + The <> value, + like ''fixed'' below, isn't intended to be specified by authors, but can show up in [=computed values=]. - It is a <> that must start with the prefix ua-. + It is a <> that must start with the prefix ua-, + or else it is invalid. When generated automatically by the user agent, it will always be ua-PROPERTY or ua-PROPERTY-INDEX, with the PROPERTY and INDEX parts @@ -2797,7 +2798,8 @@ Sharing (Or Not) Random Values: the <> value (both are the first [=random function=] used in 'animation'), so they'll share [=random base values=] on a single element and generate related random values, - even tho the author likely considers them to be "different uses". + even though the author likely considers them to be + different instances of ''random()''. This unexpected sharing is, unfortunately, unavoidable. CSS generally doesn't care how you organize styles for your elements; @@ -2858,14 +2860,15 @@ Sharing (Or Not) Random Values: the <> value 2. A nullable [=string=] property/index value: the value of the <>, if specified/calculated; otherwise null. - 4. A nullable "element identifier" + 4. A nullable /element identifier/ uniquely identifying the {{Element}} or [=pseudo-element=] the style is being applied to, if ''random()/element-scoped'' is specified; otherwise null. - 5. A document ID identifying the {{Document}} the styles are from. + 5. A /document identifier/ identifying the {{Document}} the styles are from. - The "element ID" and "document ID" must have the same lifetimes and equivalence semantics + The /element identifier/ and /document identifier/ + must have the same lifetimes and equivalence semantics as a JavaScript reference to the {{Element}} or {{Document}}. Issue: The behavior for pseudo-elements needs to be clarified. @@ -2873,13 +2876,12 @@ Sharing (Or Not) Random Values: the <> value * The [=random cache name=] and [=random base value=] must be determined by [=computed value=] time, before [=inheritance=], - so that a random function which is unresolved by inheritance time + so that a random function that is unresolved by inheritance time (due to containing, for example, a layout-sensitive percentage) does not have a different behavior on children - from one that resolves immediately. + than one that resolves immediately.
- Shorthands are recorded as part of the [=random cache name=], rather than the longhand the value gets expanded to. For example: @@ -2941,8 +2943,8 @@ Sharing (Or Not) Random Values: the <> value Similarly, ''random()/element-scoped'' in the <> won't cause the function to determine its "element identifier" - until substitution actually happens, - which might be after '--size' has inherited through multiple elements, + until substitution actually happens-- + which might be after '--size' has inherited through multiple elements-- so again multiple elements using ''var(--size)'' would end up with distinct random values rather than sharing one value defined on their ancestor. @@ -2955,14 +2957,14 @@ Sharing (Or Not) Random Values: the <> value Both issues can be resolved by instead using a [=registered custom property=] with a non-universal grammar, - so the ''random()'' function will be parsed and evaluated in the [=custom property=] + so the ''random()'' function will be parsed and evaluated by the [=custom property=] (gaining a <> of "ua---size-1"), and then the resolved random value will be substituted into each property.

-Simplification

+Random Simplification At parse time, certain transformations are performed on the <> of a [=random function=]: @@ -2975,7 +2977,7 @@ Simplification either ua-PROPERTY with PROPERTY being the property the value was parsed as, or ua-PROPERTY-INDEX with PROPERTY as the previous and INDEX being the 1-indexed integer index of this [=random function=] - among all [=random functions=] being used in the property. + among all [=random functions=] being used in the declaration. The INDEX value is based on the ordering in the parsed value, before any canonicalization/reordering might occur From 1aa8ccc47a32b647385bb0199f71e97abddbd3a1 Mon Sep 17 00:00:00 2001 From: "L. David Baron" Date: Fri, 17 Apr 2026 16:10:53 -0400 Subject: [PATCH 050/229] [css-navigation-1] Add other: and between: to @navigation. --- css-navigation-1/Overview.bs | 57 ++++++++++++++++++++++++++++-------- 1 file changed, 44 insertions(+), 13 deletions(-) diff --git a/css-navigation-1/Overview.bs b/css-navigation-1/Overview.bs index d81f64589741..a99ad4cf6d34 100644 --- a/css-navigation-1/Overview.bs +++ b/css-navigation-1/Overview.bs @@ -185,10 +185,15 @@ styles that cause [=view transitions=]. pattern: url-pattern("/product/:id"); } -@navigation ((from: --search-results-page) and - (to: --product-page)) or - ((from: --product-page) and - (to: --search-results-page)) { +@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 @@ -213,17 +218,24 @@ with <> defined as: | <> [ and <> ]* | <> [ or <> ]* <> = ( <> ) | ( <> ) | <> -<> = <> | <> +<> = <> | + <> | + <> <> = <> : <> -<> = at | from | to +<> = at | other | from | to <> = <> | <> <> = <> +<> = + between : <> and <> + <> = history : <> <> = traverse | back | forward | reload +ISSUE: Should we use ''at'' or ''current''? + The above grammar is purposely very loose for forwards-compatibility reasons, since the <> production allows for substantial future extensibility. @@ -262,6 +274,14 @@ as follows: the [=navigation location URL pattern=] of <> and input as the document's [=Document/URL=]. + : other: <> + :: The result is true if + the [=current other URL=] other 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 other. + : from: <> :: The result is true if the [=current from URL=] from of the document is non-null and @@ -278,6 +298,20 @@ as follows: the [=navigation location URL pattern=] of <> and input as to. +: <> +:: : between: <> and <> + :: The result is true if + the [=current from URL=] from of the document is non-null, + the [=current to URL=] to of the document is non-null, + [=URL pattern/match|match a URL pattern=] is non-null + given urlPattern as + the [=navigation location URL pattern=] of one of the two <>s + and input as from, and + [=URL pattern/match|match a URL pattern=] is non-null + given urlPattern as + the [=navigation location URL pattern=] of the other of the two <>s + and input as to. + : <> :: : history: traverse :: True if the [=current navigation type=] is {{NavigationType/traverse}}. @@ -455,6 +489,8 @@ and the pseudo-class matches any element where: navigation-from | navigation-to +ISSUE: Should we use ''navigation-at'' or ''navigation-current''? + A <> matches the target of the link when both: * the <> matches the target of the link, and * either: @@ -494,7 +530,7 @@ if the following steps return true: : If matchTarget is ''navigation-other'', :: the current other URL of the document. : Otherwise, if matchTarget is ''navigation-current'', - :: the current URL of the document. + :: the document's [[=Document/URL=]]. : Otherwise, if matchTarget is ''navigation-from'', :: the current from URL of the document. : Otherwise (Assert: matchTarget is ''navigation-to''), @@ -537,7 +573,7 @@ NOTE: Some of the design discussion for this feature has been in 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 other URL=], [=current from URL=], and [=current to URL=]. The current from URL of a [=/document=] is a URL or null. It is defined as follows: @@ -628,11 +664,6 @@ 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. -The current URL of a [=/document=] is a URL. -It is defined as follows: - -1. ISSUE: Write this! - The current other URL of a [=/document=] is a URL or null. It is defined as follows: From c39efe8e38a81cc1503d21d51a3c021c88173058 Mon Sep 17 00:00:00 2001 From: "L. David Baron" Date: Fri, 17 Apr 2026 16:16:23 -0400 Subject: [PATCH 051/229] [css-navigation-1] Add one more naming issue about maybe splitting :link-to. --- css-navigation-1/Overview.bs | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/css-navigation-1/Overview.bs b/css-navigation-1/Overview.bs index a99ad4cf6d34..28498ff6e947 100644 --- a/css-navigation-1/Overview.bs +++ b/css-navigation-1/Overview.bs @@ -397,7 +397,7 @@ that matches link elements that link to a certain URL.
-A simple example of a ''::link-to()'' selector is this one, +A simple example of a '':link-to()'' selector is this one, which matches any links that link to the site's homepage: 
@@ -410,7 +410,7 @@ which matches any links that link to the site's homepage:
 
 

 
-A more interesting example of the ''::link-to()'' pseudo-class
+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).
@@ -491,6 +491,9 @@ and the pseudo-class matches any element where:
 
 ISSUE: Should we use ''navigation-at'' or ''navigation-current''?
 
+ISSUE: Should the '':link-to()'' variant that has a <> have a different name,
+such as '':navigating-link()''?
+
 A <> matches the target of the link when both:
 * the <> matches the target of the link, and
 * either:

From 33682af340a2c61ce7e632f0b4d3bde01a3a27de Mon Sep 17 00:00:00 2001
From: fantasai 
Date: Fri, 17 Apr 2026 17:01:42 -0400
Subject: [PATCH 052/229] [css-values-5][editorial] Rename random grammar
 productions for clarity

---
 css-values-5/Overview.bs | 66 +++++++++++++++++++++-------------------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/css-values-5/Overview.bs b/css-values-5/Overview.bs
index 481a81f7c838..42d44bde0d6e 100644
--- a/css-values-5/Overview.bs
+++ b/css-values-5/Overview.bs
@@ -163,7 +163,7 @@ Commas in Function Arguments
 		For example, the grammar of the ''random-item()'' function is:
 
 		
-			random-item( <>, [<>?]# )
+			random-item( <>, [<>?]# )
 		

 
 		The ''#'' indicates comma-separated repetitions,
@@ -2286,7 +2286,7 @@ Generating a Random Numeric Value: the ''random()'' function
 	optionally limiting the possible values to a step between those limits:
 
 	
-	<random()> = random( <>? , <>, <>, <>? )
+	<random()> = random( <>? , <>, <>, <>? )
 	

 
 	See [[#random-evaluation]] and [[#random-caching]]
@@ -2294,12 +2294,12 @@ Generating a Random Numeric Value: the ''random()'' function
 	Its arguments are:
 
 	

-		: <>
-		:: The optional <>
+		: <>
+		:: The optional <>
 			controls which [=random functions=] in the document
 			will share a [=random base value=]
 			and which will get distinct values.
-			If <> is omitted,
+			If <> is omitted,
 			it behaves as ''random()/auto''.
 
 			See [[#random-caching]] for a full description of this value.
@@ -2426,7 +2426,7 @@ Picking a Random Item From a List: the ''random-item()'' function
 	from among its list of items.
 
 	
-	<random-item()> = random-item( <> , [ <>? ]# )
+	<random-item()> = random-item( <> , [ <>? ]# )
 	

 
 	The ''random-item()'' function's [=argument grammar=] is:
@@ -2438,11 +2438,11 @@ Picking a Random Item From a List: the ''random-item()'' function
 	See [[#random-evaluation]] and [[#random-caching]]
 	for details on how the function is evaluated.
 
-	The required <>
+	The required <>
 	is interpreted identically to ''random()''.
 	(See [[#random-caching]] for details.)
 
-	Note: The <> argument is required in ''random-item()'',
+	Note: The <> argument is required in ''random-item()'',
 	but optional in ''random()'',
 	for parsing reasons
 	(it's impossible to tell whether ''random-item(--foo, --bar, --baz)''
@@ -2478,7 +2478,7 @@ Picking a Random Item From a List: the ''random-item()'' function
 			and |options| be a list of the remaining <>? options.
 
 		2. [=Substitute arbitrary substitution functions=] in |value sharing|,
-			then [=CSS/parse=] it as <>.
+			then [=CSS/parse=] it as <>.
 			If parsing returns failure,
 			return the [=guaranteed-invalid value=];
 			otherwise set |value sharing| to the result.
@@ -2572,7 +2572,7 @@ Evaluating Random Values
 
 
 

-Sharing (Or Not) Random Values: the <> value

+Sharing (Or Not) Random Values: the <> value
 
 	CSS is a declarative language,
 	so functions don't have a specific “time” when they're evaluated;
@@ -2590,18 +2590,18 @@ Sharing (Or Not) Random Values: the <> value
 	will return different [=random base value=] from each other
 	(unless they are, randomly, the same).
 
-	The <> value controls this behavior,
+	The <> value controls this behavior,
 	and defaults to ''random()/auto'' when omitted.
 	It's syntax is as follows, and interpreted as described below:
 
 	
-		<> = auto | <> | fixed <>
-		<> =  <> || element-scoped
+		<> = auto | <> | fixed <>
+		<> =  <> || element-scoped
 		                       || [ property-scoped | property-index-scoped | <> ]
 		<> = <>
 	

 
-	

+	

 		: auto
 		:: The [=random function=] is roughly “as random as possible”:
 			the [=random cache name=], and thus the result,
@@ -2612,8 +2612,8 @@ Sharing (Or Not) Random Values: the <> value
 			This is equivalent to specifying ''element-scoped property-index-scoped'',
 			and simplifies in exactly the same way.
 
-		: <>
-		:: The <> specifies the [=random cache name=],
+		: <>
+		:: The <> specifies the [=random cache name=],
 			allowing it to be explicitly shared (or not)
 			with other uses of [=random functions=].
 			Every [=random function=] using the same [=random cache name=]
@@ -2621,22 +2621,24 @@ Sharing (Or Not) Random Values: the <> value
 			every one using a different [=random cache name=]
 			will get unrelated random values.
 
-			* The <> gives the value an explicit name.
+			
    
+			
  • The <> gives the value an explicit name.
 				If omitted, this part of the name is null.
-			* element-scoped adds an element-specific identifier
+			
  • element-scoped adds an element-specific identifier
 				to the [=random cache name=],
 				so different elements will get different random values.
-			* property-scoped adds the property name the [=random function=] is being used on
+			
  • property-scoped adds the property name the [=random function=] is being used on
 				to the [=random cache name=],
 				so different properties will get different random values.
 				Note that shorthand declarations will apply the [=shorthand property=]'s name.
-			* property-index-scoped
+			
  • property-index-scoped
 				adds the property name and the index of the random function
 				among all the random functions used in the same property value
 				to the [=random cache name=],
 				so multiple instances of a [=random function=] in the same declaration
 				will each get different [=random cache names=].
 				Note this index is assigned before [=shorthand=] expansion.
+			

 
 			See [[#random-simplify]] for how these values resolve.
 
@@ -2683,7 +2685,7 @@ Sharing (Or Not) Random Values: the <> value
 		}
- Depending on what <> you provide + Depending on what <> you provide in place of the ''???'', you'll get significantly different behavior for the elements: @@ -2768,7 +2770,7 @@ Sharing (Or Not) Random Values: the <> value If you want the values to be completely uncorrelated, give them distinct names (''--foo'' vs ''--bar'') or mix in additional information that will uniquify their [=random cache names=] - (specifying ''--foo property-scoped'', or omitting the <> argument entirely) + (specifying ''--foo property-scoped'', or omitting the <> argument entirely)
@@ -2830,7 +2832,7 @@ Sharing (Or Not) Random Values: the <> value * Each instance of a [=random function=] in styles has an associated random base value. - If the [=random function's=] <> is ''fixed <>'', + If the [=random function's=] <> is ''fixed <>'', the [=random base value=] is that number. Otherwise, the [=random base value=] is a pseudo-random real number @@ -2935,13 +2937,13 @@ Sharing (Or Not) Random Values: the <> value the ''random()'' function isn't evaluated (or even recognized *as* a ''random()'' function) in ''--size'', - so the default rules for an omitted <> aren't applied. + so the default rules for an omitted <> aren't applied. Instead, it's evaluated when it's substituted into 'width' and 'height', so each gets a distinct [=random cache name=], and this ends up defining a random rectangle, rather than a square. - Similarly, ''random()/element-scoped'' in the <> + Similarly, ''random()/element-scoped'' in the <> won't cause the function to determine its "element identifier" until substitution actually happens-- which might be after '--size' has inherited through multiple elements-- @@ -2964,15 +2966,15 @@ Sharing (Or Not) Random Values: the <> value

-Random Simplification

+Simplification of <> At parse time, - certain transformations are performed on the <> of a [=random function=]: + certain transformations are performed on the <> of a [=random function=]: - * If the <> is ''auto'' (or omitted), + * If the <> is ''auto'' (or omitted), it's turned into ''element-scoped property-index-scoped''. (And then subject to the below transformations.) - * If the <> contains ''property-scoped'' or ''property-index-scoped'', + * If the <> contains ''property-scoped'' or ''property-index-scoped'', that keyword is replaced by a <>: either ua-PROPERTY with PROPERTY being the property the value was parsed as, or ua-PROPERTY-INDEX with PROPERTY as the previous @@ -2983,7 +2985,7 @@ Random Simplification before any canonicalization/reordering might occur that could shuffle the values around. - If the <> contains a <>, + If the <> contains a <>, this must not be omitted in the serialization of the value, even if this would normally be valid per the [=serialize a CSS value|"shortest serialization principle"=]. @@ -2993,7 +2995,7 @@ Random Simplification specifying ''margin: random(10px, 20px) random(10px, 20px)'' will cause the top and bottom margins to be one random value, and the left and right margins to be another random value. - The omitted <>s get rewritten at parse-time + The omitted <>s get rewritten at parse-time to ''element-scoped ua-margin-1'' and ''element-scoped ua-margin-2'', respectively, before they expand into the 'margin' longhands. @@ -3013,7 +3015,7 @@ Random Simplification If a ''random()'' function can't be fully [=simplify a calculation tree|simplified=] by [=computed value=] time, then its arguments are maximally simplified, - and its <> + and its specified <> is replaced with ''fixed BASE'', where BASE is the function's [=random base value=]. From 537f46d0ff5dc2395590268a2c9278a5ad80cfcb Mon Sep 17 00:00:00 2001 From: "TAMURA, Kent" Date: Mon, 20 Apr 2026 12:59:43 +0900 Subject: [PATCH 053/229] [css-text-4][css-inline-3][css-text-decor-4] Introduce `text-fit` property (#13616) * Initial commit for 'text-fit' property * Separate a paragraph into two, etc. * 'see below' --- css-inline-3/Overview.bs | 9 +- css-text-4/Overview.bs | 183 ++++++++++++++++++++++++++++++++++- css-text-decor-4/Overview.bs | 6 +- 3 files changed, 188 insertions(+), 10 deletions(-) diff --git a/css-inline-3/Overview.bs b/css-inline-3/Overview.bs index cee518b79606..edd75089676d 100644 --- a/css-inline-3/Overview.bs +++ b/css-inline-3/Overview.bs @@ -952,7 +952,7 @@ Line Spacing: the 'line-height' property Initial: normal Applies to: non-replaced inline boxes and SVG text content elements Inherited: yes - Percentages: computed relative to ''1em'' + Percentages: see below Computed value: the specified keyword, a number, or a computed <> value Animation type: by computed value type @@ -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,14 +983,15 @@ 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=].
<>
The [=preferred line height=] - and [=computed value=] of the property + is this percentage of the element's used 'font-size'. + The [=computed value=] of the property is this percentage of the element's computed 'font-size'. Negative values are illegal.
diff --git a/css-text-4/Overview.bs b/css-text-4/Overview.bs index f7b418cf494a..6eaaac1ba5ea 100644 --- a/css-text-4/Overview.bs +++ b/css-text-4/Overview.bs @@ -9737,6 +9737,174 @@ Aligning a block of text within its container: the 'text-group-align' property +

+Text fitting: the 'text-fit' property

+ + + + 
+	Name: text-fit
+	Value: [ none | grow | shrink ] [consistent | per-line | per-line-all]? <>?
+	Initial: none
+	Applies to: block containers
+	Inherited: no
+	Percentages: N/A
+	Computed value: specified keywords or computed <> value
+	Canonical order: per grammar
+	Animation type: discrete
+
+ +

The 'text-fit' property describes how [=inline-level=] contents are + scaled if they do not fit to the [=line box=]. + +

Values have the following meanings: + +

+
none +
+ The user agent doesn't scale [=inline-level=] contents to fit to + the [=line box=]. +
+ +
grow +
+ The user agent scales up [=inline-level=] contents to fit to the + [=line box=]. +
+ +
shrink +
+ The user agent scales down [=inline-level=] contents to fit to the + [=line box=]. +
+ +
consistent +
+ Specifies that all lines in the container are scaled with a single + scaling factor. + This keyword has no effect if ''text-fit/none'' is specified. + If none of ''text-fit/consistent'', ''text-fit/per-line'', or + ''text-fit/per-line-all'' are specified, ''text-fit/consistent'' is + assumed. +
+ +
per-line +
+ Specifies that each line is scaled with its own scaling factor. + However, the last line of the block and lines that end in a forced + break are not scaled. + This keyword has no effect if ''text-fit/none'' is specified. +
+ +
per-line-all +
+ Specifies that each line is scaled with its own scaling factor, + including the last line of the block and lines that end in a forced + break. + This keyword has no effect if ''text-fit/none'' is specified. +
+ +
<percentage> +
+ Specifies the limit of the scaling factor. + If ''text-fit/grow'' is specified and the value is 100% or greater, + it is the maximum scaling factor. + If ''text-fit/shrink'' is specified and the value is between 0% and + 100% inclusive, it is the minimum scaling factor. + Otherwise, or if this component is omitted, there is no limit on + the scaling factor. +
+
+ +

This property provides a functionality to make [=inline-level=] contents + exactly fill the inline size of the [=line box=]. + Unlike ''text-align/justify'' of the 'text-align' property, which achieves + this by adjusting spacing between characters, this property scales the + font size. + +

When ''text-fit/grow'' or ''text-fit/shrink'' is specified, + a [=line scaling factor=] is computed for each [=line box=]. + If ''text-fit/consistent'' applies, all [=line boxes=] are scaled by the + smallest computed [=line scaling factor=]. + Otherwise, each [=line box=] is scaled by its own [=line scaling factor=]. + +

This property does not affect the 'font-size' [=computed value=], + and thus does not affect font-size-relative <> values of other properties. + For example, "line-height: 1.5em" and "letter-spacing: 0.1em" are not + affected by this scaling. + +

The [=used value=] of the text 'font-size' is its [=computed value=] + multiplied by the [=line scaling factor=]. + +

Scaling can change the [=block size=] of a [=line box=], + which can in turn change its position along the [=block-axis=]. + If any feature is active that would cause the [=inline size=] of the + [=line box=] to change based on its [=block-axis=] position (such as + 'float' or 'initial-letter'), scaling is disabled for the block. + +

+ If the [=inline size=] of a block container depends on the size of + the viewport, its apparent [=inline size=] may not change even if + the user changes the page zoom level. + In that case, if text is fitted with this feature, the text size may + not change at all even though the zoom level has changed. + There is no agreement yet on how to deal with this issue. See + csswg#12886. +
+ +

Computing line scaling factor

+ +

The parts of the [=line box=]'s contents that can be scaled by this + property are called scalable parts. + These include: + +

    +
  • + Text, including text in [=inline boxes=], but excluding trailing + white space. + +
  • + Spacing whose [=inline size=] is proportional to the 'font-size' + used value. + E.g. percentage-based 'letter-spacing' or 'word-spacing', and 'text-autospace'. +
+ +

+ 'text-indent', 'line-padding', non-percentage-based 'letter-spacing' and + 'word-spacing', and [=atomic inlines=] are not [=scalable parts=]. + The [=inline-axis=] 'padding', 'border', and 'margin' of inline boxes are + also not [=scalable parts=]. + +

A line scaling factor is the ratio by which the + [=scalable parts=] of a line must be scaled in order to make its + [=inline-level=] content exactly fit the [=line box=]’s [=inline size=]. + +

A [=line scaling factor=] is computed from: + +

    +
  • The total [=inline size=] of the [=scalable parts=] in the line. +
  • + The remaining space in the [=line box=], including any trailing whitespace + (which may be negative if the content overflows the [=line box=]). +
+ +

If a <> is specified, it clamps the [=line scaling factor=]. + +

+ A simple calculation for the [=line scaling factor=] would be + (A + B) / A, where A is the total [=inline size=] of + [=scalable parts=] and B is the remaining space. + However, due to [[css-fonts-4#font-optical-sizing-def|optical sizing]], the + [=inline size=] of text might not be perfectly proportional to its + 'font-size'. + The exact method for determining a reasonable [=line scaling factor=] + is up to the implementation. + +

The [=line scaling factor=] for a [=line box=] with no + [=scalable parts=] is 1. +

Spacing

@@ -9779,7 +9947,7 @@ Word Spacing: the 'word-spacing' property Initial: normal Applies to: text Inherited: yes - Percentages: relative to computed 'font-size', i.e. ''1em'' + Percentages: relative to used 'font-size' Computed value: an absolute length and/or a percentage Animation type: by computed value type Canonical order: n/a @@ -9977,7 +10145,7 @@ Tracking: the 'letter-spacing' property Initial: normal Applies to: inline boxes and text Inherited: yes - Percentages: relative to computed 'font-size', i.e. ''1em'' + Percentages: relative to used 'font-size' Computed value: an absolute length and/or a percentage Animation type: by computed value type Canonical order: n/a @@ -10624,7 +10792,7 @@ Inter-script Spacing i.e. without any intervening non-zero [=margin=], [=border=], or [=padding=] or intervening characters (such as a quotation mark or a space). The amount of space introduced by these keywords is 1/8 of the CJK advance measure, - i.e ''0.125ic''. + i.e ''0.125ic'' if the [=used value=] of 'font-size' is same as its [=computed value=]. Note: Spacing conventions vary, but values typically range from 1/4ic to as low as 1/8ic, with 1/4ic being more common in historical contexts due to metal type limitations @@ -12133,6 +12301,13 @@ Text Processing Order of Operations * 'letter-spacing', 'word-spacing', 'text-spacing', and 'line-padding' * [[#hanging-punctuation-property|hanging punctuation]] +
  • + [[#text-fit-property|text fitting]] + + * font/glyph selection + and positioning [[!CSS-FONTS-3]] may be done again + * 'letter-spacing', 'word-spacing', and 'text-spacing' may be updated. +
  • [[#justification|justification]] (which may affect glyph selection and/or text wrapping, looping back into that step) @@ -13303,7 +13478,7 @@ Changes Changes specific to Level 4 are listed below. Significant changes since the 29 May 2024 Working Draft include: - * None yet. + * Add 'text-fit' property. Significant changes since the 19 February 2024 Working Draft include: * Renamed the 'text-spacing-trim' value trim-auto to ''trim-both''. diff --git a/css-text-decor-4/Overview.bs b/css-text-decor-4/Overview.bs index 70e8a79eea47..03194bf48ce9 100644 --- a/css-text-decor-4/Overview.bs +++ b/css-text-decor-4/Overview.bs @@ -366,7 +366,8 @@ Text Decoration Line Thickness: the 'text-decoration-thickness' property Note: A length will inherit as a fixed value, and will not scale with the font. - A percentage value specifies the thickness of text decoration lines as a percentage of ''1em''. + A percentage value specifies the thickness of text decoration lines as a percentage of + the used 'font-size'. Note: A percentage will inherit as a relative value, and will therefore scale with changes in the font as it inherits. @@ -707,7 +708,8 @@ Text Underline Offset: the 'text-underline-offset' property Note: A length will inherit as a fixed value, and will not scale with the font. - A percentage value specifies the offset of underlines as a percentage of ''1em''. + A percentage value specifies the offset of underlines as a percentage of the used + 'font-size'. Note: A percentage will inherit as a relative value, and will therefore scale with changes in the font as it inherits. From e2ca4ff1a6eb1685985ca1dc2e5ae22521a7544c Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Mon, 20 Apr 2026 15:56:18 -0400 Subject: [PATCH 054/229] [selectors-4][editorial] update wpt, fix syntax --- selectors-4/Overview.bs | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/selectors-4/Overview.bs b/selectors-4/Overview.bs index 913197199a1c..bf9d5036bef3 100644 --- a/selectors-4/Overview.bs +++ b/selectors-4/Overview.bs @@ -1711,6 +1711,7 @@ The Relational Pseudo-class: '':has()'' invalidation/host-has-shadow-tree-element-at-subject-position.html invalidation/host-pseudo-class-in-has.html invalidation/input-pseudo-classes-in-has.html + invalidation/input-in-range-in-has-with-readonly.html invalidation/is-pseudo-containing-complex-in-has.html invalidation/is-pseudo-containing-sibling-relationship-in-has.html invalidation/lang-pseudo-class-in-has-document-element.html @@ -1720,7 +1721,7 @@ The Relational Pseudo-class: '':has()'' invalidation/link-pseudo-class-in-has.html invalidation/link-pseudo-in-has.html invalidation/location-pseudo-classes-in-has.html - invalidation/media-loading-pseudo-classes-in-has.html + invalidation/media-loading-pseudo-classes-in-has.sub.html invalidation/media-pseudo-classes-in-has.html invalidation/modal-pseudo-class-in-has.html invalidation/negated-has-in-nonsubject-position.html @@ -1974,6 +1975,7 @@ Attribute selectors missing-right-token.html parsing/parse-attribute.html selectors-attr-many.html + selectors-attr-many-2.html Selectors allow the representation of an element's attributes. When @@ -2600,6 +2602,7 @@ The Language Pseudo-class: '':lang()'' selectors-4/lang-023.html selectors-4/lang-024.html selectors-4/lang-025.html + selectors-4/lang-singleton-subtag-matching.html If the document language specifies how @@ -2929,6 +2932,14 @@ User Action Pseudo-classes are not yet defined, but will be in the future. + + active-toplayer-001.html + focus-within-toplayer-001.html + hover-toplayer-001.html + toplayer-transition-001.html + user-action-pseudo-top-layer.html + +

    The Pointer Hover Pseudo-class: '':hover''

    @@ -3196,6 +3207,7 @@ Media Playback State: the '':playing'', '':paused'', and '':seeking'' pseudo-cla media/media-playback-state.html + media/media-loading-state.sub.html The :playing pseudo-class represents an element @@ -3221,7 +3233,6 @@ Media Playback State: the '':playing'', '':paused'', and '':seeking'' pseudo-cla Media Loading State: the '':buffering'' and '':stalled'' pseudo-classes - media/media-loading-state.html media/media-loading-state-timing.sub.html media/media-playback-state-timing.html @@ -3555,6 +3566,11 @@ The Validity Pseudo-classes: '':valid'' and '':invalid'' but a p element has no validity semantics at all, and so it never matches either of these pseudo-classes. + + invalidation/input-in-range-in-has-with-readonly.html + invalidation/media-loading-pseudo-classes-in-has.sub.html + +

    The Range Pseudo-classes: '':in-range'' and '':out-of-range''

    @@ -5116,7 +5132,7 @@ Changes since the 11 November 2022 Working Draft Significant changes since the 11 November 2022 Working Draft: * Defined language range as BCP 47 extended language range - () + (Issue 13646>) * Removed the at-risk status from '':read-write'' and '':has()'' * Added '':popover-open'' pseudo-class. (Issue 8637) @@ -5381,6 +5397,7 @@ Acknowledgements first-line-bidi-002.html floating-first-letter-05d0.html floating-first-letter-feff.html + hash-collision-cssom.html invalidation/part-pseudo.html link-sharing-crash.html parsing/parse-part.html From ea601f3eb7b7c83260601910ba95331d5543e02a Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Tue, 21 Apr 2026 16:05:41 -0400 Subject: [PATCH 055/229] Clarified that language codes must be well-formed to match, #8720 --- selectors-4/Overview.bs | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/selectors-4/Overview.bs b/selectors-4/Overview.bs index bf9d5036bef3..1101a6940d4d 100644 --- a/selectors-4/Overview.bs +++ b/selectors-4/Overview.bs @@ -2640,9 +2640,27 @@ The Language Pseudo-class: '':lang()'' prior to the extended filtering operation. The matching is performed [=ASCII case-insensitively=]. - The language range does not need to be a valid language code to + The language range + must be well-formed according to the syntax of BCP 47 in order to match. + However, it does not need to be a valid language code to perform this comparison. +
    + For example, + 
    +			:lang(åå)
+
    + would not match, + because it containins non-ASCII characters so is ill-formed. + + On the other hand, + 
    +			:lang(qq)
+
    + could match, + even though qq is not a registered language code. +
    + For this purpose, a wildcard [=language range=] ("*") does not match elements whose language is not tagged (e.g. lang=""), but does match elements whose language is tagged as undetermined (lang=und). From 32d875dcb8e3659f150e2e72d504e6f950f89b6c Mon Sep 17 00:00:00 2001 From: canalun Date: Wed, 22 Apr 2026 10:43:43 -0400 Subject: [PATCH 056/229] [css-animations-2][css-transitions-2] Add animation property to AnimationEvent and TransitionEvent interfaces. (#13815) * add animation prop to css animations and transitions * Update css-animations-2/Overview.bs Co-authored-by: Brian Birtles * Update css-animations-2/Overview.bs Co-authored-by: Brian Birtles * Update css-animations-2/Overview.bs Co-authored-by: Brian Birtles * Update css-animations-2/Overview.bs Co-authored-by: Brian Birtles * Update css-animations-2/Overview.bs Co-authored-by: Brian Birtles * remove description for initialization of animation prop --------- Co-authored-by: Brian Birtles --- css-animations-2/Overview.bs | 27 +++++++++++++++++++++++++++ css-transitions-2/Overview.bs | 24 ++++++++++++++++++++++++ 2 files changed, 51 insertions(+) diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs index 20eb4cc53d0c..f9e77bea5894 100644 --- a/css-animations-2/Overview.bs +++ b/css-animations-2/Overview.bs @@ -882,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} diff --git a/css-transitions-2/Overview.bs b/css-transitions-2/Overview.bs index d4718f7b4548..29793811610a 100644 --- a/css-transitions-2/Overview.bs +++ b/css-transitions-2/Overview.bs @@ -582,6 +582,30 @@ the {{TransitionEvent}}. +## Interface {{TransitionEvent}} ## {#interface-transitionevent} + +Add animation to the {{TransitionEvent}} interface and {{TransitionEventInit}} dictionary as follows: + +### IDL Definition ### {#interface-transitionevent-idl} + +
    +[Exposed=Window]
+partial interface TransitionEvent {
+  readonly attribute CSSTransition? animation;
+};
+
+partial dictionary TransitionEventInit {
+  CSSTransition? animation = null;
+};
+
    + +### Attributes ### {#interface-transitionevent-attributes} + +Add attribute descriptions as follows: + +: animation +:: The CSS Transition corresponding to the transition that fired the event. + # DOM Interfaces # {#interface-dom} ## The CSSTransition interface ## {#the-CSSTransition-interface} From a407bba4a8769998e498f9e25fb5c2d9e10651f5 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Wed, 22 Apr 2026 11:24:08 -0400 Subject: [PATCH 057/229] [selectors-4] Reword constraints on language ranges, as suggested by reviewer; see #8720 Co-authored by: Addison Phillips --- selectors-4/Overview.bs | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/selectors-4/Overview.bs b/selectors-4/Overview.bs index 1101a6940d4d..41641b185b06 100644 --- a/selectors-4/Overview.bs +++ b/selectors-4/Overview.bs @@ -2640,10 +2640,14 @@ The Language Pseudo-class: '':lang()'' prior to the extended filtering operation. The matching is performed [=ASCII case-insensitively=]. - The language range - must be well-formed according to the syntax of BCP 47 in order to match. - However, it does not need to be a valid language code to - perform this comparison. + The language range + must be an extended language range according to BCP47. + Language ranges that are not + well-formed language tags + or which would not be a well-formed language tag + if an initial wildcard character "*" + were replaced with a valid subtag, + do not match anything.
    For example, From 638137fbfd4665c4be6084fc02e87ba4da510a18 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Wed, 22 Apr 2026 12:08:33 -0400 Subject: [PATCH 058/229] [css-fonts-4][editorial] wpt --- css-fonts-4/Overview.bs | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs index 84db6575bb34..f952b68f0561 100644 --- a/css-fonts-4/Overview.bs +++ b/css-fonts-4/Overview.bs @@ -2274,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 @@ -4498,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 From c93831332ddab1988ad0c90dd8825796be43cd9f Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Wed, 22 Apr 2026 12:32:19 -0400 Subject: [PATCH 059/229] [css-fonts-4][editorial] fix bikeshed autolinking --- css-fonts-4/Overview.bs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs index f952b68f0561..ab957436abbe 100644 --- a/css-fonts-4/Overview.bs +++ b/css-fonts-4/Overview.bs @@ -374,7 +374,7 @@ Syntax of <> 
     	<> = <>| <> | <>
 	<> = ''generic(fangsong)'' | ''generic(kai)'' | ''generic(khmer-mul)'' |  ''generic(nastaliq)''
-	<> = ''serif'' | ''sans-serif'' | ''system-ui'' | ''cursive'' | ''fantasy'' | ''math'' | ''monospace''
+	<> = ''serif'' | ''sans-serif'' | ''system-ui'' | ''cursive'' | ''fantasy'' | ''font-family/math'' | ''monospace''
 	<> = ''ui-serif'' | ''ui-sans-serif'' | ''ui-monospace'' | ''ui-rounded''
    @@ -1341,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

From eb0ad72c4ecd8dfbcca2cf49a7f4903096fc8e73 Mon Sep 17 00:00:00 2001
From: Chris Lilley 
Date: Wed, 22 Apr 2026 12:39:59 -0400
Subject: [PATCH 060/229] [css-fonts-4][editorial] Update changes

---
 css-fonts-4/Overview.bs | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs
index ab957436abbe..bc543787bd84 100644
--- a/css-fonts-4/Overview.bs
+++ b/css-fonts-4/Overview.bs
@@ -9086,7 +9086,12 @@ 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)
 		
      • 

From f98969c7a4a206bea2e8dd8ebdc61cc875d62ccf Mon Sep 17 00:00:00 2001
From: Tab Atkins-Bittner 
Date: Fri, 24 Apr 2026 21:03:04 +0000
Subject: [PATCH 061/229] [css-sizing-4] Rewrite frame-sizing details for
 clarity.

---
 css-sizing-4/Overview.bs | 162 +++++++++++++++++++++++++++++++--------
 1 file changed, 130 insertions(+), 32 deletions(-)

diff --git a/css-sizing-4/Overview.bs b/css-sizing-4/Overview.bs
index 3890981ad7c6..cb7194722a46 100644
--- a/css-sizing-4/Overview.bs
+++ b/css-sizing-4/Overview.bs
@@ -32,7 +32,9 @@ spec:css2; type:property
 	text:min-height
 	text:max-width
 	text:max-height
-spec:html; type:element; text:meta
+spec:html; type:element;
+	text:meta
+	text:head
 spec:css2; type:dfn; text:document language
    @@ -1188,9 +1190,9 @@ 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: <{iframe}> elements + Applies to: replaced elements (but see below for details) Inherited: no - Computed value: specified keyword + Computed value: as specified Animation type: discrete @@ -1205,33 +1207,39 @@ Responsively-sized iframes: the 'frame-sizing' property 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: - Which elements have an [=internal layout intrinsic size=], +
    + : 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. - - The first instance of this meta tag added by the parser can make it opt in. - If the parser encounters multiple such tags, only the first one is used. - If the parser closes the <head> without seeing the tag, - it is frozen as not-set. - - An <{iframe}> initially doesn't have an [=internal layout intrinsic size=]. - When an <{iframe}>'s internal document is loaded, - if the required <{meta}> element is present, - the <{iframe}>'s [=internal layout intrinsic size=]'s height or width - is set to the [=natural size=] of the embedded document as specified by 'frame-sizing'. - Resizing occurs at the DOMContentLoaded and load events. - Subsequent changes to content, styling or layout of the embedded document - do not affect the [=internal layout intrinsic size=]. - - When laying out the <{iframe}>'s internal document, - its initial containing block size is locked to - the size at the time of its first layout, - to mitigate the risks of layout loops and information leaks. + via a <meta name=responsive-embedded-sizing> element. + (See [[#iframe-frame-sizing]].)
    When the embedded document has the following HTML: @@ -1254,14 +1262,104 @@ Responsively-sized iframes: the 'frame-sizing' property
    In addition, - the internal document can call {{window/requestResize()|window.requestResize()}}; - if the document has the required <{meta}> element - at the time of parsing as described above, - its [=internal layout intrinsic size=] - is updated to its new current [=natural size=]. - - Note: If the required <{meta}> element is not present, - the call throws a {{NotAllowedError}} {{DOMException}} instead. + 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 <{head}> element is closed (explicitly or implicitly), + 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. + + 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=]. +

    From 8276b9bd74cf4340ca9293c61e7bd9d8f2c5760e Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Mon, 27 Apr 2026 17:23:41 -0400 Subject: [PATCH 062/229] =?UTF-8?q?[css-color-4]=20For=20color=20compariso?= =?UTF-8?q?ns=20in=20Oklab,=20standardized=20=CE=B5=20to=20be=200.00001=20?= =?UTF-8?q?#13157?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css-color-4/Overview.bs | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/css-color-4/Overview.bs b/css-color-4/Overview.bs index 01cbebcb3095..66504365a830 100644 --- a/css-color-4/Overview.bs +++ b/css-color-4/Overview.bs @@ -4836,7 +4836,7 @@ Comparing <> Values

    then return true if and only if all components (including alpha) of the converted colors compare as equal, - using an implementation-defined ε as in step 2. + using a standardized Oklab ε of 0.00001.
    • @@ -7986,7 +7986,10 @@ Changes Candidate Recommendation Draft of 24 April 2025
      - + +
    • 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''. From 68ce335f1b52565c8ec8491a9901dd1a58b9f82f Mon Sep 17 00:00:00 2001 From: Tab Atkins-Bittner Date: Mon, 27 Apr 2026 21:34:52 +0000 Subject: [PATCH 063/229] [css-sizing-4] Allow metas appearing between head and body to still affect the responsive sizing flag, since they're reparented into the head. --- css-sizing-4/Overview.bs | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/css-sizing-4/Overview.bs b/css-sizing-4/Overview.bs index cb7194722a46..030a07541b0a 100644 --- a/css-sizing-4/Overview.bs +++ b/css-sizing-4/Overview.bs @@ -35,6 +35,7 @@ spec:css2; type:property spec:html; type:element; text:meta text:head + text:body spec:css2; type:dfn; text:document language @@ -1281,7 +1282,8 @@ HTML <{iframe}> Details * If a <meta name=responsive-embedded-sizing> element is encountered, it is set to true. - * If the <{head}> element is closed (explicitly or implicitly), + * 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, @@ -1291,6 +1293,16 @@ HTML <{iframe}> Details 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, From c5657c29b10b07011ea478337776a83317a129b4 Mon Sep 17 00:00:00 2001 From: Tab Atkins-Bittner Date: Mon, 27 Apr 2026 23:27:10 +0000 Subject: [PATCH 064/229] [css-values-5] Ban attr(... type()) entirely for now. #5079 --- css-values-5/Overview.bs | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/css-values-5/Overview.bs b/css-values-5/Overview.bs index 42d44bde0d6e..974a84df4b97 100644 --- a/css-values-5/Overview.bs +++ b/css-values-5/Overview.bs @@ -1941,9 +1941,15 @@ Ian's proposal: If given as a ''type()'' function, the value is parsed according to the <> argument, and substitutes as the resulting tokens. + For this purpose, ''<url>'' is invalid as a <>. Values that fail to parse according to the syntax trigger fallback. + Note: ''<url>'' is banned because, + for now, + ''attr()'' values can't be used in URLs at all + due to security concerns. + If given as the number keyword, it causes the attribute's literal value, after [=strip leading and trailing ASCII whitespace|stripping leading and trailing whitespace=], From 75299e7be1a3d7f21228c7dfed6124d18b46aab0 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Tue, 28 Apr 2026 11:08:19 -0400 Subject: [PATCH 065/229] [cssom-1] font-family descriptor should not be serialized if not present, fix #13323 (#13847) --- cssom-1/Overview.bs | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/cssom-1/Overview.bs b/cssom-1/Overview.bs index 63b58abcb706..0b98f4b01a58 100644 --- a/cssom-1/Overview.bs +++ b/cssom-1/Overview.bs @@ -1899,9 +1899,13 @@ To serialize a CSS rule, perform one of the following in accor The result of concatenating the following:
      1. The string "@font-face {", followed by a single SPACE (U+0020).
        2. -
      2. The string "font-family:", followed by a single SPACE (U+0020).
        3. -
      3. The result of performing serialize a string on the rule’s font family name.
        4. -
      4. The string ";", i.e., SEMICOLON (U+003B). +
      5. If the '@font-face/font-family' descriptor is present: +
          +
        1. The string "font-family:", followed by a single SPACE (U+0020).
          2. +
        2. The result of performing serialize a string on the rule’s font family name.
          3. +
        3. The string ";", i.e., SEMICOLON (U+003B).
          4. +
        +
      6. If the rule's associated source list is not empty, follow these substeps:
          From a65b85396be159d08f9173cc1f266c34afec0235 Mon Sep 17 00:00:00 2001 From: Ari Chivukula Date: Mon, 26 Jan 2026 13:43:40 -0500 Subject: [PATCH 066/229] Preventing User Dictionary Leaks via ::spelling-error and ::grammar-error CSS Pseudo-Elements For details see: https://explainers-by-googlers.github.io/user-dictionary-leaks/ --- css-pseudo-4/Overview.bs | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs index 46b26bb8fefc..cba578a2ec30 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 issues: +
            +
          • Pages attempting to directly read the styling of highlighted segments.
            • +
          • Pages attempting to track performance impacts of styling highlighted segments via programatic focusing and modification of text fields.
            • +

          Tree-Abiding Pseudo-elements

          From 513d229b3a8721ebfe10ebb6367df185f46005f4 Mon Sep 17 00:00:00 2001 From: Ari Chivukula Date: Mon, 26 Jan 2026 13:48:26 -0500 Subject: [PATCH 067/229] Update wording in Overview.bs for clarity --- css-pseudo-4/Overview.bs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs index cba578a2ec30..2b8c50c50797 100644 --- a/css-pseudo-4/Overview.bs +++ b/css-pseudo-4/Overview.bs @@ -1387,10 +1387,10 @@ 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 mitigate the following issues: + 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 focusing and modification of text fields.
            • +
          • Pages attempting to track performance impacts of styling highlighted segments via programatic modification of text fields.

          From ba5946a1f28c7d66353acad7d38d84d2dd681a93 Mon Sep 17 00:00:00 2001 From: Ari Chivukula Date: Tue, 14 Apr 2026 17:47:46 -0400 Subject: [PATCH 068/229] Update Overview.bs Co-authored-by: fantasai --- css-pseudo-4/Overview.bs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs index 2b8c50c50797..996d4ced6af1 100644 --- a/css-pseudo-4/Overview.bs +++ b/css-pseudo-4/Overview.bs @@ -1389,8 +1389,8 @@ Security Considerations for Highlighting

          UAs that implement ''::spelling-error'' and ''::grammar-error'' 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.
            • +
          • 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.

          From 16a9725d3eb5e70f1ee4616999ecb04f81fa3f4e Mon Sep 17 00:00:00 2001 From: Ryan Hunt Date: Tue, 28 Apr 2026 12:52:26 -0500 Subject: [PATCH 069/229] [css-scroll-anchoring-1] Add more details to anchor node selection (#3476) * [css-scroll-anchoring-1] Fix link-defaults for content-area and css2 properties * [css-scroll-anchoring-1] Make `position: sticky` an excluded subtree `position: sticky` nodes aren't suitable anchor candidates as they may become stuck in the future, which causes them to behave similarly to `position: fixed`. * [css-scroll-anchoring-1] Add condition to not select scroll anchor when not scrolled from origin * [css-scroll-anchoring-1] Move and expand section on anchor node invalidation This commit moves the existing paragraph about anchor node invalidation into a subsection, and adds precise conditions upon when an anchor node is considered invalidated. * Apply suggestion from @tabatkins --------- Co-authored-by: Tab Atkins Jr. --- css-scroll-anchoring-1/Overview.bs | 27 +++++++++++++++++++-------- 1 file changed, 19 insertions(+), 8 deletions(-) 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
          
 

From 54fd028ea990dfb4b8430e1f900c0678306d4cac Mon Sep 17 00:00:00 2001
From: Rune Lillesveen 
Date: Tue, 28 Apr 2026 20:08:15 +0200
Subject: [PATCH 070/229] [css-anchor-position-1] Specify scroll offset
 snapshot timing #10796 (#13675)

* [css-anchor-position-1] Specify scroll offset snapshot timing #10796

Specify that scroll offsets are snapshotted when asked to run snapshot
post-layout state steps.

Also see HTML PR[1] for when "run snapshot post-layout state steps" are
expected to be run.

[1] https://github.com/whatwg/html/pull/11613/

* Apply suggestion from @tabatkins

(just rewrapping to semantic line breaks)

---------

Co-authored-by: Tab Atkins Jr. 
---
 css-anchor-position-1/Overview.bs | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs
index cee9b4434598..eb2d10336d76 100644
--- a/css-anchor-position-1/Overview.bs
+++ b/css-anchor-position-1/Overview.bs
@@ -1075,6 +1075,9 @@ while still allowing as much freedom to anchor to various elements as possible,
 [=anchor positioning=] uses a combination of [=remembered scroll offsets=]
 and [=compensating for scroll=].
 
+The scroll offsets which are used to compute [=remembered scroll offsets=] and [=default scroll shift=] 
+are snapshotted when asked to [=run snapshot post-layout state steps=].
+
 
          
 	The details here are technical, but the gist is:
 
@@ -1236,10 +1239,6 @@ specifically, the [=default anchor element=]:
 	as if affected by a [=transform=]
 	(before any other transforms).
 
-	Issue: Define the precise timing of the snapshot:
-	updated each frame,
-	before style recalc.
-
 	Issue: Similar to [=remembered scroll offset=],
 	can we pay attention to transforms on the [=default anchor element=]?
 

From 246eae5b38c55de012fc11a424177229d014550c Mon Sep 17 00:00:00 2001
From: dshin-moz <102040459+dshin-moz@users.noreply.github.com>
Date: Tue, 28 Apr 2026 14:17:33 -0400
Subject: [PATCH 071/229] [css-cascade-6] Clarify circular dependency (In
 wording) in finding scoping limits. (#10295)

* [css-cascade-6] Clarify circular dependency in finding scoping limits.

Finding scoping limits mention in-scope elements, which in turn mentions scoping limits.

Add wording to ignore the scoping limits portion of in scope, which seems implied.

* Apply suggestion from @tabatkins

Inlining the relevant dfn instead, and making it non-inclusive.

---------

Co-authored-by: Tab Atkins Jr. 
---
 css-cascade-6/Overview.bs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/css-cascade-6/Overview.bs b/css-cascade-6/Overview.bs
index 0dae54baf1c4..8cd75053a1ba 100644
--- a/css-cascade-6/Overview.bs
+++ b/css-cascade-6/Overview.bs
@@ -771,7 +771,8 @@ Identifying Scoping Roots and Limits

          : Finding any [=scoping limits=] :: For each [=scope=] created by a [=scoping root=], its [=scoping limits=] are set to all elements - that are [=in scope=] and that match <>, + that are [=descendants=] of the [=scoping root=] + and that match <>, interpreting '':scope'' and ''&'' exactly as in [=scoped style rules=]. From 31491a8b484daff1260ebccc0f94916cf6018271 Mon Sep 17 00:00:00 2001 From: "Tab Atkins Jr." Date: Tue, 28 Apr 2026 11:20:19 -0700 Subject: [PATCH 072/229] Revert "[css-anchor-position-1] Specify scroll offset snapshot timing #10796" (#13849) This reverts commit 54fd028ea990dfb4b8430e1f900c0678306d4cac. --- css-anchor-position-1/Overview.bs | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs index eb2d10336d76..cee9b4434598 100644 --- a/css-anchor-position-1/Overview.bs +++ b/css-anchor-position-1/Overview.bs @@ -1075,9 +1075,6 @@ while still allowing as much freedom to anchor to various elements as possible, [=anchor positioning=] uses a combination of [=remembered scroll offsets=] and [=compensating for scroll=]. -The scroll offsets which are used to compute [=remembered scroll offsets=] and [=default scroll shift=] -are snapshotted when asked to [=run snapshot post-layout state steps=]. -
          The details here are technical, but the gist is: @@ -1239,6 +1236,10 @@ specifically, the [=default anchor element=]: as if affected by a [=transform=] (before any other transforms). + Issue: Define the precise timing of the snapshot: + updated each frame, + before style recalc. + Issue: Similar to [=remembered scroll offset=], can we pay attention to transforms on the [=default anchor element=]? From bd473dff871243be0f7d91ea2c70eb0df269ae2e Mon Sep 17 00:00:00 2001 From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com> Date: Tue, 28 Apr 2026 23:52:24 +0530 Subject: [PATCH 073/229] [css-lists-3] Correct the counter-set example (#10669) --- css-lists-3/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-lists-3/Overview.bs b/css-lists-3/Overview.bs index e9ac94554a41..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) " "; From d2ed7a98bb7e499f3b04e6688941bb1a9823d396 Mon Sep 17 00:00:00 2001 From: Tab Atkins-Bittner Date: Tue, 28 Apr 2026 18:25:14 +0000 Subject: [PATCH 074/229] [css-shadow-1] Move WPTs to the correct section. Closes #10977 --- css-shadow-1/Overview.bs | 29 ++++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/css-shadow-1/Overview.bs b/css-shadow-1/Overview.bs index 64f7a0133432..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 +

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

          Gaps

          @@ -2351,6 +2535,8 @@ Changes since the 2
        1. Clarified applicability of writing mode and text decoration to gap decorations. (Issue 13648, Issue 13649) +
        2. Moved the [[#gaps|gap]] properties from [[!CSS-ALIGN-3]] to this specification. + (Issue 13089)
        3. Updated with links to additional WPTs.
        4. Clarified that gaps suppressed due to fragmentation still consume gap decoration values. (Issue 13754) 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 From f9eba7985e969ee1a13d7216701a743547aba15e Mon Sep 17 00:00:00 2001 From: Kevin Babbitt Date: Thu, 30 Apr 2026 11:44:05 -0700 Subject: [PATCH 091/229] [css-gaps-1][editorial] Unify per-layout gap definitions and related text. #13089 --- css-gaps-1/Overview.bs | 221 +++++++++++++++++------------------------ 1 file changed, 92 insertions(+), 129 deletions(-) diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs index f5363368b3f5..9c291fce43cf 100644 --- a/css-gaps-1/Overview.bs +++ b/css-gaps-1/Overview.bs @@ -80,6 +80,96 @@ Gaps Between Boxes flex, and grid layout. + A gap is either a column gap or row gap, + whose definitions vary by type of container: + +
          +
          multi-column containers +
          + A [=column gap=] is the [=gutter=] between adjacent column boxes, + see [[CSS-MULTICOL-1]]. + + A [=row gap=] is 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), + 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. + +
          grid containers +
          + [=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. +
          + + 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''). + +
          +
          + +
          + [=Column gaps=] in orange in a multicol container with a spanner element. + Note that [=column gaps=] break when they encounter the spanner. +
          +
          +
          + +
          +
          + +
          + Gaps in a multicol container with `column-wrap: wrap`; [=column gaps=] in orange and [=row gaps=] in blue). + Note that [=column gaps=] in multicol containers do not overlap [=row gaps=], similar to flex. +
          +
          +
          + +
          +
          + +
          + Gaps in a grid container; [=column gaps=] in orange and [=row gaps=] in blue. + Note the shaded areas where gaps overlap. +
          +
          +
          + +
          +
          + +
          + Gaps in a flex container; [=column gaps=] in orange and [=row gaps=] in blue. + Note that, unlike in grid, gaps in flex do not overlap. +
          +
          +
          +

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

          @@ -112,9 +202,8 @@ Row and Column Gutters: the 'row-gap' and 'column-gap' properties : <> : <> :: - Specifies a gap between “rows” or “columns”, - as defined by the layout modes to which it applies; - see subsections below for details. + Specifies a [=row gap=] or [=column gap=] + as defined by the layout modes to which it applies. Negative values are invalid. For percentages, @@ -126,54 +215,6 @@ Row and Column Gutters: the 'row-gap' and 'column-gap' properties 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

          @@ -248,84 +289,6 @@ Legacy Gap Properties: the 'grid-row-gap', 'grid-column-gap', and 'grid-gap' pro * grid-column-gap as a [=legacy name alias=] of the 'column-gap' property * grid-gap as a [=legacy name alias=] of the 'gap' property -

          - Gaps

          - - 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. - - For the purposes of this specification, gap, column gap, and row gap are defined as follows depending on the 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=], - 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', - 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=]. - - 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=] - 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. - -
          -
          - -
          - [=Column gaps=] in orange in a multicol container with a spanner element. - Note that [=column gaps=] break when they encounter the spanner. -
          -
          -
          - -
          -
          - -
          - Gaps in a multicol container with `column-wrap: wrap`; [=column gaps=] in orange and [=row gaps=] in blue). - Note that [=column gaps=] in multicol containers do not overlap [=row gaps=], similar to flex. -
          -
          -
          - -
          -
          - -
          - Gaps in a grid container; [=column gaps=] in orange and [=row gaps=] in blue. - Note the shaded areas where gaps overlap. -
          -
          -
          - -
          -
          - -
          - Gaps in a flex container; [=column gaps=] in orange and [=row gaps=] in blue. - Note that, unlike in grid, gaps in flex do not overlap. -
          -
          -
          -

          Computing table measures

          @@ -1521,7 +1521,7 @@ spec:css-display-4; type:property; text:display based on the table width (if it is definite, otherwise use 0). For the purpose of calculating the outer min-content width of cells, - descendants of table cells whose width depends on percentages of their parent cell' width + descendants of table cells whose width depends on percentages of their parent cell's width are considered to have an auto width. Testcase Testcase @@ -2236,7 +2236,7 @@ spec:css-display-4; type:property; text:display The minimum height of a row (without spanning-related height distribution) is defined as the height of - an hypothetical linebox containing the cells originating in the row + a hypothetical linebox containing the cells originating in the row and where cells spanning multiple rows are considered having a height of 0px (but their correct baseline). In this hypothetical linebox, cell heights are considered auto, @@ -2244,7 +2244,7 @@ spec:css-display-4; type:property; text:display but their other properties are conserved. For the purpose of calculating this height, - descendants of table cells whose height depends on percentages of their parent cell' height + descendants of table cells whose height depends on percentages of their parent cell's height (see section below) are considered to have an auto height if they have 'overflow' set to ''overflow/visible'', ''overflow/clip'', or ''overflow/hidden'' @@ -2394,7 +2394,7 @@ spec:css-display-4; type:property; text:display
          5. Since during row layout the specified heights of cells in the row were ignored - and cells that were spanning more than one rows have not been sized correctly, + and cells that were spanning more than one row have not been sized correctly, their height will need to be eventually distributed to the set of rows they spanned. This is done by running the same algorithm as the column measurement, with the span=1 value being initialized (for min-content) with the largest of @@ -2777,7 +2777,7 @@ spec:css-display-4; type:property; text:display
          - The above formula take in account 'border-spacing', and it might not be directly obvious what the effect of these mean, so here are a couple of properties of those formula: + The above formula takes into account 'border-spacing', and it might not be directly obvious what the effect of these mean, so here are a couple of properties of those formula:
          • the border-spacing before the first track or after the last track in a direction is not included in any track's or track-group's breadth.
          • the border-spacing between tracks is not included in any track's breadth, but is included in the breadth of track-groups spanning both tracks. From 9c6c0f8f0da3a5f266112346abea7edab74c9ea5 Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Sat, 2 May 2026 11:08:25 +0100 Subject: [PATCH 101/229] [css-tables-3] fix link to abspos --- css-tables-3/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-tables-3/Overview.bs b/css-tables-3/Overview.bs index 798996cb148f..75f126b03801 100644 --- a/css-tables-3/Overview.bs +++ b/css-tables-3/Overview.bs @@ -3040,7 +3040,7 @@ With a table-internal box as non-containing block parent
          - This does not affect other uses of these concepts, like absolute positioning. + This does not affect other uses of these concepts, like absolute positioning.
          !Testcase From 71bf2bad60bb31f4535e054b266c303bf3a8d50d Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Sat, 2 May 2026 11:11:27 +0100 Subject: [PATCH 102/229] [css-tables-3] fix border-spacing prose "must not be strictly negative" is a weird way to say "must be non-negative" --- css-tables-3/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-tables-3/Overview.bs b/css-tables-3/Overview.bs index 75f126b03801..5c6936a5475b 100644 --- a/css-tables-3/Overview.bs +++ b/css-tables-3/Overview.bs @@ -980,7 +980,7 @@ spec:css-display-4; type:property; text:display The lengths specify the distance that separates adjoining cell borders in separated-borders mode, - and must not be strictly negative. + and must be non-negative. If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing. From af9274bfaf7c0a25d16faf5068b17a6cdad1d82f Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Sat, 2 May 2026 11:12:18 +0100 Subject: [PATCH 103/229] [css-tables-3] Fix broken link --- css-tables-3/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-tables-3/Overview.bs b/css-tables-3/Overview.bs index 5c6936a5475b..a875b0c9da6e 100644 --- a/css-tables-3/Overview.bs +++ b/css-tables-3/Overview.bs @@ -1284,7 +1284,7 @@ spec:css-display-4; type:property; text:display
          Harmonization Algorithm for Collapsed Borders
          For the purpose of this algorithm, “considering” a border’s properties means - that “if its properties are more specific than CurrentlyWinningBorderProperties, + that “if its properties are more specific than CurrentlyWinningBorderProperties, set CurrentlyWinningBorderProperties to its properties”.
          From e2eaba5e74cd8653ca297a8e869694749ec42203 Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Sat, 2 May 2026 11:21:29 +0100 Subject: [PATCH 104/229] [css-tables-3] Fix errors in border conflict resolution This change fixes row-separator border conflict resolution; the "separates two rows" block incorrectly referenced table-column and table-column-group instead of table-row and table-row-group. [Chrome's impl](https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/layout/table/table_borders.cc;l=433-503;drc=8c0301b5c76ca4d7e7ae01daa9bfe3bc5fe697a4), [Firefox's impl](https://searchfox.org/firefox-main/source/layout/tables/nsTableFrame.cpp#4794-5418) --- css-tables-3/Overview.bs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css-tables-3/Overview.bs b/css-tables-3/Overview.bs index a875b0c9da6e..267bb80a5988 100644 --- a/css-tables-3/Overview.bs +++ b/css-tables-3/Overview.bs @@ -1320,10 +1320,10 @@ spec:css-display-4; type:property; text:display
          • For each border BCi: For each table-row spanned by the Ci cell, if any. - Consider the border’s properties of any border of the table-column that would be drawn contiguously to BCi. + Consider the border’s properties of any border of the table-row that would be drawn contiguously to BCi.
          • For each border BCi: - For each table-row-group containing a column spanned by the Ci cell, if any. + For each table-row-group containing a row spanned by the Ci cell, if any. Consider the border’s properties of any border of the table-row-group that would be drawn contiguously to BCi.
          From 0a821078bfccba64c4f83b78828955654b7ce4e0 Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Sat, 2 May 2026 11:37:35 +0100 Subject: [PATCH 105/229] [css-tables-3] try to map outstanding wpts to the correct sections --- css-tables-3/Overview.bs | 35 +++++++++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/css-tables-3/Overview.bs b/css-tables-3/Overview.bs index 267bb80a5988..644282b6cd8d 100644 --- a/css-tables-3/Overview.bs +++ b/css-tables-3/Overview.bs @@ -131,8 +131,11 @@ spec:css-display-4; type:property; text:display crashtests/orthogonal-cell-crash.html crashtests/table-column-display-change-chrome-crash.html crashtests/textarea-intrinsic-size-crash.html + crashtests/atomic-item-crash.html + crashtests/remove-table-column-group.html crashtests/transition-table-row-group-crash.html crashtests/uninitialized_read_crash.html + table-caption-after-crash.html crashtests/vertical_percentage_crash.html tfoot-crash-print.html th-text-align.html @@ -555,7 +558,11 @@ spec:css-display-4; type:property; text:display fixup-dynamic-anonymous-inline-table-002.html fixup-dynamic-anonymous-inline-table-003.html fixup-dynamic-anonymous-table-001.html + iframe-display-table-content-insertion.html + insert-after-col.html + insert-after-colgroup.html table-model-fixup.html + table-row-group-nested-anonymous-001.html @@ -1273,6 +1280,7 @@ spec:css-display-4; type:property; text:display
          + collapsed-border-writing-mode-color.html subpixel-collapsed-borders-001.html subpixel-collapsed-borders-002.html subpixel-collapsed-borders-003.html @@ -1331,6 +1339,10 @@ spec:css-display-4; type:property; text:display Return CurrentlyWinningBorderProperties
    + + rowspan-cell-border-after-color.html + +
    Specificity of a border style
    @@ -1719,9 +1731,12 @@ spec:css-display-4; type:property; text:display height-distribution/computing-row-measure-1.html height-distribution/percentage-sizing-of-table-cell-children.html height-distribution/percentage-sizing-of-table-cell-replaced-children-001.html + table-colspan-percent-auto.html width-distribution/computing-column-measure-0.html width-distribution/computing-column-measure-1.html width-distribution/computing-column-measure-2.html + width-distribution/td-max-width-auto-layout.html + width-distribution/td-min-width-auto-layout.html

    Drawing cell borders

    @@ -3175,6 +3191,9 @@ With a table-internal box as non-containing block parent border-writing-mode-dynamic-001.html + collapsed-border-sideways-rl-rtl-overflow.html + collapsed-border-vertical-lr-rtl-overflow.html + collapsed-border-vertical-rtl-overflow.html @@ -3908,4 +3927,4 @@ Significant changes since the 0 - + P1 From fb90e63608acdaa7ea910495c65ed3bfe9f6d692 Mon Sep 17 00:00:00 2001 From: Tab Atkins-Bittner Date: Mon, 4 May 2026 19:49:07 +0000 Subject: [PATCH 108/229] [css-flexbox-2] Twiddle the phrasing, undiff the Layout Algo section and fill in the balancing details. --- css-flexbox-2/Overview.bs | 746 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 713 insertions(+), 33 deletions(-) diff --git a/css-flexbox-2/Overview.bs b/css-flexbox-2/Overview.bs index e6e1d5053a86..0637f10b7d3f 100644 --- a/css-flexbox-2/Overview.bs +++ b/css-flexbox-2/Overview.bs @@ -64,7 +64,7 @@ Flex Line Wrapping: the 'flex-wrap' property The flex container is [=multi-line=], and attempts to "balance" the lengths of the [=flex lines=] to be as similar as possible. - See [[#flex-balance=]]. + See [[#flex-balance]]. ''balance'' can be combined with ''wrap'' or ''wrap-reverse'' to dictate which direction the [=flex lines=] are stacked in. @@ -111,17 +111,23 @@ Minimum Flex Lines: the 'flex-line-count' property 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=]) + (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 number of [=flex lines=] + The 'flex-line-count' property specifies a minimum flex line count that the [=flex container=] should create to balance the items across. - If the [=flex container=] has less [=flex items=] than the 'flex-line-count' value, + 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=]. - If the [=flex lines=] are limited in length - and the [=flex items=] will fill more than the specified number of lines, - the actual [=flex line=] count can be higher than what is specified. + (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. @@ -136,7 +142,8 @@ Minimum Flex Lines: the 'flex-line-count' property then dividing the leftover by N, where N is the 'flex-line-count' value. This uses the actual 'flex-line-count' value, - not the number of lines produced + 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 @@ -145,35 +152,708 @@ Minimum Flex Lines: the 'flex-line-count' property 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''.) + 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. -

    + + +

    Flex Layout Algorithm

    -... - -
    - - TODO fill in the details of how balancing works. - - In short, do flex layout up to the linebreaking part. - Linebreak as normal - (but with the floor-at-0 thing, below) - to discover how many lines are needed; - if 'flex-line-count' is higher - (and there are at least that many flex items), - use that line count instead. - - Then do balanced line-breaking, - using a well-known algorithm I forget the name of right this moment. - - For the purpose of the balancing algorithm, - hypothetical sizes are floored at 0, - so it can be done efficiently. - (Negative margins can make the hypothetical size negative, - which does affect line-breaking.) -
    \ No newline at end of file + 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 + + +

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

    +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 + + +
    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: + + * 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=]. + * At least one [=flex item=] is assigned to each sequence. + * If a [=flex item's=] size is zero, + and it could be assigned either to the end of a preceding sequence + or the beginning of the next sequence, + it is assigned to the end of the preceding 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. + + Assign each sequence of [=flex items=] + to the corresponding [=flex line=]. +
    + + Issue: Can there be multiple equally valid sequence assignments? + If so, do we care which we choose? + Do the efficient algos make it possible to reasonably choose between them? + + 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 + \ No newline at end of file From a2f5595195ad781e8c06966faed510a6bd1d0590 Mon Sep 17 00:00:00 2001 From: Tab Atkins-Bittner Date: Tue, 5 May 2026 00:36:48 +0000 Subject: [PATCH 109/229] [css-flexbox-2] Undiff the spec, and add more explanatory info. --- css-flexbox-2/Overview.bs | 4836 ++++++++++++++++- .../examples/flex-item-determination.html | 39 + css-flexbox-2/images/OK.png | Bin 0 -> 223 bytes .../images/align-content-example.svg | 94 + css-flexbox-2/images/basic-flexbox.png | Bin 0 -> 2552 bytes .../images/basic-vertical-flexbox.png | Bin 0 -> 1242 bytes css-flexbox-2/images/computer.jpg | Bin 0 -> 7106 bytes css-flexbox-2/images/flex-align.svg | 79 + css-flexbox-2/images/flex-direction-terms.svg | 66 + css-flexbox-2/images/flex-flow-english.svg | 24 + css-flexbox-2/images/flex-flow-japanese.svg | 24 + css-flexbox-2/images/flex-flow1.svg | 24 + css-flexbox-2/images/flex-flow2.svg | 24 + css-flexbox-2/images/flex-flow3.svg | 24 + .../images/flex-item-determination.png | Bin 0 -> 1334 bytes css-flexbox-2/images/flex-order-example.png | Bin 0 -> 2006 bytes css-flexbox-2/images/flex-order-page.svg | 32 + css-flexbox-2/images/flex-pack.svg | 59 + .../images/multiline-balance-flex.svg | 24 + css-flexbox-2/images/multiline-balance.svg | 24 + css-flexbox-2/images/multiline-flex.svg | 24 + css-flexbox-2/images/multiline-no-flex.svg | 24 + css-flexbox-2/images/printer.png | Bin 0 -> 1959 bytes css-flexbox-2/images/rel-vs-abs-flex.svg | 77 + css-flexbox-2/images/target.png | Bin 0 -> 2904 bytes css-flexbox-2/images/toolbar-example.svg | 35 + css-flexbox-2/images/wp7zxxyu.gif | Bin 0 -> 1731 bytes 27 files changed, 5454 insertions(+), 79 deletions(-) create mode 100644 css-flexbox-2/examples/flex-item-determination.html create mode 100644 css-flexbox-2/images/OK.png create mode 100644 css-flexbox-2/images/align-content-example.svg create mode 100644 css-flexbox-2/images/basic-flexbox.png create mode 100644 css-flexbox-2/images/basic-vertical-flexbox.png create mode 100644 css-flexbox-2/images/computer.jpg create mode 100644 css-flexbox-2/images/flex-align.svg create mode 100644 css-flexbox-2/images/flex-direction-terms.svg create mode 100644 css-flexbox-2/images/flex-flow-english.svg create mode 100644 css-flexbox-2/images/flex-flow-japanese.svg create mode 100644 css-flexbox-2/images/flex-flow1.svg create mode 100644 css-flexbox-2/images/flex-flow2.svg create mode 100644 css-flexbox-2/images/flex-flow3.svg create mode 100644 css-flexbox-2/images/flex-item-determination.png create mode 100644 css-flexbox-2/images/flex-order-example.png create mode 100644 css-flexbox-2/images/flex-order-page.svg create mode 100644 css-flexbox-2/images/flex-pack.svg create mode 100644 css-flexbox-2/images/multiline-balance-flex.svg create mode 100644 css-flexbox-2/images/multiline-balance.svg create mode 100644 css-flexbox-2/images/multiline-flex.svg create mode 100644 css-flexbox-2/images/multiline-no-flex.svg create mode 100644 css-flexbox-2/images/printer.png create mode 100644 css-flexbox-2/images/rel-vs-abs-flex.svg create mode 100644 css-flexbox-2/images/target.png create mode 100644 css-flexbox-2/images/toolbar-example.svg create mode 100644 css-flexbox-2/images/wp7zxxyu.gif diff --git a/css-flexbox-2/Overview.bs b/css-flexbox-2/Overview.bs index 0637f10b7d3f..e27eae36c72f 100644 --- a/css-flexbox-2/Overview.bs +++ b/css-flexbox-2/Overview.bs @@ -10,23 +10,1701 @@ Abstract: The specification describes a CSS box model optimized for user interfa Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199 Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400 Editor: Rossen Atanassov, Microsoft, ratan@microsoft.com, w3cid 49885 +WPT Path Prefix: css/css-flexbox/ +Ignored Terms: auto, first formatted line, first letter +Ignored Vars: item’s own max-content, maximum min-content among all items +
    +spec: css2; type: property
+	text: margin
+	text: min-width
+	text: max-width
+	text: min-height
+	text: max-height
+spec: css-break-3; type: property; text: break-after
+spec: css-sizing-3;
+	type: value;
+		for: width
+			text: min-content
+			text: max-content
+			text: fit-content
+	type: property; text: box-sizing
+	type:dfn;
+		text: width
+		text: height
+spec: css-align-3;
+	type: value; text: start
+	type:dfn; text:alignment baseline
+spec: css-position-3; type: property; text: left
+spec: css-writing-modes-3; type: dfn;
+	text: start
+	text: end
+spec: css-pseudo-4; type: selector;
+	text: ::first-line
+	text: ::first-letter
+
    + + +

    Introduction

    This section is not normative. - This module is currently a diff spec over [[CSS-FLEXBOX-1]]. - It defines a new flex wrapping mode, ''flex-wrap: balance'', - which attempts to find linebreak locations - which make the size of each flex line - as similar as possible. + Flexbox Level 1 defined a new layout mode: flex layout. + [=Flex layout=] is a powerful, flexible layout mode + for laying out a [=flex container's=] children ([=flex items=]) + across one or several lines, + either horizontally or vertically, + and aligning or stretching the items within their line in various ways + that are generally useful for application or whole-page layouts. + + This level extends the [=flex layout=] model in a number of ways: + + * ''flex-wrap: balance'' allows for flex items to be balanced across lines, + so each line is as similar in length as possible, + avoiding "jagged" lines, particularly on the last line. + + +

    +Overview

    + + This section is not normative. + + Flex layout is superficially similar to block layout. + It lacks many of the more complex text- or document-centric properties + that can be used in block layout, such as + floats and + columns. + In return it gains simple and powerful tools + for distributing space and aligning content + in ways that web apps and complex web pages often need. + The contents of a flex container: + + * can be laid out in any flow direction + (leftwards, rightwards, downwards, or even upwards!) + * can have their display order reversed or + 'order|rearranged' at the style layer + (i.e., visual order can be independent of source and speech order) + * can be laid out linearly along a single (main) axis or + wrapped into multiple lines along a secondary (cross) axis + * if [=multi-line=], can be packed tightly onto each line + (similar to standard text line-breaking) + or balanced across the lines + (similar to ''text-wrap:pretty'') + * can “flex” their sizes + to respond to the available space + * can be aligned with respect to their container or each other on the secondary (cross) + * can be dynamically collapsed or uncollapsed + along the main axis while preserving the container's cross size + +
    + Here's an example of a catalog where each item has a title, a photo, a description, and a purchase button. + The designer's intention is that each entry has the same overall size, + that the photo be above the text, + and that the purchase buttons are aligned at the bottom, regardless of the length of the item's description. + Flex layout makes many aspects of this design easy: + + * The catalog uses flex layout to lay out rows of items horizontally, + and to ensure that items within a row are all equal-height. + Each entry is then itself a column flex container, + laying out its contents vertically. + + * Within each entry, the source document content is ordered logically + with the title first, followed by the description and the photo. + This provides a sensible ordering for speech rendering and in non-CSS browsers. + For a more compelling visual presentation, however, + 'order' is used to pull the image up from later in the content to the top, + and 'align-self' is used to center it horizontally. + + * An auto margin above the purchase button + forces it to the bottom within each entry box, + regardless of the height of that item's description. + + 
    +		#deals {
+			display: flex;        /* Flex layout so items have equal height  */
+			flex-flow: row wrap;  /* Allow items to wrap into multiple lines */
+		}
+		.sale-item {
+			display: flex;        /* Lay out each item using flex layout */
+			flex-flow: column;    /* Lay out item's contents vertically  */
+		}
+		.sale-item > img {
+			order: -1;            /* Shift image before other content (in visual order) */
+			align-self: center;   /* Center the image cross-wise (horizontally)         */
+		}
+		.sale-item > button {
+			margin-top: auto;     /* Auto top margin pushes button to bottom */
+		}
+
    + + 
    +		<section id="deals">
+		  <section class="sale-item">
+		    <h1>Computer Starter Kit</h1>
+		    <p>This is the best computer money can buy, if you don’t have much money.
+		    <ul>
+		      <li>Computer
+		      <li>Monitor
+		      <li>Keyboard
+		      <li>Mouse
+		    </ul>
+		    <img src="images/computer.jpg"
+		         alt="You get: a white computer with matching peripherals.">
+		    <button>BUY NOW</button>
+		  </section>
+		  <section class="sale-item">
+		    …
+		  </section>
+		  …
+		</section>
+
    + +
    +
    +
    +
    +
    + You get: a white computer with matching keyboard and monitor. +

    Computer Starter Kit

    +

    + This is the best computer money can buy, + if you don't have much money. +

      +
    • Computer +
    • Monitor +
    • Keyboard +
    • Mouse +
    +
    +
    + You get: beautiful ASCII art. +

    Printer

    +

    + Only capable of printing + ASCII art. +

      +
    • Paper and ink not included. +
    +
    +
    +
    +
    +
    +
    +
    + An example rendering of the code above. +
    +
    +
    + +

    +Module interactions

    + + This module extends the definition of the 'display' property [[!CSS2]], + adding a new block-level and new inline-level display type, + and defining a new type of formatting context + along with properties to control its layout. + None of the properties defined in this module apply to the ''::first-line'' or ''::first-letter'' pseudo-elements. + + The CSS Box Alignment Module + extends and supersedes the definitions of the alignment properties + ('justify-content', 'align-items', 'align-self', 'align-content') + introduced here. + + + flexbox_first-letter.html + flexbox_first-line.html + flexbox-ignores-first-letter.html + + +

    +Value Definitions

    + + This specification follows the CSS property definition conventions from [[!CSS2]] + using the value definition syntax from [[!CSS-VALUES-3]]. + Value types not defined in this specification are defined in CSS Values & Units [[!CSS-VALUES-3]]. + Combination with other CSS modules may expand the definitions of these value types. + + 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. + +

    +Flex Layout Box Model and Terminology

    + + A flex container is the box generated by an element with a + computed 'display' of ''flex'' or ''inline-flex''. + In-flow children of a flex container are called flex items + and are laid out using the flex layout model. + + Unlike block and inline layout, + whose layout calculations are biased to the block and inline flow directions, + flex layout is biased to the flex directions. + To make it easier to talk about flex layout, + this section defines a set of flex flow–relative terms. + The 'flex-flow' value and the writing mode + determine how these terms map + to physical directions (top/right/bottom/left), + axes (vertical/horizontal), and sizes (width/height). + +
    + +
    + An illustration of the various directions and sizing terms as applied to a ''row'' flex container. +
    +
    + +
    +
    main axis +
    main dimension +
    + The main axis of a flex container is the primary axis along which flex items are laid out. + It extends in the main dimension. + +
    main-start +
    main-end +
    + The flex items are placed within the container + starting on the main-start side + and going toward the main-end side. + +
    main size +
    main size property +
    + The main size of a [=flex container=] or [=flex item=] + refers to its [=width=] or [=height=], + whichever is in the [=main dimension=]. + Its main size property + is either its 'width' or 'height' property, + whichever is in the [=main dimension=]. + Likewise, its min and + max main size properties + are its 'min-width'/'max-width' or 'min-height'/'max-height' properties, + whichever are in the main dimension, + and determine its min/max main size. + + In [=flex layout=], the [=main size=] is controlled by the 'flex' property + rather than directly by the [=main size property=]. + + Note: This means any references to a flex item's used size in the [=main dimension=] + ([=width=], [=height=], [=inline size=], [=block size=]) + refers to its post-flexing [=main size=]. +
    + +
    +
    cross axis +
    cross dimension +
    + The axis perpendicular to the main axis is called the cross axis. + It extends in the cross dimension. + +
    cross-start +
    cross-end +
    + Flex lines are filled with items and placed into the container + starting on the cross-start side of the flex container + and going toward the cross-end side. + +
    cross size +
    cross size property +
    + The cross size of a [=flex container=] or [=flex item=] + refers to its [=width=] or [=height=], + whichever is in the [=cross dimension=]. + Its cross size property + is either its 'width' or 'height' property, + whichever is in the [=cross dimension=]. + Likewise, its min and + max cross size properties + are its 'min-width'/'max-width' or 'min-height'/'max-height' properties, + whichever are in the cross dimension, + and determine its min/max cross size. +
    + + Additional sizing terminology used in this specification + is defined in CSS Intrinsic and Extrinsic Sizing. [[!CSS-SIZING-3]] + + + box-sizing-min-max-sizes-001.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.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 + 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 + + + + +

    +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 + + +
    + 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 + getcomputedstyle/flexbox_computedstyle_min-auto-size.html + getcomputedstyle/flexbox_computedstyle_min-height-auto.html + getcomputedstyle/flexbox_computedstyle_min-width-auto.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

    @@ -62,9 +1740,8 @@ Flex Line Wrapping: the 'flex-wrap' property
    balance
    The flex container is [=multi-line=], - and attempts to "balance" the lengths of the [=flex lines=] + and attempts to [=balance=] the lengths of the [=flex lines=] to be as similar as possible. - See [[#flex-balance]]. ''balance'' can be combined with ''wrap'' or ''wrap-reverse'' to dictate which direction the [=flex lines=] are stacked in. @@ -72,92 +1749,1917 @@ Flex Line Wrapping: the 'flex-wrap' property 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. + 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-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. + + 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 + 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 + + + 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 + + + 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. - 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]]. + 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 + +
    -

    -Flex Lines

    +
    + +

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

    -... + -

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

    +

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

    -	Name: flex-line-count
-	Value: <>
-	Initial: 1
-	Applies to: [=multi-line=] [=flex containers=]
+	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: the specified integer, computed
-	Animation type: as integer
+	Computed value: specified keyword
+	Animation type: discrete
    - 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. + 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: - 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.) +
    +
    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. - 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. +
    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. - 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. +
    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. +
    - 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: 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. - Note: This [=available space=] adjustment is the only effect 'flex-line-count' has - on non-''balance'' flexboxes. +
    + +

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

    - 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%''.) + + 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 + - If the [=flex container=] is [=single-line=] - (aka, ''flex-wrap: nowrap''), - this property has no effect. + + +

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

    +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. + + + animation/order-interpolation.html + flexbox-anonymous-items-001.html + flexbox_order-abspos-space-around.html + flexbox_order-box.html + flexbox-order-from-lowest.html + flexbox_order.html + flexbox_order-noninteger-invalid.html + flexbox-order-only-flexitems.html + flexible-order.html + flex-item-z-ordering-001.html + flex-item-z-ordering-002.html + flex-order.html + getcomputedstyle/flexbox_computedstyle_order.html + getcomputedstyle/flexbox_computedstyle_order-inherit.html + getcomputedstyle/flexbox_computedstyle_order-integer.html + getcomputedstyle/flexbox_computedstyle_order-invalid.html + getcomputedstyle/flexbox_computedstyle_order-negative.html + order-001.htm + order/order-abs-children-painting-order-different-container.html + order/order-abs-children-painting-order.html + order/order-with-column-reverse.html + order/order-with-row-reverse.html + order-painting.html + order_value.html + parsing/order-computed.html + parsing/order-invalid.html + parsing/order-valid.html + + + + break-nested-float-in-flex-item-001-print.html + break-nested-float-in-flex-item-002-print.html + flexbox-break-request-horiz-001a.html + flexbox-break-request-horiz-001b.html + flexbox-break-request-horiz-002a.html + flexbox-break-request-horiz-002b.html + flexbox-break-request-vert-001a.html + flexbox-break-request-vert-001b.html + flexbox-break-request-vert-002a.html + flexbox-break-request-vert-002b.html + inline-flexbox-vertical-rl-image-flexitem-crash-print.html + + + + contain-size-layout-abspos-flex-container-crash.html + frame-flex-item-crash.html + frameset-crash.html + grandchild-span-height.html + min-height-min-content-crash.html + mixed-containing-blocks-crash.html + negative-available-size-crash.html + negative-flex-margins-crash.html + negative-flex-rounding-crash.html + negative-item-margins-002-crash.html + negative-item-margins-crash.html + orthogonal-flex-item-crash.html + position-absolute-scrollbar-freeze.html + position-relative-with-scrollable-with-abspos-crash.html + relayout-input.html + remove-out-of-flow-child-crash.html + zero-content-size-with-scrollbar-crash.html + + + + fixed-table-layout-with-percentage-width-in-flex-item.html + percentage-size-quirks-002.html + percentage-size-quirks.html + quirks-auto-block-size-with-percentage-item.html + + + + percentage-padding-001.html + percentage-padding-002.html + percentage-padding-003.html + percentage-padding-004.html + percentage-padding-005.html + + + + remove-wrapped-001.html + remove-wrapped-002.html + scrollbars-auto-min-content-sizing.html + select-element-multiple.html + shrinking-column-flexbox.html + table-as-item-large-intrinsic-size.html + table-with-float-paint.html + + + + align-content-rounding.html + anonymous-flex-item-restyle.html + flex-rounding.html + justify-content-rounding.html + main-axis-margin-rounding.html + percentage-heights-020.html + percentage-heights-021.html + percentage-heights-022.html + percentage-heights-023.html + relayout-intrinsic-block-size.html + total-min-max-violation-zero.html + \ No newline at end of file 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 0000000000000000000000000000000000000000..0b7577eab59c7b4a717694635a69e4b16d9e3676 GIT binary patch literal 223 zcmeAS@N?(olHy`uVBq!ia0vp^V9WtzFg$X<;|`>jdAc};L>zv5V<*4QEQs#WHsMeCYhI>*luEc z{9+;B87WK2Ng0zSsjmF~NK0JNQ;E;Wz4Y~}wK<=9;neo_x8Hbn+}IPZ1T)%x!ar`a%umOwnAg<(a(DFF Q{~Y9UPgg&ebxsLQ0ISwuCIA2c literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..3901c3e11c833f2ed6a32fc5418d959292d59e3e GIT binary patch literal 2552 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 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..6a07d225b16356fdc5011911d618e5be5d44f9a3 GIT binary patch literal 1242 zcmV<01SR{4P)E;>Uw5gg(>gjy3JMIbuiF?H z9)^ae!ou^y!t#WKr56_+Nl9CKdzyK9mr6=p5)v1>y6CyN=Mxhc0s;fd%KXX6`vU_6 zdU}|yuG$tB9EF9ZsHoC9I!Fl#3jl}!%>T@^;j}^hNy;lmw65n4xYxIx#zhQ85GF+$jST30|W!O=D0~)Ne~ne zF+DL|bX~UOw#xm=j<+nstL<|oMBP=6_sfVfn0RPO)&!(n2E-nTI1uG&VuZ)cP$jG~vmj27jcVA!Asi{di zIt&U5+pn)47#OF9hV#P0^1{NUgoGUz7h6e5ntOYfd3jt)N*59m=(@V+xw#k<69WPQ z{L0Gv$;ku*1DJYx+ODn~78a(3h0>^~NIE(T2?^laz}5f&0@F!EK~#7F?V1H|8%q>M zJ#Qa|Ij_tOGc#kEF=eJLH%w)21OK<3u<;dw$71sedBKe$IDlV1ONblN;t5? z&H%8BxblYyMBIooJM6H-&iZ{|haGkaYxn10e=B9hCcro(yMO-uFUjHW3n~uDE;+?= zBB(eVJ6WA-S!wAR8R==3rFT}4aY)-vNy*I0&dJTo&(u31pg3f^|JO)eyH4+ffZ~wt z)^Cuyag*K&0mUKPZQdev>o&a;f{WR9t9IONj~*J)P6#Lt*>1hG%&CX#(oSan-9WE_B za`afTQY!kU;JU(eyWSsL=J<(|r%Fp>*g35*-R|^{qiW>LN;4e8&S{0|c4upP&z+Yu z;)RRd!!Yh=GZZL zVDiA^fyo1t2PO|p9+*7vjDQ_>*kQ;2iTMIM?6A9&AYf+{*kNbKHP{&ocG%s$cV8(x z24=?|?H)XQ^w{Aym>PSuOMYTIU~KHoPQDzq?XmHRiSaSp);fb@@7qpEnVg!QnVp-T z)H-ux-*!)*Nqzo8>&%UP+r4}x_4OOAGdK2a_x7FC_aC&*=$LJ%?c5)uJ9o4*Hui1z z>GRyo%)yz><$ Eg511MIsgCw literal 0 HcmV?d00001 diff --git a/css-flexbox-2/images/computer.jpg b/css-flexbox-2/images/computer.jpg new file mode 100644 index 0000000000000000000000000000000000000000..0d531c7825e591abfe6d05f93c8ba97a724a8e8b GIT binary patch literal 7106 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 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..dfb9e843ee18c704cc6d11dce93e94171190d4a0 GIT binary patch literal 1334 zcmV-61<<}(tCILD?P|esSNC2+I9e}_0o(ViD!iVvmKJdJ`cTj;RHTW>z(+6I~i5C7P z1<4P2R|GvUhW@ct)W@ctg8s^MfJ6>O( zvEM9nRo0Q_-hSa|0W#HPFcQ;EuYXB1#(oEY44^{lkW#13rYrRPj z{>cD8gTdWUk;U2gIAaL#GZ~(BeMf*9;5PyIC0C+?7%le2{m~u#KS0}hByn1zoYiuh zNZd99K;CvJ_0*|Ms16OP)7b~{;oQ~u+kzEL5|kv_V5TX5$~y#5hrH|wC<~aGZ6g|4 zfORbzTQx(QRsUK0f;SmEZ-!#16Kn5M{yqTw5v05b5AgH*WiNICz}*p#XCzbrDN+^f za=W{ul|Wu_I^R-#B)e$#*V1&!;ll9u+Vl74`D-BA>vM&+T3;uqLtfW8ByCQCZS^_} zZ^z{C!`dtXJY32%JDbn=n_y9-%Tf7O2kr=xqxN=|1NixU>r)j30H-8pdPj~N4FbT> zA+R+^LwfG>U;vQ9vYb91AlcILXubt?$TJ5@0JvgqFlpuLg!H}UQJW=zaR-b5?2G|u zJpp%wn){%0lK`N&zcvLCzyirB2+9$^Oe)V01Pj$69O91aSa*Y7^q-~u6{s@x0D>y9xDD1ahn}h(Zl4DKFk(31h zEGZyu{W!!N$pH_L3ooCQ+hAopK(bBHb;xr?T`>98TPo9K70bkc{G;T{R;vy`ib=}w zM`%^&7XTFYeR=qbYhZ}3fxX^h@ih>^TmU5;K+fhn< z4?ww$MF8z70YG7&eU#`va7uI^*c_-4-v>rr02UdLw1ARi6D;bGhth!gvYYnSXYZN- zU{0yPl|WYN#Qnif0&INb0e(?m^e8;+@eGFwi+v%;b70jMQrNj0jcwT((B#c9+EcX& z7Im}$Ti7hOH@D1?H|?J`F`(`slJw3ykQGfVJB=qV>x}`_9Y)f@gDP+U#eFfr-|fu= zYcluue>34X2I!bs$Jgr}AWIxN{%hw9P7nryD4GUUM6i@CAh;l&(n0#r8q$CjBo*Ws z8DaIB$sbsh_nG5laUY%@%Lm|(_&@*x5P$##U_aVyQ2NVz065%j{7S!@ZLR>EI~%{! ze+)JNEdM;W(w}-80BTAffP&HoprZ5vs4IN{>PjDgg3jG68@91Rwwb z2tWV=(696X82CybfPSS9K>d|I08#oV{fa^9qx4bwD188;^ilfA1OWP5JKFMrzF8|# zKdk)#Oy07Tq;Ez?xPsmrbIj|h@5%@IW^9BjDCd;!taZm-zQt2n-wcoc3i>%(dmA}7 s2?$DV%~NQwB&X3jRQG_`mP4MF7raoC0n3)ox&QzG07*qoM6N<$g2yOoH2?qr literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..3e1fe6adfc3051db370a9c2209ac4c6d62359c21 GIT binary patch literal 2006 zcmb`IdpOezAHaW`#f)S}lgrk@N^ZHN+>RJ#d!@6(ac?G}MTnzP4)Rkm_giE;hAEjl zxf7a8rA(AdqBNCBt(dzM?@rJAyw7>wzu)KiKHum2d@r9rzL)2l=s+UwL?|Hu0N82w zFZ}NS0ELR|D7Z)g77SVf07&H9;jNr6Lj=qnp~`l0akF#=LobxeZzWBuZ*V{^l;S6;fYuk3Id-TdkjGLTCrgQ)jsb)h;0@BzG5 z0V0phDBKsVtyx%`Y0tLBJW~zwXYf124JG>pG;0}ODe+q1i^DuB~-4g2%*uN?lYY|tK3SevJ&hr$vk)?S? zM~ynf^W^HbQ_`knoCmoI=98b!=01`hVCug6z61|S)INfI zidkxi*chs)otvgBa=6b*70k>neIxBvIdJKYh4M>?!bq&JT?*qqA{2{wE1~v*YT|KHE}m;Z&G~O zi99_Rm$n!7_7E8jA@DA;23I(Sl-PD{YisMhX$~}0>`a&?FH1%aLiERi#|q)-h28Qq z6N@hbf;(mPe{NETrf`&Tcrvf`5}3FKT|m3SnjTxmYPC+{y(>JWN2(XwCdPw+`|+n+ znjV|vj`5`+gFV7wkWobgutN`V-h#&$fhVJ<-YbXi1|*m5{HBu|GfMBqRIG%4{Ao+_>%$FOW`$2F(mn8WF3d z+OrIztO^I7@ij!1;{$U~0g{p422heTl{DK ze-HG3ogeZZpKwvO=*Uq@(>YK`wwv*@Kr0F0CR1|8<5rI&4HZ9^*bh9>jHpO$Jid#a zgQ+ogFpXo!!+wEk$UkGf?_i{a58t8k@r?%ky`gwUU%(@Hc5;^rK16+KT2#qR4Dh{~ zIGu1P^L&m3grIV_|A6t+2T#t0%y@+n#wPBiZ9ES&WOSwmz1ef}l@MFIom^9JC3=^9 z=W^`#t4nT*=XzFhpLhK-55&VT{aOZWSXb))0JU%u^n)gQM9 zgfA+^IdEt6bT9jo@9ULjbwR}3t&F;Tj()F?mxN#=FR1gA(HCmFR(QS|9bfn@b@vJk zU&Y(&Au;^2wrux4+ybzudmHftgB^7n}ao z?Tol=&)n&K=+i;Y^?dq#qzk+jS8M=1cRFgaXy?!dN@Ya@P#dme9DhSFTGnbgLO2Yd zeBcFtN+kHd3(wQ7!iSeSUDV9IX~+*8VxmN?lkR`;dH9rg89q7Ti$fl?ZAh(-##O1qnu_r>twznPMV#26z(3DvgQKk zH3$K0MiinF?rwY|V6u;&B*b|L!ZM|u(RGfL;>qB)<)222NTYW=Pms#{#C@tk(-aZl zO!mS500ibyHu~6FiZn>RODookSrkGnNf^OgDv97V5 zm%jx!_k?Qada0R>l-1?f_m{Q4Pg)tpkiHH4n7}o!G|TSsQtE)D<9y^O4g3aO|Ip)Y z%MmuUXzl>C=1o?InR3LZCbL-q8-t0ZS+c@zLO=CTwDQX_VtRYPk=lw!l=&Ff#8<=B z%xI3mv(MGWo-vx3_8xPWrmz50jh1)xGxsA@q(Dbkh-ltV0t=DIvM;G;$CyVSZu(4# zrFY8lp*$Yq;@y}KLiweegtB^ T9nH1;`(fMJlJM2m-dFz(s?w3% literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..d73f781ddca02cd133976802123232cab2a08a64 GIT binary patch literal 1959 zcmZWqX;_kp7PcC5N^zZBTAV5kvhmE<5)_XI;9jv zX^Ey{j#-(?H>QXhLS~BOf<{6mh$ONIA6%w;f86J}KhAm2^PcxCzs|X~53>uhboo*f z6B9_t?%;4EQjON~{UW2^50XNSP`z)@fgMIP7z{>lV`Bq{!=s|2#>dB9TwE3|Tv*y&PQ-Ohjd3kv>8g0|2 zO(+zqprF9g(z39yaP{id3WWj!f%NzHfBpK^&CP9KV1Ps-5sAdCtSozb`_RzPB}<|fR1)*Iq<3^b$nKI%fr`^`p-W%Ew&p5^dOAqdY1xt8bB(DI7V;lsOHgq zc$g1bB3|0rTY=^M@{JvazJU6_D}|w%Gqi)VGRZ2(!)k}DoT^Kzu~zL~D69b0AiV%2NmGL0w;Y zGyFwmI~AtQod`RF*T=$qv+xLv{npmYRqpvXRf%Lfa;$@~a;^E?mz%K<8mobmu&;7= zC3D-6Peq~l(}Zs1N8xozUOjd<{9FzarL-mzKE^;+SsA)!lF)8u!*@3;)6>`M3nv86 zLM`W^q}J%DT!J@OUb0dV;3)eNc4($9A>^1R;!}o~GW}?d-?t9+XNCfvQh=TpJ&ft) zrKB>bYX4_boHEjh_42ur&?W9(HQo{{y@%}*}QUtv%Ef_x7SwCG1 z!is`-7N<@Ze~;2>>d#o{&z8A&?x)(#dlTveEoq4uMEi@AFhpnN`EV(CvGpt+z{v!H zA8C|c4^RHCXX*ZwLyAlolA~08o)w3Q{%kmM%1zsKs3fO2cTD!0R}0G9l2p@ppKk?2 z{}k+TTa-5n^L?kOPqxr^A60AUw`R=*Enz3}$%KQM2_?rVAEQ%>RwjNx=*RD<*0cR) z>w35n4~L0SS5;i?o}IMQ^TebvnwN|Xcr;e@?6{osHimw)`xD!OP!j@|MU>)1F*m`3 z8(uZ9pPoEQCe5pnBbxdwNBz?l)L}DKcy}Ar0Yte$Q z9*7}f8DBKj+Z-DenOPyqXy80U{C{rrAppqWa{ge)&?_qXiRJX8B4WUX+vgc$E#`x% zlczHoIBY5PJO6;+H1#aw;H3n`$>e(S`DA$0r}WAD4g0t9l^OV{49%=ppEnw%x&kkC(&b&fC!y{5uOf4N9V=Qe z@2<#$HYdobPht}$sZVTD{*)d1pD_t|H1O%;?MEN15-{>GPYTTQ>O@!-Q%6o6#O!Y> z?YY;->Kd7C93iH6>Dj)C)he#F*wZ0`zh&N$oWZbHw)uVMBIVXJT)Ni7JfI{YcZ#60 zTW@?SX2d7wg6y0<{*l@zyb7r9^QmyHC1lo6H?~u2oVcWRn9P}#S;O>pDw=1JK5OED zhuy-KZKc;{SXx{{KK9_|8$$a=`}lOmJR^2gRmlr~4ch7C7992k`g@JGT<>&holUC{u0PT@dsAiFtc6;hYa*0wC&MzX)*G60hPr@#3@Yz**~2uMB?ipr zs7`WE*7|&$ob&{XAP&-SZgf zUbeNjcRW#-&!O?LWF|_Q@7w!QS1=)%p(%X2fgiB;_c}CEv9}~1ew^1Oik(|K^enrh z@h@L7O@zKo#MfjWap~VEG6=RDdwilV^cRlWcq9@}40b8mcX>bK5aD=H#1%7*U% zd)d`Oi8jAIhF}bob*AQ{s#+#Byk*fA5eo@k iH$It;t2TZeh6T&lAtO^6XRM4b%p_z7CYT-+oAqxiQY;(* literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..045d83d5ed6ade72559a7f042297f5944c8abf7f GIT binary patch literal 2904 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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/css-flexbox-2/images/wp7zxxyu.gif b/css-flexbox-2/images/wp7zxxyu.gif new file mode 100644 index 0000000000000000000000000000000000000000..de0baa509d2c977e3be341a153a03ed19e1ea036 GIT binary patch literal 1731 zcmV;!20ZykNk%w1VbcOS0P_j}|JMK`9sox?0BKnOiF5#`jR3&Fz{8{f-MRq(|Nj60 z00000000000000000000EC2ui0Mi0G000F4Fv&@)y*TU5yZ>M)j$~<`XsWJk>%MR- z&vb3yc&_h!@BhG{a7Zi~kI1BQ$!t2G&?w75ty-_xtai)odcWYXcuX#v&*-#z&2GEj z@VImY0~Bnj4c9otvPcqNAjx zJf9P&rmL*2uCJx439_)Ywzs&sOtQ4PzQ4f1!Y91L#>dFX#>L9b&d<=B%+b`<*4I+g z*xTIQ-Zg(L-?C2pmYTpuvL(6DnND zu%W|;2w^~+NU@^Dix@L%+{m$`#Eu~UJ-!G@vLr_k04;NDD0R##V48*EH0RaUR0}P<3puhpJ zP$4cAI3R#PtOZ~S7z^?2fwULP8vKfP=i0s%|5o(M)-7O-QYC??S^%q7fms1`MGI5G zfwPAht{tGjE!Vg#1t_4Kd1Y77rFjZYt(mCCt^@#ZHq4r0Vhg=g3b;$T0Byc810X;^ zyEehUZQtrGIpFbJjLl6JK;2Qm!R5wjuFigNJ4C{=i*s-7Q}GAcYzGqfO}Qmq(&LdE zhFkKibNCbOo5ap>{dMZ&wd7s@fC3HZ5O~QENL~jiRd7%MlUWCxY+XrM;aLh;Cs}M& z5%85|%1s8If&)n;T32_4ryOdNjm4E)5P}GyStwFhK!gCybt85$a!AmP2<(`lKs^ei zBZ?T3h9Z1ib;Z_X2*p^TkzI|&8EgfW72`k&Rwbf_QVyA8l>)8D8Gf~W6r+Y6q8Ok= zGtyPol>mGQ8irzSSQwX60&wG3Y-V?xCyO2AUzunP0Ge0;oOKn5k`Y#<02&f@7Jwwe zaHEkLCP<%TcVR_W0H6(^p;=Wy2B3apS_!6Bp9-|2R;&sK09+@IC7N|W%68XtS(Zwd zXa-RV*{~@Rc4(H71>n~IY@8k&tz^hT=HY1y!U@`tTW0$L0dbicsa{wnXjP+-B50VR zL@J6UfrC=gMXsRw?#NVu`Ln*y((F5x{1z;!>y;hm0P?DzN_H zN#>7{>1Xk1Ins5geq9=*mtzBsNF;~iHaX?8``!tnxhR7f^Q|Hd$#Q%z_%@JT9cKD% zdy;`hadA5)i?U%gyS1se<>6N7UiM;zkZ9ELJ9Ec0r#NtdBSDBj!=CEZFuHf?w_a>? z32D&89xENFLA~l%z}r~YX_$UZYF%<%tX75Jq30eTp56Z`cUOXdbC`IegWt>@49n6d z@S7t|wyn@@%Q_nWz}D_5bwNwR`$2;gAhaxSkP_tKjapmHmWECGxHSMUfPL_a6z&{Z zhgYq489`@>$99=+VU|$b83SGS$GhMA*xu-(HaU@flC1jRK?`JjmunK#JDTQo5Ft##E!O499Yl z`Os)i|)x36tL(Rg zVXKB5qayuIWJWL95kqb)BpC&XEkgcLN?(JL=v;uuN}&;F<-c1U4mNMtEXSQf-UOmvDZWfHGcJgp`JfKPM==$c*bL}vq; z4oHwGtLYF8Q?SG(CUt2{0ol(yK;cQ4pn1wyR+A@k3?xXx`5qCW$(GVgA0@xZl3q$+ zUZrDaP|_*SdTx!L#=)mO7sLV5`Qx7e4X6|RDbRu%^q@T;C_)#?(1uPSl@5)lL?>DT zg;Ml*q8OE^MKj9LjtX?69u28T?E%t}n)IaRC@D%;%2I5ow52eOsWM(F)0*1U7c{-8 zPIuahobvRiK$QkWgG$t*=3}TvO{!8e;nSr$^{G(c1s Date: Tue, 5 May 2026 09:01:29 +0100 Subject: [PATCH 110/229] [css-forms-1] Remove select styles (#13884) These have been upstreamed to HTML so no need to duplicate them here. --- css-forms-1/Overview.bs | 142 +--------------------------------------- 1 file changed, 2 insertions(+), 140 deletions(-) diff --git a/css-forms-1/Overview.bs b/css-forms-1/Overview.bs index 330197e095ff..37d4c41bf8a1 100644 --- a/css-forms-1/Overview.bs +++ b/css-forms-1/Overview.bs @@ -828,7 +828,6 @@ textarea, button, ::file-selector-button, ::color-swatch, -select, meter, progress, fieldset, @@ -847,7 +846,6 @@ textarea, button, ::file-selector-button, ::slider-track, -select, fieldset { border: 1px solid currentColor; background-color: transparent; @@ -976,12 +974,9 @@ input[type=radio]:checked::checkmark { ## Buttons (and button-like controls) ## {#stylesheet-button} -Selects are only button-like when they're a [drop-down box](https://html.spec.whatwg.org/multipage/rendering.html#drop-down-box). - ```css button, ::file-selector-button, -select, input:is([type="color"], [type="button"], [type="reset"], [type="submit"]) { border: 1px solid currentColor; background-color: transparent; @@ -1019,21 +1014,18 @@ input:is([type="color"], [type="button"], [type="reset"], [type="submit"]) { } button:enabled:hover, -select:enabled:hover, input:is([type="color"], [type="button"], [type="reset"], [type="submit"]):enabled:hover, input[type="file"]:enabled::file-selector-button:hover { background-color: color-mix(currentColor 10%, transparent); } button:enabled:active, -select:enabled:active, input:is([type="color"], [type="button"], [type="reset"], [type="submit"]):enabled:active, input[type="file"]:enabled::file-selector-button:active { background-color: color-mix(currentColor 20%, transparent); } button:disabled, -select:disabled, input:is([type="color"], [type="button"], [type="reset"], [type="submit"]):disabled, input[type="file"]:disabled::file-selector-button { color: color-mix(currentColor 50%, transparent); @@ -1063,138 +1055,8 @@ input[type="color"] { ## Selects ## {#stylesheet-select} -```css -select option { - /* These min-size rules ensure accessibility by following WCAG rules: - * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html - * Unset if the author provides a child button element. - * The 1lh is there to make sure that options without text don't change - * the block size of the option. */ - min-inline-size: 24px; - min-block-size: max(24px, 1lh); - - /* Centers text within the block (vertically). From OpenUI discussion: - * https://github.com/openui/open-ui/issues/1026#issuecomment-2103187647. */ - align-content: center; - - /* centering + gap between checkmark and option content */ - /* also easily reversed, when checkmark should be inline-end */ - display: flex; - align-items: center; - gap: 0.5em; - - /* Makes options with long text widen picker instead - * of making options tall. */ - white-space: nowrap; -} -select option:enabled:hover { - background-color: color-mix(currentColor 10%, transparent); -} -select option:enabled:active { - background-color: color-mix(currentColor 20%, transparent); -} -select option:disabled { - color: color-mix(currentColor 50%, transparent); -} -select option::checkmark { - content: '\2713' / ''; -} -select option:not(:checked)::checkmark { - visibility: hidden; -} - -select optgroup { - display: block; - /* font-weight makes optgroups visually distinct from options. */ - font-weight: bolder; -} - -select optgroup option { - /* Undo font-weight:bolder rule from optgroups. */ - font-weight: normal; -} - -select legend, -select option { - /* spacing ownership moves to children */ - /* space inline from border edges */ - /* this creates a full bleed hover highlight */ - padding-inline: 0.5em; -} -``` - -### Drop-down box selects ### {#stylesheet-dropdown-select} - -These styles should apply when the select is a [drop-down box](https://html.spec.whatwg.org/multipage/rendering.html#drop-down-box). - -```css -select { - field-sizing: content !important; -} - -select > button:first-child { - /* Prevents button from setting font, color, or background-color */ - all: unset; - - /* Prevents duplicate box decorations */ - display: contents; - - /* Prevents button activation behavior so select can handle events */ - interactivity: inert !important; -} - -select::picker-icon { - /* margin-inline-start pushes the icon to the right of the box */ - margin-inline-start: auto; - display: block; - content: counter(-ua-disclosure-open, disclosure-open); -} - -select::picker(select) { - /* Same properties as popover and dialog */ - color: CanvasText; - background-color: Canvas; - border: 1px solid; - - /* box-sizing is set to match the button. */ - box-sizing: border-box; - - /* Remove [popover] padding which - * prevents options from extending to edges */ - padding: 0; - - /* Anchor positioning and scrollbars */ - inset: auto; - margin: 0; - min-inline-size: anchor-size(self-inline); - min-block-size: 1lh; - /* Go to the edge of the viewport, and add scrollbars if needed. */ - max-block-size: stretch; - overflow: auto; - /* Below and span-right, by default. */ - position-area: self-block-end span-self-inline-end; - position-try-order: most-block-size; - position-try-fallbacks: - /* First try above and span-right. */ - self-block-start span-self-inline-end, - /* Then below but span-left. */ - self-block-end span-self-inline-start, - /* Then above and span-left. */ - self-block-start span-self-inline-start; -} -``` - -### List box selects ### {#stylesheet-listbox-select} - -These styles should apply when the select is a [list box](https://html.spec.whatwg.org/multipage/rendering.html#list-box). - -```css -select { - overflow: auto; - display: inline-block; - block-size: calc(max(24px, 1lh) * attr(size type(), 4)); -} -``` +See base appearance user agent styles specified in +HTML. ### Text inputs ### {#stylesheet-text-inputs} From 94eaa44999a0a09a792722ff17c5d7ce77b24233 Mon Sep 17 00:00:00 2001 From: Guillaume Date: Tue, 5 May 2026 07:25:38 +0200 Subject: [PATCH 111/229] [css-speech-1][editorial] Replace deprecated by --- css-speech-1/Overview.bs | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/css-speech-1/Overview.bs b/css-speech-1/Overview.bs index 153965e4f094..07b03467b4f7 100644 --- a/css-speech-1/Overview.bs +++ b/css-speech-1/Overview.bs @@ -752,7 +752,7 @@ The 'cue-before' and 'cue-after' properties 
     	Name: cue-before, cue-after
-	Value: <> <>? | none
+	Value: <> <>? | none
 	Initial: none
 	Applies to: all elements
 	Inherited: no
@@ -775,9 +775,9 @@ The 'cue-before' and 'cue-after' properties
 	compared to SSML's audio element.
 
 	
    
-		
    <>
+		
    <>
 		
    
-			The URI designates an auditory icon resource.
+			The [=/URL=] designates an auditory icon resource.
 			When a user agent is not able to render the specified auditory icon
 			(e.g. missing file resource, or unsupported audio codec),
 			it is recommended to produce an alternative cue, such as a bell sound.
@@ -1847,4 +1847,4 @@ No new privacy considerations have been reported on this specification.
 
 
    Security Considerations
    
 
-No new security considerations have been reported on this specification.
\ No newline at end of file
+No new security considerations have been reported on this specification.

From 7f4a80018c23990c22f88bee7c092d8081db7a4d Mon Sep 17 00:00:00 2001
From: Javier Contreras <38429467+jav099@users.noreply.github.com>
Date: Tue, 5 May 2026 09:45:38 -0700
Subject: [PATCH 112/229] [css-gaps-1] Clarify decoration pattern continuity
 across flex lines #13633 (#13887)

* [css-gaps-1] Clarify decoration pattern continuity across flex lines

Specify that gap decoration patterns do not restart at the beginning
of each flex line, but are assigned sequentially across the flexbox.

Closes w3c/csswg-drafts#13754

* [css-gaps-1] Add changes entry for flex line decoration continuity

Document the clarification about decoration patterns not restarting
at flex line boundaries.

---------

Co-authored-by: Javier Contreras 
---
 css-gaps-1/Overview.bs | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs
index c1d38db2fedd..1d6d64f5603e 100644
--- a/css-gaps-1/Overview.bs
+++ b/css-gaps-1/Overview.bs
@@ -2030,6 +2030,9 @@ Assigning gap decoration values to gaps
 	is drawn there. This preserves a consistent association between gaps and decorations across
 	fragmented and unfragmented contexts.
 
+	Similarly, when a [=flex container=] wraps into multiple flex lines, the decoration pattern is assigned to gaps sequentially across the flexbox
+	and does not restart at the beginning of each flex line.
+
 	
    
 		To assign gap decoration values to a list of |gaps| using a list of |values|:
 
@@ -2572,6 +2575,8 @@ Changes since the 2
 			(Issue 13697)
 		
  • Clarified that gaps suppressed due to fragmentation still consume gap decoration values.
 			(Issue 13754)
+		
  • Clarified that decoration patterns do not restart at the beginning of each flex line.
+			(Issue 13663)
 	
 
 
    

From 60501e835289cd8e76462395608e5c2c869a06fb Mon Sep 17 00:00:00 2001
From: "L. David Baron" 
Date: Tue, 5 May 2026 15:36:00 -0400
Subject: [PATCH 113/229] [css-navigation-1] Drop match-pattern/params/url from
 :link-to() and restructure.

This change:
* drops the match-pattern/match-params/match-url from :link-to(),
  leaving the match-params behavior as the only option,
* moves the at/with/to/from relation from inside the match-*
  function to before the route, and
* drops the navigation-* prefix from the at/with/to/from relation.

This is in preparation for a future change which will split :link-to()
into :link-to() and :active-navigation().
---
 css-navigation-1/Overview.bs | 68 +++++++++++++-----------------------
 1 file changed, 24 insertions(+), 44 deletions(-)

diff --git a/css-navigation-1/Overview.bs b/css-navigation-1/Overview.bs
index 479c46e3a6f2..d9a8e5ef7287 100644
--- a/css-navigation-1/Overview.bs
+++ b/css-navigation-1/Overview.bs
@@ -431,9 +431,8 @@ by matching the relevant parts of the navigation URL to the link URL.
   /* match URLs like /en/movie/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 using the 'match-params'
-     keyword (the default) will require equal IDs but allow
-     differences of language. */
+     :id parameter so that matching will require equal IDs
+     but allow differences of language. */
   pattern: url-pattern("/*/movie/:id");
 }
 
@@ -447,7 +446,7 @@ by matching the relevant parts of the navigation URL to the link URL.
 
    This depends on the --movie-details-with-id route
    declaring the ID but not the language with a named
-   parameter, and the use of match-params(navigation-with).
+   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
@@ -457,8 +456,7 @@ by matching the relevant parts of the navigation URL to the link URL.
    match, containing the language, can be different.)
    */
 .movie-container:has(
-    > .movie-title:link-to(--movie-details-with-id
-                             with match-params(navigation-with))) {
+    > .movie-title:link-to(with --movie-details-with-id)) {
 
   view-transition-name: movie-container;
 
@@ -479,14 +477,9 @@ and the pseudo-class matches any element where:
 * the target of link matches the <>, as defined below.
 
 
    -<> = <> [ with <> ]?
+<> = [ <> ]? <>
 <> = <>
-  // Note: <> is defining three functions
-  // with identical syntax.
-<> = <>( <> )
-<> = match-pattern | match-params | match-url
-<> = navigation-at | navigation-with |
-                            navigation-from | navigation-to
+<> = at | with | from | to
 
    
 
 ISSUE: Should we use ''navigation-''(''at''/''with''/''from''/''to'') or
@@ -526,49 +519,36 @@ if the following steps return true:
 
     NOTE: This doesn't really matter because
     in this case the <> also doesn't match.
-1. Let matchType be the <> of the
-    <>.
-1. Let matchTarget be the <> argument
+1. Let matchRelation be the <> argument
     of the <>.
 1. Let navigationURL be:
-    : If matchTarget is ''navigation-at'',
+    : If matchRelation is ''at'',
     :: the document's [[=Document/URL=]].
-    : Otherwise, if matchTarget is ''navigation-with'',
+    : Otherwise, if matchRelation is ''with'',
     :: the current other URL of the document.
-    : Otherwise, if matchTarget is ''navigation-from'',
+    : Otherwise, if matchRelation is ''from'',
     :: the current from URL of the document.
-    : Otherwise (Assert: matchTarget is ''navigation-to''),
+    : Otherwise (Assert: matchRelation is ''to''),
     :: the current to URL of the document.
 1. If navigationURL is null, return false.
-1. : If matchType is ''match-pattern''
-    :: Return true if
-        the result of [=URL pattern/match|match a URL pattern=] given
-        urlPattern and navigationURL is not null;
-        otherwise return false.
+1. Let navigationMatchResult be the result of
+     [=URL pattern/match|match a URL pattern=] given
+     navigationURL and urlPattern.
 
-    : If matchType is ''match-params''
-    :: 1. Let navigationMatchResult be the result of
-            [=URL pattern/match|match a URL pattern=] given
-            navigationURL and urlPattern.
+1. If navigationMatchResult is null, return false.
 
-        1. If either navigationMatchResult is null, return false.
+1. For each property prop of {{URLPatternResult}} that is a
+    {{URLPatternComponentResult}}:
 
-        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.
 
-            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.
 
-                ISSUE: Need to formally define equality of ordered maps.
-
-        1. Return true.
-
-    : If matchType is ''match-url''
-    :: Return true if linkTarget equals navigationURL;
-        otherwise return false.
+1. Return true.
 
 NOTE: Some of the design discussion for this feature has been in
 w3c/csswg-drafts#13163.

From a6a1cd92f1c8f5b361bfb3d3670b4c17e013d279 Mon Sep 17 00:00:00 2001
From: "L. David Baron" 
Date: Tue, 5 May 2026 15:49:05 -0400
Subject: [PATCH 114/229] [css-navigation-1] Restrict at in both @navigation
 and :link-to() to navigations.

This restricts matching of at: in both @navigation and :link-to() to
when a navigation is currently active.

This defines the term "current at URL" to help with that, and also
renames the existing "current other URL" term to "current with URL" to
keep internal and author-exposed terminology consistent.
---
 css-navigation-1/Overview.bs | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/css-navigation-1/Overview.bs b/css-navigation-1/Overview.bs
index d9a8e5ef7287..2e2c389df811 100644
--- a/css-navigation-1/Overview.bs
+++ b/css-navigation-1/Overview.bs
@@ -268,15 +268,16 @@ as follows:
 
 : <>
 ::    : at: <>
-    :: The result is whether the result of
+    :: The result is true if
+        the [=current at URL=] at of the document is non-null and
         [=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=].
+        and input as at.
 
     : with: <>
     :: The result is true if
-        the [=current other URL=] other of the document is non-null and
+        the [=current with URL=] other 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 <>
@@ -523,9 +524,9 @@ if the following steps return true:
     of the <>.
 1. Let navigationURL be:
     : If matchRelation is ''at'',
-    :: the document's [[=Document/URL=]].
+    :: the current at URL of the document.
     : Otherwise, if matchRelation is ''with'',
-    :: the current other URL of the document.
+    :: the current with URL of the document.
     : Otherwise, if matchRelation is ''from'',
     :: the current from URL of the document.
     : Otherwise (Assert: matchRelation is ''to''),
@@ -556,8 +557,8 @@ NOTE: Some of the design discussion for this feature has been in
 
    Definitions of current navigation state
    
 
 Both the ''@navigation'' rule and the '':link-to()'' pseudo-class
-rely on the following definitions of
-the [=current other URL=], [=current from URL=], and [=current to URL=].
+rely on the following definitions of [=current at URL=]
+the [=current with URL=], [=current from URL=], and [=current to URL=].
 
 The current from URL of a [=/document=] is a URL or null.
 It is defined as follows:
@@ -648,10 +649,17 @@ 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.
 
-The current other URL of a [=/document=] is a URL or null.
+The current at URL of a [=/document=] is a URL or null.
+It is defined as follows:
+
+1. ISSUE: Write this!  (It should be null if there is no active navigation,
+    and the same as the document's [=Document/URL=] if there is.)
+
+The current with URL of a [=/document=] is a URL or null.
 It is defined as follows:
 
-1. ISSUE: Write this!
+1. ISSUE: Write this!  (It should be like [=current to URL=] and [=current from URL=]
+    but always referring to the other Document in the navigation.)
 
 The current navigation type of a [=/document=] is a {{NavigationType}} or null.
 It is defined as follows:

From a9f3a6f533a3ceece10a83dceb40953fbe37386e Mon Sep 17 00:00:00 2001
From: Shubham Gupta 
Date: Thu, 9 Apr 2026 11:18:02 +0800
Subject: [PATCH 115/229] [css-viewport-1] Make actual viewport the layout
 viewport.

Signed-off-by: Shubham Gupta 
---
 css-viewport-1/Overview.bs | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/css-viewport-1/Overview.bs b/css-viewport-1/Overview.bs
index 0e6be678be53..013bd2874953 100644
--- a/css-viewport-1/Overview.bs
+++ b/css-viewport-1/Overview.bs
@@ -92,7 +92,7 @@ The page area can be set through ''@page'' rules.
 
 This specification introduces a way of overriding the size of the viewport
 provided by the user agent (UA). Because of this, we need to introduce the
-difference between the [=initial viewport=] and the [=actual viewport=].
+difference between the [=initial viewport=] and the [=layout viewport=].
 
 
    
 	
    initial viewport
    
@@ -101,23 +101,23 @@ difference between the [=initial viewport=] and the [=actual viewport=].
 		overridden the viewport given by the window or viewing area of the UA.
 		Note that the [=initial viewport=] size will change with the
 		size of the window or viewing area.
    • 
-	
    actual viewport
    
+	
    layout viewport
    
 	
    
 		This is the viewport you get after processing the viewport
 		<meta> tag.
 	
    
 
    
 
-ISSUE: Make [=actual viewport=] the layout viewport, define visual viewport.
+ISSUE: Define visual viewport.
 
-When the [=actual viewport=] cannot fit inside the window or
-viewing area, either because the [=actual viewport=] is
+When the [=layout viewport=] cannot fit inside the window or
+viewing area, either because the [=layout viewport=] is
 larger than the [=initial viewport=] or the zoom factor
-causes only parts of the [=actual viewport=] to be visible,
+causes only parts of the [=layout viewport=] to be visible,
 the UA should offer a scrolling or panning mechanism.
 
 It is recommended that initially the upper-left corners of the
-[=actual viewport=] and the window or viewing area are aligned if the
+[=layout viewport=] and the window or viewing area are aligned if the
 base direction of the document is ltr. Similarly, that the upper-right
 corners are aligned when the base direction is rtl. The base direction
 for a document is defined as the computed value of the 'direction'

From d2e87713989b0c8a99714ac68616890d9f8c2cc2 Mon Sep 17 00:00:00 2001
From: Tab Atkins-Bittner 
Date: Wed, 6 May 2026 16:33:47 +0000
Subject: [PATCH 116/229] [css-images-4][css-images-5] Punt the non-color uses
 of image() to level 5, per WG resolution.

---
 css-images-4/Overview.bs | 179 ++-----------------------------
 css-images-5/Overview.bs | 221 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 229 insertions(+), 171 deletions(-)

diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
index 06c9dac4b30b..b5a087a1ca0e 100644
--- a/css-images-4/Overview.bs
+++ b/css-images-4/Overview.bs
@@ -379,140 +379,16 @@ 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,
@@ -525,47 +401,8 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 		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.
-	
    
-
+	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");
    
+
+		'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}
 ==========================================
 

From 30639060d74550c01766036a5ff55c81bf250394 Mon Sep 17 00:00:00 2001
From: fantasai 
Date: Fri, 3 Apr 2026 14:47:47 -0700
Subject: [PATCH 117/229] [css-anchor-position-1] Depluralize anchors-* in
 'position-visibility' and only check default anchor #10201

---
 css-anchor-position-1/Overview.bs | 31 +++++++++++++++----------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs
index cee9b4434598..acf054d8ed92 100644
--- a/css-anchor-position-1/Overview.bs
+++ b/css-anchor-position-1/Overview.bs
@@ -2219,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
@@ -2239,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=],
@@ -2704,6 +2695,14 @@ No Privacy issues have been raised against this document.
 Changes {#changes}
 =======
 
+Significant changes since the 27 March 2026 Working Draft:
+* Defined ''position-visibility/anchor-valid'' to (like ''position-visibility/anchor-valid'') only check the [=default anchor box=].
+	(Issue 10201)
+* Renamed anchors-valid and anchors-visible
+	to ''position-visibility/anchor-valid'' and ''position-visibility/anchor-visible''
+	since they only reference the [=default anchor box=].
+	(Issue 10201)
+
 Significant changes since the 30 January 2026 Working Draft:
 * Added ''position-area/match-parent'' value to 'position-area'.
 	(Issue 8913)

From 6dc702af0012f476a5604d65d78807b8b9065b74 Mon Sep 17 00:00:00 2001
From: Sam Weinig 
Date: Wed, 6 May 2026 08:42:06 -0700
Subject: [PATCH 118/229] =?UTF-8?q?Updates=20'flow-tolerance'=20grammar=20?=
 =?UTF-8?q?to=20use=20``=20rather=20tha?=
 =?UTF-8?q?n=20``?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css-grid-3/Overview.bs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

From d9f3d0f3bee5c636bc5598b66f02c11cd8bcb654 Mon Sep 17 00:00:00 2001
From: "L. David Baron" 
Date: Wed, 6 May 2026 15:27:27 -0400
Subject: [PATCH 119/229] [css-navigation-1] Split :active-navigation() from
 :link-to().

This separates the more complex feature in the :link-to() pseudo-class
into a separate :active-navigation() pseudo-class.
---
 css-navigation-1/Overview.bs | 165 +++++++++++++++++------------------
 1 file changed, 80 insertions(+), 85 deletions(-)

diff --git a/css-navigation-1/Overview.bs b/css-navigation-1/Overview.bs
index 2e2c389df811..385554205deb 100644
--- a/css-navigation-1/Overview.bs
+++ b/css-navigation-1/Overview.bs
@@ -40,7 +40,7 @@ url: https://drafts.csswg.org/css-view-transitions-1/#capture-the-image
 The @route rule
 is an at-rule that associates a 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:
 
@@ -270,34 +270,22 @@ as follows:
 ::    : at: <>
     :: The result is true if
         the [=current at URL=] at of the document is non-null and
-        [=URL pattern/match|match a URL pattern=] is non-null
-        given urlPattern as
-        the [=navigation location URL pattern=] of <>
-        and input as at.
+        the <> [=navigation-location/matches=] at.
 
     : with: <>
     :: The result is true if
         the [=current with URL=] other 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 other.
+        the <> [=navigation-location/matches=] other.
 
     : 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.
+        the <> [=navigation-location/matches=] 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 <> [=navigation-location/matches=] to.
 
 : <>
 ::    : between: <> and <>
@@ -349,6 +337,13 @@ See the
 route matching explainer
 for details.
 
+A <> is defined to
+match a URL input if
+[=URL pattern/match|match a URL pattern=] is non-null given
+urlPattern as the [=navigation location URL pattern=] of the
+<> and
+input as input.
+
 A document's navigation API is
 the result of the following steps on document:
 
@@ -390,7 +385,9 @@ 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
@@ -409,9 +406,22 @@ which matches any links that link to the site's homepage:
 
 
 
+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 <> [=navigation-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.
+
 
    
 
-A more interesting example of the '':link-to()'' pseudo-class
+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).
@@ -457,7 +467,7 @@ by matching the relevant parts of the navigation URL to the link URL.
    match, containing the language, can be different.)
    */
 .movie-container:has(
-    > .movie-title:link-to(with --movie-details-with-id)) {
+    > .movie-title:active-navigation(with --movie-details-with-id)) {
 
   view-transition-name: movie-container;
 
@@ -472,84 +482,69 @@ by matching the relevant parts of the navigation URL to the link URL.
 
 
    
 
-The '':link-to()'' pseudo-class takes a single argument, a <>,
+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 link matches the <>, as defined below.
+* the target of the link matches the <>, as defined below.
 
 
    -<> = [ <> ]? <>
-<> = <>
+<> =
+  <>? [ <> | link-href ] ?
 <> = at | with | from | to
 
    
 
-ISSUE: Should we use ''navigation-''(''at''/''with''/''from''/''to'') or
-''navigation-''(''current''/''other''/''from''/''to'')?
-
-ISSUE: Should the '':link-to()'' variant that has a <> have a different name,
-such as '':navigating-link()''?
-
-A <> matches the target of the link when both:
-* the <> matches the target of the link, and
-* either:
-    * a <> is not present, or
-    * 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 the URL linkTarget
-(with a URL Pattern urlPattern as context)
-if the following steps return true:
-1. Let targetMatchResult be the result of
-    [=URL pattern/match|match a URL pattern=]
-    given urlPattern and linkTarget.
-1. If targetMatchResult is null, return false.
-
-    NOTE: This doesn't really matter because
-    in this case the <> also doesn't match.
-1. Let matchRelation be the <> argument
-    of the <>.
-1. Let navigationURL be:
-    : If matchRelation is ''at'',
-    :: the current at URL of the document.
-    : Otherwise, if matchRelation is ''with'',
-    :: the current with URL of the document.
-    : Otherwise, if matchRelation is ''from'',
-    :: the current from URL of the document.
-    : Otherwise (Assert: matchRelation is ''to''),
-    :: the current to URL of the document.
+NOTE: The ''link-href'' keyword is an explicit way to represent the default,
+but there is no difference between specifying it explicitly or omitting it.
+
+ISSUE: Should we use ''at''/''with''/''from''/''to'' or
+''current''/''other''/''from''/''to''?
+
+The active navigation URL for an <> is:
+
    
+
    If the <> is ''at''
+
    The [=current at URL=] of the document
+
    If the <> is ''with'' or is omitted
+
    The [=current with URL=] of the document
+
    If the <> is ''from''
+
    The [=current from URL=] of the document
+
    If the <> is ''to''
+
    The [=current to URL=] of the document
+
    
+
+An <> matches the target linkTarget of the link when
+the following steps return true:
+1. Let navigationURL be
+    the [=active navigation URL=] of the <>
 1. If navigationURL is null, return false.
-1. Let navigationMatchResult be the result of
-     [=URL pattern/match|match a URL pattern=] given
-     navigationURL and urlPattern.
+1. If a <> is present:
+    1. Let targetMatchResult be the result of
+        [=URL pattern/match|match a URL pattern=]
+        given urlPattern and linkTarget.
+
+    1. Let navigationMatchResult be the result of
+         [=URL pattern/match|match 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.
 
-1. If navigationMatchResult is null, return false.
+            ISSUE: Need to formally define equality of ordered maps.
 
-1. For each property prop of {{URLPatternResult}} that is a
-    {{URLPatternComponentResult}}:
+    1. Return true.
 
-    1. If {{URLPatternComponentResult/groups}} of prop of
-        targetMatchResult is not equal to
-        {{URLPatternComponentResult/groups}} of prop of
-        navigationMatchResult,
-        then return false.
+1. Otherwise:
 
-        ISSUE: Need to formally define equality of ordered maps.
+    1. Return true if linkTarget [=url/equals=] navigationURL.
 
-1. Return true.
+    1. Return false.
 
 NOTE: Some of the design discussion for this feature has been in
 w3c/csswg-drafts#13163.

From 3dfb0d96cd4cb4d96297de3b76050f2dd53760f9 Mon Sep 17 00:00:00 2001
From: "L. David Baron" 
Date: Wed, 6 May 2026 15:31:25 -0400
Subject: [PATCH 120/229] [css-navigation-1][editorial] Fix typo in function
 name.

---
 css-navigation-1/Overview.bs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css-navigation-1/Overview.bs b/css-navigation-1/Overview.bs
index 385554205deb..85ae0f5554e5 100644
--- a/css-navigation-1/Overview.bs
+++ b/css-navigation-1/Overview.bs
@@ -94,7 +94,7 @@ 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

From 93636fb10801b8f5cde69a269ed0f00265c20df8 Mon Sep 17 00:00:00 2001
From: Alexander Kyereboah <59938429+kyerebo@users.noreply.github.com>
Date: Wed, 6 May 2026 14:57:03 -0700
Subject: [PATCH 121/229] [css-ui-4] add the `window-drag` text (#13801)

* Adds the draggable CSS property

- adds `window-drag` to css-ui-4

* Adds window-drag

- changes the computed value
- updates line width styling

* Updates css-ui-4 with `window-drag`

Updates the spec text with the naming resolution by the CSSWG.

https://github.com/w3c/csswg-drafts/issues/13102

* Adding note about `app-region` alias

* Clarifying web event dispatch behavior and initial value

* Simplifying `window-drag` description

* Clarifying element's draggable target

* Minor tweaks

Co-authored-by: Tab Atkins Jr. 

---------

Co-authored-by: diekus <73939538+diekus@users.noreply.github.com>
Co-authored-by: Alexander Kyereboah 
Co-authored-by: Tab Atkins Jr. 
---
 css-ui-4/Overview.bs | 53 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/css-ui-4/Overview.bs b/css-ui-4/Overview.bs
index db28eb8544a0..81788b6b2fca 100644
--- a/css-ui-4/Overview.bs
+++ b/css-ui-4/Overview.bs
@@ -4153,6 +4153,59 @@ Single-Line Text Input Controls
 	* The content does not wrap
 	* The 'text-overflow' property applies regardless of the value of the 'overflow' property
 
+
    
+Window Interaction
    
+
+
    
+Moving the window: the 'window-drag' property
    
+
+	
    +	Name: window-drag
+	Value: none | move
+	Initial: none
+	Applies to: all elements
+	Inherited: yes
+	Percentages: N/A
+	Computed value: as specified
+	Canonical order: per grammar
+	Animation type: discrete
+	
    
+
+	
+	
+
+	An installed application's window typically has a designated area where it can be dragged to move the window.
+	This area is generally at the top of the window
+	(usually part of the titlebar, toolbar, or both),
+	outside of the region that the page is actually rendered in.
+	For installed web apps, 
+	APIs or capabilities like [[WINDOW-CONTROLS-OVERLAY]]
+	can alter and remove the surfaces where users can move a window.
+	The 'window-drag' property allows the author to specify an area within the page
+	where a user can drag to move the window.
+	Values have the following meanings:
+
+	
    
+		
    none
+		
    
+			Specifies that the element cannot be used as a drag area.
+
+		
    move
+		
    
+			Specifies that the element's [=principal box=] can be used as a [=window drag area=].
+	
    
+
+	Note: Some UAs may support app-region as a [=legacy shorthand=] for 'window-drag'.
+
+	When a [=box=] is a window drag area,
+	a drag gesture on that element initiates a window move operation
+	instead of normal web event processing.
+	The UA must not fire pointer events, mouse events, or drag events
+	on the element for the duration of the window move gesture.
+
+	Note: This means the [[HTML]] <{html-global/draggable}> attribute
+	has no effect on elements with ''window-drag: move'';
+	the window move behavior takes precedence.
 
 
    
 

From 9b703d736aef856df380632d8edb5fa19716cc92 Mon Sep 17 00:00:00 2001
From: Tab Atkins-Bittner 
Date: Wed, 6 May 2026 23:05:12 +0000
Subject: [PATCH 122/229] [css-values-4] Clarify/fix round(line-width) text.
 #13794

---
 css-values-4/Overview.bs | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/css-values-4/Overview.bs b/css-values-4/Overview.bs
index 8c122f39528c..1eb0c4b037b3 100644
--- a/css-values-4/Overview.bs
+++ b/css-values-4/Overview.bs
@@ -3347,11 +3347,15 @@ Stepped Value Functions: ''round()'', ''mod()'', and ''rem()''
 		:: If A is non-negative and B is omitted,
 			A is [=snapped as a border width=].
 
-			Otherwise, identical to ''/nearest'',
-			except that if A is positive (non-zero)
-			and one of |lower B| or |upper B| is zero,
-			choose the non-zero one,
-			then [=snap as a border width=].
+			Otherwise, if A is non-negative and B is specified,
+			identical to ''/nearest'',
+			except that if one of |lower B| or |upper B| is zero,
+			always choose the non-zero one.
+			Then [=snap as a border width=].
+
+			Otherwise (A is negative),
+			identical to ''/nearest''.
+			(No snapping occurs.)
 	
 
 	If |lower B| would be zero,

From 90a89f12fa55ae193360e180e16d079a6221a9a0 Mon Sep 17 00:00:00 2001
From: Guillaume 
Date: Thu, 7 May 2026 01:57:23 +0200
Subject: [PATCH 123/229] [css-shapes][editorial] Define production rule for
 `` (#9727)

---
 css-shapes-1/Overview.bs | 7 ++++++-
 css-shapes-2/Overview.bs | 7 +++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/css-shapes-1/Overview.bs b/css-shapes-1/Overview.bs
index f7764d0735a8..163ebef8ad7b 100644
--- a/css-shapes-1/Overview.bs
+++ b/css-shapes-1/Overview.bs
@@ -329,6 +329,11 @@ Basic Shapes
 
 	The <basic-shape> type
 	can be specified using basic shape functions.
+
+	
    +		<> = <> | <> | <> |  <> | <>
+	
    
+
 	When using this syntax
 	to define shapes,
 	the reference box is defined
@@ -460,7 +465,7 @@ Supported Shapes
 				shape-functions/xywh-function-valid.html
 			
 
-		
    rect() =
+		
    rect()
 		
    
 			Defines a rectangle
 			via insets from the top and left edges of the [=reference box=].
diff --git a/css-shapes-2/Overview.bs b/css-shapes-2/Overview.bs
index 8fa209b74d03..90d54b081257 100644
--- a/css-shapes-2/Overview.bs
+++ b/css-shapes-2/Overview.bs
@@ -125,6 +125,13 @@ Basic Shapes
 	level 1
 	section.
 
+	This level extends the <> functions
+	to include ''shape()'':
+
+	
    +		<> = <> | <> | <> |  <> | <> | <>
+	
    
+
 
    
 Supported Shapes
    
 

From efc0c6f847f6e2e2faad646a4387f37ee6d4e747 Mon Sep 17 00:00:00 2001
From: Guillaume 
Date: Thu, 7 May 2026 02:30:26 +0200
Subject: [PATCH 124/229] [css-conditional-5] Define the block contents of
 `@container` with `` (#9215)

---
 css-conditional-5/Overview.bs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs
index edcca5615ac8..44e184c0e084 100644
--- a/css-conditional-5/Overview.bs
+++ b/css-conditional-5/Overview.bs
@@ -467,7 +467,7 @@ Container Queries
 		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
@@ -1027,7 +1027,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=].
@@ -1036,7 +1036,7 @@ Container Queries: the ''@container'' rule
 
 	
     	@container <># {
-	  <>
+	  <>
 	}
 	
    
 

From 1d58ee610bac3fe0416329870376a33629aac3a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Daoust?= 
Date: Thu, 7 May 2026 15:13:28 +0200
Subject: [PATCH 125/229] [css-navigation-1] Fix syntax of
 `` (#13895)

The Value Definition Syntax does not allow spaces before the `?` multiplier.
---
 css-navigation-1/Overview.bs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css-navigation-1/Overview.bs b/css-navigation-1/Overview.bs
index 85ae0f5554e5..97da87d57d4e 100644
--- a/css-navigation-1/Overview.bs
+++ b/css-navigation-1/Overview.bs
@@ -489,7 +489,7 @@ and the pseudo-class matches any element where:
 
 
     <> =
-  <>? [ <> | link-href ] ?
+  <>? [ <> | link-href ]?
 <> = at | with | from | to
 
    
 

From 6dcd08f1bb13329d71146350bda5c0e24f54fa76 Mon Sep 17 00:00:00 2001
From: "L. David Baron" 
Date: Thu, 7 May 2026 09:40:20 -0400
Subject: [PATCH 126/229] [css-navigation-1] Also allow <> in
 <>.

---
 css-navigation-1/Overview.bs | 49 +++++++++++++++++++-----------------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/css-navigation-1/Overview.bs b/css-navigation-1/Overview.bs
index 97da87d57d4e..e2cb2c2a99b1 100644
--- a/css-navigation-1/Overview.bs
+++ b/css-navigation-1/Overview.bs
@@ -224,7 +224,7 @@ with <> defined as:
 
 <> = <> : <>
 <> = at | with | from | to
-<> = <> | <>
+<> = <> | <> | <>
 <> = <>
 
 <> =
@@ -292,14 +292,10 @@ as follows:
     :: The result is true if
         the [=current from URL=] from of the document is non-null,
         the [=current to URL=] to of the document is non-null,
-        [=URL pattern/match|match a URL pattern=] is non-null
-        given urlPattern as
-        the [=navigation location URL pattern=] of one of the two <>s
-        and input as from, and
-        [=URL pattern/match|match a URL pattern=] is non-null
-        given urlPattern as
-        the [=navigation location URL pattern=] of the other of the two <>s
-        and input as to.
+        one of the two <>s
+        [=navigation-location/matches=] from,
+        and the other of the two <>s
+        [=navigation-location/matches=] to.
 
 : <>
 ::    : history: traverse
@@ -321,15 +317,28 @@ as follows:
     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 <>:
+A <> is defined to
+match a URL input if:
+
+
    
+
+: 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 URL pattern represented by the ''@route'' rule referenced by the name.
+: 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 [=URL pattern=] represented by the function; see
-    [=create a URL pattern for url-pattern()=].
+: the <> is a <>
+:: The given URL [=url/equals=] input.
+
+
    
 
 ISSUE: Should it also be possible to reference
 a name defined in a routemap?
@@ -337,12 +346,6 @@ See the
 route matching explainer
 for details.
 
-A <> is defined to
-match a URL input if
-[=URL pattern/match|match a URL pattern=] is non-null given
-urlPattern as the [=navigation location URL pattern=] of the
-<> and
-input as input.
 
 A document's navigation API is
 the result of the following steps on document:
@@ -500,7 +503,7 @@ ISSUE: Should we use ''at''/''with''/''from''/''to'' or
 ''current''/''other''/''from''/''to''?
 
 The active navigation URL for an <> is:
-
    
+
    
 
    If the <> is ''at''
 
    The [=current at URL=] of the document
 
    If the <> is ''with'' or is omitted

From 7f796f78d189195919a7cf861d7adffebcb80b61 Mon Sep 17 00:00:00 2001
From: "L. David Baron" 
Date: Thu, 7 May 2026 09:47:38 -0400
Subject: [PATCH 127/229] Pull <> into its own section and
 rename to <>.

This type is common to multiple features in this spec and thus probably
belongs in its own section rather than in the section of one of the
features that uses it.
---
 css-navigation-1/Overview.bs | 110 ++++++++++++++++++-----------------
 1 file changed, 58 insertions(+), 52 deletions(-)

diff --git a/css-navigation-1/Overview.bs b/css-navigation-1/Overview.bs
index e2cb2c2a99b1..1c50fd0e7e7e 100644
--- a/css-navigation-1/Overview.bs
+++ b/css-navigation-1/Overview.bs
@@ -35,7 +35,9 @@ url: https://drafts.csswg.org/css-view-transitions-1/#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
    
+
+
    Declaring named URL patterns: the ''@route'' rule
    
 
 The @route rule
 is an at-rule that associates a name with a [=URL pattern=].
@@ -127,6 +129,42 @@ 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 <> value type
    
+
+
    +<> = <> | <> | <>
+<> = <>
+
    
+
+A <> is defined to
+match a URL input if:
+
+
    
+
+: 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.
+
+
    
+
+ISSUE: Should it also be possible to reference
+a name defined in a routemap?
+See the
+route matching explainer
+for details.
+
 
    Conditional rules for navigation queries
    
 
 
    Navigation queries: the ''@navigation'' rule
    
@@ -222,13 +260,11 @@ with <> defined as:
                     <> |
                     <>
 
-<> = <> : <>
+<> = <> : <>
 <> = at | with | from | to
-<> = <> | <> | <>
-<> = <>
 
 <> =
-    between : <> and <>
+    between : <> and <>
 
 <> = history : <>
 <> = traverse | back | forward | reload
@@ -267,35 +303,35 @@ as follows:
 :: The result is the result of the child subexpression.
 
 : <>
-::    : at: <>
+::    : at: <>
     :: The result is true if
         the [=current at URL=] at of the document is non-null and
-        the <> [=navigation-location/matches=] at.
+        the <> [=route-location/matches=] at.
 
-    : with: <>
+    : with: <>
     :: The result is true if
         the [=current with URL=] other of the document is non-null and
-        the <> [=navigation-location/matches=] other.
+        the <> [=route-location/matches=] other.
 
-    : from: <>
+    : from: <>
     :: The result is true if
         the [=current from URL=] from of the document is non-null and
-        the <> [=navigation-location/matches=] from.
+        the <> [=route-location/matches=] from.
 
-    : to: <>
+    : to: <>
     :: The result is true if
         the [=current to URL=] to of the document is non-null and
-        the <> [=navigation-location/matches=] to.
+        the <> [=route-location/matches=] to.
 
 : <>
-::    : between: <> and <>
+::    : between: <> and <>
     :: The result is true if
         the [=current from URL=] from of the document is non-null,
         the [=current to URL=] to of the document is non-null,
-        one of the two <>s
-        [=navigation-location/matches=] from,
-        and the other of the two <>s
-        [=navigation-location/matches=] to.
+        one of the two <>s
+        [=route-location/matches=] from,
+        and the other of the two <>s
+        [=route-location/matches=] to.
 
 : <>
 ::    : history: traverse
@@ -317,36 +353,6 @@ as follows:
     It exists only for future-compatibility,
     so that new syntax additions do not invalidate too much of a <> in older user agents.
 
-A <> is defined to
-match a URL input if:
-
-
    
-
-: 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.
-
-
    
-
-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:
 
@@ -409,10 +415,10 @@ which matches any links that link to the site's homepage:
 
 
 
-The '':link-to()'' pseudo-class takes a single argument, a <>,
+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 <> [=navigation-location/matches=] the target of the link
+* the <> [=route-location/matches=] the target of the link
 
 
    The ''::active-navigation()'' pseudo-class
    
 
@@ -492,7 +498,7 @@ and the pseudo-class matches any element where:
 
 
     <> =
-  <>? [ <> | link-href ]?
+  <>? [ <> | link-href ]?
 <> = at | with | from | to
 
    
 
@@ -519,7 +525,7 @@ the following steps return true:
 1. Let navigationURL be
     the [=active navigation URL=] of the <>
 1. If navigationURL is null, return false.
-1. If a <> is present:
+1. If a <> is present:
     1. Let targetMatchResult be the result of
         [=URL pattern/match|match a URL pattern=]
         given urlPattern and linkTarget.

From e9f795e510debe9d7fa820e22e8cc756a9779c9d Mon Sep 17 00:00:00 2001
From: "L. David Baron" 
Date: Thu, 7 May 2026 09:50:24 -0400
Subject: [PATCH 128/229] [css-navigation-1] Move the section on the
 url-pattern() function.

This moves the section for the url-pattern() function into the newly
created umbrella section on defining URL patterns.
---
 css-navigation-1/Overview.bs | 122 +++++++++++++++++------------------
 1 file changed, 61 insertions(+), 61 deletions(-)

diff --git a/css-navigation-1/Overview.bs b/css-navigation-1/Overview.bs
index 1c50fd0e7e7e..f7500216d3aa 100644
--- a/css-navigation-1/Overview.bs
+++ b/css-navigation-1/Overview.bs
@@ -129,6 +129,67 @@ 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 a [=URL pattern=] that can be created
+using the steps of the create a URL pattern for url-pattern() algorithm:
+
+1. Let arg be the <> argument to the ''url-pattern()'' function.
+
+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()''.
+
+    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 )?
+
+    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.
+
 
    The <> value type
    
 
 
    @@ -729,67 +790,6 @@ 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
    
-
-
-
-The url-pattern() function represents a [=URL pattern=],
-which can be used to match URLs.
-
-
    -<> = url-pattern( <> )
-
    
-
-This function represents a [=URL pattern=] that can be created
-using the steps of the create a URL pattern for url-pattern() algorithm:
-
-1. Let arg be the <> argument to the ''url-pattern()'' function.
-
-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()''.
-
-    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 )?
-
-    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.
-
 
    Privacy Considerations
    
 
 ISSUE: To be written.

From 5bd78836177d02c787a3da1f105da64e0150f6cf Mon Sep 17 00:00:00 2001
From: "L. David Baron" 
Date: Thu, 7 May 2026 10:04:59 -0400
Subject: [PATCH 129/229] [css-navigation-1][editorial] Fix section title.

---
 css-navigation-1/Overview.bs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css-navigation-1/Overview.bs b/css-navigation-1/Overview.bs
index f7500216d3aa..e4592a7873c4 100644
--- a/css-navigation-1/Overview.bs
+++ b/css-navigation-1/Overview.bs
@@ -455,7 +455,7 @@ 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.
 
-
+
 
 
 

From a0d5084047027ddf1d3d6b93dd0530116abbb983 Mon Sep 17 00:00:00 2001
From: Guillaume 
Date: Thu, 7 May 2026 16:24:43 +0200
Subject: [PATCH 130/229] [css-shapes-1][editorial] Add  to
  (#13894)

Oversight in #9727.
---
 css-shapes-1/Overview.bs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css-shapes-1/Overview.bs b/css-shapes-1/Overview.bs
index 163ebef8ad7b..ab9d65831346 100644
--- a/css-shapes-1/Overview.bs
+++ b/css-shapes-1/Overview.bs
@@ -331,7 +331,7 @@ Basic Shapes
 	can be specified using basic shape functions.
 
 	
    -		<> = <> | <> | <> |  <> | <>
+		<> = <> | <> | <> |  <> | <> | <>
 	
    
 
 	When using this syntax

From 4aa79545565f7305730d65376f3cca7423807443 Mon Sep 17 00:00:00 2001
From: "L. David Baron" 
Date: Thu, 7 May 2026 10:36:03 -0400
Subject: [PATCH 131/229] [css-navigation-1] Add stub definitions for
 @navigation (phase: loading | ready | committed).

---
 css-navigation-1/Overview.bs | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/css-navigation-1/Overview.bs b/css-navigation-1/Overview.bs
index e4592a7873c4..93bf0b5c4264 100644
--- a/css-navigation-1/Overview.bs
+++ b/css-navigation-1/Overview.bs
@@ -319,7 +319,8 @@ with <> defined as:
 <> = ( <> ) | ( <> ) | <>
 <> = <> |
                     <> |
-                    <>
+                    <> |
+                    <>
 
 <> = <> : <>
 <> = at | with | from | to
@@ -329,6 +330,9 @@ with <> defined as:
 
 <> = history : <>
 <> = traverse | back | forward | reload
+
+<> = phase : <>
+<> = loading | ready | committed
 
    
 
 ISSUE: Should we use ''at''/''with''/''from''/''to'' or ''current''/''other''/''from''/''to''?
@@ -406,6 +410,16 @@ as follows:
     : history: reload
     :: True if the [=current navigation type=] is {{NavigationType/reload}}.
 
+: <>
+::    : phase: loading
+    :: ISSUE: Needs to be defined.
+    : phase: ready
+    :: ISSUE: Needs to be defined.
+
+        NOTE: Only applies to cross-document navigations.
+    : phase: committed
+    :: ISSUE: Needs to be defined.
+
 : <>
 ::
     The result is false.

From cb6bac6a79935ac8f091437bfca3d9d68652b8bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=80=E4=B8=9D?= 
Date: Fri, 8 May 2026 05:55:40 +0800
Subject: [PATCH 132/229] [css-color-5] Change the computed value of
 `light-dark()` none from `linear-gradient(transparent)` to
 `image(transparent)` (#13897)

* Change the computed value of `light-dark()` none from `linear-gradient(transparent)` to `image(transparent)`

* Apply suggestion from @tabatkins

---------

Co-authored-by: Tab Atkins Jr. 
---
 css-color-5/Overview.bs  | 17 +++++++++--------
 css-images-4/Overview.bs |  6 +++++-
 css-images-5/Overview.bs |  6 +++++-
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs
index bf19e51b54b3..7936e50df33b 100644
--- a/css-color-5/Overview.bs
+++ b/css-color-5/Overview.bs
@@ -2808,15 +2808,10 @@ or any other color or monochrome output device which has been characterized.
 	if the used color scheme is ''light'' or unknown,
 	or the second image,
 	if the used color scheme is ''dark''.
-	The none keyword 
-	produces a fully transparent image 
-	with no natural size. 
 
-	It is equivalent to a single-stop gradient whose stop color is ''transparent''':
-
-	
    -		linear-gradient(transparent)
-	
    
+	The none keyword 
+	computes to ''image(transparent)''
+	(a fully transparent image with no natural size).
 
 	
    
 		For example, to maintain a legible contrast on links,
@@ -2866,6 +2861,12 @@ or any other color or monochrome output device which has been characterized.
 			
     				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));
+			
    
 		
    
 
 	
diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
index b5a087a1ca0e..632e9fd495ac 100644
--- a/css-images-4/Overview.bs
+++ b/css-images-4/Overview.bs
@@ -395,7 +395,11 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 		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");
    
+
+		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.
diff --git a/css-images-5/Overview.bs b/css-images-5/Overview.bs
index cedc19fed8dd..d66fb4492568 100644
--- a/css-images-5/Overview.bs
+++ b/css-images-5/Overview.bs
@@ -201,7 +201,11 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 		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");
    
+
+		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.

From ed21afd9437133fd448a7146012cd2753cc8c16d Mon Sep 17 00:00:00 2001
From: "Tab Atkins Jr." 
Date: Thu, 7 May 2026 14:59:23 -0700
Subject: [PATCH 133/229] [css-color-adjust-1] Rework color scheme stuff to
 reflect f2f resolutions (#13857)

* [css-color-adjust-1] Rework the color-scheme section to use the concepts of 'page color scheme' and 'element color scheme', deferring as much as possible to the page color scheme, in preparation for adjusting the behavior of the MQ. #13377

* [css-color-adjust-1] Move and fix up examples. #13377

* [css-color-adjust-1][mediaqueries-5] Specify that *all* embedded documents use the embedding element's color scheme. #7213 #7493

* [mediaqueries-5] Switch (prefers-color-scheme) to use the page color scheme. Add (ua-color-scheme) to reflect the user's actual preference. #13377

* [css-color-4][css-color-5] Use the new correct term for an element's color scheme.

* [css-color-5][editorial] Fix indentation.

* ws
---
 css-color-4/Overview.bs        |   2 +-
 css-color-5/Overview.bs        |  66 +++---
 css-color-adjust-1/Overview.bs | 417 ++++++++++++++++++++-------------
 mediaqueries-5/Overview.bs     | 119 ++++++----
 4 files changed, 363 insertions(+), 241 deletions(-)

diff --git a/css-color-4/Overview.bs b/css-color-4/Overview.bs
index 44af1dc168b4..4d2f44d2c4c7 100644
--- a/css-color-4/Overview.bs
+++ b/css-color-4/Overview.bs
@@ -1927,7 +1927,7 @@ System Colors
 
 	To maintain legibility,
 	the <> keywords also respond to
-	the [=used color scheme=].
+	the [=element color scheme=].
 
 
 	
    
 
 	For the color form, this function computes to the computed value of the first color,
-	if the used color scheme is ''light'' or unknown,
+	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 used color scheme is ''light'' or unknown,
+	if the element color scheme is ''light'',
 	or the second image,
-	if the used color scheme is ''dark''.
+	if the element color scheme is ''dark''.
 
 	The none keyword 
 	computes to ''image(transparent)''
@@ -2833,41 +2833,41 @@ or any other color or monochrome output device which has been characterized.
 		is used in dark mode.
 		(WCAG contrast 13.28:1, AAA pass).
 
-			
    
-			
     Legible link text
    
-			
     Illegible link text
    
-			
     Legible link text
    
-			
    
+		
    
+		
     Legible link text
    
+		
     Illegible link text
    
+		
     Legible link text
    
 		
    
+	
 
-		
    
-			For example, to provide easily visible list bullets
-			for light mode and dark mode:
+	
    
+		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")
-				);
-			}
-		
    
-		
    
+		
    +		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. 
+	
    
+		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);
-			
    
+		
    +			background-image: light-dark(url(my-light-image.png), none);
+		
    
 
-			This is equivalent to:
+		This is equivalent to:
 
-			
    -				background-image: light-dark(url(my-light-image.png), image(transparent));
-			
    
-		
    
+		
    +			background-image: light-dark(url(my-light-image.png), image(transparent));
+		
    +	
    
 
 	
 
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/mediaqueries-5/Overview.bs b/mediaqueries-5/Overview.bs
index 8e887c8c4649..31fdda46b7a7 100644
--- a/mediaqueries-5/Overview.bs
+++ b/mediaqueries-5/Overview.bs
@@ -3143,26 +3143,25 @@ Detecting the desire for light or dark color schemes: the '@media/prefers-color-
 	Type: discrete
    - The '@media/prefers-color-scheme' media feature reflects the user's - desire that the page use a light or dark color theme. + The '@media/prefers-color-scheme' media feature reflects + the user's desire that the page use a [=light color scheme|light=] or [=dark color scheme=].
    light
    - Indicates that user has expressed the preference for - a page that has a light theme (dark text on light background), - or has not expressed an active preference - (and thus should receive the "web default" of a light theme). + Indicates that the [=page color scheme=] + is a [=light color scheme=] + (dark text on light background).
    dark
    - Indicates that user has expressed the preference for - a page that has a dark theme (light text on dark background). + Indicates that the [=page color scheme=] + is a [=dark color scheme=] + (light text on dark background).
    Note: The values for this feature might be expanded in the future - (to express a more active preference for light color schemes, - or preferences for other types of color schemes like "sepia"). + (to express preferences for other types of color schemes like "sepia"). As such, the most future-friendly way to use this media feature is by negation such as ''(prefers-color-scheme: dark)'' and ''(not (prefers-color-scheme: dark))'', which ensures that new values fall into at least one of the styling blocks. @@ -3181,40 +3180,67 @@ Detecting the desire for light or dark color schemes: the '@media/prefers-color- so that '@media/prefers-color-scheme' reflects preferences appropriate to the medium rather than preferences taken out of context. - If evaluated in an embedded SVG document - using the "Secure Animated" embedding mode, - the preferred color scheme must reflect the value of the [=used color scheme=] - on the embedding node in the embedding document. - -
    - Why do this? - - While the outermost document needs to get the user's preference directly, - it's more useful for an embedded document - to use the color scheme of its surrounding embedding context, - so it matches the surrounding content. - - However, this enables communication - from the embedding document to the embedded document, - so it's currently restricted to SVG's - using the "Secure Animated" mode, - which can't load external resources - or run script, - and thus can't respond to the color scheme - in any way observable to the outside world. - - Whether or not to do similar for iframes, - and under what conditions, - is being discussed in - Issue 7213. -
    + + prefers-color-scheme-svg-as-image.html + prefers-color-scheme-svg-image-normal-with-meta-dark.html + prefers-color-scheme-svg-image-normal-with-meta-light.html + prefers-color-scheme-svg-image-normal.html + prefers-color-scheme-svg-image.html + prefers-color-scheme.html + + +

    +Detecting Specifically the User's Preferred Color Scheme: the '@media/ua-prefers-color-scheme' feature

    + + 
    +	Name: ua-color-scheme
+	Value: light | dark
+	For: @media
+	Type: discrete
+
    + + The '@media/prefers-color-scheme' media query reflects the [=page color scheme=], + which will generally reflect a user's [=preferred color scheme=], + but might not if the page overrides that. + (This is often done at the user's behest, + with a page-specific light/dark-mode toggle + to implement a user's desire for a particular page or origin + to render light or dark, + regardless of their general color scheme preference.) + Also, embedded documents such as iframes + automatically match the color scheme of the parent document + rather than the user's preference. + + There are some use-cases for nevertheless detecting the user's actual general preference, + and the '@media/ua-color-scheme' [=media feature=] reflects that, + ignoring the effect of anything on the page, + the effects of being an embedded document, + etc. + +
    +
    light +
    + Indicates that the user's [=preferred color scheme=] + is a [=light color scheme=] + (dark text on light background), + or that the user has no preference. + + (If the user has not expressed an active preference, + they will also receive the "web default" of a light theme). + +
    dark +
    + Indicates that the user's [=preferred color scheme=] + is a [=dark color scheme=] + (light text on dark background). +
    This feature, like the other 'prefers-*' features, previously had a no-preference value - to indicate an author not expressing an active preference. + to indicate a user not expressing an active preference. However, user agents converged on expressing the "default" behavior - as a ''light'' preference, + as a [=light color scheme=] preference, and never matching no-preference. If a future user agent wishes to expose a difference @@ -3222,14 +3248,9 @@ Detecting the desire for light or dark color schemes: the '@media/prefers-color- please contact the CSSWG to discuss this.
    - - prefers-color-scheme-svg-as-image.html - prefers-color-scheme-svg-image-normal-with-meta-dark.html - prefers-color-scheme-svg-image-normal-with-meta-light.html - prefers-color-scheme-svg-image-normal.html - prefers-color-scheme-svg-image.html - prefers-color-scheme.html - + Issue: The CSSWG has not officially decided on a name for this feature, + and so it might change in the future. +

    Detecting the desire for reduced data usage when loading a page: the '@media/prefers-reduced-data' feature

    @@ -3398,8 +3419,8 @@ This is modeled after the [[#prefers-color-scheme]]. The get valid values for colorScheme algorithm, when invoked, must run these steps: 1. Let |validValues| be a new empty [=sequence=]. - 1. Add ''light'' to |validValues|. - 1. Add ''dark'' to |validValues|. + 1. Add "light" to |validValues|. + 1. Add "dark" to |validValues|. 1. Return |validValues|. From 8102aa683ccd431b904d2933bf5abb0149ce84df Mon Sep 17 00:00:00 2001 From: Callum Law Date: Sat, 9 May 2026 06:32:40 +1200 Subject: [PATCH 134/229] [css-values-4] Properly handle simplification of sum nodes containing negated sum nodes #13020 (#13069) * [css-values-4] Remove erroneous tag * [css-values-4] Properly handle simplification of sum nodes containing negated sum nodes #13020 A WPT test already exists in the form of css/css-values/calc-nesting-002.html * ws --------- Co-authored-by: Tab Atkins Jr. --- css-values-4/Overview.bs | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/css-values-4/Overview.bs b/css-values-4/Overview.bs index 1eb0c4b037b3..50a1b14b87e1 100644 --- a/css-values-4/Overview.bs +++ b/css-values-4/Overview.bs @@ -4937,7 +4937,28 @@ Simplification (0 - value). 2. If |root|'s child is a Negate node, return the child's child. - 3. Return |root|. + 3. If |root|'s child is a Sum node: + + 1. Let |negated grandchildren| be an empty list + + 2. For each |grandchild| of the child's children: + + 1. If |grandchild| is a numeric value, + create an equivalent numeric value, + but with the value negated + (0 - value), + and append the result to |negated grandchildren|. + + 2. If |grandchild| is a Negate node + append |grandchild|'s child to |negated grandchildren| + + 3. Otherwise, + create a Negate node with |grandchild| as its child, + and append the result to |negated grandchildren| + + 3. Return a Sum node with |negated grandchildren| as its children + + 4. Return |root|. 7. If |root| is an Invert node: From c196082de8b8fe30e89f095d67e0262f084f35f8 Mon Sep 17 00:00:00 2001 From: fantasai Date: Fri, 8 May 2026 14:55:28 -0400 Subject: [PATCH 135/229] [css-values-4] Define snapping negative lengths as line width --- css-values-4/Overview.bs | 37 ++++++++++++++++++------------------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/css-values-4/Overview.bs b/css-values-4/Overview.bs index 50a1b14b87e1..de027cc305d2 100644 --- a/css-values-4/Overview.bs +++ b/css-values-4/Overview.bs @@ -1790,19 +1790,17 @@ Distance Units: the <> type (This algorithm is called by individual properties explicitly.)
    - To snap a length as a border width + To snap a length as a line width given a <> |len|: - 1. Assert: |len| is non-negative. - - 2. If |len| is an integer number of [=device pixels=], + 1. If |len| is an integer number of [=device pixels=], do nothing. - 3. If |len| is greater than zero, but less than 1 [=device pixel=], - round |len| up to 1 [=device pixel=]. + 2. If the absolute value of |len| is greater than zero, but less than 1 [=device pixel=], + round it away from zero to 1 [=device pixel=]. - 4. If |len| is greater than 1 [=device pixel=], - round it down to the nearest integer number of [=device pixels=]. + 4. If the absolute value of |len| is greater than 1 [=device pixel=], + round it towards zero to the nearest integer number of [=device pixels=].

    @@ -3344,18 +3342,13 @@ Stepped Value Functions: ''round()'', ''mod()'', and ''rem()''

    :: Choose whichever of |lower B| and |upper B| that has the smallest absolute difference from 0. : line-width - :: If A is non-negative and B is omitted, - A is [=snapped as a border width=]. + :: If B is omitted, + A is [=snapped as a line width=]. - Otherwise, if A is non-negative and B is specified, - identical to ''/nearest'', + Otherwise round as for ''/nearest'', except that if one of |lower B| or |upper B| is zero, - always choose the non-zero one. - Then [=snap as a border width=]. - - Otherwise (A is negative), - identical to ''/nearest''. - (No snapping occurs.) + the non-zero one is chosen, + and the final result is [=snapped as a line width=]. If |lower B| would be zero, @@ -5671,6 +5664,12 @@ Recent Changes (This is a subset of [[#additions-L3]].) + Substantial changes since 12 March 2024 Working Draft: + * Adapt the [=snap as a line width=] algorithm to handle negative numbers. + (Issue 13795) + + ISSUE: Finish this list. + Substantial changes since 18 December 2023 WD: * Added the ''clamp()/none'' values to ''clamp()'', @@ -5719,7 +5718,7 @@ Recent Changes
    • Added [[#component-functions]] to formally define the way that [=functional notation=] syntaxes are defined. (Issue 2921) -
    • Added algorithm for [=snap as a border width=], +
    • Added algorithm for [=snap as a line width=], to reflect the interoperable rules for rendering consistent stroke widths. (Issue 5210)
    • Clarified grammar and [=computed value=] of ''mix()''. From d9675fd208d3a2e6c110a43946d5ac3c6748da0b Mon Sep 17 00:00:00 2001 From: fantasai Date: Fri, 8 May 2026 15:04:17 -0400 Subject: [PATCH 136/229] [css-values-4] Fix bad wording in identifier dfn #12982 --- css-values-4/Overview.bs | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/css-values-4/Overview.bs b/css-values-4/Overview.bs index de027cc305d2..2105f269e21e 100644 --- a/css-values-4/Overview.bs +++ b/css-values-4/Overview.bs @@ -668,9 +668,17 @@ Textual Data Types (which includes character set conversion and [[css-syntax-3#escaping|escaping]]). [[!UNICODE]] [[!CSS-SYNTAX-3]] + [=Strings=], denoted by <string>, + are sequences of characters representing arbitrary textual data. + When written literally, + they are delimited by double quotes or single quotes, + and correspond to the <> production. [[!CSS-SYNTAX-3]]. + CSS identifiers, generically denoted by <ident>, - consist of a sequence of characters conforming to the <> grammar. [[!CSS-SYNTAX-3]] + represent names, + and are written as an unquoted sequence of (potentially escaped) characters + corresponding to the <> grammar. [[!CSS-SYNTAX-3]] Identifiers cannot be quoted; otherwise they would be interpreted as strings. CSS properties accept two classes of [=CSS/identifiers=]: @@ -867,11 +875,11 @@ Prefixed Author-defined Identifiers: the <> type

      Quoted Strings: the <> type

      - [=Strings=] are denoted by <string>. + [=Strings=], denoted by <string>, + are sequences of characters representing arbitrary textual data. When written literally, - they consist of a sequence of characters delimited by double quotes or single quotes, - corresponding to the <> production - in the CSS Syntax Module [[!CSS-SYNTAX-3]]. + they are delimited by double quotes or single quotes, + and correspond to the <> production. [[!CSS-SYNTAX-3]].
      Double quotes cannot occur inside double quotes, unless From a15676f47ecc6838b555210f0f1e32c77dee8239 Mon Sep 17 00:00:00 2001 From: fantasai Date: Fri, 8 May 2026 16:54:12 -0400 Subject: [PATCH 137/229] [css-values-5] Clarify coordinated list shorthand serialization #13500 --- css-values-4/Overview.bs | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/css-values-4/Overview.bs b/css-values-4/Overview.bs index 2105f269e21e..28484012bedd 100644 --- a/css-values-4/Overview.bs +++ b/css-values-4/Overview.bs @@ -5502,7 +5502,7 @@ Appendix A: Coordinating List-Valued Properties these are used together to define a single effect, such as a background image layer or an animation. - The [=coordinated value list=] is assembled as follows: + The [=used value|used=] [=coordinated value list=] is assembled as follows: * The length of the [=coordinated value list=] is determined by the number of items specified in one particular [=coordinating list property=], @@ -5521,6 +5521,24 @@ Appendix A: Coordinating List-Valued Properties * The [=computed values=] of the [=coordinating list properties=] are not affected by such truncation or repetition. +
      + A shorthand that represents a [=coordinated value list=] + as a single list collecting corresponding values into each item + cannot represent [=coordinating list property=] longhands + that have varying list lengths in their values. + Thus, if any longhands have mismatched list lengths + (excepting any longhands that have their initial value, + and thus can be omitted from the shorthand syntax), + the CSSOM representation of the shorthand's value will return the empty string. + +

      In the 'background' shorthand, + the first value in the list combines the first values from 'background-image', 'background-position, 'background-attachment', etc; + the second value combines the second values; and so on. + This syntax can only represent its longhands when they have equal-length lists + (or are their initial value); + if the longhands are individually set to different lengths, + the CSSOM representation of 'background' is just "" (the empty string). +

      Appendix B: IANA Considerations

      From f07719abd3175dcb85601392681a2e17dfea4dcb Mon Sep 17 00:00:00 2001 From: fantasai Date: Fri, 8 May 2026 17:11:13 -0400 Subject: [PATCH 138/229] [css-overflow-3] Update intro --- css-overflow-3/Overview.bs | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/css-overflow-3/Overview.bs b/css-overflow-3/Overview.bs index 7b02a033ee6c..d294469ef626 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]], From 0a14f0297342e59dd7aaef199390d1b13993df9e Mon Sep 17 00:00:00 2001 From: fantasai Date: Fri, 8 May 2026 17:27:58 -0400 Subject: [PATCH 139/229] [css-overflow-3] overflow propagation only applies to 'overflow' longhands, move section --- css-overflow-3/Overview.bs | 64 ++++++++++++++++++-------------------- 1 file changed, 31 insertions(+), 33 deletions(-) diff --git a/css-overflow-3/Overview.bs b/css-overflow-3/Overview.bs index d294469ef626..abd5ceab9617 100644 --- a/css-overflow-3/Overview.bs +++ b/css-overflow-3/Overview.bs @@ -619,6 +619,37 @@ 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

      @@ -677,39 +708,6 @@ Expanding Clipping Bounds: the 'overflow-clip-margin' property It now also affects [=scroll containers=], but only to shrink the clipping edge. - -

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

      Smooth Scrolling: the 'scroll-behavior' Property

      From 6dc4b57ae2549cd1fe1a58ca3431ec9d1c59f5c1 Mon Sep 17 00:00:00 2001 From: fantasai Date: Fri, 8 May 2026 17:35:15 -0400 Subject: [PATCH 140/229] [css-overflow-3] Make new subsection for scroll-behavior and friends --- css-overflow-3/Overview.bs | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/css-overflow-3/Overview.bs b/css-overflow-3/Overview.bs index abd5ceab9617..9a72ae1d9c1d 100644 --- a/css-overflow-3/Overview.bs +++ b/css-overflow-3/Overview.bs @@ -708,6 +708,18 @@ Expanding Clipping Bounds: the 'overflow-clip-margin' property It now also affects [=scroll containers=], but only to shrink the clipping edge. +

      +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

      From bc4cffe1c9b2f785f9cddf93f397db034715d7ab Mon Sep 17 00:00:00 2001 From: fantasai Date: Fri, 8 May 2026 17:41:35 -0400 Subject: [PATCH 141/229] [css-overflow-3] Move scrollable overflow details out from the intro --- css-overflow-3/Overview.bs | 218 +++++++++++++++++++------------------ 1 file changed, 111 insertions(+), 107 deletions(-) diff --git a/css-overflow-3/Overview.bs b/css-overflow-3/Overview.bs index 9a72ae1d9c1d..350e4217d3e2 100644 --- a/css-overflow-3/Overview.bs +++ b/css-overflow-3/Overview.bs @@ -216,110 +216,7 @@ Scrollable Overflow scrollable overflow rectangle is the minimal rectangle whose axes are aligned to the box's axes and that contains the scrollable overflow area. - - The scrollable overflow area is the union of: -
        -
      • - The [=scroll container=]’s own [=padding box=]. - -
      • - All [=line boxes=] directly contained by the [=scroll container=]. - -
      • - The border boxes - of all boxes for which it is the containing block - and whose border boxes are positioned not wholly - in the [=unreachable scrollable overflow region=], - 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 areas of all of the above boxes - (including zero-area boxes - and accounting for transforms as described above), - provided they themselves have ''overflow: visible'' - (i.e. do not themselves trap the overflow) - and that scrollable overflow is not already clipped - (e.g. by the 'clip' property or the 'contain' property). - - Note: The 'mask-*' properties [[!CSS-MASKING-1]] - do not affect the scrollable overflow area. - - ISSUE(8607): Need to evaluate what should/should not clip [=scrollable overflow=]. - -
      • - 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]] - - + See [[#scrollable-overflow-calculation]] for details. Note: The scrollable overflow rectangle is always a rectangle in the box's own coordinate system, but might be non-rectangular @@ -700,16 +597,123 @@ Expanding Clipping Bounds: the 'overflow-clip-margin' property * 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 ''border-box'' value - behaves as ''padding-box'' + * the ''overflow-clip-margin/border-box'' value + behaves as ''overflow-clip-margin/padding-box'' and ignores any specified offset. Note: This property was previously defined to only affect ''overflow: clip''. It now also affects [=scroll containers=], but only to shrink the clipping edge. +

      +Calculating the Scrollable Overflow Area

      + + The scrollable overflow area of a [=scroll container=] is the union of: +
        +
      • + The [=scroll container=]’s own [=padding box=]. + +
      • + All [=line boxes=] directly contained by the [=scroll container=]. + +
      • + The border boxes + of all boxes for which it is the containing block + and whose border boxes are positioned not wholly + in the [=unreachable scrollable overflow region=], + 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 areas of all of the above boxes + (including zero-area boxes + and accounting for transforms as described above), + provided they themselves have ''overflow: visible'' + (i.e. do not themselves trap the overflow) + and that scrollable overflow is not already clipped + (e.g. by the 'clip' property or the 'contain' property). + + Note: The 'mask-*' properties [[!CSS-MASKING-1]] + do not affect the scrollable overflow area. + + ISSUE(8607): Need to evaluate what should/should not clip [=scrollable overflow=]. + +
      • + 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

      +Scrolling Behaviors and Animations CSS provides several controls over how scrolling behaves when triggered. * CSS Scroll Snap allows defining "snap positions", From 912cac79ec0cbe713aa40662421a4800942d66d6 Mon Sep 17 00:00:00 2001 From: fantasai Date: Fri, 8 May 2026 18:02:49 -0400 Subject: [PATCH 142/229] [css-overflow-3][editorial] Improvements to scrolling terminology section structure --- css-overflow-3/Overview.bs | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/css-overflow-3/Overview.bs b/css-overflow-3/Overview.bs index 350e4217d3e2..fe0a36ec4ac9 100644 --- a/css-overflow-3/Overview.bs +++ b/css-overflow-3/Overview.bs @@ -234,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 its 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) @@ -262,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, @@ -290,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=]. From 83012c0bfbf18a13b4bc5373c27b89650739c7dd Mon Sep 17 00:00:00 2001 From: fantasai Date: Fri, 8 May 2026 18:03:11 -0400 Subject: [PATCH 143/229] [css-overflow-3] Add per-axis subtypes of scroll containers --- css-overflow-3/Overview.bs | 29 ++++++++++++++++++++++++----- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/css-overflow-3/Overview.bs b/css-overflow-3/Overview.bs index fe0a36ec4ac9..80049cb22d95 100644 --- a/css-overflow-3/Overview.bs +++ b/css-overflow-3/Overview.bs @@ -321,15 +321,34 @@ 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, + thus which of the following types of [=scroll container=] it is: + +
      +
      single-axis scroll container +
      + A [=scroll container=] that can scroll in only one axis. + +
      dual-axis scroll container +
      + A [=scroll container=] that can scroll in both axes. + +
      block-axis scroll container +
      inline-axis scroll container +
      x-axis scroll container +
      y-axis scroll container +
      + A [=scroll container=] that can scroll 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

From d59e6f8a7e81009d335038517defac39bd082e26 Mon Sep 17 00:00:00 2001
From: fantasai 
Date: Fri, 8 May 2026 18:40:48 -0400
Subject: [PATCH 144/229] [css-overflow-3] Allow single-axis scrollability
 #12289

---
 css-overflow-3/Overview.bs | 61 ++++++++++++++++++++++----------------
 1 file changed, 35 insertions(+), 26 deletions(-)

diff --git a/css-overflow-3/Overview.bs b/css-overflow-3/Overview.bs
index 80049cb22d95..44f1310bd665 100644
--- a/css-overflow-3/Overview.bs
+++ b/css-overflow-3/Overview.bs
@@ -235,7 +235,7 @@ Scrolling Overflow
 	coincides with its padding box,
 	and is called the scrollport.
 	A box’s nearest scroll container
-	is the its nearest [=scroll container=] ancestor in the [=containing block chain=].
+	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
@@ -325,24 +325,24 @@ 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,
+	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
+		
      single-axis scroll container
 		
      
-			A [=scroll container=] that can scroll in only one axis.
+			A [=scroll container=] that is scrollable in only one axis.
 
-		
      dual-axis scroll container
+		
      dual-axis scroll container
 		
      
-			A [=scroll container=] that can scroll in both axes.
+			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
+		
      block-axis scroll container
+		
      inline-axis scroll container
+		
      x-axis scroll container
+		
      y-axis scroll container
 		
      
-			A [=scroll container=] that can scroll in the specified axis,
+			A [=scroll container=] that is scrollable in the specified axis,
 			regardless of whether it can also scroll in the other axis.
 	
      
 
@@ -398,7 +398,6 @@ 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
 		
      
@@ -410,8 +409,7 @@ Managing Overflow: the 'overflow-x', 'overflow-y', and 'overflow' propertiesscroll container.
+			for example using the mechanisms defined in [[CSSOM-VIEW]].
 
 		
      clip
 		
      
@@ -422,8 +420,7 @@ 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.
@@ -435,8 +432,8 @@ Managing Overflow: the 'overflow-x', 'overflow-y', and 'overflow' properties
      
 			This value indicates that
 			the content is clipped to the [=overflow clip edge=],
-			but can be scrolled into view
-			(and therefore the box is a scroll container).
+			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
@@ -458,21 +455,28 @@ 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.
+	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=].
 
-	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.
-
 	User agents must also support
 	the overlay keyword
 	as a [=legacy value alias=] of ''overflow/auto''.
@@ -1334,6 +1338,11 @@ 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)
+
 	Significant changes since the 29 March 2023 Working Draft:
 
 	* Define that ''overflow: hidden'' is treated as ''overflow: clip'' on [=replaced elements=].

From f764ae34b63b8b493f6511abfe5bfd927d13ae79 Mon Sep 17 00:00:00 2001
From: fantasai 
Date: Fri, 8 May 2026 19:14:55 -0400
Subject: [PATCH 145/229] [css-overflow-3] Clarify effects of clipping on
 scrollable overflow #8607

---
 css-overflow-3/Overview.bs | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/css-overflow-3/Overview.bs b/css-overflow-3/Overview.bs
index 44f1310bd665..72f833032ea6 100644
--- a/css-overflow-3/Overview.bs
+++ b/css-overflow-3/Overview.bs
@@ -633,19 +633,19 @@ Expanding Clipping Bounds: the 'overflow-clip-margin' property
 
      
 Calculating the Scrollable Overflow Area
      
 
-	The scrollable overflow area of a [=scroll container=] is the union of:
+	The scrollable overflow area of a box is the union of:
 	
        
 		
      • 
-			The [=scroll container=]’s own [=padding box=].
+			Its own [=padding box=].
 
 		
      • 
-			All [=line boxes=] directly contained by the [=scroll container=].
+			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
-			in the [=unreachable scrollable overflow region=],
+			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]]
@@ -671,17 +671,14 @@ Calculating the Scrollable Overflow Area
 
 		
      • 
 			The scrollable overflow areas of all of the above boxes
-			(including zero-area boxes
-			and accounting for transforms as described above),
-			provided they themselves have ''overflow: visible''
-			(i.e. do not themselves trap the overflow)
-			and that scrollable overflow is not already clipped
-			(e.g. by the 'clip' property or the 'contain' property).
-
-			Note: The 'mask-*' properties [[!CSS-MASKING-1]]
-			do not affect the scrollable overflow area.
+			(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.
 
-			ISSUE(8607): Need to evaluate what should/should not clip [=scrollable overflow=].
+			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.
 
 		
      • 
 			Additional padding added

From 94d1c067304e80d462099e709ed9638d6d11c3d2 Mon Sep 17 00:00:00 2001
From: fantasai 
Date: Fri, 8 May 2026 19:18:10 -0400
Subject: [PATCH 146/229] [css-overflow-3] Move note about transforms to
 clarify its intent

---
 css-overflow-3/Overview.bs | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/css-overflow-3/Overview.bs b/css-overflow-3/Overview.bs
index 72f833032ea6..1bdd2368ab22 100644
--- a/css-overflow-3/Overview.bs
+++ b/css-overflow-3/Overview.bs
@@ -218,11 +218,6 @@ Scrollable Overflow
 	and that contains the scrollable overflow area.
 	See [[#scrollable-overflow-calculation]] for details.
 
-	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.
-
 
        
 Scrolling Overflow
        
 
@@ -670,7 +665,7 @@ Calculating the Scrollable Overflow Area
 			is therefore deferred in this draft.
 
 		
      • 
-			The scrollable overflow areas of all of the above boxes
+			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'',
@@ -680,6 +675,11 @@ Calculating the Scrollable Overflow Area
 			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=]

From 41ec95a8c5ea25f9c7190c1d2d625e947ee41924 Mon Sep 17 00:00:00 2001
From: fantasai 
Date: Fri, 8 May 2026 19:24:31 -0400
Subject: [PATCH 147/229] [css-overflow-3] overflow only applies to replaced
 elements in L4

---
 css-overflow-3/Overview.bs | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/css-overflow-3/Overview.bs b/css-overflow-3/Overview.bs
index 1bdd2368ab22..33bcc36480a4 100644
--- a/css-overflow-3/Overview.bs
+++ b/css-overflow-3/Overview.bs
@@ -468,14 +468,13 @@ Managing Overflow: the 'overflow-x', 'overflow-y', and 'overflow' propertiesoverlay 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'
        
 

From 53d6722b123cba9c9ac37e4ae1a78eb144ecd25f Mon Sep 17 00:00:00 2001
From: fantasai 
Date: Fri, 8 May 2026 19:31:25 -0400
Subject: [PATCH 148/229] [css-overflow-3] Clarify application to tables

---
 css-overflow-3/Overview.bs | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/css-overflow-3/Overview.bs b/css-overflow-3/Overview.bs
index 33bcc36480a4..5de3123cac55 100644
--- a/css-overflow-3/Overview.bs
+++ b/css-overflow-3/Overview.bs
@@ -124,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]]
+
 
 
 
 
        

From 33de10f1de526c572619abf7f16eea99d55ac5a5 Mon Sep 17 00:00:00 2001
From: Chris Lilley 
Date: Wed, 27 May 2026 16:09:26 -0400
Subject: [PATCH 175/229] [selectors-4][editorial] WPT

---
 selectors-4/Overview.bs | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/selectors-4/Overview.bs b/selectors-4/Overview.bs
index 16519be82156..6d1d764b2a8c 100644
--- a/selectors-4/Overview.bs
+++ b/selectors-4/Overview.bs
@@ -1679,12 +1679,14 @@ The Relational Pseudo-class: '':has()''
        
 		invalidation/defined-in-has.html
 		invalidation/dir-pseudo-class-in-has.html
 		invalidation/empty-pseudo-in-has.html
+		invalidation/empty-pseudo-in-has-display-none.html
 		invalidation/fullscreen-pseudo-class-in-has.html
 		invalidation/has-append-first-node.html
 		invalidation/has-complexity.html
 		invalidation/has-css-nesting-shared.html
 		invalidation/has-in-adjacent-position.html
 		invalidation/has-in-ancestor-position.html
+		invalidation/has-in-is-non-subject-compound.html
 		invalidation/has-in-parent-position.html
 		invalidation/has-in-sibling-position.html
 		invalidation/has-invalidation-after-removing-non-first-element.html
@@ -2956,6 +2958,7 @@ User Action Pseudo-classes
 
 
 	active-toplayer-001.html
+	active-after-relayouts.html
 	focus-within-toplayer-001.html
 	hover-toplayer-001.html
 	toplayer-transition-001.html
@@ -3230,6 +3233,7 @@ Media Playback State: the '':playing'', '':paused'', and '':seeking'' pseudo-cla
 	
 		media/media-playback-state.html
 		media/media-loading-state.sub.html
+		media/media-playing-paused-style-invalidation.html
 	
 
 	The :playing pseudo-class represents an element
@@ -3416,6 +3420,7 @@ The '':enabled'' and '':disabled'' Pseudo-classes
 
 	
 		invalidation/enabled-disabled.html
+		invalidation/option-disabled-when-ancestor-changes.html
 		pseudo-enabled-disabled.html
 	
 
@@ -3725,6 +3730,7 @@ Tree-Structural pseudo-classes
 
 	
 		selectors-empty-001.xml
+		invalidation/empty-pseudo-in-has-display-none.html
 	
 
 	The :empty pseudo-class represents

From d4cdbfe4913cbddd8ac603245651c19d0c2ccb3a Mon Sep 17 00:00:00 2001
From: Chris Lilley 
Date: Wed, 27 May 2026 16:19:02 -0400
Subject: [PATCH 176/229] [selectors-4][editorial] Removed At Risk: the column
 combinator as it is now in Selectors 5.

---
 selectors-4/Overview.bs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/selectors-4/Overview.bs b/selectors-4/Overview.bs
index 6d1d764b2a8c..1c5b5d28cedc 100644
--- a/selectors-4/Overview.bs
+++ b/selectors-4/Overview.bs
@@ -23,7 +23,6 @@ Former Editor: Peter Linss
 Former Editor: John Williams
 Abstract: Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in a document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code. They are a core component of CSS (Cascading Style Sheets), which uses Selectors to bind style properties to elements in the document.
 Abstract: Selectors Level 4 describes the selectors that already exist in [[!SELECT]], and further introduces new selectors for CSS and other languages that may need them.
-At Risk: the column combinator
 At Risk: [=user action pseudo-classes=] applying to non-[=tree-abiding pseudo-elements=]
 Ignored Terms: function token, Document, DocumentFragment, math, h1, shadow tree, querySelector(), quirks mode, button, a, span, object, p, div, q, area, link, label, input, html, em, li, ol, pre, CSS Value Definition Syntax
 Ignored Vars: identifier, i

From c41c832335f2580d656831d27a2d18394106c470 Mon Sep 17 00:00:00 2001
From: Chris Lilley 
Date: Wed, 27 May 2026 16:37:07 -0400
Subject: [PATCH 177/229] [selectors-4][editorial] Update changes since Jan
 2026 WD

---
 selectors-4/Overview.bs | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/selectors-4/Overview.bs b/selectors-4/Overview.bs
index 1c5b5d28cedc..5326c40b9371 100644
--- a/selectors-4/Overview.bs
+++ b/selectors-4/Overview.bs
@@ -5153,6 +5153,32 @@ while still preserving as much of the usefulness of '':visited'' as pos
 
        
 Changes
        
 
+
        
+Changes since the 22 January 2026 Working Draft
+
        
+
+	Significant changes since the 
+	22 January 2026
+	Working Draft:
+
+	* Used infra terminology for ascii case insentivity 
+		( Issue13427)
+	* Responded to review feedback on BCP 47 language codes
+		(Issue 13647)
+	* Added example showing the difference between general case-insensitivity 
+		and strict ASCII case insensitivity
+		(Issue 13645)
+	* Defined language range as BCP 47 extended language range
+		(Issue 13646)
+	* Changed introductory :lang example from (zh, "*-hant") to (sr, "*-Cyrl")
+		(Issue 13644)
+	* Moved the column combinator to Selectors 5
+	* Clarified that language codes must be well-formed to match
+		(Issue 8720)
+	* Reworded constraints on language ranges
+		(Issue 8720)
+	
+
 
        
 Changes since the 11 November 2022 Working Draft
        
 

From a346e6dc30f9cbd053515eac2944337921728c2a Mon Sep 17 00:00:00 2001
From: Chris Lilley 
Date: Wed, 27 May 2026 16:45:40 -0400
Subject: [PATCH 178/229] typo

---
 selectors-4/Overview.bs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selectors-4/Overview.bs b/selectors-4/Overview.bs
index 5326c40b9371..b7ebb62786ae 100644
--- a/selectors-4/Overview.bs
+++ b/selectors-4/Overview.bs
@@ -5185,7 +5185,7 @@ Changes since the 11 November 2022 Working Draft
 	Significant changes since the 11 November 2022 Working Draft:
 
 	* Defined language range as BCP 47 extended language range
-		(Issue  13646>)
+		(Issue  13646)
 	* Removed the at-risk status from '':read-write'' and '':has()''
 	* Added '':popover-open'' pseudo-class.
 		(Issue 8637)

From 4f2b1f13312d48dc362e4c37f3ce29cb7183c093 Mon Sep 17 00:00:00 2001
From: Chris Lilley 
Date: Wed, 27 May 2026 16:47:41 -0400
Subject: [PATCH 179/229] spelling

---
 selectors-4/Overview.bs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/selectors-4/Overview.bs b/selectors-4/Overview.bs
index b7ebb62786ae..3c66770acee6 100644
--- a/selectors-4/Overview.bs
+++ b/selectors-4/Overview.bs
@@ -5161,7 +5161,7 @@ Changes since the 22 January 2026 Working Draft
 	22 January 2026
 	Working Draft:
 
-	* Used infra terminology for ascii case insentivity 
+	* Used infra terminology for ascii case insensitivity 
 		( Issue13427)
 	* Responded to review feedback on BCP 47 language codes
 		(Issue 13647)

From bb56a2074f3c36661fe82c15e0afb0453ccef86c Mon Sep 17 00:00:00 2001
From: Koji Ishii 
Date: Thu, 28 May 2026 17:23:41 +0900
Subject: [PATCH 180/229] [css-sizing-4] Update responsive-iframes-explainer.md
 (#13961)

Replaced `X-Frame-Options` with `Content-Security-Policy` for the [feedback].

Also updated the CSS property to the resolved one.

[feedback]: https://groups.google.com/a/chromium.org/g/blink-dev/c/zBx_uoW7jRQ/m/Ilm304IyBQAJ
---
 css-sizing-4/responsive-iframes-explainer.md | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

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 `