diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs
index 203a90d69a0..98f0756eb1c 100644
--- a/css-view-transitions-1/Overview.bs
+++ b/css-view-transitions-1/Overview.bs
@@ -559,33 +559,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
Note: This does not effect pointers that are [=pointer capture|captured=].
-# User-agent styles # {#ua-styles}
-
- The global view transition user agent style sheet is a style sheet in the [=user-agent origin=], used in all namespaces.
-
- Issue: [CSS needs a central place for an "all namespaces" style sheet](https://github.com/w3c/csswg-drafts/issues/8573).
-
- It contains the following:
-
- ```css
- @keyframes -ua-view-transition-fade-out {
- to { opacity: 0; }
- }
-
- @keyframes -ua-view-transition-fade-in {
- from { opacity: 0; }
- }
-
- :root {
- view-transition-name: root;
- }
- ```
-
-
- There are further additions to the [=global view transition user agent style sheet=] defined in [[#view-transition-pseudos]] for each pseudo-element,
- and other styles are added at runtime via the [=document=]'s [=document/view transition style sheet=].
-
-
# Pseudo-elements # {#pseudo}
## Pseudo-element Trees ## {#pseudo-root}
@@ -694,20 +667,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
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=]:
-
- ```css
- :root::view-transition {
- position: fixed;
- inset: 0;
- }
- ```
-
-
- The aim of the style is to size the pseudo-element to cover the [=snapshot containing block=]
- and position all ''::view-transition-group()'' pseudo-elements relative to the [=snapshot containing block origin=].
-
-
### View Transition Named Subtree Root: the ''::view-transition-group()'' pseudo-element ### {#::view-transition-group}
The ::view-transition-group() [=pseudo-element=]
@@ -723,7 +682,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
or the “new” element if there isn't an “old” element.
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'
+ styles in the [=document/dynamic 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=].
Also the element's 'transform' is animated from the old element's screen space transform to the new element's screen space transform.
@@ -731,18 +690,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.
- The following is added to the [=global view transition user agent style sheet=]:
-
- ```css
- :root::view-transition-group(*) {
- position: absolute;
- top: 0;
- left: 0;
-
- animation-duration: 0.25s;
- animation-fill-mode: both;
- }
- ```
### View Transition Image Pair Isolation: the ''::view-transition-image-pair()'' pseudo-element ### {#::view-transition-image-pair}
@@ -763,18 +710,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
without affecting other visual outputs.
- The following is added to the [=global view transition user agent style sheet=]:
-
- ```css
- :root::view-transition-image-pair(*) {
- position: absolute;
- inset: 0;
-
- animation-duration: inherit;
- animation-fill-mode: inherit;
- }
- ```
-
### View Transition Old State Image: the ''::view-transition-old()'' pseudo-element ### {#::view-transition-old}
The ::view-transition-old() [=pseudo-element=]
@@ -793,25 +728,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
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=]:
-
- ```css
- :root::view-transition-old(*) {
- position: absolute;
- inset-block-start: 0;
- inline-size: 100%;
- block-size: auto;
-
- animation-name: -ua-view-transition-fade-out;
- animation-duration: inherit;
- animation-fill-mode: inherit;
- }
- ```
-
- Note: The aim of the style is to match the element's inline size while retaining the aspect ratio.
- It is also placed at the block start.
-
- 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: Additional styles in the [=document/dynamic 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 State Image: the ''::view-transition-new()'' pseudo-element ### {#::view-transition-new}
@@ -826,21 +744,89 @@ 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=].
- The following is added to the [=global view transition user agent style sheet=]:
+# User Agent Stylesheet # {#ua-styles}
+
+ The global view transition user agent style sheet is
+ a [=user-agent origin=] style sheet containing the following rules:
```css
+ :root {
+ view-transition-name: root;
+ }
+
+ :root::view-transition {
+ position: fixed;
+ inset: 0;
+ }
+
+ :root::view-transition-group(*) {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ animation-duration: 0.25s;
+ animation-fill-mode: both;
+ }
+
+ :root::view-transition-image-pair(*) {
+ position: absolute;
+ inset: 0;
+
+ animation-duration: inherit;
+ animation-fill-mode: inherit;
+ }
+
+ :root::view-transition-old(*),
:root::view-transition-new(*) {
position: absolute;
inset-block-start: 0;
inline-size: 100%;
block-size: auto;
- animation-name: -ua-view-transition-fade-in;
animation-duration: inherit;
animation-fill-mode: inherit;
}
+
+ /* Default cross-fade transition */
+ @keyframes -ua-view-transition-fade-out {
+ to { opacity: 0; }
+ }
+ @keyframes -ua-view-transition-fade-in {
+ from { opacity: 0; }
+ }
+ :root::view-transition-old(*) {
+ animation-name: -ua-view-transition-fade-out;
+ }
+ :root::view-transition-new(*) {
+ animation-name: -ua-view-transition-fade-in;
+ }
```
+
+ Explanatory Summary
+ This UA style sheet does several things:
+ * Lay out ''::view-transition'' to cover the entire [=snapshot containing block=]
+ so that each '':view-transition-group()'' child can lay out relative to it.
+ * Give the [=root element=] a default [=view transition name=],
+ to allow it to be independently selected.
+ * Reduce layout interference from the ''::view-transition-image-pair()'' pseudo-element
+ so that authors can essentially treat ''::view-transition-old()'' and ''::view-transition-new()''
+ as direct children of ''::view-transition-group()'' for most purposes.
+ * Inherit animation timing through the tree so that by default,
+ the animation timing set on a ''::view-transition-group()''
+ will dictate the animation timing of all its descendants.
+ * Style the element captures ''::view-transition-old()'' and ''::view-transition-new()''
+ to match the size and position set on ''::view-transition-group()''
+ (insofar as possible without breaking their aspect ratios)
+ as it interpolates between them
+ (see [=dynamic view transition style sheet=]).
+ * Set up a default quarter-second cross-fade animation
+ for each ''::view-transition-group()''.
+
+
+ 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}
@@ -951,7 +937,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
Note: These are used to update, and later remove styles
- from a [=/document=]'s [=document/view transition style sheet=].
+ from a [=/document=]'s [=document/dynamic view transition style sheet=].
## Additions to {{Document}} ## {#additions-to-document}
@@ -964,7 +950,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
: transition suppressing rendering
:: a boolean. Initially false.
- : view transition style sheet
+ : 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=].
@@ -1444,7 +1430,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
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=]:
+ and append it to |document|'s [=document/dynamic view transition style sheet=]:
@@ -1460,7 +1446,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
Note: The above code example contains variables to be replaced.
1. Set |capturedElement|'s [=captured element/group animation name rule=] to a new {{CSSStyleRule}} representing the following CSS,
- and append it to |document|'s [=document/view transition style sheet=]:
+ and append it to |document|'s [=document/dynamic view transition style sheet=]:
@@ -1472,7 +1458,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
Note: The above code example contains variables to be replaced.
1. Set |capturedElement|'s [=captured element/image pair isolation rule=] to a new {{CSSStyleRule}} representing the following CSS,
- and append it to |document|'s [=document/view transition style sheet=]:
+ and append it to |document|'s [=document/dynamic view transition style sheet=]:
@@ -1484,7 +1470,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
Note: The above code example contains variables to be replaced.
1. Set |capturedElement|'s [=captured element/view blend mode rule=] to a new {{CSSStyleRule}} representing the following CSS,
- and append it to |document|'s [=document/view transition style sheet=]:
+ and append it to |document|'s [=document/dynamic view transition style sheet=]:
@@ -1738,7 +1724,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
1. If |capturedElement|'s [=captured element/group styles rule=] is null,
then set |capturedElement|'s [=captured element/group styles rule=] to a new {{CSSStyleRule}} representing the following CSS,
- and append it to |document|'s [=document/view transition style sheet=].
+ and append it to |document|'s [=document/dynamic view transition style sheet=].
Otherwise, update |capturedElement|'s [=captured element/group styles rule=] to match the following CSS:
@@ -1783,8 +1769,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
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=].
+ and |style| is in |document|'s [=document/dynamic view transition style sheet=],
+ then remove |style| from |document|'s [=document/dynamic view transition style sheet=].
1. Set |document|'s [=document/show view-transition root pseudo-element=] to false.
@@ -1832,7 +1818,7 @@ Changes from 2022-10-25 Working Draft (FPWD)
-* Add [=document/view transition style sheet=] concept for dynamically generated UA styles scoped to the current Document.
+* Add [=document/dynamic view transition style sheet=] concept for dynamically generated UA styles scoped to the current Document.
* Add snapshot viewport concept. See issue 7859.
* Clarify timimg for resolving/rejecting promises when skipping the transition. See issue 7956.
* Elements under a content-visiblity:auto element that skips its contents are ignored. See issue 7874.