Skip to content

[css-view-transitions-1] Consolidate global UA style rules #8891 #8916

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 7, 2023
Merged

[css-view-transitions-1] Consolidate global UA style rules #8891 #8916

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
180 changes: 83 additions & 97 deletions css-view-transitions-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <dfn>global view transition user agent style sheet</dfn> 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;
}
```

<div class=note>
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=].
</div>

# Pseudo-elements # {#pseudo}

## Pseudo-element Trees ## {#pseudo-root}
Expand Down Expand Up @@ -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;
}
```

<div class="note">
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=].
</div>

### View Transition Named Subtree Root: the ''::view-transition-group()'' pseudo-element ### {#::view-transition-group}

The <dfn>::view-transition-group()</dfn> [=pseudo-element=]
Expand All @@ -723,26 +682,14 @@ 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.

This style is generated dynamically since the values of animated properties are determined at the time that the transition begins.
</div>

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}

Expand All @@ -763,18 +710,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
without affecting other visual outputs.
</div>

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 <dfn>::view-transition-old()</dfn> [=pseudo-element=]
Expand All @@ -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}

Expand All @@ -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 <dfn>global view transition user agent style sheet</dfn> 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;
}
```

<details class="note">
<summary>Explanatory Summary</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()''.
</details>

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}
Expand Down Expand Up @@ -951,7 +937,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
</dl>

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}

Expand All @@ -964,7 +950,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
: <dfn>transition suppressing rendering</dfn>
:: a boolean. Initially false.

: <dfn>view transition style sheet</dfn>
: <dfn>dynamic view transition style sheet</dfn>
:: a [=/style sheet=].
Initially a new [=/style sheet=] in the [=user-agent origin=], ordered after the [=global view transition user agent style sheet=].

Expand Down Expand Up @@ -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=]:

<!-- deliberately using <pre> so the example can contain <var> references -->
<pre highlight="css">
Expand All @@ -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=]:

<!-- deliberately using <pre> so the example can contain <var> references -->
<pre highlight="css">
Expand All @@ -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=]:

<!-- deliberately using <pre> so the example can contain <var> references -->
<pre highlight="css">
Expand All @@ -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=]:

<!-- deliberately using <pre> so the example can contain <var> references -->
<pre highlight="css">
Expand Down Expand Up @@ -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:

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -1832,7 +1818,7 @@ Changes from <a href="https://www.w3.org/TR/2022/WD-css-view-transitions-1-20221
Changes from <a href="https://www.w3.org/TR/2022/WD-css-view-transitions-1-20221025/">2022-10-25 Working Draft (FPWD)</a>
</h3>

* 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 <a href="https://github.com/w3c/csswg-drafts/issues/7859">issue 7859</a>.
* Clarify timimg for resolving/rejecting promises when skipping the transition. See <a href="https://github.com/w3c/csswg-drafts/issues/7956">issue 7956</a>.
* Elements under a content-visiblity:auto element that skips its contents are ignored. See <a href="https://github.com/w3c/csswg-drafts/issues/7874">issue 7874</a>.
Expand Down