Skip to content

Commit bf33c6b

Browse files
fantasaifantasai
committed
[css-view-transitions-1][editorial] Improve structure of pseudo-elements section
* Define some high-level terms for better cross-referencing * Give a proper introduction to the pseudo tree * Move definition of named view-transition pseudo-elements to after we define what view-transition pseudo-elements are so we know what we're talking about * Give each pseudo-element a proper definition (“the algo generates it” is not a definition) * Include enough information that the pseudo-element tree is understandable from this section alone * Improve section titles * Make definition of view-transition-name more definitive
1 parent 2b72815 commit bf33c6b

File tree

1 file changed

+109
-74
lines changed

1 file changed

+109
-74
lines changed

‎css-view-transitions-1/Overview.bs‎

Lines changed: 109 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,9 @@ spec:webidl; type:interface; text:Promise
2727
spec:css-images-4; type:function; text:element()
2828
spec:dom; type:dfn; text:document
2929
spec:css-2022; type:dfn; text:style sheet
30-
spec:selectors-4; type:dfn; text:type selector
30+
spec:selectors-4; type:dfn;
31+
text:selector
32+
text:type selector
3133
spec:css-box-4; type:dfn; text:border box
3234
spec:css-display-3; type:dfn;
3335
text:containing block
@@ -586,7 +588,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
586588

587589
# Pseudo-elements # {#pseudo}
588590

589-
## Pseudo-element root ## {#pseudo-root}
591+
## Pseudo-element Trees ## {#pseudo-root}
590592

591593
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]].
592594

@@ -604,29 +606,24 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
604606
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=].
605607
As in, there is no [=tree/sibling=] `::view-transition-old(ident)`.
606608

607-
## Named view-transition pseudo-elements ## {#named-view-transition-pseudo}
608-
609-
A <dfn>named view-transition pseudo-element</dfn> is a type of [=tree-abiding pseudo-elements=].
610-
611-
It has a <dfn for="named view-transition pseudo-element">view-transition name</dfn>,
612-
a string.
613-
614-
Their selector takes a <<pt-name-selector>> argument.
615-
616-
<pre class=prod>
617-
<dfn>&lt;pt-name-selector></dfn> = '*' | <<custom-ident>>
618-
</pre>
619-
620-
The selector matches if the <<pt-name-selector>> is `*` or matches the [=named view-transition pseudo-element=]'s [=view transition name=].
621-
622-
The specificity of a view-transition selector with a <<custom-ident>> argument is the same as for other pseudo-elements,
623-
and is equivalent to a [=type selector=].
624-
625-
The specificity of a view-transition selector with a `*` argument is zero.
626-
627-
Note: The [=view transition name=] is set to the 'view-transition-name' that triggered its creation.
628-
629-
## View transition pseudo-elements ## {#view-transition-pseudos}
609+
## View Transition Pseudo-elements ## {#view-transition-pseudos}
610+
611+
The visualization of a [=view transition=]
612+
is represented as a [=pseudo-element tree=]
613+
called the <dfn>view transition tree</dfn>
614+
composed of the <dfn>view transition pseudo-elements</dfn> defined below.
615+
This tree is built during the [=setup transition pseudo-elements=] step,
616+
and is rooted under a ''::view-transition'' pseudo-element
617+
[=originating element|originating=] from the [=root element=].
618+
All of the [=view transition pseudo-elements=] are selected
619+
from their [=ultimate originating element=], the [=document element=].
620+
621+
<div class="example">
622+
For example,
623+
the ''::view-transition-group()'' pseudo-element is attached to the root element selector directly,
624+
as in '':root::view-transition-group()'';
625+
it is not attached to its parent, the ''::view-transition'' pseudo-element.
626+
</div>
630627

631628
<div class=note>
632629
Once the user-agent has captured both the “old” and “new” states of the document,
@@ -653,15 +650,49 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
653650
This enables full customization of the transition.
654651
</div>
655652

656-
### <dfn>::view-transition</dfn> ### {#::view-transition}
653+
### Named View Transition Pseudo-elements ### {#named-view-transition-pseudo}
654+
655+
Several of the [=view transition pseudo-elements=]
656+
are <dfn>named view transition pseudo-elements</dfn>,
657+
which are [=functional pseudo-element|functional=] [=tree-abiding pseudo-element|tree-abiding=] [=view transition pseudo-elements=]
658+
associated with a [=view transition name=].
659+
These pseudo-elements take a <<pt-name-selector>> as their argument,
660+
and their syntax follows the pattern:
661+
662+
<pre class=prod>
663+
::view-transition-<var>pseudo</var>(<<pt-name-selector>>)
664+
</pre>
665+
666+
where <<pt-name-selector>> selects a [=view transition name=],
667+
and has the following syntax definition:
668+
669+
<pre class=prod>
670+
<dfn>&lt;pt-name-selector></dfn> = '*' | <<custom-ident>>
671+
</pre>
672+
673+
A [=named view transition pseudo-element=] [=selector=] only matches
674+
a corresponding [=pseudo-element=]
675+
if its <<pt-name-selector>> matches that [=pseudo-element=]’s [=view transition name=],
676+
i.e. if it is either ''*'' or a matching <<custom-ident>>.
657677

