From 3c47996e45b972841b536f841d241b345e043a46 Mon Sep 17 00:00:00 2001 From: jakearchibald Date: Tue, 22 Nov 2022 17:45:06 +0000 Subject: [PATCH 01/13] Define pseudo-nesting and naming --- css-view-transitions-1/Overview.bs | 140 +++++++++++++++++------------ 1 file changed, 82 insertions(+), 58 deletions(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index 1e49c9015e8..2e36889b4f8 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -197,38 +197,59 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; # Pseudo-elements # {#pseudo} - The following view-transition pseudo-elements represent the various items being animated. +## Pseudo-element parents ## {#parent-pseudo} - The ''::view-transition'' pseudo-element acts as a grouping element for other [=view-transition pseudo-elements=] - and has the document's [=document element=] as its [=originating element=]. + A pseudo-element parent is a mixin that has children, + a [=/list=] of [=pseudo-elements=]. + Initially an empty [=/list=]. - Note: For example, '':root::view-transition'' selector matches this pseudo-element, - but ''div::view-transition'' does not. + A [=pseudo-element parent=]'s [=pseudo-element parent/children=] should be laid out in the order they appear in the [=/list=], according to their styles. - Other [=view-transition pseudo-elements=] take a <> argument - to specify which elements named with 'view-transition-name' are affected. + When a [=pseudo-element=] |pseudo| is part of a [=pseudo-element parent=] |parent|'s [=pseudo-element parent/children=], + and |parent| is a [=pseudo-element=], + then |pseudo|'s [=originating pseudo-element=] is |parent|. - There can be multiple pseudo-elements of the same type, - one for each 'view-transition-name' participating in a transition. +
+ To get the descendants of a [=pseudo-element parent=] |parent|, perform the following steps. + They return a [=/list=] of [=pseudo-elements=]. + + 1. Let |descendants| be a new [=/list=]. + + 1. [=list/For each=] |child| of |parent|'s [=pseudo-element parent/children=]: + + 1. [=list/Append=] |child| to |descendants|. + + 1. If |child| is a [=pseudo-element parent=], + then [=list/append=] |child|'s [=pseudo-element parent/descendants=] to |descendants|. + + 1. Return |descendants|. +
+ +## Named view-transition pseudo-elements ## {#named-view-transition-pseudo} - The <> is defined as follows: + A named view-transition pseudo-element is a mixin for [=pseudo-elements=] + that also have a view-transition name, + a string. + + Their selector takes a <> argument.
 		<pt-name-selector> = '*' | <>
 	
- A value of ''*'' makes the corresponding selector apply to all pseudo elements of the specified type. - The specificity of a view-transition selector with a ''*'' argument is zero. + The selector matches if the <> is `*` or matches the [=named view-transition pseudo-element=]'s [=named view-transition pseudo-element/view-transition name=]. - The <> value makes the corresponding selector apply to exactly one pseudo element of the specified type, - namely the pseudo-element that is created as a result of the 'view-transition-name' property on an element with the same <> value. 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 following describes all of the [=view-transition pseudo-elements=] and their function: + 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. + +## View transition pseudo-elements ## {#view-transition-pseudos} : ::view-transition - :: This pseudo-element is the grouping container of all the other [=view-transition pseudo-elements=]. + :: A [=pseudo-element parent=]. Its [=originating element=] is the document's [=document element=]. The following is added to the [=HTML user agent style sheet=]: @@ -240,15 +261,18 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; } ``` - Note: This pseudo-element provides a containing block for all ''::view-transition-group()'' pseudo-elements. - The aim of the style is to size the pseudo-element to cover the [=snapshot viewport=] - and position all ''::view-transition-group()'' pseudo-elements relative to the [=snapshot viewport origin=]. +
+ This pseudo-element provides a containing block for all ''::view-transition-group()'' pseudo-elements. + The aim of the style is to size the pseudo-element to cover the [=snapshot viewport=] + and position all ''::view-transition-group()'' pseudo-elements relative to the [=snapshot viewport origin=]. + + This is only ever the [=pseudo-element parent/children|child=] of the [=snapshot viewport=]. +
: ::view-transition-group( <> ) - :: One of these pseudo-elements exists for each 'view-transition-name' in a view transition, - and holds the rest of the pseudo-elements corresponding to this 'view-transition-name'. + :: A [=pseudo-element parent=], and a [=named view-transition pseudo-element=]. - Its [=originating element=] is the ''::view-transition'' pseudo-element. + It is selected from its [=ultimate originating element=], the [=document element=]. The following is added to the [=HTML user agent style sheet=]: @@ -270,15 +294,14 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; from the size of the old element's [=border box=] to that of the new element's [=border box=]. Also the element's 'transform' is animated from the old element's screen space transform to the new element's screen space transform. This style is generated dynamically since the values of animated properties are determined at the time that the transition begins. - - Issue: The selector for this and subsequently defined pseudo-elements is likely to change to indicate position in the pseudo-tree hierarchy. + This is only ever a [=pseudo-element parent/children|child=] of a ''::view-transition''. + : ::view-transition-image-pair( <> ) - :: One of these pseudo-elements exists for each view-transition-name being in a view transition, - and holds the images of the old and new elements. + :: A [=pseudo-element parent=], and a [=named view-transition pseudo-element=]. - Its [=originating element=] is the ''::view-transition-group()'' pseudo-element with the same transition-name. + It is selected from its [=ultimate originating element=], the [=document element=]. The following is added to the [=HTML user agent style sheet=]: @@ -292,14 +315,15 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; } ``` - Note: The aim of the style is to position the element to occupy the same space as its ''::view-transition-group()'' element. + Note: This is only ever a [=pseudo-element parent/children|child=] of a ''::view-transition-group()''. : ::view-transition-old( <> ) - :: One of these pseudo-elements exists for each element in the old DOM being animated by the view transition, - and is a [=replaced element=] displaying the old element's snapshot image. - It has [=natural dimensions=] equal to the snapshot's size. + :: A [=named view-transition pseudo-element=]. - Its [=originating element=] is the ''::view-transition-image-pair()'' pseudo-element with the same transition-name. + It is selected from its [=ultimate originating element=], the [=document element=]. + + It is a [=replaced element=] displaying the old element's snapshot image. + It has [=natural dimensions=] equal to the snapshot's size. The following is added to the [=HTML user agent style sheet=]: @@ -320,11 +344,13 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 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=]. + Note: This is only ever a [=pseudo-element parent/children|child=] of a ''::view-transition-image-pair()''. + : ::view-transition-new( <> ) :: Identical to ''::view-transition-old()'', except it deals with the new element instead. - The precise tree structure, and in particular the order of sibling pseudo-elements, + Note: The precise tree structure, and in particular the order of sibling pseudo-elements, is defined in the [=setup transition pseudo-elements=] algorithm. # Concepts # {#concepts} @@ -371,6 +397,8 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; This means the snapshot canvas size is likely to be consistent for the [=document element=]'s [=captured element/old image=] and [=captured element/new element=]. + The [=snapshot viewport=] is also a [=pseudo-element parent=]. + The snapshot viewport origin refers to the start of the block and inline axes of the [=snapshot viewport=]. ## The [=view-transition layer=] stacking layer ## {#view-transition-stacking-layer} @@ -605,6 +633,10 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; : finished promise :: a {{Promise}}. Initially [=a new promise=] in [=this's=] [=relevant Realm=]. + + : transition root pseudo-element + :: a ''::view-transition''. + Initially a new ''::view-transition''. The {{ViewTransition/finished}} [=getter steps=] are to return [=this's=] [=ViewTransition/finished promise=]. @@ -959,9 +991,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 1. Let |hasActiveAnimations| be a boolean, initially false. - 1. For each [=view-transition pseudo-elements=] associated with |transition|: - - 1. Let |element| be the [=view-transition pseudo-element=]. + 1. [=list/For each=] |element| of |transition|'s [=ViewTransition/transition root pseudo-element=] and its [=pseudo-element parent/descendants=]: 1. For each |animation| whose [=timeline=] is a [=document timeline=] associated with |document|, and contains at least one [=animation/associated effect=] whose [=effect target=] is |element|, @@ -1020,30 +1050,27 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 1. Let |document| be [=this's=] [=relevant global object's=] [=associated document=]. - 1. Let |transitionRoot| be the result of creating a new ''::view-transition'' pseudo-element in |document|'s [=snapshot viewport=]. + 1. [=list/Append=] |transition|'s [=ViewTransition/transition root pseudo-element=] to this |document|'s [=snapshot viewport=]'s [=pseudo-element parent/children=]. 1. [=map/For each=] |transitionName| → |capturedElement| of |transition|'s [=ViewTransition/named elements=]: - 1. Let |group| be the result of creating a new ''::view-transition-group()'' pseudo-element with the name |transitionName|. - - Issue: "name" should be defined/linked. + 1. Let |group| be a new ''::view-transition-group()'', + with its [=named view-transition pseudo-element/view-transition name=] set to |transitionName|. - 1. Append |group| to |transitionRoot|. + 1. [=list/Append=] |group| to |transition|'s [=ViewTransition/transition root pseudo-element=]'s [=pseudo-element parent/children=]. - Issue: This should be better defined. - I'm not sure if pseudo-elements have defined ways to modify their DOM. + 1. Let |imagePair| be a new ''::view-transition-image-pair()'', + with its [=named view-transition pseudo-element/view-transition name=] set to |transitionName|. - 1. Let |imagePair| be a new ''::view-transition-image-pair()'' pseudo-element with the name |transitionName|. - - 1. Append |imagePair| to |group|. + 1. [=list/Append=] |imagePair| to |group|'s [=pseudo-element parent/children=]. 1. If |capturedElement|'s [=captured element/old image=] is not null, then: - 1. Let |old| be a new ''::view-transition-old()'' [=replaced element=] pseudo-element, - with the name |transitionName|, + 1. Let |old| be a new ''::view-transition-old()'', + with its [=named view-transition pseudo-element/view-transition name=] set to |transitionName|, displaying |capturedElement|'s [=captured element/old image=]. - 1. Append |old| to |imagePair|. + 1. [=list/Append=] |old| to |imagePair|'s [=pseudo-element parent/children=]. 1. Let |oldViewBox| be |capturedElement|'s [=captured element/old styles=] 'object-view-box' property. @@ -1061,15 +1088,15 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 1. If |capturedElement|'s [=new element=] is not null, then: - 1. Let |new| be a new ''::view-transition-new()'' [=replaced element=] pseudo-element, - with the name |transitionName|, + 1. Let |new| be a new ''::view-transition-new()'', + with its [=named view-transition pseudo-element/view-transition name=] set to |transitionName|, displaying the [=capture the image=] of |capturedElement|'s [=new element=]. - 1. Append |new| to |imagePair|. + 1. [=list/Append=] |new| to |imagePair|'s [=pseudo-element parent/children=]. The [=new element=] and its contents (the flat tree descendants of the element, including both text and elements, or the replaced content of a replaced element), - except the [=view-transition pseudo-elements=], + except the |transition|'s [=ViewTransition/transition root pseudo-element=] and its [=pseudo-element parent/descendants=], are not painted (as if they had visibility: hidden) and do not respond to hit-testing (as if they had pointer-events: none) until |new| exists. @@ -1250,11 +1277,8 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 1. Let |document| be |transition|'s [=relevant global object's=] [=associated document=]. - 1. Remove all associated [=view-transition pseudo-elements=] from |document|. - - Issue: There needs to be a definition/link for "remove". - - Issue: There needs to be a definition/link for "associated". + 1. [=list/Remove=] |transition|'s [=ViewTransition/transition root pseudo-element=] + from |document|'s [=snapshot viewport=]'s [=pseudo-element parent/children=]. 1. [=list/For each=] |capturedElement| of |transition|'s [=ViewTransition/named elements=]' [=map/values=]: From 0ecc90f20a5cd2e438343eee38a92854aded03fb Mon Sep 17 00:00:00 2001 From: jakearchibald Date: Tue, 22 Nov 2022 17:48:17 +0000 Subject: [PATCH 02/13] Language tweak --- 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 2e36889b4f8..c08ed95bc28 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -203,7 +203,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; a [=/list=] of [=pseudo-elements=]. Initially an empty [=/list=]. - A [=pseudo-element parent=]'s [=pseudo-element parent/children=] should be laid out in the order they appear in the [=/list=], according to their styles. + A [=pseudo-element parent=]'s [=pseudo-element parent/children=] are laid out in the order they appear in the [=/list=], according to their styles. When a [=pseudo-element=] |pseudo| is part of a [=pseudo-element parent=] |parent|'s [=pseudo-element parent/children=], and |parent| is a [=pseudo-element=], From b31df55c01b38344b6a13ebb59f531b3c558b758 Mon Sep 17 00:00:00 2001 From: jakearchibald Date: Wed, 23 Nov 2022 12:20:39 +0000 Subject: [PATCH 03/13] Specify tree-abiding --- css-view-transitions-1/Overview.bs | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index c08ed95bc28..30dc5aa5dda 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -199,7 +199,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; ## Pseudo-element parents ## {#parent-pseudo} - A pseudo-element parent is a mixin that has children, + A pseudo-element parent is a mixin for [=tree-abiding pseudo-elements=] that has children, a [=/list=] of [=pseudo-elements=]. Initially an empty [=/list=]. @@ -227,7 +227,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; ## Named view-transition pseudo-elements ## {#named-view-transition-pseudo} - A named view-transition pseudo-element is a mixin for [=pseudo-elements=] + A named view-transition pseudo-element is a mixin for [=tree-abiding pseudo-elements=] that also have a view-transition name, a string. @@ -249,7 +249,8 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; ## View transition pseudo-elements ## {#view-transition-pseudos} : ::view-transition - :: A [=pseudo-element parent=]. + :: A [=tree-abiding pseudo-element=] that is also + a [=pseudo-element parent=]. Its [=originating element=] is the document's [=document element=]. The following is added to the [=HTML user agent style sheet=]: @@ -270,7 +271,8 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; : ::view-transition-group( <> ) - :: A [=pseudo-element parent=], and a [=named view-transition pseudo-element=]. + :: A [=tree-abiding pseudo-element=] that is also + a [=pseudo-element parent=], and a [=named view-transition pseudo-element=]. It is selected from its [=ultimate originating element=], the [=document element=]. @@ -299,7 +301,8 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; : ::view-transition-image-pair( <> ) - :: A [=pseudo-element parent=], and a [=named view-transition pseudo-element=]. + :: A [=tree-abiding pseudo-element=] that is also + a [=pseudo-element parent=], and a [=named view-transition pseudo-element=]. It is selected from its [=ultimate originating element=], the [=document element=]. @@ -318,7 +321,8 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; Note: This is only ever a [=pseudo-element parent/children|child=] of a ''::view-transition-group()''. : ::view-transition-old( <> ) - :: A [=named view-transition pseudo-element=]. + :: A [=tree-abiding pseudo-element=] that is also + a [=named view-transition pseudo-element=]. It is selected from its [=ultimate originating element=], the [=document element=]. From a5806dd97b6b9d6a642feaf46585a0d2ac60cdf2 Mon Sep 17 00:00:00 2001 From: jakearchibald Date: Thu, 24 Nov 2022 11:18:56 +0000 Subject: [PATCH 04/13] Tidy up pseudo-parent definition --- css-view-transitions-1/Overview.bs | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index 30dc5aa5dda..ecd9ecdfb33 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -199,14 +199,17 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; ## Pseudo-element parents ## {#parent-pseudo} - A pseudo-element parent is a mixin for [=tree-abiding pseudo-elements=] that has children, + Issue: This definition should be moved to [[css-pseudo-4]]. + + A pseudo-element parent is a type of [=tree-abiding pseudo-element=]. + + It has children, a [=/list=] of [=pseudo-elements=]. Initially an empty [=/list=]. - A [=pseudo-element parent=]'s [=pseudo-element parent/children=] are laid out in the order they appear in the [=/list=], according to their styles. + A [=pseudo-element parent=]'s [=pseudo-element parent/children=] defines the nested children of the [=pseudo-element parent=] in document order. When a [=pseudo-element=] |pseudo| is part of a [=pseudo-element parent=] |parent|'s [=pseudo-element parent/children=], - and |parent| is a [=pseudo-element=], then |pseudo|'s [=originating pseudo-element=] is |parent|.
@@ -227,8 +230,9 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; ## Named view-transition pseudo-elements ## {#named-view-transition-pseudo} - A named view-transition pseudo-element is a mixin for [=tree-abiding pseudo-elements=] - that also have a view-transition name, + 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. From 7a74fdbd8b9ea1122e052ad99dda17a99bdc4e00 Mon Sep 17 00:00:00 2001 From: jakearchibald Date: Thu, 24 Nov 2022 11:19:07 +0000 Subject: [PATCH 05/13] Define :only-child behaviour --- css-view-transitions-1/Overview.bs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index ecd9ecdfb33..2e73157ead4 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -212,6 +212,8 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; When a [=pseudo-element=] |pseudo| is part of a [=pseudo-element parent=] |parent|'s [=pseudo-element parent/children=], then |pseudo|'s [=originating pseudo-element=] is |parent|. + If a [=pseudo-element parent=]'s [=pseudo-element parent/children=]'s [=list/size=] is 1, then '':only-child'' selects [=pseudo-element parent/children=][0]. +
To get the descendants of a [=pseudo-element parent=] |parent|, perform the following steps. They return a [=/list=] of [=pseudo-elements=]. From b4772946e2d36a0d950f2d6fcfa208a4246a704a Mon Sep 17 00:00:00 2001 From: jakearchibald Date: Thu, 24 Nov 2022 12:46:55 +0000 Subject: [PATCH 06/13] Nit --- 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 2e73157ead4..609bae1e329 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -225,7 +225,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 1. [=list/Append=] |child| to |descendants|. 1. If |child| is a [=pseudo-element parent=], - then [=list/append=] |child|'s [=pseudo-element parent/descendants=] to |descendants|. + then [=list/append=] each of |child|'s [=pseudo-element parent/descendants=] to |descendants|. 1. Return |descendants|.
From 8881264d36eb861f94710b4e722ab23c0d88410d Mon Sep 17 00:00:00 2001 From: jakearchibald Date: Thu, 24 Nov 2022 12:47:11 +0000 Subject: [PATCH 07/13] Clarify snapshot viewport as containing block --- css-view-transitions-1/Overview.bs | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index 609bae1e329..554e4358620 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -272,8 +272,6 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; This pseudo-element provides a containing block for all ''::view-transition-group()'' pseudo-elements. The aim of the style is to size the pseudo-element to cover the [=snapshot viewport=] and position all ''::view-transition-group()'' pseudo-elements relative to the [=snapshot viewport origin=]. - - This is only ever the [=pseudo-element parent/children|child=] of the [=snapshot viewport=].
: ::view-transition-group( <> ) @@ -407,8 +405,6 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; This means the snapshot canvas size is likely to be consistent for the [=document element=]'s [=captured element/old image=] and [=captured element/new element=]. - The [=snapshot viewport=] is also a [=pseudo-element parent=]. - The snapshot viewport origin refers to the start of the block and inline axes of the [=snapshot viewport=]. ## The [=view-transition layer=] stacking layer ## {#view-transition-stacking-layer} @@ -426,9 +422,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; - The [=view-transition layer=] paints after the stacking context for the [=document element=] and [=top layer=]. - - The [=view-transition layer=] is positioned at the [=snapshot viewport origin=], - and is the same size as the [=snapshot viewport=]. - As in, it covers the [=snapshot viewport=]. + - The [=view-transition layer=]'s [=containing block=] is the [=snapshot viewport=]. 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, From 4a510df8a27503d994857c6cad585cce08f79eb2 Mon Sep 17 00:00:00 2001 From: jakearchibald Date: Fri, 25 Nov 2022 11:42:16 +0000 Subject: [PATCH 08/13] Define adding the ::view-transition --- css-view-transitions-1/Overview.bs | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index 554e4358620..927a412ef24 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -259,6 +259,8 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; a [=pseudo-element parent=]. Its [=originating element=] is the document's [=document element=]. + Its [=containing block=] is the [=snapshot viewport=]. + The following is added to the [=HTML user agent style sheet=]: ```css @@ -422,8 +424,6 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; - The [=view-transition layer=] paints after the stacking context for the [=document element=] and [=top layer=]. - - The [=view-transition layer=]'s [=containing block=] is the [=snapshot viewport=]. - 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. @@ -500,6 +500,16 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; Note: This is used to hold dynamic styles relating to transitions. +## Additions to [=document element=] ## {#additions-to-document-element} + + A [=document element=] additionally has a view-transition root pseudo-element. + A ''::view-transition'' or null. Initially null. + + When this is a ''::view-transition'', the ''::view-transition'' renders as a child of the [=document element=], + and the [=document element=] is its [=originating element=]. + + Note: The position of the ''::view-transition'' within the [=document element=] does not matter, as the ''::view-transition'''s [=containing block=] is the [=snapshot viewport=]. + # API # {#api} ## Additions to {{Document}} ## {#additions-to-document-api} @@ -1054,7 +1064,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 1. Let |document| be [=this's=] [=relevant global object's=] [=associated document=]. - 1. [=list/Append=] |transition|'s [=ViewTransition/transition root pseudo-element=] to this |document|'s [=snapshot viewport=]'s [=pseudo-element parent/children=]. + 1. Set |document|'s [=document element=]'s [=view-transition root pseudo-element=] to |transition|'s [=ViewTransition/transition root pseudo-element=]. 1. [=map/For each=] |transitionName| → |capturedElement| of |transition|'s [=ViewTransition/named elements=]: @@ -1281,8 +1291,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 1. Let |document| be |transition|'s [=relevant global object's=] [=associated document=]. - 1. [=list/Remove=] |transition|'s [=ViewTransition/transition root pseudo-element=] - from |document|'s [=snapshot viewport=]'s [=pseudo-element parent/children=]. + 1. Set |document|'s [=document element=]'s [=view-transition root pseudo-element=] to null. 1. [=list/For each=] |capturedElement| of |transition|'s [=ViewTransition/named elements=]' [=map/values=]: From 35fde5d7553644f990ac5bc3b0fe1bfa2e5bd414 Mon Sep 17 00:00:00 2001 From: jakearchibald Date: Tue, 10 Jan 2023 14:04:02 +0000 Subject: [PATCH 09/13] Move iew-transition root pseudo-element to document --- css-view-transitions-1/Overview.bs | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index 927a412ef24..73f07dffb2b 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -212,7 +212,9 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; When a [=pseudo-element=] |pseudo| is part of a [=pseudo-element parent=] |parent|'s [=pseudo-element parent/children=], then |pseudo|'s [=originating pseudo-element=] is |parent|. - If a [=pseudo-element parent=]'s [=pseudo-element parent/children=]'s [=list/size=] is 1, then '':only-child'' selects [=pseudo-element parent/children=][0]. + If a [=pseudo-element parent=]'s [=pseudo-element parent/children=]'s [=list/size=] is 1, then '':only-child'' selects [=pseudo-element parent/children=][0]. Otherwise, '':only-child'' selects nothing. + + 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)` only contains one child. As in, there is no `::view-transition-old(ident)`.
To get the descendants of a [=pseudo-element parent=] |parent|, perform the following steps. @@ -498,17 +500,14 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; Initially a new [=style sheet=] in the [=user-agent origin=], ordered after the [=HTML user agent style sheet=]. Note: This is used to hold dynamic styles relating to transitions. - - -## Additions to [=document element=] ## {#additions-to-document-element} - A [=document element=] additionally has a view-transition root pseudo-element. - A ''::view-transition'' or null. Initially null. + : view-transition root pseudo-element + :: A ''::view-transition'' or null. Initially null. + When this is a ''::view-transition'', the ''::view-transition'' renders as a child of the [=document element=], + and the [=document element=] is its [=originating element=]. - When this is a ''::view-transition'', the ''::view-transition'' renders as a child of the [=document element=], - and the [=document element=] is its [=originating element=]. - - Note: The position of the ''::view-transition'' within the [=document element=] does not matter, as the ''::view-transition'''s [=containing block=] is the [=snapshot viewport=]. + Note: The position of the ''::view-transition'' within the [=document element=] does not matter, as the ''::view-transition'''s [=containing block=] is the [=snapshot viewport=]. + # API # {#api} @@ -1064,7 +1063,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 1. Let |document| be [=this's=] [=relevant global object's=] [=associated document=]. - 1. Set |document|'s [=document element=]'s [=view-transition root pseudo-element=] to |transition|'s [=ViewTransition/transition root pseudo-element=]. + 1. Set |document|'s [=view-transition root pseudo-element=] to |transition|'s [=ViewTransition/transition root pseudo-element=]. 1. [=map/For each=] |transitionName| → |capturedElement| of |transition|'s [=ViewTransition/named elements=]: @@ -1291,7 +1290,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 1. Let |document| be |transition|'s [=relevant global object's=] [=associated document=]. - 1. Set |document|'s [=document element=]'s [=view-transition root pseudo-element=] to null. + 1. Set |document|'s [=view-transition root pseudo-element=] to null. 1. [=list/For each=] |capturedElement| of |transition|'s [=ViewTransition/named elements=]' [=map/values=]: From 537d6996c72b23af2b0cc72bd8df3239d53aa9f5 Mon Sep 17 00:00:00 2001 From: jakearchibald Date: Tue, 10 Jan 2023 14:45:58 +0000 Subject: [PATCH 10/13] Base on tree terminology --- css-view-transitions-1/Overview.bs | 74 ++++++++++++------------------ 1 file changed, 30 insertions(+), 44 deletions(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index 73f07dffb2b..77843fd6ac9 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -197,40 +197,23 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; # Pseudo-elements # {#pseudo} -## Pseudo-element parents ## {#parent-pseudo} +## Pseudo-element root ## {#pseudo-root} Issue: This definition should be moved to [[css-pseudo-4]]. - A pseudo-element parent is a type of [=tree-abiding pseudo-element=]. + A pseudo-element root is a type of [=tree-abiding pseudo-element=] that is the [=tree/root=] in a [=tree=] of [=tree-abiding pseudo-elements=], + known as the pseudo-element tree. - It has children, - a [=/list=] of [=pseudo-elements=]. - Initially an empty [=/list=]. + The [=pseudo-element tree=] defines the document order of its [=tree/descendant=] [=tree-abiding pseudo-elements=]. - A [=pseudo-element parent=]'s [=pseudo-element parent/children=] defines the nested children of the [=pseudo-element parent=] in document order. + When a [=pseudo-element=] [=tree/participates=] in a [=pseudo-element tree=], + its [=originating pseudo-element=] is its [=tree/parent=]. - When a [=pseudo-element=] |pseudo| is part of a [=pseudo-element parent=] |parent|'s [=pseudo-element parent/children=], - then |pseudo|'s [=originating pseudo-element=] is |parent|. + If a [=tree/descendant=] |pseudo| of a [=pseudo-element root=] has no other [=tree/siblings=], + then '':only-child'' matches that |pseudo|. - If a [=pseudo-element parent=]'s [=pseudo-element parent/children=]'s [=list/size=] is 1, then '':only-child'' selects [=pseudo-element parent/children=][0]. Otherwise, '':only-child'' selects nothing. - - 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)` only contains one child. As in, there is no `::view-transition-old(ident)`. - -
- To get the descendants of a [=pseudo-element parent=] |parent|, perform the following steps. - They return a [=/list=] of [=pseudo-elements=]. - - 1. Let |descendants| be a new [=/list=]. - - 1. [=list/For each=] |child| of |parent|'s [=pseudo-element parent/children=]: - - 1. [=list/Append=] |child| to |descendants|. - - 1. If |child| is a [=pseudo-element parent=], - then [=list/append=] each of |child|'s [=pseudo-element parent/descendants=] to |descendants|. - - 1. Return |descendants|. -
+ 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} @@ -258,7 +241,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; : ::view-transition :: A [=tree-abiding pseudo-element=] that is also - a [=pseudo-element parent=]. + a [=pseudo-element root=]. Its [=originating element=] is the document's [=document element=]. Its [=containing block=] is the [=snapshot viewport=]. @@ -279,8 +262,9 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
: ::view-transition-group( <> ) - :: A [=tree-abiding pseudo-element=] that is also - a [=pseudo-element parent=], and a [=named view-transition pseudo-element=]. + :: 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=]. @@ -305,12 +289,13 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; Also the element's 'transform' is animated from the old element's screen space transform to the new element's screen space transform. This style is generated dynamically since the values of animated properties are determined at the time that the transition begins. - This is only ever a [=pseudo-element parent/children|child=] of a ''::view-transition''. + This is only ever a [=tree/child=] of a ''::view-transition''. : ::view-transition-image-pair( <> ) - :: A [=tree-abiding pseudo-element=] that is also - a [=pseudo-element parent=], and a [=named view-transition pseudo-element=]. + :: 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=]. @@ -326,11 +311,12 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; } ``` - Note: This is only ever a [=pseudo-element parent/children|child=] of a ''::view-transition-group()''. + Note: This is only ever a [=tree/child=] of a ''::view-transition-group()''. : ::view-transition-old( <> ) - :: A [=tree-abiding pseudo-element=] that is also - a [=named view-transition pseudo-element=]. + :: 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=]. @@ -356,7 +342,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 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=]. - Note: This is only ever a [=pseudo-element parent/children|child=] of a ''::view-transition-image-pair()''. + Note: This is only ever a [=tree/child=] of a ''::view-transition-image-pair()'', and never has any [=tree/children=]. : ::view-transition-new( <> ) :: Identical to ''::view-transition-old()'', @@ -957,7 +943,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 1. Otherwise: - 1. Render |element| and its descendants, + 1. Render |element| and its [=tree/descendants=], at the same size it appears in its [=node document=], over an infinite transparent canvas, following the [=capture rendering characteristics=]. @@ -1004,7 +990,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 1. Let |hasActiveAnimations| be a boolean, initially false. - 1. [=list/For each=] |element| of |transition|'s [=ViewTransition/transition root pseudo-element=] and its [=pseudo-element parent/descendants=]: + 1. [=list/For each=] |element| of |transition|'s [=ViewTransition/transition root pseudo-element=]'s [=tree/inclusive descendants=]: 1. For each |animation| whose [=timeline=] is a [=document timeline=] associated with |document|, and contains at least one [=animation/associated effect=] whose [=effect target=] is |element|, @@ -1070,12 +1056,12 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 1. Let |group| be a new ''::view-transition-group()'', with its [=named view-transition pseudo-element/view-transition name=] set to |transitionName|. - 1. [=list/Append=] |group| to |transition|'s [=ViewTransition/transition root pseudo-element=]'s [=pseudo-element parent/children=]. + 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|. - 1. [=list/Append=] |imagePair| to |group|'s [=pseudo-element parent/children=]. + 1. Append |imagePair| to |group|. 1. If |capturedElement|'s [=captured element/old image=] is not null, then: @@ -1083,7 +1069,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; with its [=named view-transition pseudo-element/view-transition name=] set to |transitionName|, displaying |capturedElement|'s [=captured element/old image=]. - 1. [=list/Append=] |old| to |imagePair|'s [=pseudo-element parent/children=]. + 1. Append |old| to |imagePair|. 1. Let |oldViewBox| be |capturedElement|'s [=captured element/old styles=] 'object-view-box' property. @@ -1105,11 +1091,11 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; with its [=named view-transition pseudo-element/view-transition name=] set to |transitionName|, displaying the [=capture the image=] of |capturedElement|'s [=new element=]. - 1. [=list/Append=] |new| to |imagePair|'s [=pseudo-element parent/children=]. + 1. Append |new| to |imagePair|. The [=new element=] and its contents (the flat tree descendants of the element, including both text and elements, or the replaced content of a replaced element), - except the |transition|'s [=ViewTransition/transition root pseudo-element=] and its [=pseudo-element parent/descendants=], + except the |transition|'s [=ViewTransition/transition root pseudo-element=]'s [=tree/inclusive descendants=], are not painted (as if they had visibility: hidden) and do not respond to hit-testing (as if they had pointer-events: none) until |new| exists. From 74f36aca2e7dd6d676691d23c81b18a5eb64f55a Mon Sep 17 00:00:00 2001 From: jakearchibald Date: Wed, 11 Jan 2023 15:41:10 +0000 Subject: [PATCH 11/13] Change issue to note --- 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 77843fd6ac9..4b8c643b24c 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -199,7 +199,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; ## Pseudo-element root ## {#pseudo-root} - Issue: This definition should be moved to [[css-pseudo-4]]. + 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]]. A pseudo-element root is a type of [=tree-abiding pseudo-element=] that is the [=tree/root=] in a [=tree=] of [=tree-abiding pseudo-elements=], known as the pseudo-element tree. From d1035313df1ab56af71bc5ac16fbf8ff52a8271b Mon Sep 17 00:00:00 2001 From: jakearchibald Date: Thu, 12 Jan 2023 11:06:18 +0000 Subject: [PATCH 12/13] Make "show view-transition root pseudo-element" a boolean Also clean up the use of phases, and put the note in the correct place --- css-view-transitions-1/Overview.bs | 37 +++++++++++++++--------------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index 4b8c643b24c..039c9602c29 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -356,15 +356,11 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; ## Phases ## {#phases-concept} Phases represent an ordered sequence of states. - Since [=phases=] are ordered, prose can refer to phases before a particular phase, meaning they appear earlier in the sequence, - or after a particular phase, meaning they appear later in the sequence. + Since [=phases=] are ordered, prose can refer to phases before a particular phase, meaning they appear earlier in the sequence. + The initial phase is the first item in the sequence. - Note: For the most part, a developer using this API does not need to worry about the different phases, since they progress automatically. - It is, however, important to understand what steps happen in each of the phases: when the snapshots are captured, when pseudo-element DOM is created, etc. - The description of the phases below tries to be as precise as possible, with an intent to provide an unambiguous set of steps for implementors to follow in order to produce a spec-compliant implementation. - ## The snapshot viewport ## {#snapshot-viewport-concept} The snapshot viewport covers all areas of the window that could potentially display web content. @@ -487,12 +483,13 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; Note: This is used to hold dynamic styles relating to transitions. - : view-transition root pseudo-element - :: A ''::view-transition'' or null. Initially null. - When this is a ''::view-transition'', the ''::view-transition'' renders as a child of the [=document element=], - and the [=document element=] is its [=originating element=]. + : show view-transition root pseudo-element + :: A boolean. Initially false. + + When this is true, [=this=]'s [=active DOM transition=]'s [=ViewTransition/transition root pseudo-element=] renders as a child of [=this=]'s [=document element=], + and [=this=]'s [=document element=] is its [=originating element=]. - Note: The position of the ''::view-transition'' within the [=document element=] does not matter, as the ''::view-transition'''s [=containing block=] is the [=snapshot viewport=]. + Note: The position of the [=ViewTransition/transition root pseudo-element=] within the [=document element=] does not matter, as the [=ViewTransition/transition root pseudo-element=]'s [=containing block=] is the [=snapshot viewport=]. # API # {#api} @@ -618,6 +615,10 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 1. "`animating`". 1. "`done`". + Note: For the most part, a developer using this API does not need to worry about the different phases, since they progress automatically. + It is, however, important to understand what steps happen in each of the phases: when the snapshots are captured, when pseudo-element DOM is created, etc. + The description of the phases below tries to be as precise as possible, with an intent to provide an unambiguous set of steps for implementors to follow in order to produce a spec-compliant implementation. + : DOM update callback :: an {{UpdateDOMCallback}} or null. Initially null. @@ -880,13 +881,10 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 1. Set [=document/transition suppressing rendering=] to false. - 1. If |transition|'s [=ViewTransition/phase=] is equal to or [=phases/after=] "`animating`", - then [=clear view transition=] |transition|. + 1. [=Clear view transition=] |transition|. 1. Set |transition|'s [=ViewTransition/phase=] to "`done`". - 1. Set |document|'s [=document/active DOM transition=] to null. - 1. If |transition|'s [=ViewTransition/ready promise=] has not yet been resolved, [=reject=] it with |reason|. Note: The ready promise would've been resolved if {{ViewTransition/skipTransition()}} is called after we start animating. @@ -1010,8 +1008,6 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 1. [=Clear view transition=] |transition|. - 1. Set |document|'s [=document/active DOM transition=] to null. - 1. [=Resolve=] |transition|'s [=ViewTransition/finished promise=]. 1. Return. @@ -1049,7 +1045,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 1. Let |document| be [=this's=] [=relevant global object's=] [=associated document=]. - 1. Set |document|'s [=view-transition root pseudo-element=] to |transition|'s [=ViewTransition/transition root pseudo-element=]. + 1. Set |document|'s [=show view-transition root pseudo-element=] to true. 1. [=map/For each=] |transitionName| → |capturedElement| of |transition|'s [=ViewTransition/named elements=]: @@ -1276,14 +1272,17 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 1. Let |document| be |transition|'s [=relevant global object's=] [=associated document=]. - 1. Set |document|'s [=view-transition root pseudo-element=] to null. + 1. [=Assert=]: |document|'s [=document/active DOM transition=] is |transition|. 1. [=list/For each=] |capturedElement| of |transition|'s [=ViewTransition/named elements=]' [=map/values=]: 1. [=list/For each=] |style| of |capturedElement|'s [=captured element/style definitions=]: 1. If |style| is not null, + and |style| is in |document|'s [=document/view transition style sheet=], then remove |style| from |document|'s [=document/view transition style sheet=]. + + 1. Set |document|'s [=document/active DOM transition=] to null.

Privacy Considerations

From c8b7e26ba756f7de295a64aac174a50dcbad2be7 Mon Sep 17 00:00:00 2001 From: jakearchibald Date: Thu, 12 Jan 2023 15:01:30 +0000 Subject: [PATCH 13/13] Set show pseudo to false --- css-view-transitions-1/Overview.bs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index 039c9602c29..5611683362d 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -1282,6 +1282,8 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; and |style| is in |document|'s [=document/view transition style sheet=], then remove |style| from |document|'s [=document/view transition style sheet=]. + 1. Set |document|'s [=document/show view-transition root pseudo-element=] to false. + 1. Set |document|'s [=document/active DOM transition=] to null.