Skip to content
Merged
Changes from all commits
Commits
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
28 changes: 27 additions & 1 deletion css-view-transitions-2/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -1717,6 +1717,7 @@ Issue: Is this updated by a <code>rootEl.startViewTransition()</code> call, too?
undefined skipTransition();
attribute ViewTransitionTypeSet types;
readonly attribute Element transitionRoot;
undefined waitUntil(Promise<any> promise);
};
</xmp>

Expand Down Expand Up @@ -1772,6 +1773,11 @@ Issue: Is this updated by a <code>rootEl.startViewTransition()</code> call, too?

For [=view transitions=] started on the {{Document}},
this is the [=document element=].

: <code>{{ViewTransition|viewTransition}}.{{ViewTransition/waitUntil}}()</code>
:: Delays view transition finish until the given promise is settled

When invoked with Promise |p|, run [=delay finish for promise=] steps with |p|.
</dl>

A {{ViewTransition}} has the following:
Expand Down Expand Up @@ -2090,6 +2096,12 @@ and by applying ''view-transition-group'' to the internal element referencing th
Initially false.

Note: this value can be read [=in parallel=] while navigating.

: <dfn>wait until promise count</dfn>
:: an integer, initially 0.

Represents the count of promises that have been added via {{ViewTransition/waitUntil}} function
and have not settled.
</dl>

### Additions to Elements ### {#elements-concept}
Expand Down Expand Up @@ -3115,6 +3127,19 @@ To <dfn>adjust nested view transition group transform</dfn> given a |transform|
Note: This is necessary since the descendant will generate its own snapshot which will be displayed and animated independently.
</div>

<div algorithm="delay finish for promise">
To <dfn>delay finish for promise</dfn>, given promise |p|:

1. If |p| is settled, abort the remainder of the steps and return.

1. Increment [=this=]'s [=wait until promise count=].

1. [=Upon fulfillment=] or [=upon rejection|rejection=] of |p|:

1. Decrement [=this=]'s [=wait until promise count=].

Note: If [=this=]'s [=wait until promise count=] is 0, the transition will finish at the next [=rendering opportunity=].

## [=Handle transition frame=] ## {#handle-transition-frame-algorithm}

<div algorithm>
Expand All @@ -3133,7 +3158,7 @@ To <dfn>adjust nested view transition group transform</dfn> given a |transform|

- |document|'s [=pending animation event queue=] has any events associated with |animation|.

1. If |hasActiveAnimations| is false:
1. If |hasActiveAnimations| is false and [=this=]'s [=wait until promise count=] is 0:

1. Set |transition|'s [=ViewTransition/phase=] to "`done`".

Expand Down Expand Up @@ -3327,6 +3352,7 @@ This appendix is <em>informative</em>.
Changes from <a href="https://www.w3.org/TR/2024/WD-css-view-transitions-2-20240516/">2024-05-16 Working Draft</a>
</h3>

* Add waitUntil() (<a href="https://github.com/w3c/csswg-drafts/issues/9901">#9901</a>)
* First pass at layered capture (<a href="https://github.com/w3c/csswg-drafts/issues/10585">#10585</a>)
* Allow transitions when traversing into a document that was created using cross-origin redirects (<a href="https://github.com/w3c/csswg-drafts/issues/11063">#11063</a>#11063)
* Clarify a few nesting details (<a href="https://github.com/w3c/csswg-drafts/issues/10780">#10780</a> and <a href="https://github.com/w3c/csswg-drafts/issues/10633">#10633</a>)
Expand Down