diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index 98f0756eb1c..4ca2e1dfd67 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -499,8 +499,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; The 'view-transition-name' property “tags” an element - as potentially [=involved in a view transition=], - capturing it independently in the [=view transition tree=] + for [=capture in a view transition=], + tracking 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. @@ -534,30 +534,13 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; this property has no effect. See [[#algorithms]] for exact details. -# Layout and rendering changes # {#layout-rendering-changes} +### Rendering Consolidation ### {#named-and-transitioning} -## Named and transitioning elements ## {#named-and-transitioning} - - [=/Elements=] have an involved in a view transition boolean, initially false. - - [=/Elements=] that either have a 'view-transition-name' [=computed value=] that is not ''view-transition-name/none'', - or are [=involved in a view transition=], form: - - - a [=stacking context=]. - - - a [[css-transforms-2#grouping-property-values|group]]. - - - a [=backdrop root=]. - - Note: This spec uses CSS's definition of [=element=], which includes [=pseudo-elements=]. - -## Interactions during suppressed rendering ## {#interactions-during-suppressed} - - While a {{Document}} |document|'s [=document/transition suppressing rendering=] is true, - pointer hit testing must target |document|'s [=document element=], - ignoring all other [=elements=]. - - Note: This does not effect pointers that are [=pointer capture|captured=]. + [=/Elements=] [=captured in a view transition=] during a [=view transition=] + or whose 'view-transition-name' [=computed value=] is not ''view-transition-name/none'' (at any time): + - Form a [=stacking context=]. + - Are [[css-transforms-2#grouping-property-values|flattened in 3D transforms]]. + - Form a [=backdrop root=]. # Pseudo-elements # {#pseudo} @@ -744,6 +727,69 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; 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=]. +# View Transition Layout # {#view-transition-rendering} + + The [=view transition pseudo-elements=] are styled, laid out, and rendered like normal elements, + except that they originate in the [=snapshot containing block=] rather than the [=initial containing block=] + and are painted in the [=view transition layer=] above the rest of the document. + +## 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 page content + (and is therefore consistent regardless of root scrollbars or [=interactive-widget|interactive widgets=]). + This makes it likely to be consistent for the [=document element=]'s [=captured element/old image=] and [=captured element/new element=]. + +
+ 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 + The previous diagram, but highlights the area that's the 'snapshot containing block', which includes everything except the top status bar and the bottom bar with the OS back button +
+ An example of the [=snapshot containing block=] on a mobile OS. + The snapshot includes the URL bar, as this can be scrolled away. + The keyboard is included as this appears and disappears. + The top and bottom bars are part of the OS rather than the browser, so they're not included in the snapshot containing block. +
+
+ +
+ A diagram of a desktop browser window, including a tab bar, a URL bar, and a web-content area featuring both horizontal and vertical scrollbars + The previous diagram, but highlights the area that's the 'snapshot containing block', which includes the web content area and the scrollbars +
+ An example of the [=snapshot containing block=] on a desktop OS. + This includes the scrollbars, but does not include the URL bar, as web content never appears in that area. +
+
+ + The snapshot containing block origin refers to the top-left corner of the [=snapshot containing block=]. + + The snapshot containing block size refers to the width and height of the [=snapshot containing block=] as a [=/tuple=] of two numbers. + + The [=snapshot containing block=] is considered to be an [=absolute positioning containing block=] + and a [=fixed positioning containing block=] for ''::view-transition'' and its descendants. + +## View Transition Painting Order ## {#view-transition-stacking-layer} + + This specification introduces a new stacking layer, the [=view transition layer=], + to the Elaborate Description of Stacking Contexts. + + The ''::view-transition'' pseudo-element generates a new stacking context + called the view transition layer + with the following characteristics: + + - Its parent [=stacking context=] is the root stacking context. + + - If the ''::view-transition'' pseudo-element exists, + a new [=stacking context=] is created for the [=document element=] and the [=Document/top layer=]. + 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/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. + # User Agent Stylesheet # {#ua-styles} The global view transition user agent style sheet is @@ -827,144 +873,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; Additional styles are dynamically added to the [=user-agent origin=] during a [=view transition=] through the [=document/dynamic view transition style sheet=]. -# Concepts # {#concepts} - -## 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. - - - The initial phase is the first item in the sequence. - -## 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-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 - The previous diagram, but highlights the area that's the 'snapshot containing block', which includes everything except the top status bar and the bottom bar with the OS back button -
- An example of the [=snapshot containing block=] on a mobile OS. - The snapshot includes the URL bar, as this can be scrolled away. - The keyboard is included as this appears and disappears. - The top and bottom bars are part of the OS rather than the browser, so they're not included in the snapshot containing block. -
-
- -
- A diagram of a desktop browser window, including a tab bar, a URL bar, and a web-content area featuring both horizontal and vertical scrollbars - The previous diagram, but highlights the area that's the 'snapshot containing block', which includes the web content area and the scrollbars -
- An example of the [=snapshot containing block=] on a desktop OS. - This includes the scrollbars, but does not include the URL bar, as web content never appears in that area. -
-
- - 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 containing block origin refers to the top-left corner of the [=snapshot containing block=]. - - The snapshot containing block size refers to the width and height of the [=snapshot containing block=] as a [=/tuple=] of two numbers. - - The [=snapshot containing block=] is considered to be an [=absolute positioning containing block=] - and a [=fixed positioning containing block=] for ''::view-transition'' and its descendants. - -## The [=view-transition layer=] stacking layer ## {#view-transition-stacking-layer} - - This specification introduces a stacking layer to the Elaborate Description of Stacking Contexts. - - The ''::view-transition'' pseudo-element generates a new stacking context called the view-transition layer - with the following characteristics: - - - Its parent stacking context is the root stacking context. - - - If the ''::view-transition'' pseudo-element exists, - a new stacking context is created for the [=document element=] and the [/=document=]'s [=Document/top layer=]. - 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. - -## [=Captured elements=] ## {#captured-elements} - - A captured element is a [=struct=] with the following: - -
- : old image - :: an {{ImageData}} or null. Initially null. - - : old width - : old height - :: an {{unrestricted double}}, initially zero. - - : old transform - :: a <transform-function>, initially the [=identity transform function=]. - - : 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. -
- - In addition, a [=captured element=] has the following style definitions: - -
- : group keyframes - :: A {{CSSKeyframesRule}} or null. Initially null. - - : group animation name rule - :: A {{CSSStyleRule}} or null. Initially null. - - : group styles rule - :: A {{CSSStyleRule}} or null. Initially null. - - : image pair isolation rule - :: A {{CSSStyleRule}} or null. Initially null. - - : view blend mode rule - :: A {{CSSStyleRule}} or null. Initially null. -
- - Note: These are used to update, and later remove styles - from a [=/document=]'s [=document/dynamic view transition style sheet=]. - -## Additions to {{Document}} ## {#additions-to-document} - - A {{Document}} additionally has: - -
- : active view transition - :: a {{ViewTransition}} or null. Initially null. - - : transition suppressing rendering - :: a boolean. Initially false. - - : dynamic view transition style sheet - :: a [=/style sheet=]. - Initially a new [=/style sheet=] in the [=user-agent origin=], ordered after the [=global view transition user agent style sheet=]. - - Note: This is used to hold dynamic styles relating to transitions. - - : show view-transition root pseudo-element - :: A boolean. Initially false. - - When this is true, [=this=]'s [=active view 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 [=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 containing block=]. -
- # API # {#api} ## Additions to {{Document}} ## {#additions-to-document-api} @@ -1080,7 +988,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; Initially a new [=map=]. : phase - :: One of the following [=phases=]: + :: One of the following ordered phases: 1. "`pending-capture`". 1. "`update-callback-called`". @@ -1145,6 +1053,93 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; # Algorithms # {#algorithms} +## Data Structures ## {#concepts} + +### Additions to {{Document}} ### {#additions-to-document} + + A {{Document}} additionally has: + +
+ : active view transition + :: a {{ViewTransition}} or null. Initially null. + + : transition suppressing rendering + :: a boolean. Initially false. + + While a {{Document}}’s [=document/transition suppressing rendering=] is true, + all pointer hit testing must target its [=document element=], + ignoring all other [=elements=]. + + Note: This does not affect pointers that are [=pointer capture|captured=]. + + : dynamic view transition style sheet + :: a [=/style sheet=]. + Initially a new [=/style sheet=] in the [=user-agent origin=], ordered after the [=global view transition user agent style sheet=]. + + Note: This is used to hold dynamic styles relating to transitions. + + : show view-transition root pseudo-element + :: A boolean. Initially false. + + When this is true, [=this=]'s [=active view 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 [=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 containing block=]. +
+ +### Additions to Elements ### {#elements-concept} + + [=/Elements=] have a captured in a view transition boolean, initially false. + + Note: This spec uses CSS's definition of [=element=], which includes [=pseudo-elements=]. + +### [=Captured elements=] ### {#captured-elements} + + A captured element is a [=struct=] with the following: + +
+ : old image + :: an {{ImageData}} or null. Initially null. + + : old width + : old height + :: an {{unrestricted double}}, initially zero. + + : old transform + :: a <transform-function>, initially the [=identity transform function=]. + + : 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. +
+ + In addition, a [=captured element=] has the following style definitions: + +
+ : group keyframes + :: A {{CSSKeyframesRule}} or null. Initially null. + + : group animation name rule + :: A {{CSSStyleRule}} or null. Initially null. + + : group styles rule + :: A {{CSSStyleRule}} or null. Initially null. + + : image pair isolation rule + :: A {{CSSStyleRule}} or null. Initially null. + + : view blend mode rule + :: A {{CSSStyleRule}} or null. Initially null. +
+ + Note: These are used to update, and later remove styles + from a [=/document=]'s [=document/dynamic view transition style sheet=]. + ## Monkey patches to rendering ## {#monkey-patch-to-rendering-algorithm}
@@ -1256,7 +1251,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; 1. [=list/For each=] |capturedElement| of |transition|'s [=ViewTransition/named elements=]' [=map/values=]: 1. If |capturedElement|'s [=captured element/new element=] is not null, - then set |capturedElement|'s [=captured element/new element=]'s [=involved in a view transition=] to true. + then set |capturedElement|'s [=captured element/new element=]'s [=captured in a view transition=] to true. 1. [=Setup transition pseudo-elements=] for |transition|. @@ -1497,7 +1492,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; even if the transition is [=Skip the view transition|skipped=]. The reasons for this are discussed in [[#transitions-as-enhancements]]. - 1. [=Assert=]: |transition|'s [=ViewTransition/phase=] is "`done`", or [=phases/before=] "`update-callback-called`". + 1. [=Assert=]: |transition|'s [=ViewTransition/phase=] is "`done`", or before "`update-callback-called`". 1. Let |callbackPromise| be null. @@ -1529,7 +1524,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; 1. [=Assert=]: |transition|'s [=ViewTransition/phase=] is not "`done`". - 1. If |transition|'s [=ViewTransition/phase=] is [=phases/before=] "`update-callback-called`", then [=queue a global task=] on the [=DOM manipulation task source=], + 1. If |transition|'s [=ViewTransition/phase=] is before "`update-callback-called`", then [=queue a global task=] on the [=DOM manipulation task source=], given |transition|'s [=relevant global object=], to [=call the update callback=] of |transition|. 1. Set [=document/transition suppressing rendering=] to false. @@ -1710,7 +1705,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; - |capturedElement| has more than one [=box fragment=]. - Note: Other rendering constraints are enforced via |capturedElement|'s [=new element=] being [=involved in a view transition=]. + Note: Other rendering constraints are enforced via |capturedElement|'s [=new element=] being [=captured in a view transition=]. 1. Set |width| to the current width of |capturedElement|'s [=new element=]'s [=border box=]. @@ -1764,7 +1759,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; 1. [=list/For each=] |capturedElement| of |transition|'s [=ViewTransition/named elements=]' [=map/values=]: 1. If |capturedElement|'s [=captured element/new element=] is not null, - then set |capturedElement|'s [=captured element/new element=]'s [=involved in a view transition=] to false. + then set |capturedElement|'s [=captured element/new element=]'s [=captured in a view transition=] to false. 1. [=list/For each=] |style| of |capturedElement|'s [=captured element/style definitions=]: @@ -1786,7 +1781,7 @@ This specification introduces no new privacy considerations. The images generated using [=capture the image=] algorithm could contain cross-origin data (if the Document is embedding cross-origin resources) or sensitive information like visited links. The implementations must ensure this data can not be accessed by the Document. This should be feasible since access to this data should already be prevented in the default rendering of the Document. - +

Appendix A. Changes

This appendix is informative. @@ -1794,8 +1789,8 @@ This appendix is informative.

Changes from 2022-05-25 Working Draft

-* Fix typo in ::view-transition-new user agend style sheet. See PR. - +* Fix typo in ::view-transition-new user agent style sheet. See PR. +

Changes from 2022-11-24 Working Draft