658-
<div class=note>This element serves as a parent for all ''::view-transition-group()'' pseudo-elements.</div>
678+
Note: The [=view transition name=] of a [=view transition pseudo-element=]
679+
is set to the 'view-transition-name' that triggered its creation.
659680

660-
A [=tree-abiding pseudo-element=] that is also
661-
a [=pseudo-element root=].
662-
Its [=originating element=] is the document's [=document element=].
681+
The specificity of a [=named view transition pseudo-element=] [=selector=]
682+
with a <<custom-ident>> argument
683+
is equivalent to a [=type selector=].
684+
The specificity of a [=named view transition pseudo-element=] [=selector=]
685+
with a ''*'' argument
686+
is zero.
663687

664-
Its [=containing block=] is the [=snapshot containing block=].
688+
### View Transition Tree Root: the ''::view-transition'' pseudo-element ### {#view-transition-pseudo}
689+
690+
The <dfn>::view-transition</dfn> [=pseudo-element=]
691+
is a [=tree-abiding pseudo-element=] that is also a [=pseudo-element root=].
692+
Its [=originating element=] is the document's [=document element=],
693+
and its [=containing block=] is the [=snapshot containing block=].
694+
695+
Note: This element serves as the [=tree/parent=] of all ''::view-transition-group()'' pseudo-elements.
665696

666697
The following is added to the [=global view transition user agent style sheet=]:
667698

@@ -677,12 +708,19 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
677708
and position all ''::view-transition-group()'' pseudo-elements relative to the [=snapshot containing block origin=].
678709
</div>
679710

680-
### <dfn>::view-transition-group( <<pt-name-selector>> )</dfn> ### {#::view-transition-group}
711+
### View Transition Named Subtree Root: the ''::view-transition-group()'' pseudo-element ### {#::view-transition-group}
712+
713+
The <dfn>::view-transition-group()</dfn> [=pseudo-element=]
714+
is a [=named view transition pseudo-element=]
715+
that represents a matching named [=view transition=] capture.
716+
A ''::view-transition-group()'' [=pseudo-element=]
717+
is generated for each [=view transition name=]
718+
as a [=tree/child=] of the ''::view-transition'' [=pseudo-element=],
719+
and contains a corresponding ''::view-transition-image-pair()''.
681720

682721
<div class=note>
683722
This element initially mirrors the size and position of the “old” element,
684723
or the “new” element if there isn't an “old” element.
685-
It is always a [=tree/child=] of a ''::view-transition''.
686724

687725
If there's both an “old” and “new” state,
688726
styles in the [=document/view transition style sheet=] animate this pseudo-element's 'width' and 'height'
@@ -693,12 +731,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
693731
This style is generated dynamically since the values of animated properties are determined at the time that the transition begins.
694732
</div>
695733

696-
A [=tree-abiding pseudo-element=]
697-
that is also a [=named view-transition pseudo-element=],
698-
and [=tree/participates=] in a [=pseudo-element tree=].
699-
700-
It is selected from its [=ultimate originating element=], the [=document element=].
701-
702734
The following is added to the [=global view transition user agent style sheet=]:
703735

704736
```css
@@ -712,21 +744,25 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
712744
}
713745
```
714746

715-
### <dfn>::view-transition-image-pair( <<pt-name-selector>> )</dfn> ### {#::view-transition-image-pair}
747+
### View Transition Image Pair Isolation: the ''::view-transition-image-pair()'' pseudo-element ### {#::view-transition-image-pair}
716748

717-
<div class=note>
718-
This element is a child of the group element and provides ''isolation: isolate'' for its children.
719-
It's needed so that its children can be blended with non-normal blend modes without affecting other visual outputs.
749+
The <dfn>::view-transition-image-pair()</dfn> [=pseudo-element=]
750+
is a [=named view transition pseudo-element=]
751+
that represents a pair of corresponding old/new [=view transition=] captures.
752+
This pseudo-element is a [=tree/child=] of the corresponding ''::view-transition-group()'' pseudo-element
753+
and contains
754+
a corresponding ''::view-transition-old()'' pseudo-element
755+
and/or
756+
a corresponding ''::view-transition-new()'' pseudo-element
757+
(in that order).
720758

