Skip to content

[css-view-transitions-2] cross-document transition preceeds startViewTransition on outgoing page #9609

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 3 commits into from
Nov 17, 2023
Merged

[css-view-transitions-2] cross-document transition preceeds startViewTransition on outgoing page #9609

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
17acd1b
[css-view-transitions-2] cross-document transition preceeds startView…
noamr Nov 17, 2023
05af0b8
Add to change list
noamr Nov 17, 2023
7901e79
Reapply
noamr Nov 17, 2023
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
22 changes: 21 additions & 1 deletion css-view-transitions-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -949,6 +949,23 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. Let |document| be [=this's=] [=relevant global object's=] [=associated document=].

1. If |document|'s [=auto-skip view transitions=] is true, then:

1. [=Queue a global task=] on the [=DOM manipulation task source=],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indentation is off.

given |transition|'s [=relevant global object=],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we be doing all this in a separate task or just the update callback dispatch? skip transition only makes running the callback async: https://drafts.csswg.org/css-view-transitions-1/#skip-the-view-transition.

to execute the following steps:

1. [=Call the update callback=] for |transition|.

1. [=Reject=] |transition|'s [=ViewTransition/ready promise=] with an "{{InvalidStateError}}" {{DOMException}}.

1. [=Mark as handled=] |transition|'s [=ViewTransition/ready promise=].
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought this isn't needed, rejecting above will automatically mark it as handled?


1. [=Resolve=] |transition|'s [=ViewTransition/finished promise=].
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the default case, we mirror the result of update callback promise into finished. IIRC the rationale was that developers use the finished promise to execute code that should run when the DOM update was successful.

I sent a PR to refactor a bit so we can use the skip the view transition algo instead of repeating a bunch of same stuff here: #9611


1. Return |transition|.


1. If |document|'s [=active view transition=] is not null,
then [=skip the view transition|skip that view transition=]
with an "{{AbortError}}" {{DOMException}} in [=this's=] [=relevant Realm=].
Expand Down Expand Up @@ -1142,6 +1159,9 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
with [=this=]'s [=document element=] is its [=originating element=].

Note: The position of the [=ViewTransition/transition root pseudo-element=] within the [=document element=] does not matter, as the [=ViewTransition/transition root pseudo-element=]'s [=containing block=] is the [=snapshot containing block=].

: <dfn export>auto-skip view transitions</dfn>
:: A boolean. Initially false.
</dl>

### Additions to Elements ### {#elements-concept}
Expand Down Expand Up @@ -1927,7 +1947,7 @@ Changes from <a href="https://www.w3.org/TR/2023/WD-css-view-transitions-1-20230
* The [=view transition tree=] is not exposed to accessibility tree. See <a href="https://github.com/w3c/csswg-drafts/issues/9365">issue 9365</a>.
* Animate back-drop filter similar to transform/size. See <a href="https://github.com/w3c/csswg-drafts/issues/9358">issue 9358</a>.
* Copy `color-scheme` from DOM element to ''::view-transition-group()''. See <a href="https://github.com/w3c/csswg-drafts/issues/9276">issue 9276</a>.

* Expose [=auto-skip view transition=] for a {{Document}}, to allow having outbound cross-document transitions preceed programmatic view transiitons. see <a href="https://github.com/w3c/csswg-drafts/issues/9512">issue 9512</a>.
<h3 id="changes-since-2022-05-25">
Changes from <a href="https://www.w3.org/TR/2023/WD-css-view-transitions-1-20230525/">2022-05-25 Working Draft</a>
</h3>
Expand Down
6 changes: 6 additions & 0 deletions css-view-transitions-2/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -502,6 +502,10 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule.
Note: this means that any running transition would be skipped when the document is ready
to unload.

1. Set |document|'s [=auto-skip view transitions=] to true.

Note: this means that calling {{Document/startViewTransition()}} while capturing the old document for a cross-document view-transition would run the callback but skip the animation.

1. Let |outboundTransition| be a new {{ViewTransition}} object in |oldDocument|'s [=relevant Realm=],
whose [=ViewTransition/active types=] is |resolvedRule|, and whose [=ViewTransition/process old state captured=] is set to the following steps:

Expand All @@ -516,6 +520,8 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule.
Note: The ViewTransition object on the old Document should be destroyed after its state has been copied to the new Document below.
We explicitly clear it here since the old Document may be cached by the UA.

1. Set |document|'s [=auto-skip view transitions=] to false.

1. [=Queue a global task=] on the [=DOM manipulation task source=] given |newDocument|'s [=relevant global object=],
to perform the following step:

Expand Down