From 10673a6c1597fde551c1b884ca310e7ed1395ea3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20REMY?= Date: Wed, 31 May 2023 18:13:37 +0200 Subject: [PATCH 01/36] Fix typo cc @khushalsagar --- css-view-transitions-1/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index df28624aa60c..7bcf10db01d3 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -1791,7 +1791,7 @@ Changes from 2022-11-24 Working Draft -* Pointer events resolve to the documentElememt when rendering is suppressed. See issue 7797. +* Pointer events resolve to the documentElement when rendering is suppressed. See issue 7797. * Add rendering constraints to elements participating in a transition. See issue 8139 and issue 7882. * Remove html specifics from UA stylesheet to support ViewTransitions on SVG Documents. * Rename updateDOMCallback to {{UpdateCallback}}. See issue 8144. From 085903da4ea8bfa4303a2c06c40d31cc7c4dc359 Mon Sep 17 00:00:00 2001 From: fantasai Date: Wed, 31 May 2023 15:37:41 -0400 Subject: [PATCH 02/36] [css-view-transitions-1] curly quotes --- css-view-transitions-1/Overview.bs | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index 7bcf10db01d3..ed91e378036d 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -155,7 +155,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; 1. Developer calls document.{{Document/startViewTransition}}({{UpdateCallback|updateCallback}}), which returns viewTransition, a {{ViewTransition}}. - 1. Current state captured as the "old" state. + 1. Current state captured as the “old” state. 1. Rendering paused. @@ -164,7 +164,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; 1. viewTransition.{{ViewTransition/updateCallbackDone}} fulfills. - 1. Current state captured as the "new" state. + 1. Current state captured as the “new” state. 1. Transition pseudo-elements created. See [[#view-transition-pseudos]] for an overview of this structure. @@ -337,7 +337,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; } ``` - By default, these groups will transition size and position from their "old" to "new" state, + By default, these groups will transition size and position from their “old” to “new” state, while their visual states cross-fade:
@@ -352,7 +352,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
- In this case, things would look better if the sidebar was static if it was in both the "old" and "new" states. + In this case, things would look better if the sidebar was static if it was in both the “old” and “new” states. Otherwise, it should animate in or out. The '':only-child'' pseudo-class can be used to create animations specifically for these states: @@ -379,7 +379,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; } ``` - For cases where the sidebar has both an "old" and "new" state, the default animation is correct. + For cases where the sidebar has both an “old” and “new” state, the default animation is correct.
@@ -391,7 +391,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; let's say we wanted to create a circular reveal from the user's cursor. This can't be done with CSS alone. - Firstly, in the CSS, allow the "old" and "new" states to layer on top of one another without the default blending, + Firstly, in the CSS, allow the “old” and “new” states to layer on top of one another without the default blending, and prevent the default cross-fade animation: ```css @@ -491,7 +491,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; Note: This property causes the user-agent to both capture separate snapshots from the elements, - as well as create separate pseudo-element sub-trees representing this element's "old" and "new" states. + as well as create separate pseudo-element sub-trees representing this element's “old” and “new” states. For the purposes of this API, if one element has a transition-name "foo" in the old state, and another element has a transition-name "foo" in the new state, they are treated as representing different visual state of the same element. @@ -595,7 +595,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; ## View transition pseudo-elements ## {#view-transition-pseudos}
- Once the user-agent has captured both the "old" and "new" states of the document, + Once the user-agent has captured both the “old” and “new” states of the document, it creates a structure of pseudo-elements like the following: ``` @@ -612,7 +612,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; For convenience, the [=document element=] is given the 'view-transition-name' "root" in the [[#ua-styles|user-agent style sheet]]. - Either ''::view-transition-old()'' or ''::view-transition-new()'' are absent in cases where the capture does not have an "old" or "new" state. + Either ''::view-transition-old()'' or ''::view-transition-new()'' are absent in cases where the capture does not have an “old” or “new” state. Each of the pseudo-elements generated can be targeted by CSS in order to customize its appearance, behavior and/or add animations. @@ -646,11 +646,11 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; ### ::view-transition-group( <> ) ### {#::view-transition-group}
- This element initially mirrors the size and position of the "old" element, - or the "new" element if there isn't an "old" element. + This element initially mirrors the size and position of the “old” element, + or the “new” element if there isn't an “old” element. It is always a [=tree/child=] of a ''::view-transition''. - If there's both an "old" and "new" state, + If there's both an “old” and “new” state, styles in the [=document/view transition style sheet=] animate this pseudo-element's 'width' and 'height' from the size of the old element's [=border box=] to that of the new element's [=border box=]. @@ -709,11 +709,11 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
- This element is a replaced element that produced the visual representation of the "old" state taken from user-agent provided snapshots. + This element is a replaced element that produced the visual representation of the “old” state taken from user-agent provided snapshots. This is only ever a [=tree/child=] of a ''::view-transition-image-pair()'', never has any [=tree/children=], - and is omitted if there's no "old" state to represent. + and is omitted if there's no “old” state to represent. '':only-child'' can be used to match cases where this element is the only element in the ''::view-transition-image-pair()''. From 8ce38ded42e72129befbf475c5bb4551babe2461 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Thu, 1 Jun 2023 12:26:48 -0400 Subject: [PATCH 03/36] [css-color-4] Back-port Color 5 HWB number-percent to Color 4, fix #8322 --- css-color-4/Overview.bs | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/css-color-4/Overview.bs b/css-color-4/Overview.bs index 9cc7f7b96b9d..3b69d6d9ae91 100644 --- a/css-color-4/Overview.bs +++ b/css-color-4/Overview.bs @@ -2516,9 +2516,26 @@ HWB Colors: ''hwb()'' function The syntax of the ''hwb()'' function is: 
-		hwb() = hwb( [<> | none] [<> | none] [<> | none] [ / [<> | none] ]? )
+		hwb() = hwb( 
+			[<> | none] 
+			[<> | <> | none] 
+			[<> | <> | none] 
+			[ / [<> | none] ]? )
+ + + + + + + + + +
PercentagesAllowed for W and B
Percent reference range  + for W and B: 0% = 0.0, 100% = 100.0 +
+ The first argument specifies the hue, and is interpreted identically to ''hsl()''. From e15cda1429b6f07e11e9be6fee93fc52f340f5b9 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Thu, 1 Jun 2023 12:33:10 -0400 Subject: [PATCH 04/36] [css-color-4][editorial] wpt updates --- css-color-4/Overview.bs | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/css-color-4/Overview.bs b/css-color-4/Overview.bs index 3b69d6d9ae91..6f0a6d6befe4 100644 --- a/css-color-4/Overview.bs +++ b/css-color-4/Overview.bs @@ -1805,6 +1805,7 @@ System Colors parsing/color-valid.html system-color-compute.html + system-color-hightlights-vs-getSelection-001.html Note: As with all other [=CSS/keywords=], @@ -3130,6 +3131,8 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations lab-006.html lab-007.html lab-008.html + lab-l-over-100-1.html + lab-l-over-100-2.html parsing/color-valid.html parsing/color-computed-lab.html parsing/color-invalid-lab.html @@ -3205,6 +3208,8 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations lch-008.html lch-009.html lch-010.html + lch-l-over-100-1.html + lch-l-over-100-2.html parsing/color-valid.html @@ -3293,6 +3298,7 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations oklab-006.html oklab-007.html oklab-008.html + oklab-009.html parsing/color-valid.html @@ -3368,6 +3374,7 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations oklch-008.html oklch-009.html oklch-010.html + oklch-011.html parsing/color-valid.html @@ -5169,10 +5176,6 @@ CSS Gamut Mapping to an RGB Destination It implements a relative colorimetric intent, and colors inside the destination gamut are unchanged. - - parsing/gamut-mapping.html - - Note: other situations, in particular mapping to printer gamuts where the maximum black level is significantly above zero, @@ -6423,6 +6426,7 @@ Emilio Cobos Álvarez, Chris Bai, Amelia Bellamy-Royds, Lars Borg, Mike Bremford at-color-profile-001.html color-mix-currentcolor-001.html color-mix-currentcolor-002.html +color-mix-currentcolor-003.html color-contrast-001.html color-mix-basic-001.html color-mix-non-srgb-001.html @@ -6499,6 +6503,7 @@ animation/opacity-interpolation.html color-mix-basic-001.html nested-color-mix-with-currentcolor.html +parsing/color-mix-out-of-gamut.html parsing/color-invalid.html parsing/color-computed-color-mix-function.html parsing/color-invalid-color-mix-function.html From bc7614013238f6f0b16b21463c6af9975a0a583c Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 1 Jun 2023 20:13:50 +0300 Subject: [PATCH 05/36] [css-view-transitions-1][css-viewport] Resolve a few missing types (#8901) * Update date for publishing * Define missing types * Remove all view-box stuff --- css-view-transitions-1/Overview.bs | 114 +++++++++-------------------- css-viewport/Overview.bs | 2 +- 2 files changed, 35 insertions(+), 81 deletions(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index ed91e378036d..301a36322a8a 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -4,7 +4,7 @@ Shortname: css-view-transitions Level: 1 Status: WD Group: csswg -Date: 2023-05-29 +Date: 2023-05-30 Prepare for TR: yes ED: https://drafts.csswg.org/css-view-transitions-1/ TR: https://www.w3.org/TR/css-view-transitions-1/ @@ -785,10 +785,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; ## The snapshot containing block ## {#snapshot-containing-block-concept} The snapshot containing block is a rectangle that covers all areas of the window that could potentially display web content. - This area is consistent regardless of root scrollbars or interactive widgets. - - Issue: "Interactive widgets" refers to UI described within a property definition in [[css-viewport#interactive-widget-section]]. - This should be extracted into an exported definition that can be used independently of the property. + This area is consistent regardless of root scrollbars or [=interactive-widget|interactive widgets=].
A diagram of a phone screen, including a top status bar, a browser URL bar, web-content area with a floating scrollbar, a virtual keyboard, and a bottom bar with an OS back button @@ -833,28 +830,33 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; The [=view-transition layer=] is a sibling of this stacking context. - The [=view-transition layer=] paints after the stacking context for the [=document element=] and [/=document=]'s [=Document/top layer=]. + This includes the filters and effects that are applied to the [=document element=]. Note: The intent of the feature is to be able to capture the contents of the page, which includes the top layer elements. In order to accomplish that, the [=view-transition layer=] cannot be a part of the captured top layer context, since that results in a circular dependency. Instead, this stacking context is a sibling of other page contents. - Issue: Do we need to clarify that the stacking context for the root and top layer elements has filters and effects coming from the [=document element=]'s style? - ## [=Captured elements=] ## {#captured-elements} A captured element is a [=struct=] with the following:
: old image - :: an image or null. Initially null. + :: an {{ImageData}} or null. Initially null. - Issue: The type of "image" needs to be linked or defined. + : old width + : old height + :: an {{unrestricted double}}, initially zero. - : old styles - :: a set of styles or null. Initially null. + : old transform + :: a <transform-function>, initially the [=identity transform function=]. - Issue: The type of "a set of styles" needs to be linked or defined. + : old writing-mode + :: Null or a 'writing-mode', initially null. + + : old direction + :: Null or a 'direction', initially null. : new element :: an [=/element=] or null. Initially null. @@ -872,12 +874,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; : group styles rule :: A {{CSSStyleRule}} or null. Initially null. - : old view-box rule - :: A {{CSSStyleRule}} or null. Initially null. - - : new view-box rule - :: A {{CSSStyleRule}} or null. Initially null. - : image pair isolation rule :: A {{CSSStyleRule}} or null. Initially null. @@ -1248,7 +1244,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; 1. If |element| has more than one [=box fragment=], then [=continue=]. - Issue: We might want to enable transitions for fragmented elements in future versions. + Note: We might want to enable transitions for fragmented elements in future versions. + See [#8900](https://github.com/w3c/csswg-drafts/issues/8900). 1. Let |transitionName| be the [=computed value=] of 'view-transition-name' for |element|. @@ -1264,31 +1261,21 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; 1. Set |capture|'s [=old image=] to the result of [=capturing the image=] of |element|. - 1. Set |capture|'s [=captured element/old styles=] to the following: + 1. Let |originalRect| be [=snapshot containing block=] if |element| is the [=document element=], + otherwise, the element|'s [=border box=]. - : 'transform' - :: A transform that would map |element|'s [=border box=] from - the [=snapshot containing block origin=] to its current visual position. - :: This value is identity for the [=document element=]. + 1. Set |capture|'s [=captured element/old width=] to |originalRect|'s {{DOMRect/width}}. - : 'width' - : 'height' - :: The size of the [=snapshot containing block=] if |element| is the [=document element=], - otherwise, the width and height of |element|'s border box. + 1. Set |capture|'s [=captured element/old height=] to |originalRect|'s {{DOMRect/height}}. - : 'object-view-box' - :: ''object-view-box/none'' if |element| is the [=document element=], - otherwise, an 'object-view-box' value that, when applied to the old image, - will cause the view box to coincide with |element|'s [=border box=] in the image. - This must be expressed using ''<basic-shape>/inset()''. + 1. Set |capture|'s [=captured element/old transform=] to a + <transform-function> that would map + |element|'s [=border box=] from the [=snapshot containing block origin=] to its + current visual position. - : 'writing-mode' - :: The 'writing-mode' of |element|. + 1. Set |capture|'s [=captured element/old writing-mode] to the [=computed value=] of 'writing-mode' on |element|. - : 'direction' - :: The 'direction' of |element|. - - Issue: This needs proper types. + 1. Set |capture|'s [=captured element/old direction] to the [=computed value=] of 'direction' on |element|. 1. Set |namedElements|[|transitionName|] to |capture|.
@@ -1363,20 +1350,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; 1. Append |old| to |imagePair|. - 1. Let |oldViewBox| be |capturedElement|'s [=captured element/old styles=] 'object-view-box' property. - - 1. Set |capturedElement|'s [=captured element/old view-box rule=] to a new {{CSSStyleRule}} representing the following CSS, - and append it to |document|'s [=document/view transition style sheet=]. - - - 
-						:root::view-transition-old(transitionName) {
-							object-view-box: oldViewBox;
-						}
-
- - Note: The above code example contains variables to be replaced. - 1. If |capturedElement|'s [=new element=] is not null, then: 1. Let |new| be a new ''::view-transition-new()'', @@ -1395,11 +1368,11 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; 1. If both of |capturedElement|'s [=captured element/old image=] and [=captured element/new element=] are not null, then: - 1. Let |transform| be |capturedElement|'s [=captured element/old styles=]'s 'transform' property. + 1. Let |transform| be |capturedElement|'s [=captured element/old transform=]. - 1. Let |width| be |capturedElement|'s [=captured element/old styles=]'s 'width' property. + 1. Let |width| be |capturedElement|'s [=captured element/old width=]. - 1. Let |height| be |capturedElement|'s [=captured element/old styles=]'s 'height' property. + 1. Let |height| be |capturedElement|'s [=captured element/old height=]. 1. Set |capturedElement|'s [=captured element/group keyframes=] to a new {{CSSKeyframesRule}} representing the following CSS, and append it to |document|'s [=document/view transition style sheet=]: @@ -1663,15 +1636,15 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; 1. If |capturedElement|'s [=new element=] is null, then: - 1. Set |width| to |capturedElement|'s [=captured element/old styles=] 'width' property. + 1. Set |width| to |capturedElement|'s [=captured element/old width=]. - 1. Set |height| to |capturedElement|'s [=captured element/old styles=] 'height' property. + 1. Set |height| to |capturedElement|'s [=captured element/old height=]. - 1. Set |transform| to |capturedElement|'s [=captured element/old styles=] 'transform' property. + 1. Set |transform| to |capturedElement|'s [=captured element/old transform=]. - 1. Set |writingMode| to |capturedElement|'s [=captured element/old styles=] 'writing-mode' property. + 1. Set |writingMode| to |capturedElement|'s [=captured element/old writing-mode=]. - 1. Set |direction| to |capturedElement|'s [=captured element/old styles=] 'direction' property. + 1. Set |direction| to |capturedElement|'s [=captured element/old direction=]. 1. Otherwise: @@ -1719,25 +1692,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; 1. Set |new|'s [=replaced element=] content to the result of [=capturing the image=] of |capturedElement|'s [=new element=]. - 1. Let |newViewBox| be an ''object-view-box'' value that when applied to |new|, - will cause the view box to coincide with |capturedElement|'s [=new element=]'s [=border box=] in the image. - This must be expressed using ''<basic-shape>/inset()''. - - 1. If |capturedElement|'s [=captured element/new view-box rule=] is null, - then set |capturedElement|'s [=captured element/new view-box rule=] to a new {{CSSStyleRule}} representing the following CSS, - and append it to |document|'s [=document/view transition style sheet=]. - - Otherwise, update |capturedElement|'s [=captured element/new view-box rule=] to match the following CSS: - - - 
-						:root::view-transition-new(transitionName) {
-							object-view-box: newViewBox;
-						}
-
- - Note: The above code example contains variables to be replaced. - This algorithm must be executed to update styles in [=user-agent origin=] if its effects can be observed by a web API. Note: An example of such a web API is `window.getComputedStyle(document.documentElement, "::view-transition")`. diff --git a/css-viewport/Overview.bs b/css-viewport/Overview.bs index 9253d45cb363..106b99e1a1d2 100644 --- a/css-viewport/Overview.bs +++ b/css-viewport/Overview.bs @@ -271,7 +271,7 @@ Issue: Specify extend-to-zoom behavior by the viewport meta tag Issue: Move the definition of ''visual viewport'' from CSSOM-View to this spec. -The interactive-widget property specifies the effect that interactive UI +The interactive-widget property specifies the effect that interactive UI widgets have on the page's viewports. It defines whether widgets overlay a given viewport or whether the viewport is shrunken so that it remains fully visible while the widget is showing. Interactive UI widgets are transient user agent or operating system UI through which a user can provide input. From 2e8cfeb9903fe5073b549f2067ae07f835fb071e Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Thu, 1 Jun 2023 13:17:39 -0400 Subject: [PATCH 06/36] [css-color-4] Define order of carry-forward and powerless operations, fix #8602 --- css-color-4/Overview.bs | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/css-color-4/Overview.bs b/css-color-4/Overview.bs index 6f0a6d6befe4..984894ff4476 100644 --- a/css-color-4/Overview.bs +++ b/css-color-4/Overview.bs @@ -4585,6 +4585,11 @@ Interpolating with Missing Components is treated as having the other color's component value. + Therefore, + the carrying-forward step + must be performed before any + [=powerless component=] handling. +
For example, if these two colors are interpolated, the second of which has a missing hue: From 07d74e2c1ffc20704c7bcc1c968e927d7ea6c1fa Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Thu, 1 Jun 2023 13:36:17 -0400 Subject: [PATCH 07/36] [css-color-4] Two steps can't both be first! #8612 --- css-color-4/Overview.bs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/css-color-4/Overview.bs b/css-color-4/Overview.bs index 984894ff4476..925e2b425da3 100644 --- a/css-color-4/Overview.bs +++ b/css-color-4/Overview.bs @@ -4353,7 +4353,9 @@ Color Interpolation Interpolation between <> values occurs by first - converting them to a given color space + checking the two colors for analogous components + which will be carried forward; + then (if required) converting them to a given color space which will be referred to as the interpolation color space below, and then linearly interpolating each component of the computed value of the color From a9835dedbdf01a30ae8391dfecdc346514a10a2f Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Thu, 1 Jun 2023 14:02:30 -0400 Subject: [PATCH 08/36] [css-color-5] Fix section title, #8841 --- css-color-5/Overview.bs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs index 4a2a9880180a..f98a19916e45 100644 --- a/css-color-5/Overview.bs +++ b/css-color-5/Overview.bs @@ -1449,11 +1449,11 @@ The Oklch chroma has dropped from 0.251 to 0.117.

- Specifying Custom Color Spaces: the ''color()'' Function + Specifying Predefined and Custom Color Spaces: the ''color()'' Function

The ''color()'' function allows a color to be specified - in a particular, specified [=color space=] + in a particular, given [=color space=] (rather than the implicit sRGB color space that most of the other color functions operate in). In this level the ''color()'' function is extended @@ -1462,7 +1462,7 @@ The Oklch chroma has dropped from 0.251 to 0.117. It is also extended to allow relative, rather than just absolute, colors. - Its syntax is extended as follows: + Its syntax is now as follows: 
 		color() = color( [from <>]? <> [ / [ <> | none ] ]? )

From 78f9b9099501fb214b4626fe61f5166eaf1fd82c Mon Sep 17 00:00:00 2001
From: Chris Lilley 
Date: Thu, 1 Jun 2023 14:04:14 -0400
Subject: [PATCH 09/36] [css-color-5][editorial] bigtext

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

diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs
index f98a19916e45..b3aba00dcdb5 100644
--- a/css-color-5/Overview.bs
+++ b/css-color-5/Overview.bs
@@ -1446,7 +1446,15 @@ by reducing Oklch Chroma, yeilds
 The Oklch chroma has dropped from 0.251 to 0.117.
- +

Specifying Predefined and Custom Color Spaces: the ''color()'' Function From a84b5c03628cc5de05d648272ae4b1e5ece276bb Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Thu, 1 Jun 2023 14:09:38 -0400 Subject: [PATCH 10/36] css-color-5 Remove copy of text (from Color 4) from RCS color() #8841 --- css-color-5/Overview.bs | 47 ----------------------------------------- 1 file changed, 47 deletions(-) diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs index b3aba00dcdb5..ff2e5867aae7 100644 --- a/css-color-5/Overview.bs +++ b/css-color-5/Overview.bs @@ -1603,53 +1603,6 @@ the allowed [=channel keywords=] are: parsing/color-computed-relative-color.html - A color which is either an [=invalid color=] or - an [=out of gamut=] color - can't be displayed. - - If the specified color can be displayed, - (that is, it isn't an [=invalid color=] - and isn't [=out of gamut=]) - then this is the used value of the ''color()'' function. - - If the specified color - is a [=valid color=] - but [=can't be displayed=], - the used value is derived from the specified color, - gamut-mapped for display. - - If the color is an [=invalid color=], - the used value is opaque black. - - -
- This very intense lime color is in-gamut for rec.2020: - 
color(rec2020 0.42053 0.979780 0.00579);
- in LCH, that color is - 
lch(86.6146% 160.0000 136.0088);
- in display-p3, that color is - 
color(display-p3 -0.6112 1.0079 -0.2192);
- and is out of gamut for display-p3 - (red and blue are negative, green is greater than 1). - If you have a display-p3 screen, that color is: -
    -
  • valid
    • -
  • in gamut (for rec.2020)
    • -
  • out of gamut (for your display)
    • -
  • and so can't be displayed
    • -
- The color used for display will be a less intense color - produced automatically by gamut mapping. -
- -
- This example has a typo! - An intense green is provided in profoto-rgb space (which doesn't exist). - This makes it invalid, so the used value is opaque black - 
color(profoto-rgb 0.4835 0.9167 0.2188)
-
- -

Custom Color Spaces

From 8f6dda2c667d651c8b969d1016be421d544ce82d Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Thu, 1 Jun 2023 15:08:31 -0400 Subject: [PATCH 11/36] [css-color-5] Add RCS XYZ example --- css-color-5/Overview.bs | 28 +++++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs index ff2e5867aae7..e571b3ab8d42 100644 --- a/css-color-5/Overview.bs +++ b/css-color-5/Overview.bs @@ -1447,13 +1447,13 @@ The Oklch chroma has dropped from 0.251 to 0.117.

@@ -1603,6 +1603,20 @@ the allowed [=channel keywords=] are: parsing/color-computed-relative-color.html +
+ For example, Relative Color Syntax in the CIE XYZ D65 colorspace + is used to generate a color which has exactly half the luminance + of the base color: + + 
+			--base:  color(display-p3 0.7 0.5 0.1);
+			--dark:  color(from var(--base) xyz-d65 calc(x/2) calc(y/2) calc(z/2));
+
+ + The origin color is color(xyz-d65 0.281 0.253 0.044) + and so the relative color is color(xyz-d65 0.14 0.126 0.022). +
+

Custom Color Spaces

From 8235c079496ba5fd3daba89b252d0a45774fcd26 Mon Sep 17 00:00:00 2001 From: Anders Hartvoll Ruud Date: Thu, 27 Apr 2023 14:11:17 +0200 Subject: [PATCH 12/36] [scroll-animations-1] Rename physical axes to x/y #8666 --- scroll-animations-1/Overview.bs | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/scroll-animations-1/Overview.bs b/scroll-animations-1/Overview.bs index f23cd59e095f..8db6ca3f8145 100644 --- a/scroll-animations-1/Overview.bs +++ b/scroll-animations-1/Overview.bs @@ -168,7 +168,7 @@ spec: cssom-view-1; type: dfn; 
 		<> = scroll( [ <> || <> ]? )
-		<> = block | inline | vertical | horizontal
+		<> = block | inline | x | y
 		<> = root | nearest | self
@@ -188,15 +188,15 @@ spec: cssom-view-1; type: dfn; Specifies to use the measure of progress along the [=inline axis=] of the [=scroll container=]. -
vertical +
x
Specifies to use the measure of progress along the - [=vertical axis=] of the [=scroll container=]. + [=horizontal axis=] of the [=scroll container=]. -
horizontal +
y
Specifies to use the measure of progress along the - [=horizontal axis=] of the [=scroll container=]. + [=vertical axis=] of the [=scroll container=].
nearest
@@ -216,7 +216,7 @@ spec: cssom-view-1; type: dfn; Note: Progress is in reference to the [=scroll origin=], which can flip depending on [=writing mode=], - even when ''scroll-timeline-axis/horizontal'' or ''scroll-timeline-axis/vertical'' is specified. + even when ''scroll-timeline-axis/x'' or ''scroll-timeline-axis/y'' is specified. References to the [=root element=] propagate to the document viewport (which functions as its [=scroll container=]). @@ -232,8 +232,8 @@ spec: cssom-view-1; type: dfn; enum ScrollAxis { "block", "inline", - "horizontal", - "vertical" + "x", + "y" }; dictionary ScrollTimelineOptions { @@ -369,7 +369,7 @@ spec: cssom-view-1; type: dfn; 
 	Name: scroll-timeline-axis
-	Value: [ block | inline | vertical | horizontal ]#
+	Value: [ block | inline | x | y ]#
 	Initial: block
 	Applies to: all elements
 	Inherited: no
@@ -776,7 +776,7 @@ spec: cssom-view-1; type: dfn;
 
 	
 	Name: view-timeline-axis
-	Value: [ block | inline | vertical | horizontal ]#
+	Value: [ block | inline | x | y ]#
 	Initial: block
 	Applies to: all elements
 	Inherited: no

From c5beb01d80198ea3b925b458850db54ac7d37354 Mon Sep 17 00:00:00 2001
From: Guillaume 
Date: Wed, 10 May 2023 09:20:05 +0200
Subject: [PATCH 13/36] [css-scroll-snap-2] Define logical property group of
 scroll-start-*

---
 css-scroll-snap-2/Overview.bs | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/css-scroll-snap-2/Overview.bs b/css-scroll-snap-2/Overview.bs
index 52f3ae31dc8c..7a033073f2ed 100644
--- a/css-scroll-snap-2/Overview.bs
+++ b/css-scroll-snap-2/Overview.bs
@@ -311,6 +311,7 @@ Physical Longhands for 'scroll-start' {#scroll-start-longhands-physical}
 	Initial: auto
 	Applies to: scroll containers
 	Inherited: no
+	Logical property group: scroll-start
 	Percentages: relative to the corresponding axis of the scroll container’s scrollport
 	Computed value: the keyword ''scroll-start/auto'' or a computed <> value
 	Animation type: by computed value type
@@ -327,6 +328,7 @@ Flow-relative Longhands for 'scroll-start'  {#scroll-start-longhands-logical}
 	Initial: auto
 	Applies to: scroll containers
 	Inherited: no
+	Logical property group: scroll-start
 	Percentages: relative to the corresponding axis of the scroll container’s scrollport
 	Computed value: the keyword ''scroll-start/auto'' or a computed <> value
 	Animation type: by computed value type
@@ -342,6 +344,7 @@ Flow-relative Longhands for 'scroll-start-target'  {#scroll-start-target-longhan
 	Initial: none
 	Applies to: all elements
 	Inherited: no
+	Logical property group: scroll-start-target
 	Percentages: n/a
 	Computed Value: either of the keywords "none" or "auto"
 	Animation type: not animatable
@@ -349,7 +352,7 @@ Flow-relative Longhands for 'scroll-start-target'  {#scroll-start-target-longhan
 
 	...
 
-Physical Longhands for 'scroll-start' {#scroll-start-target-longhands-physical}
+Physical Longhands for 'scroll-start-target' {#scroll-start-target-longhands-physical}
 ----------------------------------------------------------------------
 
 	
@@ -358,6 +361,7 @@ Physical Longhands for 'scroll-start' {#scroll-start-target-longhands-physical}
 	Initial: none
 	Applies to: all elements
 	Inherited: no
+	Logical property group: scroll-start-target
 	Percentages: n/a
 	Computed value: either of the keywords "none" or "auto"
 	Animation type: not animatable

From 38c9a63ffdcd1e875419f055baf2cbf6fcca3f58 Mon Sep 17 00:00:00 2001
From: CanadaHonk <19228318+CanadaHonk@users.noreply.github.com>
Date: Thu, 1 Jun 2023 21:57:16 +0100
Subject: [PATCH 14/36] [css-cascade-4] Replace @import supports() example
 (#8594)

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

diff --git a/css-cascade-4/Overview.bs b/css-cascade-4/Overview.bs
index eddc0f418d91..74703dc690dc 100644
--- a/css-cascade-4/Overview.bs
+++ b/css-cascade-4/Overview.bs
@@ -221,14 +221,14 @@ Conditional ''@import'' Rules
 	(even if it is loaded through some other link).
 
 	

-		The following rule illustrates how an author can provide fallback rules for legacy user agents
-		without impacting network performance on newer user agents:
+		The following rule illustrates how an author can provide rules
+		for modern user agents that support newer web features 
+		without impacting network performance on older user agents.
+		In this example, a CSS file which loads COLRv1 fonts
+		is only fetched when COLRv1 is supported:
 
 		
-		@import url("fallback-layout.css") supports(not (display: flex));
-		@supports (display: flex) {
-		  ...
-		}
+		@import url("COLRv1_fonts.css") supports(font-tech(color-COLRv1));
 		

 	

 

From 035074172d7ed8e503e30748fd5aaff8aba31ac8 Mon Sep 17 00:00:00 2001
From: fantasai 
Date: Thu, 1 Jun 2023 18:18:24 -0400
Subject: [PATCH 15/36] [scroll-animations-1] Return negative infinity for
 times coinciding with zero-length range. #8114

---
 scroll-animations-1/Overview.bs | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/scroll-animations-1/Overview.bs b/scroll-animations-1/Overview.bs
index 8db6ca3f8145..4a551ce591ad 100644
--- a/scroll-animations-1/Overview.bs
+++ b/scroll-animations-1/Overview.bs
@@ -1375,9 +1375,8 @@ spec: cssom-view-1; type: dfn;
 					and return it.
 
 					If the start and end points of the [=named timeline range=] coincide,
-					return negative infinity for time values before it,
-					positive infinity for time values after it,
-					and zero for time values coinciding with that point.
+					return negative infinity for time values earlier or equal to that point,
+					and positive infinity for time values after it.
 
 				

 					If {{AnimationTimeOptions/range}} is provided

From 9f319804bf6ac8fec705978acedec44cac961266 Mon Sep 17 00:00:00 2001
From: Chris Lilley 
Date: Fri, 2 Jun 2023 10:08:47 -0400
Subject: [PATCH 16/36] [css-color-5] HWB now allows number, #8322

---
 css-color-5/Overview.bs | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs
index e571b3ab8d42..32a5711c8d88 100644
--- a/css-color-5/Overview.bs
+++ b/css-color-5/Overview.bs
@@ -841,9 +841,7 @@ but they all follow a common structure:
 	and attempting to do so is an error.
 * However, the [=origin color=] can use either modern or legacy syntax.
 
-Except as specified for individual color functions,
-(for example, HWB Whiteness and Blackness return <>),
-the [=channel keywords=] return a <>; 
+The [=channel keywords=] return a <>; 
 if they were originally specified as a <> or an <>,
 that <> is resolved to a <> 
 and the <> is resolved to a <> of degrees

From 2392b69b9e6204507157e6d0cef1aed41d168750 Mon Sep 17 00:00:00 2001
From: Chris Lilley 
Date: Fri, 2 Jun 2023 10:35:27 -0400
Subject: [PATCH 17/36] [css-color-4] use reference ranges

---
 css-color-4/hslToRgb.js | 4 ++--
 css-color-4/hwbToRgb.js | 4 ++--
 css-color-4/rgbToHsl.js | 2 +-
 css-color-4/rgbToHwb.js | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/css-color-4/hslToRgb.js b/css-color-4/hslToRgb.js
index be590e5351fa..a97e3dd0a54c 100644
--- a/css-color-4/hslToRgb.js
+++ b/css-color-4/hslToRgb.js
@@ -1,7 +1,7 @@
 /**
  * @param {number} hue - Hue as degrees 0..360
- * @param {number} sat - Saturation as percentage 0..100
- * @param {number} light - Lightness as percentage 0..100
+ * @param {number} sat - Saturation in reference range [0,100]
+ * @param {number} light - Lightness in reference range [0,100]
  * @return {number[]} Array of RGB components 0..1
  */
 function hslToRgb(hue, sat, light) {
diff --git a/css-color-4/hwbToRgb.js b/css-color-4/hwbToRgb.js
index 84ec3eac5211..fa1bd887f68c 100644
--- a/css-color-4/hwbToRgb.js
+++ b/css-color-4/hwbToRgb.js
@@ -1,7 +1,7 @@
 /**
  * @param {number} hue -  Hue as degrees 0..360
- * @param {number} white -  Whiteness as percentage 0..100
- * @param {number} black -  Blackness as percentage 0..100
+ * @param {number} white -  Whiteness in reference range [0,100]
+ * @param {number} black -  Blackness in reference range [0,100]
  * @return {number[]} Array of RGB components 0..1
  */
 function hwbToRgb(hue, white, black) {
diff --git a/css-color-4/rgbToHsl.js b/css-color-4/rgbToHsl.js
index d5bdacb3d4d6..e8059c1fa32e 100644
--- a/css-color-4/rgbToHsl.js
+++ b/css-color-4/rgbToHsl.js
@@ -2,7 +2,7 @@
  * @param {number} red - Red component 0..1
  * @param {number} green - Green component 0..1
  * @param {number} blue - Blue component 0..1
- * @return {number[]} Array of HSL values: Hue as degrees 0..360, Saturation and Lightness as percentages 0..100
+ * @return {number[]} Array of HSL values: Hue as degrees 0..360, Saturation and Lightness in reference range [0,100]
  */
 function rgbToHsl (red, green, blue) {
     let max = Math.max(red, green, blue);
diff --git a/css-color-4/rgbToHwb.js b/css-color-4/rgbToHwb.js
index 3baab9d278d7..ae7a9bf8ed9d 100644
--- a/css-color-4/rgbToHwb.js
+++ b/css-color-4/rgbToHwb.js
@@ -2,7 +2,7 @@
  * @param {number} red - Red component 0..1
  * @param {number} green - Green component 0..1
  * @param {number} blue - Blue component 0..1
- * @return {number[]} Array of HWB values: Hue as degrees 0..360, Whiteness and Blackness as percentages 0..100
+ * @return {number[]} Array of HWB values: Hue as degrees 0..360, Whiteness and Blackness in reference range [0,100]
  */
 function rgbToHwb(red, green, blue) {
     var hsl = rgbToHsl(red, green, blue);

From 327110f01b36c79c4d04f55d8fa30898e8d2cae0 Mon Sep 17 00:00:00 2001
From: Chris Lilley 
Date: Fri, 2 Jun 2023 12:07:08 -0400
Subject: [PATCH 18/36] [css-values-4] Color type not additive, fix #8576

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

diff --git a/css-values-4/Overview.bs b/css-values-4/Overview.bs
index ff4972b426f7..0aafe0737057 100644
--- a/css-values-4/Overview.bs
+++ b/css-values-4/Overview.bs
@@ -2747,10 +2747,12 @@ Combination of <>
 	as defined in
 	[[css-color-4#interpolation-alpha]].
 
-	Addition of <> is likewise defined as
-	the independent addition of each component
-	as a <>
-	in premultiplied space.
+	The <> type is not additive.
+
+	Note: the CSS WG is interested to 
+	hear
+	use-cases for addition of <>,
+	and may consider making <> additive in the future.
 
 
 
 
-	<absolute-color-base> = <> | <> | <> | transparent
-	<absolute-color-function> = <> | <> |
+	<absolute-color-base> = <> | <> | <> | transparent
+	<absolute-color-function> = <> | <> |
 	                            <> | <> | <> |
 	                            <> | <> | <> | <> |
 	                            <>
diff --git a/css-values-4/Overview.bs b/css-values-4/Overview.bs
index 0aafe0737057..cbf9a3bc41ba 100644
--- a/css-values-4/Overview.bs
+++ b/css-values-4/Overview.bs
@@ -2918,7 +2918,7 @@ Functional Notations
 
 	The [=math functions=] are defined below.
 	Other [=functional notations=] are defined in their own modules;
-	for example the [=color functions=] are defined in [[CSS-COLOR-4]].
+	for example the [=absolute-color-function|color functions=] are defined in [[CSS-COLOR-4]].
 
 
 
 Abstract: This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.
@@ -908,7 +907,7 @@ console.log(anim.playState); // Should be 'running'.
 
 
Changes

 
-
Recent Changes
+
Recent Changes

 
 
Changes since the 2 March 2023 Working Draft include:
 

From 20577a738fd89ae83ff6a636fd53d9a205184160 Mon Sep 17 00:00:00 2001
From: Brian Birtles 
Date: Mon, 5 Jun 2023 11:14:18 +0900
Subject: [PATCH 27/36] [web-animations-1] Disambiguate descendant

---
 web-animations-1/Overview.bs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs
index 02f26d309fd7..f12dccfe3524 100644
--- a/web-animations-1/Overview.bs
+++ b/web-animations-1/Overview.bs
@@ -205,6 +205,7 @@ urlPrefix: https://drafts.css-houdini.org/css-properties-values-api-1/; type: df
 spec:dom; type:interface; text:DocumentOrShadowRoot
 spec:dom; type:interface; text:EventTarget
 spec:dom; type:interface; text:Event
+spec:dom; type:dfn; text:descendant
 spec:dom; type:dfn; for:/; text:shadow root
 spec:css-color-4; type:value; text:transparent
 spec:css-fonts-4; type:property; text:font-weight

From f94c72bb13e60955556d99fef15fa8aef22c1b34 Mon Sep 17 00:00:00 2001
From: Brian Birtles 
Date: Mon, 5 Jun 2023 11:24:15 +0900
Subject: [PATCH 28/36] [web-animations-1] Update changes since last
 publication section

---
 web-animations-1/Overview.bs | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs
index f12dccfe3524..e1c892107d3e 100644
--- a/web-animations-1/Overview.bs
+++ b/web-animations-1/Overview.bs
@@ -6403,7 +6403,18 @@ The following changes have been made since the 8 September
 2022 Working Draft:
 
--   (None as yet)
+-   Updated the procedure to [=set the playback rate=] to main the start time
+    and swap start time position when playback rate is flipped on non-monotonic
+    timelines.
+
+-   Factored out the definition of [=relevant animations=] for use by other specs.
+
+-   Updated the definition of [=current=] animation effects such that they are
+    considered current if they are non-idle and associated with non-increasing
+    timelines.
+
+-   Fixed a code example in the [[#fill-behavior]] section.
+
 
 The changelog

From f39c68d9fdc07ddc3bc9392bf8cb37c7b2f71a1c Mon Sep 17 00:00:00 2001
From: Brian Birtles 
Date: Mon, 5 Jun 2023 11:29:49 +0900
Subject: [PATCH 29/36] [web-animations-1] Add link to previous version

---
 web-animations-1/Overview.bs | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs
index e1c892107d3e..1172781ade63 100644
--- a/web-animations-1/Overview.bs
+++ b/web-animations-1/Overview.bs
@@ -83,6 +83,7 @@ Work Status: Refining
 ED: https://drafts.csswg.org/web-animations-1/
 TR: https://www.w3.org/TR/web-animations-1/
 
+Previous version: https://www.w3.org/TR/2023/WD-web-animations-1-20230605/
 Previous version: https://www.w3.org/TR/2021/WD-web-animations-1-20220908/
 Previous version: https://www.w3.org/TR/2021/WD-web-animations-1-20210518/
 Previous version: https://www.w3.org/TR/2018/WD-web-animations-1-20181011/
@@ -6400,21 +6401,10 @@ Changes since last publication {#changes-since-last-publication}
 =======================================
 
 The following changes have been made since the 8 September
-2022 Working Draft:
-
--   Updated the procedure to [=set the playback rate=] to main the start time
-    and swap start time position when playback rate is flipped on non-monotonic
-    timelines.
-
--   Factored out the definition of [=relevant animations=] for use by other specs.
-
--   Updated the definition of [=current=] animation effects such that they are
-    considered current if they are non-idle and associated with non-increasing
-    timelines.
-
--   Fixed a code example in the [[#fill-behavior]] section.
+  href="https://www.w3.org/TR/2023/WD-web-animations-1-20230605/">5 June
+2023 Working Draft:
 
+(Nothing yet)
 
 The changelog

From 3876cc0772a62549e7a8f8cacad49c1dc066d284 Mon Sep 17 00:00:00 2001
From: Chris Lilley 
Date: Fri, 2 Jun 2023 12:23:12 -0400
Subject: [PATCH 30/36] typo

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

diff --git a/css-values-4/Overview.bs b/css-values-4/Overview.bs
index c1cf80ca6765..5aef273920b2 100644
--- a/css-values-4/Overview.bs
+++ b/css-values-4/Overview.bs
@@ -2918,7 +2918,7 @@ Functional Notations
 
 	The [=math functions=] are defined below.
 	Other [=functional notations=] are defined in their own modules;
-	for example the [= absolute-color-function|color functions=] are defined in [[CSS-COLOR-4]].
+	for example the [=absolute-color-function|color functions=] are defined in [[CSS-COLOR-4]].
 
 
 	
 
-	Lab is a rectangular coordinate system
+	Lab is a rectangular coordinate system
 	with a central Lightness (L) axis.
 	This value is usually written as a unitless number;
 	for compatibility with the rest of CSS, it may also be written as a percentage.
@@ -2931,7 +2933,7 @@ Device-independent Colors: CIE Lab and LCH, Oklab and Oklch
 	is the industry standard chromatic adaptation transform,
 	and is easy to calculate as it is a simple matrix multiplication.
 
-	CIE LCH has the same L axis as Lab,
+	CIE  LCH has the same L axis as Lab,
 	but uses polar coordinates C (chroma) and H (hue),
 	making it a polar, cylindrical coordinate system.
 	C is the geometric distance from the L axis
@@ -3015,11 +3017,13 @@ Device-independent Colors: CIE Lab and LCH, Oklab and Oklch
 
 	This does not help with hue curvature, however.
 
-	
Oklab and Oklch

+	
Oklab and Oklch

+
+	This section is not normative.
 
-	Recently, Oklab,
+	Recently, Oklab,
 	an improved Lab-like space has been developed [[!Oklab]].
-	The corresponding polar form is called Oklch.
+	The corresponding polar form is called Oklch.
 	It was produced by numerical optimisation
 	of a large dataset of visually similar colors,
 	and has improved hue linearity,
@@ -3139,7 +3143,8 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations
 		parsing/color-valid-lab.html
 	
 
-	The first argument specifies the CIE Lightness, L.
+	In Lab,
+	the first argument specifies the CIE Lightness, L.
 	This is a number between ''0%'' or 0
 	(representing black)
 	and ''100%'' or 100
@@ -3213,7 +3218,8 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations
 		parsing/color-valid.html
 	
 
-	The first argument specifies the CIE Lightness L,
+	In CIE LCH
+	the first argument specifies the CIE Lightness L,
 	interpreted identically to the Lightness argument of ''lab()''.
 
 	The second argument is the chroma C,
@@ -3302,7 +3308,8 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations
 		parsing/color-valid.html
 	
 
-	The first argument specifies the Oklab Lightness.
+	In Oklab
+	the first argument specifies the Oklab Lightness.
 	This is a number between ''0%'' or 0
 	(representing black)
 	and ''100%'' or 1.0
@@ -3378,7 +3385,8 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations
 			parsing/color-valid.html
 		
 
-		The first argument specifies the Oklch Lightness L,
+		In Oklch
+		the first argument specifies the Oklch Lightness L,
 		interpreted identically to the Lightness argument of ''oklab()''.
 
 		The second argument is the chroma C.

From 49babe2f551a028b94d1a9a25f57372a8cef9811 Mon Sep 17 00:00:00 2001
From: fantasai 
Date: Thu, 1 Jun 2023 00:21:12 -0400
Subject: [PATCH 32/36] [css-view-transitions-1][editorial] Improvements to
 intro

---
 css-view-transitions-1/Overview.bs | 99 ++++++++++++++++++------------
 1 file changed, 59 insertions(+), 40 deletions(-)

diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs
index 301a36322a8a..6a2ab7e43d90 100644
--- a/css-view-transitions-1/Overview.bs
+++ b/css-view-transitions-1/Overview.bs
@@ -12,7 +12,8 @@ Work Status: exploring
 Editor: Tab Atkins-Bittner, Google, http://xanthir.com/contact/, w3cid 42199
 Editor: Jake Archibald, Google, w3cid 76394
 Editor: Khushal Sagar, Google, w3cid 122787
-Abstract: This module defines the View Transition API, along with associated properties and pseudo-elements.
+Abstract: This module defines the View Transition API, along with associated properties and pseudo-elements,
+	which allows developers to create animated visual transitions representing changes in the document state.
 Markup Shorthands: css yes, markdown yes
 

 
@@ -118,51 +119,63 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 	*This section is non-normative.*
 
-	View Transitions is a feature that allows developers to create animated transitions between visual states of the [=/document=].
+	This specification introduces a DOM API and associated CSS features
+	that allow developers to create animated visual transitions,
+	called view transitions
+	between different states of a [=/document=].
 
-## Separating transitions from DOM updates ## {#separating-transitions}
+## Separating Visual Transitions from DOM Updates ## {#separating-transitions}
 
-	Traditionally, creating a transition between two states involves a period where both states are present in the DOM at the same time.
-	In fact, it usually involves creating a specific DOM structure that can contain both states.
-	If one element is "moving" between containers,
-	that element often needs to exist outside of either container for the period of the transition,
-	to avoid clipping from either container or ancestor elements.
+	Traditionally, creating a visual transition between two document states
+	required a period where both states were present in the DOM at the same time.
+	In fact, it usually involved creating a specific DOM structure
+	that could represent both states.
+	For example, if one element was “moving” between containers,
+	that element often needed to exist outside of either container for the period of the transition,
+	to avoid clipping from either container or their ancestor elements.
 
-	This extra in-between state often results in UX and accessibility issues,
-	as the structure of the DOM is compromised for a purely-visual effect.
+	This extra in-between state often resulted in UX and accessibility issues,
+	as the structure of the DOM was compromised for a purely-visual effect.
 
-	View transitions avoid this troublesome in-between state by allowing the DOM to switch between states synchronously,
+	[=View Transitions=] avoid this troublesome in-between state
+	by allowing the DOM to switch between states instantaneously,
 	then performing a customizable visual transition between the two states in another layer,
-	using a static capture of the old state, and a live capture of the new state.
-
-	These captures are used in a tree of pseudo-elements
+	using a static visual capture of the old state, and a live capture of the new state.
+	These captures are represented as a tree of [=pseudo-elements=]
 	(detailed in [[#view-transition-pseudos]]),
-	where the old state cross-fades with the new state,
+	where the old visual state co-exists with the new state,
+	allowing effects such as cross-fading
 	while animating from the old to new size and position.
 
-	Since the captures are rendered in pseudo-elements,
-	developers can customize the transition using familiar features,
-	such as CSS and web animations.
+## View Transition Customization ## {#customizing}
 
-	The developer chooses which elements are captured independently,
-	meaning they can be animated independently,
-	using the 'view-transition-name' CSS property.
+	By default, document.{{Document/startViewTransition()}}
+	creates a [=view transition=] consisting of
+	a page-wide cross-fade between the two DOM states.
+	Developers can also choose which elements are captured independently
+	using the 'view-transition-name' CSS property,
+	allowing these to be animated independently of the rest of the page.
+	Since the transitional state (where both old and new visual captures exist)
+	is represented as pseudo-elements,
+	developers can customize each transition using familiar features
+	such as CSS Animations
+	and Web Animations.
 
-## Lifecycle ## {#lifecycle}
+## View Transition Lifecycle ## {#lifecycle}
 
-	A successful view transition goes through the following phases:
+	A successful [=view transition=] goes through the following phases:
 
 	1. Developer calls document.{{Document/startViewTransition}}({{UpdateCallback|updateCallback}}),
-		which returns viewTransition, a {{ViewTransition}}.
+		which returns a {{ViewTransition}}, viewTransition.
 
 	1. Current state captured as the “old” state.
 
 	1. Rendering paused.
 
-	1. Developer's {{UpdateCallback|updateCallback}} is called,
-		where they update document state.
+	1. Developer's {{UpdateCallback|updateCallback}} function is called,
+		which updates the document state.
 
-	1. viewTransition.{{ViewTransition/updateCallbackDone}} fulfills.
+	1. viewTransition.{{ViewTransition/updateCallbackDone}} fulfills.
 
 	1. Current state captured as the “new” state.
 
@@ -171,13 +184,13 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 	1. Rendering unpaused, revealing the transition pseudo-elements.
 
-	1. viewTransition.{{ViewTransition/ready}} fulfills.
+	1. viewTransition.{{ViewTransition/ready}} fulfills.
 
 	1. Pseudo-elements animate until finished.
 
 	1. Transition pseudo-elements removed.
 
-	1. viewTransition.{{ViewTransition/finished}} fulfills.
+	1. viewTransition.{{ViewTransition/finished}} fulfills.
 
 	

 		
@@ -213,23 +226,29 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 ## Transitions as an enhancement ## {#transitions-as-enhancements}
 
-	A key part of this API design is that an animated transition is an enhancement to a document state change.
-
-	That means, a failure to create a transition,
+	A key part of the View Transition API design
+	is that an animated transition is a visual enhancement
+	to an underlying document state change.
+	That means a failure to create a visual transition,
 	which can happen due to misconfiguration or device constraints,
 	will not prevent the developer's {{UpdateCallback}} being called,
-	even if it's known in advance that the animated transition cannot happen.
+	even if it's known in advance that the transition animations cannot happen.
 
-	For example, if the developer calls {{ViewTransition/skipTransition()}} at the start of the [[#lifecycle|lifecycle]],
-	the steps relating to the animated transition, such as creating the pseudo-elements, will not happen.
+	For example, if the developer calls {{ViewTransition/skipTransition()}} at the start of the [[#lifecycle|view transition lifecycle]],
+	the steps relating to the animated transition,
+	such as creating the [=view transition tree=],
+	will not happen.
 	However, the {{UpdateCallback}} will still be called.
-	It's only the transition that's skipped, not the whole state change.
+	It's only the visual transition that's skipped,
+	not the underlying state change.
 
-	If the DOM change should also be skipped, then that should be handled by another feature.
+	Note: If the DOM change should also be skipped,
+	then that needs to be handled by another feature.
 	{{NavigateEvent|navigateEvent}}.{{NavigateEvent/signal}} is an example of a feature developers could use to handle this.
 
-	Although the transition API allows DOM changes to be asynchronous via the {{UpdateCallback}},
-	the transition API is not responsible for queuing or otherwise scheduling the DOM changes beyond the scheduling needed for the transition itself.
+	Although the View Transition API allows DOM changes to be asynchronous via the {{UpdateCallback}},
+	the API is not responsible for queuing or otherwise scheduling DOM changes
+	beyond any scheduling needed for the transition itself.
 	Some asynchronous DOM changes can happen concurrently (e.g if they're happening within independent components),
 	whereas others need to queue, or abort an earlier change.
 	This is best left to a feature or framework that has a more holistic view of the application.
@@ -245,7 +264,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		}
 		```
 
-		A transition could be added like this:
+		A [=view transition=] could be added like this:
 
 		```js
 		function spaNavigate(data) {

From 2b7281581c360ac3c47fcd4e828fd97570278ceb Mon Sep 17 00:00:00 2001
From: fantasai 
Date: Thu, 1 Jun 2023 00:21:48 -0400
Subject: [PATCH 33/36] [css-view-transitions-1][editorial] Improve
 view-transition-name definition

* Give it a proper title
* Give it a conceptual definition
* State that it *will* get snapshotted, rather than it might
* Make exclusion of 'none' from  normative
* Various wording tweaks
---
 css-view-transitions-1/Overview.bs | 55 +++++++++++++++++++-----------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs
index 6a2ab7e43d90..e952ff0d9572 100644
--- a/css-view-transitions-1/Overview.bs
+++ b/css-view-transitions-1/Overview.bs
@@ -34,6 +34,7 @@ spec:css-display-3; type:dfn;
 	text:replaced element
 spec:css-cascade-5; type:dfn; text:computed value
 spec:css22; type:dfn; text:element
+spec:css-break-4; type:dfn; text:fragment
 

 
 
@@ -483,7 +484,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 # CSS properties # {#css-properties}
 
-## 'view-transition-name' ## {#view-transition-name-prop}
+## Tagging Individually Transitioning Subtrees: the 'view-transition-name' property ## {#view-transition-name-prop}
 
 	
 	Name: view-transition-name
@@ -495,27 +496,41 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	Animation type: discrete
 	

 
-	The 'view-transition-name' property "names" an element as participating in a view transition.
+	The 'view-transition-name' property “tags” an element
+	as potentially [=involved in a view transition=],
+	capturing it independently in the [=view transition tree=]
+	under the specified view transition name.
+	An element so captured is animated independently of the rest of the page.
 
 	

 		: none
-		:: The [=/element=] will not participate in a view transition.
+		:: The [=/element=] will not participate independently in a view transition.
 
 		: <>
-		:: The [=/element=] can participate in a view transition,
-			as either an old or new [=/element=],
-			with a view transition name equal to the <>'s value.
+		:: The [=/element=] participates independently in a view transition--
+			as either an old or new [=/element=]--
+			with the specified [=view transition name=].
 
-			Note: The value none is invalid as a <>.
+			The value none is excluded from <> here.
+
+			Note: If this name is not unique
+			(i.e. if two elements simultaneously specify the same [=view transition name=])
+			then the [=view transition=] will abort.
 	

 
-	Note: This property causes the user-agent to both capture separate snapshots from the elements,
-	as well as create separate pseudo-element sub-trees representing this element's “old” and “new” states.
-	For the purposes of this API,
-	if one element has a transition-name "foo" in the old state, and another element has a transition-name "foo" in the new state,
-	they are treated as representing different visual state of the same element.
+	Note:  For the purposes of this API,
+	if one element has [=view transition name=] ''foo'' in the old state,
+	and another element has [=view transition name=] ''foo'' in the new state,
+	they are treated as representing different visual state of the same element,
+	and will be paired in the [=view transition tree=].
 	This may be confusing, since the elements themselves are not necessarily referring to the same object,
-	but it is a useful model to consider them to be visual states of the same conceptual page entity, that we happen to call "element".
+	but it is a useful model to consider them to be visual states of the same conceptual page entity.
+
+	If the element’s [=principal box=] is [=fragmented=],
+	[=skips its contents|skipped=],
+	or [=not rendered=],
+	this property has no effect.
+	See [[#algorithms]] for exact details.
 
 # Layout and rendering changes # {#layout-rendering-changes}
 
@@ -602,14 +617,14 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		<pt-name-selector> = '*' | <>
 	

 
-	The selector matches if the <> is `*` or matches the [=named view-transition pseudo-element=]'s [=named view-transition pseudo-element/view-transition name=].
+	The selector matches if the <> is `*` or matches the [=named view-transition pseudo-element=]'s [=view transition name=].
 
 	The specificity of a view-transition selector with a <> argument is the same as for other pseudo-elements,
 	and is equivalent to a [=type selector=].
 
 	The specificity of a view-transition selector with a `*` argument is zero.
 
-	Note: The [=named view-transition pseudo-element/view-transition name=] is set to the 'view-transition-name' that triggered its creation.
+	Note: The [=view transition name=] is set to the 'view-transition-name' that triggered its creation.
 
 ## View transition pseudo-elements ## {#view-transition-pseudos}
 
@@ -1352,19 +1367,19 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		1. [=map/For each=] |transitionName| → |capturedElement| of |transition|'s [=ViewTransition/named elements=]:
 
 			1. Let |group| be a new ''::view-transition-group()'',
-				with its [=named view-transition pseudo-element/view-transition name=] set to |transitionName|.
+				with its [=view transition name=] set to |transitionName|.
 
 			1. Append |group| to |transition|'s [=ViewTransition/transition root pseudo-element=].
 
 			1. Let |imagePair| be a new ''::view-transition-image-pair()'',
-				with its [=named view-transition pseudo-element/view-transition name=] set to |transitionName|.
+				with its [=view transition name=] set to |transitionName|.
 
 			1. Append |imagePair| to |group|.
 
 			1. If |capturedElement|'s [=captured element/old image=] is not null, then:
 
 				1. Let |old| be a new ''::view-transition-old()'',
-					with its [=named view-transition pseudo-element/view-transition name=] set to |transitionName|,
+					with its [=view transition name=] set to |transitionName|,
 					displaying |capturedElement|'s [=captured element/old image=].
 
 				1. Append |old| to |imagePair|.
@@ -1372,7 +1387,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 			1. If |capturedElement|'s [=new element=] is not null, then:
 
 				1. Let |new| be a new ''::view-transition-new()'',
-					with its [=named view-transition pseudo-element/view-transition name=] set to |transitionName|.
+					with its [=view transition name=] set to |transitionName|.
 
 					Note: The styling of this pseudo is handled in [=update pseudo-element styles=].
 
@@ -1707,7 +1722,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 			1. If |capturedElement|'s [=new element=] is not null, then:
 
-				1. Let |new| be the ''::view-transition-new()'' with the [=view-transition name=] |transitionName|.
+				1. Let |new| be the ''::view-transition-new()'' with the [=view transition name=] |transitionName|.
 
 				1. Set |new|'s [=replaced element=] content to the result of [=capturing the image=] of |capturedElement|'s [=new element=].
 

From bf33c6b55589b4e74062a593b52d85e5afe53d65 Mon Sep 17 00:00:00 2001
From: fantasai 
Date: Mon, 5 Jun 2023 14:38:30 -0400
Subject: [PATCH 34/36] [css-view-transitions-1][editorial] Improve structure
 of pseudo-elements section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Define some high-level terms for better cross-referencing
* Give a proper introduction to the pseudo tree
* Move definition of named view-transition pseudo-elements to after we define what view-transition pseudo-elements are so we know what we're talking about
* Give each pseudo-element a proper definition (“the algo generates it” is not a definition)
* Include enough information that the pseudo-element tree is understandable from this section alone
* Improve section titles
* Make definition of view-transition-name more definitive
---
 css-view-transitions-1/Overview.bs | 183 +++++++++++++++++------------
 1 file changed, 109 insertions(+), 74 deletions(-)

diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs
index e952ff0d9572..203a90d69a04 100644
--- a/css-view-transitions-1/Overview.bs
+++ b/css-view-transitions-1/Overview.bs
@@ -27,7 +27,9 @@ spec:webidl; type:interface; text:Promise
 spec:css-images-4; type:function; text:element()
 spec:dom; type:dfn; text:document
 spec:css-2022; type:dfn; text:style sheet
-spec:selectors-4; type:dfn; text:type selector
+spec:selectors-4; type:dfn;
+	text:selector
+	text:type selector
 spec:css-box-4; type:dfn; text:border box
 spec:css-display-3; type:dfn;
 	text:containing block
@@ -586,7 +588,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 
 # Pseudo-elements # {#pseudo}
 
-## Pseudo-element root ## {#pseudo-root}
+## Pseudo-element Trees ## {#pseudo-root}
 
 	Note: This is a general definition for trees of pseudo-elements. If other features need this behavior, these definitions will be moved to [[css-pseudo-4]].
 
@@ -604,29 +606,24 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 	Note: This means that `::view-transition-new(ident):only-child` will only select `::view-transition-new(ident)` if the parent `::view-transitions-image-pair(ident)` contains a single [=tree/child=].
 	As in, there is no [=tree/sibling=] `::view-transition-old(ident)`.
 
-## Named view-transition pseudo-elements ## {#named-view-transition-pseudo}
-
-	A named view-transition pseudo-element is a type of [=tree-abiding pseudo-elements=].
-
-	It has a view-transition name,
-	a string.
-
-	Their selector takes a <> argument.
-
-	
-		<pt-name-selector> = '*' | <>
-	

-
-	The selector matches if the <> is `*` or matches the [=named view-transition pseudo-element=]'s [=view transition name=].
-
-	The specificity of a view-transition selector with a <> argument is the same as for other pseudo-elements,
-	and is equivalent to a [=type selector=].
-
-	The specificity of a view-transition selector with a `*` argument is zero.
-
-	Note: The [=view transition name=] is set to the 'view-transition-name' that triggered its creation.
-
-## View transition pseudo-elements ## {#view-transition-pseudos}
+## View Transition Pseudo-elements ## {#view-transition-pseudos}
+
+	The visualization of a [=view transition=]
+	is represented as a [=pseudo-element tree=]
+	called the view transition tree
+	composed of the view transition pseudo-elements defined below.
+	This tree is built during the [=setup transition pseudo-elements=] step,
+	and is rooted under a ''::view-transition'' pseudo-element
+	[=originating element|originating=] from the [=root element=].
+	All of the [=view transition pseudo-elements=] are selected
+	from their [=ultimate originating element=], the [=document element=].
+
+	

+		For example,
+		the ''::view-transition-group()'' pseudo-element is attached to the root element selector directly,
+		as in '':root::view-transition-group()'';
+		it is not attached to its parent, the ''::view-transition'' pseudo-element.
+	

 
 	

 		Once the user-agent has captured both the “old” and “new” states of the document,
@@ -653,15 +650,49 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		This enables full customization of the transition.
 	

 
-### ::view-transition ### {#::view-transition}
+### Named View Transition Pseudo-elements ### {#named-view-transition-pseudo}
+
+	Several of the [=view transition pseudo-elements=]
+	are named view transition pseudo-elements,
+	which are [=functional pseudo-element|functional=] [=tree-abiding pseudo-element|tree-abiding=] [=view transition pseudo-elements=]
+	associated with a [=view transition name=].
+	These pseudo-elements take a <> as their argument,
+	and their syntax follows the pattern:
+
+	
+		::view-transition-pseudo(<>)
+	

+
+	where <> selects a [=view transition name=],
+	and has the following syntax definition:
+
+	
+		<pt-name-selector> = '*' | <>
+	

+
+	A [=named view transition pseudo-element=] [=selector=] only matches
+	a corresponding [=pseudo-element=]
+	if its <> matches that [=pseudo-element=]’s [=view transition name=],
+	i.e. if it is either ''*'' or a matching <>.
 
-	
This element serves as a parent for all ''::view-transition-group()'' pseudo-elements.

+	Note: The [=view transition name=] of a [=view transition pseudo-element=]
+	is set to the 'view-transition-name' that triggered its creation.
 
-	A [=tree-abiding pseudo-element=] that is also
-	a [=pseudo-element root=].
-	Its [=originating element=] is the document's [=document element=].
+	The specificity of a [=named view transition pseudo-element=] [=selector=]
+	with a <> argument
+	is equivalent to a [=type selector=].
+	The specificity of a [=named view transition pseudo-element=] [=selector=]
+	with a ''*'' argument
+	is zero.
 
-	Its [=containing block=] is the [=snapshot containing block=].
+### View Transition Tree Root: the ''::view-transition'' pseudo-element ### {#view-transition-pseudo}
+
+	The ::view-transition [=pseudo-element=]
+	is a [=tree-abiding pseudo-element=] that is also a [=pseudo-element root=].
+	Its [=originating element=] is the document's [=document element=],
+	and its [=containing block=] is the [=snapshot containing block=].
+
+	Note: This element serves as the [=tree/parent=] of all ''::view-transition-group()'' pseudo-elements.
 
 	The following is added to the [=global view transition user agent style sheet=]:
 
@@ -677,12 +708,19 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
 		and position all ''::view-transition-group()'' pseudo-elements relative to the [=snapshot containing block origin=].
-### ::view-transition-group( <> ) ### {#::view-transition-group} +### View Transition Named Subtree Root: the ''::view-transition-group()'' pseudo-element ### {#::view-transition-group} + + The ::view-transition-group() [=pseudo-element=] + is a [=named view transition pseudo-element=] + that represents a matching named [=view transition=] capture. + A ''::view-transition-group()'' [=pseudo-element=] + is generated for each [=view transition name=] + as a [=tree/child=] of the ''::view-transition'' [=pseudo-element=], + and contains a corresponding ''::view-transition-image-pair()''.
This element initially mirrors the size and position of the “old” element, or the “new” element if there isn't an “old” element. - It is always a [=tree/child=] of a ''::view-transition''. If there's both an “old” and “new” state, styles in the [=document/view transition style sheet=] animate this pseudo-element's 'width' and 'height' @@ -693,12 +731,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; This style is generated dynamically since the values of animated properties are determined at the time that the transition begins.
- A [=tree-abiding pseudo-element=] - that is also a [=named view-transition pseudo-element=], - and [=tree/participates=] in a [=pseudo-element tree=]. - - It is selected from its [=ultimate originating element=], the [=document element=]. - The following is added to the [=global view transition user agent style sheet=]: ```css @@ -712,21 +744,25 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; } ``` -### ::view-transition-image-pair( <> ) ### {#::view-transition-image-pair} +### View Transition Image Pair Isolation: the ''::view-transition-image-pair()'' pseudo-element ### {#::view-transition-image-pair} -
- This element is a child of the group element and provides ''isolation: isolate'' for its children. - It's needed so that its children can be blended with non-normal blend modes without affecting other visual outputs. + The ::view-transition-image-pair() [=pseudo-element=] + is a [=named view transition pseudo-element=] + that represents a pair of corresponding old/new [=view transition=] captures. + This pseudo-element is a [=tree/child=] of the corresponding ''::view-transition-group()'' pseudo-element + and contains + a corresponding ''::view-transition-old()'' pseudo-element + and/or + a corresponding ''::view-transition-new()'' pseudo-element + (in that order). - It is always present as a [=tree/child=] of each ''::view-transition-group()''. +
+ This element exists to provide ''isolation: isolate'' for its children, + and is always present as a [=tree/child=] of each ''::view-transition-group()''. + This isolation allows the image pair to be blended with non-normal blend modes + without affecting other visual outputs.
- A [=tree-abiding pseudo-element=] - that is also a [=named view-transition pseudo-element=], - and [=tree/participates=] in a [=pseudo-element tree=]. - - It is selected from its [=ultimate originating element=], the [=document element=]. - The following is added to the [=global view transition user agent style sheet=]: ```css @@ -739,32 +775,23 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; } ``` -### ::view-transition-old( <> ) ### {#::view-transition-old} - -
- - This element is a replaced element that produced the visual representation of the “old” state taken from user-agent provided snapshots. +### View Transition Old State Image: the ''::view-transition-old()'' pseudo-element ### {#::view-transition-old} - This is only ever a [=tree/child=] of a ''::view-transition-image-pair()'', - never has any [=tree/children=], - and is omitted if there's no “old” state to represent. + The ::view-transition-old() [=pseudo-element=] + is an empty [=named view transition pseudo-element=] + that represents a visual snapshot of the “old” state as a [=replaced element=]; + it is omitted if there's no “old” state to represent. + Each ''::view-transition-old()'' pseudo-element is a [=tree/child=] + of the corresponding ''::view-transition-image-pair()'' pseudo-element. +
'':only-child'' can be used to match cases where this element is the only element in the ''::view-transition-image-pair()''. The appearance of this element can be manipulated with `object-*` properties in the same way that other replaced elements can be. -
- A [=tree-abiding pseudo-element=] - that is also a [=named view-transition pseudo-element=], - and [=tree/participates=] in a [=pseudo-element tree=]. - - It is selected from its [=ultimate originating element=], the [=document element=]. - - It is a [=replaced element=], with [=natural dimensions=] equal to the content's size. - - Note: The image content is captured in [=capture the image=], - then set and updated in [=setup transition pseudo-elements=] and [=update pseudo-element styles=]. + Note: The content and [=natural dimensions=] of the image are captured in [=capture the image=], + and set in [=setup transition pseudo-elements=]. The following is added to the [=global view transition user agent style sheet=]: @@ -786,10 +813,20 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; Note: Additional styles in the [=document/view transition style sheet=] added to animate these pseudo-elements are detailed in [=setup transition pseudo-elements=] and [=update pseudo-element styles=]. -### ::view-transition-new( <> ) ### {#::view-transition-new} +### View Transition New State Image: the ''::view-transition-new()'' pseudo-element ### {#::view-transition-new} - Identical to ''::view-transition-old()'', - except the following styles added to the [=global view transition user agent style sheet=]: + The ::view-transition-new() [=pseudo-element=] + (like the analogous ''::view-transition-old()'' pseudo-element) + is an empty [=named view transition pseudo-element=] + that represents a visual snapshot of the “new” state as a [=replaced element=]; + it is omitted if there's no “new” state to represent. + Each ''::view-transition-new()'' pseudo-element is a [=tree/child=] + of the corresponding ''::view-transition-image-pair()'' pseudo-element. + + Note: The content and [=natural dimensions=] of the image are captured in [=capture the image=], + then set and updated in [=setup transition pseudo-elements=] and [=update pseudo-element styles=]. + + The following is added to the [=global view transition user agent style sheet=]: ```css :root::view-transition-new(*) { @@ -804,8 +841,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; } ``` - Note: The construction of this tree is performed in the [=setup transition pseudo-elements=] algorithm. - # Concepts # {#concepts} ## Phases ## {#phases-concept} From b2f0a11ade8170880ae45450b9364f3a5de991a8 Mon Sep 17 00:00:00 2001 From: fantasai Date: Wed, 31 May 2023 14:47:55 -0400 Subject: [PATCH 35/36] [scroll-animations-1] Replace timeline-attachment with timeline-scope #7759 --- scroll-animations-1/Overview.bs | 263 ++++++++++---------------------- 1 file changed, 77 insertions(+), 186 deletions(-) diff --git a/scroll-animations-1/Overview.bs b/scroll-animations-1/Overview.bs index 91b8e2f74c28..f9dbd894e748 100644 --- a/scroll-animations-1/Overview.bs +++ b/scroll-animations-1/Overview.bs @@ -136,7 +136,7 @@ spec: cssom-view-1; type: dfn; [=Scroll progress timelines=] can be referenced in 'animation-timeline' anonymously using the ''scroll()'' [=functional notation=] - or by name (see [[#timeline-scope]]) + or by name (see [[#timeline-scoping]]) after declaring them using the 'scroll-timeline' properties. In the Web Animations API, they can be represented anonymously by a {{ScrollTimeline}} object. @@ -323,7 +323,7 @@ spec: cssom-view-1; type: dfn; [=Scroll progress timelines=] can also be defined on the [=scroll container=] itself, and then referenced by name by elements within the name’s scope - (see [[#timeline-scope]]). + (see [[#timeline-scoping]]). Such named scroll progress timelines are declared in the [=coordinated value list=] @@ -332,20 +332,6 @@ spec: cssom-view-1; type: dfn; with 'scroll-timeline-name' as the [=coordinating list base property=]. See [[css-values-4#linked-properties]]. - Depending on its name attachment - ('scroll-timeline-attachment'), - a name specified by 'scroll-timeline-name' - can be attached to a [=scroll progress timeline=] defined on the element’s own box - (''scroll-timeline-attachment/local''), - declared for the element’s scope but deferred - to a descendant [=scroll container=]’s [=scroll progress timeline=] - (''scroll-timeline-attachment/defer''), - or used to attach the element’s [=scroll progress timeline=] - to a name declared and deferred by an ancestor - (''scroll-timeline-attachment/ancestor''), - effectively allowing its [[#timeline-scope|scope]] to expand - beyond this element and its descendants. - ### Naming a Scroll Progress Timeline: the 'scroll-timeline-name' property ### {#scroll-timeline-name} 
@@ -360,10 +346,6 @@ spec: cssom-view-1; type: dfn;
 
 	Specifies names for the [=named scroll progress timelines=]
 	associated with this element.
-	Depending on the name’s [=attachment=] ('view-timeline-attachment'),
-	this element can declare a name,
-	define its [=scroll progress timeline=],
-	or both (the default).
 
 ### Axis of a Scroll Progress Timeline: the 'scroll-timeline-axis' property ### {#scroll-timeline-axis}
 
@@ -385,78 +367,18 @@ spec: cssom-view-1; type: dfn;
 
 	Values are as defined for ''scroll()''.
 
-	Note: This property has no effect when combined
-	with a 'scroll-timeline-attachment' of ''scroll-timeline-attachment/defer''.
-
-### Attachment of a Scroll Progress Timeline: the 'scroll-timeline-attachment' property ### {#scroll-timeline-attachment}
-
-	
-	Name: scroll-timeline-attachment
-	Value: [ local | defer | ancestor ]#
-	Initial: local
-	Applies to: all elements
-	Inherited: no
-	Computed value: a list of the keywords specified
-	Animation type: not animatable
-	

-
-	Specifies the [=name attachment=]
-	of each [=scroll progress timeline=] name
-	specified by 'scroll-timeline-name'.
-
-	Values have the following meanings:
-
-	

-		
local
-		

-			This [=scroll progress timeline=] name
-			[=attaches=] to the corresponding [=scroll progress timeline=]
-			defined on this box.
-
-		
defer
-		

-			This [=scroll progress timeline=] name’s [=attachment=]
-			is deferred to its descendants.
-			In other words,
-			this element declares a [=scroll progress timeline=]’s name
-			and defines its scope (see [[#timeline-scope]]),
-			but defers the timeline’s definition
-			([=scroll container=] source and axis)
-			to its descendants.
-
-			If more than one matching descendant [=scroll progress timeline=] exists,
-			or if no such timeline exists,
-			then the timeline name has no [=attachment=],
-			and represents an [=inactive timeline=].
-
-			ISSUE: Should it instead be ignored (be invisible to lookup)?
-			(This might make it harder to implement.)
-			If multiple, should it attach instead to the last declared timeline (in tree order)
-			rather than invalidating the attachment?
-
-		
ancestor
-		

-			This [=scroll progress timeline=] definition,
-			attaches to the closest matching [=scroll progress timeline=] name
-			that was deferred (''scroll-timeline-name/defer'')
-			by an ancestor (if any).
-
-			If no such ancestor exists,
-			the [=attachment=] is treated as ''scroll-timeline-attachment/local''.
-	

-
 ### Scroll Timeline Shorthand: the 'scroll-timeline' shorthand ### {#scroll-timeline-shorthand}
 
 	
 	Name: scroll-timeline
-	Value: [ <<'scroll-timeline-name'>> [ <<'scroll-timeline-axis'>> || <<'scroll-timeline-attachment'>> ]? ]#
+	Value: [ <<'scroll-timeline-name'>> <<'scroll-timeline-axis'>>? ]#
 	Applies to: all elements
 	Inherited: no
 	Animation type: not animatable
 	

 
 	This property is a [=shorthand=] for setting
-	'scroll-timeline-name', 'scroll-timeline-axis', and 'scroll-timeline-attachment'
+	'scroll-timeline-name' and 'scroll-timeline-axis'
 	in a single declaration.
 
 # View Progress Timelines # {#view-timelines}
@@ -484,7 +406,7 @@ spec: cssom-view-1; type: dfn;
 
 	[=View progress timelines=] can be referenced
 	anonymously using the ''view()'' [=functional notation=]
-	or by name (see [[#timeline-scope]])
+	or by name (see [[#timeline-scoping]])
 	after declaring them using the 'view-timeline' properties
 	on the [=view progress subject=].
 	In the Web Animations API,
@@ -736,7 +658,7 @@ spec: cssom-view-1; type: dfn;
 	[=View progress timelines=] can also be defined declaratively
 	and then referenced by name
 	by elements within the name’s scope
-	(see [[#timeline-scope]]).
+	(see [[#timeline-scoping]]).
 
 	Such named view progress timelines
 	are declared in the [=coordinated value list=]
@@ -745,14 +667,6 @@ spec: cssom-view-1; type: dfn;
 	with 'view-timeline-name' as the [=coordinating list base property=].
 	See [[css-values-4#linked-properties]].
 
-	[[#scroll-timelines-named|As for named scroll progress timelines]],
-	[=named view progress timelines=] can have various [=name attachments=],
-	allowing a name specified by 'view-timeline-name'
-	to be attached to the box’s own [=view progress timeline=],
-	deferring it to a descendant box’s [=view progress timeline=],
-	or connecting the box’s [=view progress timeline=]
-	to the scope of an ancestor.
-
 ### Naming a View Progress Timeline: the 'view-timeline-name' property ### {#view-timeline-name}
 
 	
@@ -767,10 +681,6 @@ spec: cssom-view-1; type: dfn;
 
 	Specifies names for the [=named view progress timelines=]
 	associated with this element.
-	Depending on the name’s [=attachment=] ('view-timeline-attachment'),
-	this element can declare a name,
-	define its [=view progress timeline=],
-	or both (the default).
 
 ### Axis of a View Progress Timeline: the 'view-timeline-axis' property ### {#view-timeline-axis}
 
@@ -789,9 +699,6 @@ spec: cssom-view-1; type: dfn;
 
 	Values are as defined for ''view()''.
 
-	Note: This property has no effect when combined
-	with a 'view-timeline-attachment' of ''view-timeline-attachment/defer''.
-
 ### Inset of a View Progress Timeline: the 'view-timeline-inset' property ### {#view-timeline-inset}
 
 	
@@ -825,74 +732,16 @@ spec: cssom-view-1; type: dfn;
 			defines an inward offset from the corresponding edge of the scrollport.
 	
 
-	Note: This property has no effect when combined
-	with a 'view-timeline-attachment' of ''view-timeline-attachment/defer''.
-
-### Attachment of a View Progress Timeline: the 'view-timeline-attachment' property ### {#view-timeline-attachment}
-
-	
-	Name: view-timeline-attachment
-	Value: [ local | defer | ancestor ]#
-	Initial: local
-	Applies to: all elements
-	Inherited: no
-	Computed value: a list of the keywords specified
-	Animation type: not animatable
-	

-
-	Specifies the [=name attachment=]
-	of each [=view progress timeline=] name
-	specified by 'view-timeline-name'.
-
-	Values have the following meanings:
-
-	

-		
local
-		

-			This [=view progress timeline=] name
-			[=attaches=] to the corresponding [=view progress timeline=]
-			defined on this box.
-
-		
defer
-		

-			This [=view progress timeline=] name’s [=attachment=]
-			is deferred to its descendants.
-			In other words,
-			this element declares a [=view progress timeline=]’s name
-			and defines its scope (see [[#timeline-scope]]),
-			but defers the timeline’s definition
-			([=view progress subject|subject=],
-			 [=scroll container=] source,
-			 axis, and
-			 [=view progress visibility range|visibility range=])
-			to its descendants.
-
-			If more than one matching descendant [=view progress timeline=] exists,
-			or if no such timeline exists,
-			then this timeline name has no [=attachment=],
-			and represents an [=inactive timeline=].
-
-		
ancestor
-		

-			This [=view progress timeline=] definition
-			[=attaches=] to the closest matching [=view progress timeline=] name
-			that was deferred (''view-timeline-name/defer'')
-			by an ancestor (if any).
-
-			If no such ancestor exists,
-			the [=attachment=] is treated as ''view-timeline-attachment/local''.
-	

-
 ### View Timeline Shorthand: the 'view-timeline' shorthand ### {#view-timeline-shorthand}
 
 	
 	Name: view-timeline
-	Value: [ <<'view-timeline-name'>> [ <<'view-timeline-axis'>> || <<'view-timeline-attachment'>> ]? ]#
+	Value: [ <<'view-timeline-name'>> <<'view-timeline-axis'>>? ]#
 	Applies to: all elements
 	

 
 	This property is a [=shorthand=] for setting
-	'view-timeline-name', 'view-timeline-axis', and 'view-timeline-attachment'
+	'view-timeline-name' and 'view-timeline-axis'
 	in a single declaration.
 	It does not set 'view-timeline-inset'.
 
@@ -951,13 +800,17 @@ spec: cssom-view-1; type: dfn;
 	The editors would be interested in hearing about
 	any real use cases for multiple iterations here.
 
-## Named Timeline Scoping and Lookup ## {#timeline-scope}
+## Named Timeline Scoping and Lookup ## {#timeline-scoping}
 
 	A named [=scroll progress timeline=] or [=view progress timeline=]
 	is referenceable by:
 	* the name-declaring element itself
 	* that element’s descendants
 
+	Note: The 'timeline-scope' property can be used
+	to declare the name of a timeline on an ancestor of its defining element,
+	effectively expanding its scope beyond that element’s subtree.
+
 	If multiple elements have declared the same timeline name,
 	the matching timeline is the one declared
 	on the nearest element in tree order.
@@ -967,16 +820,8 @@ spec: cssom-view-1; type: dfn;
 	take precedence, and
 	[=scroll progress timelines=] take precedence over [=view progress timelines=].
 
-	Note: Although only names on the ancestor chain
-	are visible to a timeline name lookup,
-	a deferred [=name attachment=] allows a name declared on an ancestor
-	to be attached to a timeline sourced elsewhere in its subtree,
-	effectively allowing lookup of a timeline sourced
-	from a sibling, cousin, or descendant.
-	See 'scroll-timeline-attachment'/'view-timeline-attachment'.
-
 	

-		Using ''scroll-timeline-attachment: defer'',
+		Using ''timeline-scope'',
 		an element can refer to timelines
 		bound to elements that are siblings, cousins, or even descendants.
 		For example, the following creates an animation on an element
@@ -991,16 +836,19 @@ spec: cssom-view-1; type: dfn;
 			}
 
 			.root {
-			  scroll-timeline: scroller defer;
+			  /* declares the scope of a 'scroller' timeline to reach all descendants */
+			  timeline-scope: scroller;
 			}
 
 			.root .animation {
 			  animation: anim;
+			  /* references the 'scroller' timeline for driving the progress of 'anim' */
 			  animation-timeline: scroller;
 			}
 
 			.root .animation + .scroller {
-			  scroll-timeline: scroller ancestor;
+			  /* attaches a scroll progress timeline to the timeline name 'scroller' */
+			  scroll-timeline: scroller;
 			}
 		
 		…
@@ -1011,13 +859,6 @@ spec: cssom-view-1; type: dfn;
 		
 	

 
-	If a timeline name has been declared,
-	but does not have a usable [=attachment=]
-	(e.g. if it is declared with ''scroll-timeline-name/defer'',
-	but no [=scroll progress timeline=] or [=view progress timeline=]
-	is [=attachment|attached=] to it),
-	it refers to an [=inactive timeline=].
-
 ## Animation Events ## {#events}
 
 	[=Scroll-driven animations=] dispatch all the same animation events
@@ -1108,7 +949,7 @@ spec: cssom-view-1; type: dfn;
 
 	ISSUE: This section should move to CSS-ANIMATIONS-2 and WEB-ANIMATIONS-2.
 
-	This specification introduces the concepts of [=named timeline ranges=]
+	This appendix introduces the concepts of [=named timeline ranges=]
 	and [=animation attachment ranges=]
 	to CSS Animations
 	and Web Animations.
@@ -1399,15 +1240,65 @@ spec: cssom-view-1; type: dfn;
 	should it return percentage progress through that range,
 	or time progress through that range?
 
+# Appendix B: Timeline Name Scope # {#timeline-name-scope}
+
+	ISSUE: This section should move to CSS-ANIMATIONS-2.
+
+	This appendix introduces the 'timeline-scope' property,
+	which allows declaring a timeline name’s scope on an ancestor
+	of the timeline’s defining element.
+
+## Declaring a Named Timeline’s Scope: the 'timeline-scope' property ## {#timeline-scope}
+
+	
+		Name: timeline-scope
+		Value: none | <>#
+		Initial: none
+		Applies to: all elements
+		Inherited: no
+		Computed value: the keyword ''timeline-scope/none'' or a list of [=CSS identifiers=]
+		Animation type: not animatable
+	

+
+	This property declares the scope of the specified timeline names
+	to extend across this element’s subtree.
+	This allows a named timeline
+	(such as a [=named scroll progress timeline=] or [=named view progress timeline=])
+	to be referenced by elements outside the timeline-defining element’s subtree--
+	for example, by siblings, cousins, or ancestors.
+	It also blocks descendant timelines with the specified names
+	from being referenced from outside this subtree,
+	and ancestor timelines with the specified names from being referenced
+	within this subtree.
+
+	Values have the following meanings:
+
+	

+		
none
+		

+			No changes in timeline name scope.
+
+		
<>
+		

+			Declares the name of a matching named timeline defined by a descendant--
+			whose scope is not already explicitly declared by a descendant using 'timeline-scope'--
+			to be in scope for this element and its descendants.
+
+			If no such timeline exists,
+			or if more than one such timeline exists,
+			instead declares an [=inactive timeline=] with the specified name.
+	

+
+	Note: This property cannot affect or invalidate any timeline name lookups
+	within the subtree of a descendant element that declares the same name.
+	See [[#timeline-scope]].
+
 # Changes # {#changes}
 
 	Changes since the previous
-	(6 April 2023)
+	(28 April 2023)
 	Working Draft include:
 
-	* Adding 'scroll-timeline-attachment' and 'view-timeline-attachment'.
-		(Issue 7759)
-	* Switching ''getCurrentTime()'' to take a dictionary of options.
-		(Issue 8201)
-	* Clarified how view timeline ranges are calculated with ''position: sticky''.
-		(Issue 8298)
+	* Removed scroll-timeline-attachment and view-timeline-attachment in favor of 'timeline-scope'.
+
+	See also Earlier Changes.

From c413c00534a68844288d17f927f3d4a8b05ec6da Mon Sep 17 00:00:00 2001
From: fantasai 
Date: Mon, 5 Jun 2023 16:29:41 -0400
Subject: [PATCH 36/36] [scroll-animations-1] Clarify that timeline identity is
 also not cycled.

See https://github.com/w3c/csswg-drafts/issues/7759#issuecomment-1413582984
---
 scroll-animations-1/Overview.bs | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/scroll-animations-1/Overview.bs b/scroll-animations-1/Overview.bs
index f9dbd894e748..69158d92382f 100644
--- a/scroll-animations-1/Overview.bs
+++ b/scroll-animations-1/Overview.bs
@@ -922,9 +922,10 @@ spec: cssom-view-1; type: dfn;
 	through those APIs.
 
 	If the final style and layout update
-	would result in a change of time for any [=scroll progress timelines=] or
-	[=view progress timelines=], they will not be re-sampled to reflect the
-	new offset until the next update of the rendering.
+	would result in a change the time or scope (see 'timeline-scope')
+	for any [=scroll progress timelines=] or [=view progress timelines=],
+	they will not be re-sampled to reflect the new offset
+	until the next update of the rendering.
 
 	Nothing in this section is intended to require
 	that scrolling block on layout or script.