721-
It is always present as a [=tree/child=] of each ''::view-transition-group()''.
759+
<div class=note>
760+
This element exists to provide ''isolation: isolate'' for its children,
761+
and is always present as a [=tree/child=] of each ''::view-transition-group()''.
762+
This isolation allows the image pair to be blended with non-normal blend modes
763+
without affecting other visual outputs.
722764
</div>
723765

724-
A [=tree-abiding pseudo-element=]
725-
that is also a [=named view-transition pseudo-element=],
726-
and [=tree/participates=] in a [=pseudo-element tree=].
727-
728-
It is selected from its [=ultimate originating element=], the [=document element=].
729-
730766
The following is added to the [=global view transition user agent style sheet=]:
731767

732768
```css
@@ -739,32 +775,23 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
739775
}
740776
```
741777

742-
### <dfn>::view-transition-old( <<pt-name-selector>> )</dfn> ### {#::view-transition-old}
743-
744-
<div class=note>
745-
746-
This element is a replaced element that produced the visual representation of the “old” state taken from user-agent provided snapshots.
778+
### View Transition Old State Image: the ''::view-transition-old()'' pseudo-element ### {#::view-transition-old}
747779

748-
This is only ever a [=tree/child=] of a ''::view-transition-image-pair()'',
749-
never has any [=tree/children=],
750-
and is omitted if there's no “old” state to represent.
780+
The <dfn>::view-transition-old()</dfn> [=pseudo-element=]
781+
is an empty [=named view transition pseudo-element=]
782+
that represents a visual snapshot of the “old” state as a [=replaced element=];
783+
it is omitted if there's no “old” state to represent.
784+
Each ''::view-transition-old()'' pseudo-element is a [=tree/child=]
785+
of the corresponding ''::view-transition-image-pair()'' pseudo-element.
751786

787+
<div class=note>
752788
'':only-child'' can be used to match cases where this element is the only element in the ''::view-transition-image-pair()''.
753789

754790
The appearance of this element can be manipulated with `object-*` properties in the same way that other replaced elements can be.
755-
756791
</div>
757792

758-
A [=tree-abiding pseudo-element=]
759-
that is also a [=named view-transition pseudo-element=],
760-
and [=tree/participates=] in a [=pseudo-element tree=].
761-
762-
It is selected from its [=ultimate originating element=], the [=document element=].
763-
764-
It is a [=replaced element=], with [=natural dimensions=] equal to the content's size.
765-
766-
Note: The image content is captured in [=capture the image=],
767-
then set and updated in [=setup transition pseudo-elements=] and [=update pseudo-element styles=].
793+
Note: The content and [=natural dimensions=] of the image are captured in [=capture the image=],
794+
and set in [=setup transition pseudo-elements=].
768795

769796
The following is added to the [=global view transition user agent style sheet=]:
770797

@@ -786,10 +813,20 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
786813

787814
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=].
788815

789-
### <dfn>::view-transition-new( <<pt-name-selector>> )</dfn> ### {#::view-transition-new}
816+
### View Transition New State Image: the ''::view-transition-new()'' pseudo-element ### {#::view-transition-new}
790817

791-
Identical to ''::view-transition-old()'',
792-
except the following styles added to the [=global view transition user agent style sheet=]:
818+
The <dfn>::view-transition-new()</dfn> [=pseudo-element=]
819+
(like the analogous ''::view-transition-old()'' pseudo-element)
820+
is an empty [=named view transition pseudo-element=]
821+
that represents a visual snapshot of the “new” state as a [=replaced element=];
822+
it is omitted if there's no “new” state to represent.
823+
Each ''::view-transition-new()'' pseudo-element is a [=tree/child=]
824+
of the corresponding ''::view-transition-image-pair()'' pseudo-element.
825+
826+
Note: The content and [=natural dimensions=] of the image are captured in [=capture the image=],
827+
then set and updated in [=setup transition pseudo-elements=] and [=update pseudo-element styles=].
828+
829+
The following is added to the [=global view transition user agent style sheet=]:
793830

794831
```css
795832
:root::view-transition-new(*) {
@@ -804,8 +841,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
804841
}
805842
```
806843

807-
Note: The construction of this tree is performed in the [=setup transition pseudo-elements=] algorithm.
808-
809844
# Concepts # {#concepts}
810845

811846
## Phases ## {#phases-concept}

0 commit comments

Comments
 (0)