You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: css-view-transitions-2/Overview.bs
+19-18Lines changed: 19 additions & 18 deletions
Original file line number
Diff line number
Diff line change
@@ -508,7 +508,7 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule.
508
508
Manipulating the {{ViewTransition/types}} in the old document does not affect the types in the new document,
509
509
which would be read from the [=@view-transition/types=] descriptor once the document is revealed.
510
510
511
-
Note: the{{ViewTransition}} is skipped once the old document is hidden.
511
+
Note: The{{ViewTransition}} is skipped once the old document is hidden.
512
512
513
513
1. Set |outboundTransition|'s [=outbound post-capture steps=] to the following steps given a [=view transition params=]-or-null |params|:
514
514
1. Set |newDocument|'s [=inbound view transition params=] to |params|.
@@ -525,7 +525,7 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule.
525
525
* The {{Window/pagereveal}} event is fired.
526
526
* its [=active view transition=]'s [=ViewTransition/phase=] is "`done`".
527
527
528
-
Note: this is to ensure that there are no unintended flashes between displaying the old and new state, to keep the transition smooth.
528
+
Note: This is to ensure that there are no unintended flashes between displaying the old and new state, to keep the transition smooth.
529
529
530
530
1. Return |outboundTransition|.
531
531
</div>
@@ -543,7 +543,7 @@ To <dfn>update the opt-in state for outbound transitions</dfn> for a {{Document}
543
543
Append the following steps to [=skip the view transition=] given a {{ViewTransition}} |transition|:
544
544
1. If |transition|'s [=outbound post-capture steps=] is not null, then run |transition|'s [=outbound post-capture steps=] with null.
545
545
546
-
Note: This is written in a monkey-patch manner, and will be merged into the algorithm once the L1 spec graduates.
546
+
Note: This is written in a monkey-patch manner, and will be merged into the algorithm once the L2 spec graduates.
547
547
</div>
548
548
549
549
### Proceed with cross-document view transition after capturing the old state ### {#cross-doc-after-capture}
@@ -570,13 +570,13 @@ Prepend the following step to the [=Perform pending transition operations=] algo
570
570
571
571
1. Call |transition|'s [=outbound post-capture steps=] given |viewTransitionParams|.
572
572
573
-
Note: This is written in a monkey-patch manner, and will be merged into the algorithm once the L1 spec graduates.
573
+
Note: This is written in a monkey-patch manner, and will be merged into the algorithm once the L2 spec graduates.
574
574
</div>
575
575
576
576
## Activating the view transition in the new {{Document}} ## {#access-view-transition-in-new-doc}
577
577
578
578
<div algorithm>
579
-
To <dfn export>resolve inbound cross-document view-transition</dfn> for {{Document}} |document|:
579
+
To <dfn export>activate inbound cross-document view-transition</dfn> for {{Document}} |document|:
580
580
581
581
1. [=Assert=]: |document| is [=fully active=].
582
582
@@ -592,14 +592,14 @@ Prepend the following step to the [=Perform pending transition operations=] algo
592
592
593
593
1. If |document|'s [=active view transition=] is not null, then return null.
594
594
595
-
Note: this means that starting a same-document transition before revealing the document would cancel a pending cross-document transition.
595
+
Note: This means that starting a same-document transition before revealing the document would cancel a pending cross-document transition.
596
596
597
597
1. [=Resolve @view-transition rule=] for |document| and let |resolvedRule| be the result.
598
598
599
599
1. If |resolvedRule| is "<code>skip transition</code>", then return null.
600
600
601
601
1. Let |transition| be a new {{ViewTransition}} in |document|'s [=relevant Realm=],
602
-
whose [=ViewTransition/named elements=] is |inboundViewTransitionParams|'s [=view transition params/named elements=],
602
+
whose [=ViewTransition/named elements=] is a clone of |inboundViewTransitionParams|'s [=view transition params/named elements=],
603
603
and [=ViewTransition/initial snapshot containing block size=] is |inboundViewTransitionParams|'s [=view transition params/initial snapshot containing block size=].
604
604
605
605
1. Set |document|'s [=active view transition=] to |transition|.
@@ -612,6 +612,7 @@ Prepend the following step to the [=Perform pending transition operations=] algo
612
612
613
613
1. At any given time, the UA may decide to skip the inbound transition, e.g. after an [=implementation-defined=] timeout.
614
614
To do so, the UA should [=queue a global task=] on the [=DOM manipulation task source=] given |document|'s [=relevant global object=] to perform the following step:
615
+
615
616
If |transition|'s [=ViewTransition/phase=] is not "`done`", then [=skip the view transition=] |transition| with a "{{TimeoutError}}" {{DOMException}}.
616
617
617
618
1. Return |transition|.
@@ -631,7 +632,7 @@ A {{Document}} additionaly has:
631
632
:: a boolean.
632
633
Initially false.
633
634
634
-
Note: this value can be read [=in parallel=] while navigating.
635
+
Note: This value can be read [=in parallel=] while navigating.
635
636
</dl>
636
637
637
638
### Additions to {{ViewTransition}} ### {#cross-doc-data-structure-vt}
@@ -718,7 +719,7 @@ The <dfn id='active-view-transition-pseudo'>:active-view-transition</dfn> pseudo
718
719
719
720
The [=specificity=] of an '':active-view-transition'' is one pseudo-class selector.
720
721
721
-
An '':active-view-transition'' pseudo-class matches the [=document element=] when its [=node document=] has an non-null [=active view transition=].
722
+
An '':active-view-transition'' pseudo-class matches the [=document element=] when its [=node document=] has a non-null [=active view transition=].
@@ -731,10 +732,10 @@ It has the following syntax definition:
731
732
732
733
The [=specificity=] of an '':active-view-transition-type()'' is one pseudo-class selector.
733
734
734
-
An '':active-view-transition-type()'' pseudo-class matches the [=document element=] when its [=node document=] has an non-null [=active view transition=],
735
+
An '':active-view-transition-type()'' pseudo-class matches the [=document element=] when its [=node document=] has a non-null [=active view transition=],
735
736
whose [=ViewTransition/active types=][=list/contains=] at least one of the <<custom-ident>> arguments.
736
737
737
-
## Activating the transition type using JavaScript ## {#types-js}
@@ -798,7 +799,7 @@ A {{ViewTransition}} additionally has:
798
799
:: A [=/set] of strings, initially empty.
799
800
</dl>
800
801
801
-
## Activating the transition type for cross-document view transitions ## {#types-cross-doc}
802
+
## Providing types in CSS ## {#types-cross-doc}
802
803
803
804
### The [=@view-transition/types=] descriptor ### {#view-transition-type-descriptor}
804
805
@@ -810,9 +811,9 @@ A {{ViewTransition}} additionally has:
810
811
</pre>
811
812
812
813
The '<dfn for="@view-transition">types</dfn>' descriptor sets the [=ViewTransition/active types=] for the transition
813
-
when capturing or performing the transition, equivalent to calling {{Document/startViewTransition(callbackOptions)}} with that{{StartViewTransitionOptions/types}}.
814
+
when capturing or performing cross-document transitions, equivalent to calling {{Document/startViewTransition(callbackOptions)}} with the same{{StartViewTransitionOptions/types}}.
814
815
815
-
Note: the[=@view-transition/types=] descriptor only applies to the {{Document}} in which it is defined.
816
+
Note: The[=@view-transition/types=] descriptor only applies to the {{Document}} in which it is defined.
816
817
The author is responsible for using their chosen set of types in both documents.
817
818
818
819
# Sharing styles between view transition pseudo-elements # {#shared-style-with-vt-classes}
@@ -826,7 +827,7 @@ setting a name that's shared across multiple elements, and then using the [=clas
826
827
827
828
[=Named view transition pseudo-elements|The view transition pseudo-elements=] (e.g. ''view-transition-group()'') are not defined in the DOM, but rather by using the ''view-transition-name'' property.
828
829
For that purpose, the ''view-transition-class''' CSS property provides view transitions with the equivalent of HTML [=Element/class|classes=].
829
-
When an element with a ''view-transition-name'' also has a ''view-transition-class'' value, that class would be selectable by the pseudo-elements, as per the <a href="#vt-class-example">examples</a>.
830
+
When an element with a ''view-transition-name'' also has a ''view-transition-class'' value, that class can be used to select multiple pseudo-elements, as shows in the <a href="#vt-class-example">examples</a>.
830
831
831
832
## Examples ## {#vt-class-example}
832
833
@@ -879,9 +880,9 @@ div.box {
879
880
</pre>
880
881
881
882
The 'view-transition-class' can be used to apply the same style rule to multiple [=named view transition pseudo-elements=] which may have a different 'view-transition-name'.
882
-
While 'view-transition-name' is used to match between the element in the old state with its corresponding element in the new state,'view-transition-class' is used
883
-
only to apply styles using the view transitionpseudo-elements
0 commit comments