Skip to content

[view-transitions-1] Give defined pseudos their own heading, so they appear in TOC #8537

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
Mar 8, 2023
Merged

[view-transitions-1] Give defined pseudos their own heading, so they appear in TOC #8537

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
227 changes: 114 additions & 113 deletions css-view-transitions-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Shortname: css-view-transitions
Level: 1
Status: WD
Group: csswg
Date: 2022-11-24
Date: 2023-03-07
Prepare for TR: yes
ED: https://drafts.csswg.org/css-view-transitions-1/
TR: https://www.w3.org/TR/css-view-transitions-1/
Expand Down Expand Up @@ -585,155 +585,156 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
This enables full customization of the transition.
</div>

: <dfn>::view-transition</dfn>
::
<div class=note>This element provides a containing block for all ''::view-transition-group()'' pseudo-elements.</div>
### <dfn>::view-transition</dfn>

A [=tree-abiding pseudo-element=] that is also
a [=pseudo-element root=].
Its [=originating element=] is the document's [=document element=].
<div class=note>This element provides a containing block for all ''::view-transition-group()'' pseudo-elements.</div>

Its [=containing block=] is the [=snapshot root=].
A [=tree-abiding pseudo-element=] that is also
a [=pseudo-element root=].
Its [=originating element=] is the document's [=document element=].

The following is added to the [=HTML user agent style sheet=]:
Its [=containing block=] is the [=snapshot root=].

```css
html::view-transition {
position: fixed;
inset: 0;
}
```
The following is added to the [=HTML user agent style sheet=]:

<div class="note">
The aim of the style is to size the pseudo-element to cover the [=snapshot root=]
and position all ''::view-transition-group()'' pseudo-elements relative to the [=snapshot root origin=].
</div>
```css
html::view-transition {
position: fixed;
inset: 0;
}
```

: <dfn>::view-transition-group( <<pt-name-selector>> )</dfn>
::
<div class=note>
This element initially mirrors the size and position of the "old" element,
or the "new" element if there isn't an "old" element.
It is always a [=tree/child=] of a ''::view-transition''.
<div class="note">
The aim of the style is to size the pseudo-element to cover the [=snapshot root=]
and position all ''::view-transition-group()'' pseudo-elements relative to the [=snapshot root origin=].
</div>

If there's both an "old" and "new" state,
styles in the [=document/view transition style sheet=] animate this pseudo-element's 'width' and 'height'
from the size of the old element's [=border box=] to that of the new element's [=border box=].
### <dfn>::view-transition-group( <<pt-name-selector>> )</dfn>

Also the element's 'transform' is animated from the old element's screen space transform to the new element's screen space transform.
<div class=note>
This element initially mirrors the size and position of the "old" element,
or the "new" element if there isn't an "old" element.
It is always a [=tree/child=] of a ''::view-transition''.

This style is generated dynamically since the values of animated properties are determined at the time that the transition begins.
</div>
If there's both an "old" and "new" state,
styles in the [=document/view transition style sheet=] animate this pseudo-element's 'width' and 'height'
from the size of the old element's [=border box=] to that of the new element's [=border box=].

A [=tree-abiding pseudo-element=]
that is also a [=named view-transition pseudo-element=],
and [=tree/participates=] in a [=pseudo-element tree=].
Also the element's 'transform' is animated from the old element's screen space transform to the new element's screen space transform.

It is selected from its [=ultimate originating element=], the [=document element=].
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 [=HTML user agent style sheet=]:
A [=tree-abiding pseudo-element=]
that is also a [=named view-transition pseudo-element=],
and [=tree/participates=] in a [=pseudo-element tree=].

```css
html::view-transition-group(*) {
position: absolute;
top: 0;
left: 0;
It is selected from its [=ultimate originating element=], the [=document element=].

animation-duration: 0.25s;
animation-fill-mode: both;
}
```
The following is added to the [=HTML user agent style sheet=]:

: <dfn>::view-transition-image-pair( <<pt-name-selector>> )</dfn>
::
<div class=note>
This element is a child of the group element and provides ''isolation: isolate'' for its children.
It's needed so that its children can be blended with non-normal blend modes without affecting other visual outputs.
```css
html::view-transition-group(*) {
position: absolute;
top: 0;
left: 0;

It is always present as a [=tree/child=] of each ''::view-transition-group()''.
</div>
animation-duration: 0.25s;
animation-fill-mode: both;
}
```

A [=tree-abiding pseudo-element=]
that is also a [=named view-transition pseudo-element=],
and [=tree/participates=] in a [=pseudo-element tree=].
### <dfn>::view-transition-image-pair( <<pt-name-selector>> )</dfn>

It is selected from its [=ultimate originating element=], the [=document element=].
<div class=note>
This element is a child of the group element and provides ''isolation: isolate'' for its children.
It's needed so that its children can be blended with non-normal blend modes without affecting other visual outputs.

The following is added to the [=HTML user agent style sheet=]:
It is always present as a [=tree/child=] of each ''::view-transition-group()''.
</div>

```css
html::view-transition-image-pair(*) {
position: absolute;
inset: 0;
A [=tree-abiding pseudo-element=]
that is also a [=named view-transition pseudo-element=],
and [=tree/participates=] in a [=pseudo-element tree=].

animation-duration: inherit;
animation-fill-mode: inherit;
}
```
It is selected from its [=ultimate originating element=], the [=document element=].

The following is added to the [=HTML user agent style sheet=]:

```css
html::view-transition-image-pair(*) {
position: absolute;
inset: 0;

: <dfn>::view-transition-old( <<pt-name-selector>> )</dfn>
::
<div class=note>
animation-duration: inherit;
animation-fill-mode: inherit;
}
```

This element is a replaced element that produced the visual representation of the "old" state taken from user-agent provided snapshots.
### <dfn>::view-transition-old( <<pt-name-selector>> )</dfn>

This is only ever a [=tree/child=] of a ''::view-transition-image-pair()'',
never has any [=tree/children=],
and is omitted if there's no "old" state to represent.
<div class=note>

'':only-child'' can be used to match cases where this element is the only element in the ''::view-transition-image-pair()''.
This element is a replaced element that produced the visual representation of the "old" state taken from user-agent provided snapshots.

The appearance of this element can be manipulated with `object-*` properties in the same way that other replaced elements can be.
This is only ever a [=tree/child=] of a ''::view-transition-image-pair()'',
never has any [=tree/children=],
and is omitted if there's no "old" state to represent.

</div>
'':only-child'' can be used to match cases where this element is the only element in the ''::view-transition-image-pair()''.

A [=tree-abiding pseudo-element=]
that is also a [=named view-transition pseudo-element=],
and [=tree/participates=] in a [=pseudo-element tree=].
The appearance of this element can be manipulated with `object-*` properties in the same way that other replaced elements can be.

It is selected from its [=ultimate originating element=], the [=document element=].
</div>

It is a [=replaced element=], with [=natural dimensions=] equal to the content's size.
A [=tree-abiding pseudo-element=]
that is also a [=named view-transition pseudo-element=],
and [=tree/participates=] in a [=pseudo-element tree=].

Note: The image content is captured in [=capture the image=],
then set and updated in [=setup transition pseudo-elements=] and [=update pseudo-element styles=].
It is selected from its [=ultimate originating element=], the [=document element=].

The following is added to the [=HTML user agent style sheet=]:
It is a [=replaced element=], with [=natural dimensions=] equal to the content's size.

```css
html::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 image content is 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 [=HTML user agent style sheet=]:

```css
html::view-transition-old(*) {
position: absolute;
inset-block-start: 0;
inline-size: 100%;
block-size: auto;

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.
animation-name: -ua-view-transition-fade-out;
animation-duration: inherit;
animation-fill-mode: inherit;
}
```

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: 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.

: <dfn>::view-transition-new( <<pt-name-selector>> )</dfn>
:: Identical to ''::view-transition-old()'',
except the following styles added to the [=HTML user agent style sheet=]:
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=].

```css
html::view-transition-old(*) {
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;
}
```
### <dfn>::view-transition-new( <<pt-name-selector>> )</dfn>

Identical to ''::view-transition-old()'',
except the following styles added to the [=HTML user agent style sheet=]:

```css
html::view-transition-old(*) {
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;
}
```

Note: The construction of this tree is performed in the [=setup transition pseudo-elements=] algorithm.

Expand Down