Skip to content

Commit ad42956

Browse files
khushalsagarkhushalsagar
authored
Rename shared element transition -> view transition
1 parent dfb6a2f commit ad42956

File tree

1 file changed

+57
-57
lines changed

1 file changed

+57
-57
lines changed

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

Lines changed: 57 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<pre class='metadata'>
2-
Title: CSS Shared Element Transitions Module Level 1
3-
Shortname: css-shared-element-transitions
2+
Title: CSS View Transitions Module Level 1
3+
Shortname: css-view-transitions
44
Level: 1
55
Status: ED
66
Group: csswg
7-
ED: https://drafts.csswg.org/css-shared-element-transitions-1/
7+
ED: https://drafts.csswg.org/css-view-transitions-1/
88
Work Status: exploring
99
Editor: Tab Atkins-Bittner, Google, http://xanthir.com/contact/, w3cid 42199
1010
Editor: Jake Archibald, Google
1111
Editor: Khushal Sagar, Google
12-
Abstract: This module defines the Single-Page Document-Transition API, along with associated properties and pseudo-elements.
12+
Abstract: This module defines the View Transition API, along with associated properties and pseudo-elements.
1313
</pre>
1414

1515
<pre class=link-defaults>
@@ -42,7 +42,7 @@ spec:css-shapes-3; type:function; text:rect()
4242

4343
<em>This section is non-normative.</em>
4444

45-
Shared element transitions is a set of API that allow DOM changes to smoothly
45+
View Transitions is a set of API that allow DOM changes to smoothly
4646
animate between states. This is accomplished by leveraging user-agents ability
4747
to persist visual representations of state (i.e. snapshots) and blend them with
4848
current DOM state's visual output. The API also allows the animations to be
@@ -68,7 +68,7 @@ with a single call to the JavaScript API.
6868

6969
The user-agent provides additional JavaScript functionality and promises to
7070
control and observe the state of the animations. These are described in detail
71-
in the {{DOMTransition}} section.
71+
in the {{ViewTransition}} section.
7272

7373
After the callback has finished running, the user-agent creates a structure of
7474
pseudo-elements that represent both the "before" and "after" states of the
@@ -121,7 +121,7 @@ Note that because these APIs are an enhancement to the DOM change, some principl
121121
on `NavigateEvent`</a> is an example of a feature developers could use to
122122
handle this.
123123
* Although the transition API allows DOM changes to be asynchronous via the
124-
{{DOMTransitionInit/updateDOM}} callback, the transition API is not
124+
{{ViewTransitionInit/updateDOM}} callback, the transition API is not
125125
responsible for queuing or otherwise scheduling the DOM changes, beyond the
126126
scheduling needed for the transition itself. Some asynchronous DOM changes
127127
can happen concurrently (e.g if they're happening within independent
@@ -434,7 +434,7 @@ A {{Document}} additionally has:
434434

435435
<dl dfn-for="document">
436436
: <dfn>active DOM transition</dfn>
437-
:: a {{DOMTransition}} or null. Initially null.
437+
:: a {{ViewTransition}} or null. Initially null.
438438

439439
: <dfn>transition suppressing rendering</dfn>
440440
:: a boolean. Initially false.
@@ -446,33 +446,33 @@ A {{Document}} additionally has:
446446

447447
<script type=idl>
448448
partial interface Document {
449-
DOMTransition createTransition(DOMTransitionInit init);
449+
ViewTransition createTransition(ViewTransitionInit init);
450450
};
451451

452-
dictionary DOMTransitionInit {
452+
dictionary ViewTransitionInit {
453453
required UpdateDOMCallback updateDOM;
454454
};
455455

456456
callback UpdateDOMCallback = Promise<any> ();
457457
</script>
458458

459-
### {{Document/createTransition()}} ### {#DOMTransition-prepare}
459+
### {{Document/createTransition()}} ### {#ViewTransition-prepare}
460460

461461
<div algorithm>
462462
The [=method steps=] for
463463
<dfn method for=Document>createTransition(|init|)</dfn>
464464
are as follows:
465465

466-
1. Let |transition| be a new {{DOMTransition}} object in [=this's=] [=relevant Realm=].
466+
1. Let |transition| be a new {{ViewTransition}} object in [=this's=] [=relevant Realm=].
467467

468-
1. Set |transition|'s [=DOMTransition/DOM update callback=] to |init|[{{DOMTransitionInit/updateDOM}}].
468+
1. Set |transition|'s [=ViewTransition/DOM update callback=] to |init|[{{ViewTransitionInit/updateDOM}}].
469469

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

472472
1. If |document|'s [=active DOM transition=] is not null, then [=skip the page transition=] |document|'s [=active DOM transition=]
473473
with an "{{AbortError}}" {{DOMException}} in [=this's=] [=relevant Realm=].
474474

475-
Note: This can result in two asynchronous [=DOMTransition/DOM update
475+
Note: This can result in two asynchronous [=ViewTransition/DOM update
476476
callbacks=] running concurrently. One for the |document|'s current
477477
[=active DOM transition=], and another for this |transition|. As per
478478
the [design of this feature](#transitions-as-enhancements), it's
@@ -544,11 +544,11 @@ callback UpdateDOMCallback = Promise<any> ();
544544
</pre>
545545
</div>
546546

547-
## The {{DOMTransition}} interface ## {#the-domtransition-interface}
547+
## The {{ViewTransition}} interface ## {#the-domtransition-interface}
548548

549549
<script type=idl>
550550
[Exposed=Window]
551-
interface DOMTransition {
551+
interface ViewTransition {
552552
undefined skipTransition();
553553
readonly attribute Promise<undefined> finished;
554554
readonly attribute Promise<undefined> ready;
@@ -557,15 +557,15 @@ interface DOMTransition {
557557
</script>
558558

559559
<div class="note">
560-
The {{DOMTransition}} represents and controls
560+
The {{ViewTransition}} represents and controls
561561
a single same-document transition. That is, it controls a transition where the
562562
starting and ending document are the same, possibly with changes to the
563563
document's DOM structure.
564564
</div>
565565

566-
A {{DOMTransition}} has the following:
566+
A {{ViewTransition}} has the following:
567567

568-
<dl dfn-for="DOMTransition">
568+
<dl dfn-for="ViewTransition">
569569
: <dfn>tagged elements</dfn>
570570
:: a [=/map=],
571571
whose keys are [=page transition tags=] and whose values are [=captured elements=].
@@ -595,18 +595,18 @@ A {{DOMTransition}} has the following:
595595
Initially [=a new promise=] in [=this's=] [=relevant Realm=].
596596
</dl>
597597

598-
The {{DOMTransition/finished}} [=getter steps=] are to return [=this's=] [=DOMTransition/finished promise=].
598+
The {{ViewTransition/finished}} [=getter steps=] are to return [=this's=] [=ViewTransition/finished promise=].
599599

600-
The {{DOMTransition/ready}} [=getter steps=] are to return [=this's=] [=DOMTransition/ready promise=].
600+
The {{ViewTransition/ready}} [=getter steps=] are to return [=this's=] [=ViewTransition/ready promise=].
601601

602-
The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOMTransition/DOM updated promise=].
602+
The {{ViewTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=ViewTransition/DOM updated promise=].
603603

604-
### {{DOMTransition/skipTransition()}} ### {#DOMTransition-skipTransition}
604+
### {{ViewTransition/skipTransition()}} ### {#ViewTransition-skipTransition}
605605

606606
<div algorithm>
607-
The [=method steps=] for <dfn method for="DOMTransition">skipTransition()</dfn> are:
607+
The [=method steps=] for <dfn method for="ViewTransition">skipTransition()</dfn> are:
608608

609-
1. If [=this=]'s [=DOMTransition/phase=] is not "`done`",
609+
1. If [=this=]'s [=ViewTransition/phase=] is not "`done`",
610610
then [=skip the page transition=] for [=this=]
611611
with an "{{AbortError}}" {{DOMException}}.
612612
</div>
@@ -656,18 +656,18 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
656656

657657
1. If |document|'s [=document/active DOM transition=] is not null, then:
658658

659-
1. If |document|'s [=document/active DOM transition=]'s [=DOMTransition/phase=] is "`pending-capture`", then [=perform an outgoing capture=] with |document|'s [=document/active DOM transition=].
659+
1. If |document|'s [=document/active DOM transition=]'s [=ViewTransition/phase=] is "`pending-capture`", then [=perform an outgoing capture=] with |document|'s [=document/active DOM transition=].
660660

661-
1. Otherwise, if |document|'s [=document/active DOM transition=]'s [=DOMTransition/phase=] is "`animating`", then [=update transition DOM=] for |document|'s [=document/active DOM transition=].
661+
1. Otherwise, if |document|'s [=document/active DOM transition=]'s [=ViewTransition/phase=] is "`animating`", then [=update transition DOM=] for |document|'s [=document/active DOM transition=].
662662
</div>
663663

664664
## [=Perform an outgoing capture=] ## {#perform-an-outgoing-capture-algorithm}
665665

666666
<div algorithm>
667-
To <dfn>perform an outgoing capture</dfn> given a {{DOMTransition}} |transition|,
667+
To <dfn>perform an outgoing capture</dfn> given a {{ViewTransition}} |transition|,
668668
perform the following steps:
669669

670-
1. Let |taggedElements| be |transition|'s [=DOMTransition/tagged elements=].
670+
1. Let |taggedElements| be |transition|'s [=ViewTransition/tagged elements=].
671671

672672
1. Let |usedTransitionTags| be a new [=/set=] of strings.
673673

@@ -740,25 +740,25 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
740740
Note: A task is queued here because the texture read back in [=capturing the image=] may be async,
741741
although the render steps in the HTML spec act as if it's synchronous.
742742

743-
1. If |transition|'s [=DOMTransition/phase=] is "`done`", then abort these steps.
743+
1. If |transition|'s [=ViewTransition/phase=] is "`done`", then abort these steps.
744744

745745
Note: This happens if |transition| was [=skip the page transition|skipped=] before this point.
746746

747747
1. [=Call the DOM update callback=] of |transition|.
748748

749-
1. [=promise/React=] to |transition|'s [=DOMTransition/DOM updated promise=]:
749+
1. [=promise/React=] to |transition|'s [=ViewTransition/DOM updated promise=]:
750750

751751
* If the promise does not settle within an implementation-defined timeout, then:
752752

753-
1. If |transition|'s [=DOMTransition/phase=] is "`done`", then return.
753+
1. If |transition|'s [=ViewTransition/phase=] is "`done`", then return.
754754

755755
Note: This happens if |transition| was [=skip the page transition|skipped=] before this point.
756756

757757
1. [=Skip the page transition=] |transition| with a "{{TimeoutError}}" {{DOMException}}.
758758

759759
* If the promise was fulfilled, then:
760760

761-
1. If |transition|'s [=DOMTransition/phase=] is "`done`", then return.
761+
1. If |transition|'s [=ViewTransition/phase=] is "`done`", then return.
762762

763763
Note: This happens if |transition| was [=skip the page transition|skipped=] before this point.
764764

@@ -809,11 +809,11 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
809809

810810
Note: The frame-by-frame parts of the animation are handled in [=update transition DOM=].
811811

812-
1. [=Resolve=] [=DOMTransition/ready promise=].
812+
1. [=Resolve=] [=ViewTransition/ready promise=].
813813

814814
* If the promise was rejected with reason |r|, then:
815815

816-
1. If |transition|'s [=DOMTransition/phase=] is "`done`", then return.
816+
1. If |transition|'s [=ViewTransition/phase=] is "`done`", then return.
817817

818818
Note: This happens if |transition| was [=skip the page transition|skipped=] before this point.
819819

@@ -823,33 +823,33 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
823823
## Skip the page transition ## {#skip-the-page-transition-algorithm}
824824

825825
<div algorithm>
826-
To <dfn>skip the page transition</dfn> for {{DOMTransition}} |transition| with reason |reason|:
826+
To <dfn>skip the page transition</dfn> for {{ViewTransition}} |transition| with reason |reason|:
827827

828828
1. Let |document| be |transition|'s [=relevant global object's=] [=associated document=].
829829

830830
1. [=Assert=]: |document|'s [=document/active DOM transition=] is |transition|.
831831

832-
1. [=Assert=]: |transition|'s [=DOMTransition/phase=] is not "`done`".
832+
1. [=Assert=]: |transition|'s [=ViewTransition/phase=] is not "`done`".
833833

834-
1. If |transition|'s [=DOMTransition/phase=] is [=phases/before=] "`dom-update-callback-called`", then [=call the DOM update callback=] of |transition|.
834+
1. If |transition|'s [=ViewTransition/phase=] is [=phases/before=] "`dom-update-callback-called`", then [=call the DOM update callback=] of |transition|.
835835

836836
1. Set [=document/transition suppressing rendering=] to false.
837837

838-
1. If |transition|'s [=DOMTransition/phase=] is equal to or [=phases/after=] "`animating`", then:
838+
1. If |transition|'s [=ViewTransition/phase=] is equal to or [=phases/after=] "`animating`", then:
839839

840840
1. Remove all associated [=page-transition pseudo-elements=] from |document|.
841841

842842
Issue: There needs to be a definition/link for "remove".
843843

844844
Issue: There needs to be a definition/link for "associated".
845845

846-
1. Set |transition|'s [=DOMTransition/phase=] to "`done`".
846+
1. Set |transition|'s [=ViewTransition/phase=] to "`done`".
847847

848848
1. Set |document|'s [=document/active DOM transition=] to null.
849849

850-
1. [=Reject=] |transition|'s [=DOMTransition/ready promise=] with |reason|.
850+
1. [=Reject=] |transition|'s [=ViewTransition/ready promise=] with |reason|.
851851

852-
1. [=Reject=] |transition|'s [=DOMTransition/finished promise=] with |reason|.
852+
1. [=Reject=] |transition|'s [=ViewTransition/finished promise=] with |reason|.
853853
</div>
854854

855855
## [=Capture the image=] ## {#capture-the-image-algorithm}
@@ -890,7 +890,7 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
890890
## [=Update transition DOM=] ## {#update-transition-dom-algorithm}
891891

892892
<div algorithm>
893-
To <dfn>update transition DOM</dfn> given a {{DOMTransition}} |transition|:
893+
To <dfn>update transition DOM</dfn> given a {{ViewTransition}} |transition|:
894894

895895
1. Let |document| be |transition|'s [=relevant global object's=] [=associated document=].
896896

@@ -903,7 +903,7 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
903903

904904
Issue: There needs to be a definition/link for "active animation".
905905

906-
1. Set |transition|'s [=DOMTransition/phase=] to "`done`".
906+
1. Set |transition|'s [=ViewTransition/phase=] to "`done`".
907907

908908
1. Remove all associated [=page-transition pseudo-elements=] from |document|.
909909

@@ -913,11 +913,11 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
913913

914914
1. Set |document|'s [=document/active DOM transition=] to null.
915915

916-
1. [=Resolve=] |transition|'s[=DOMTransition/finished promise=].
916+
1. [=Resolve=] |transition|'s[=ViewTransition/finished promise=].
917917

918918
1. Return.
919919

920-
1. [=map/For each=] |tag| -> |capturedElement| of |transition|'s [=DOMTransition/tagged elements=]:
920+
1. [=map/For each=] |tag| -> |capturedElement| of |transition|'s [=ViewTransition/tagged elements=]:
921921

922922
1. If |capturedElement| has an "incoming element", run [=capture the image=]
923923
on |capturedElement|'s "incoming element" and update the displayed
@@ -957,7 +957,7 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
957957
## [=Animate a page transition=] ## {#animate-a-page-transition-algorithm}
958958

959959
<div algorithm>
960-
To <dfn>animate a page transition</dfn> given a {{DOMTransition}} |transition|:
960+
To <dfn>animate a page transition</dfn> given a {{ViewTransition}} |transition|:
961961

962962
1. Generate a <<keyframe>> named "page-transition-fade-out" in
963963
[=user-agent origin=] as follows:
@@ -989,7 +989,7 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
989989
}
990990
</code></pre>
991991

992-
1. [=map/For each=] |tag| -> |capturedElement| of |transition|'s [=DOMTransition/tagged elements=]:
992+
1. [=map/For each=] |tag| -> |capturedElement| of |transition|'s [=ViewTransition/tagged elements=]:
993993

994994
1. If neither of |capturedElement|'s [=captured element/outgoing image=] or [=captured element/incoming element=] is null:
995995

@@ -1021,7 +1021,7 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
10211021
</code></pre>
10221022

10231023

1024-
1. Set |transition|'s [=DOMTransition/phase=] to "`animating`".
1024+
1. Set |transition|'s [=ViewTransition/phase=] to "`animating`".
10251025

10261026
Issue: How are keyframes scoped to user-agent origin? We could decide
10271027
scope based on whether `animation-name` in the computed style
@@ -1034,11 +1034,11 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
10341034
## [=Create transition pseudo-elements=] ## {#create-transition-pseudo-elements-algorithm}
10351035

10361036
<div algorithm>
1037-
To <dfn>create transition pseudo-elements</dfn> for a {{DOMTransition}} |transition|:
1037+
To <dfn>create transition pseudo-elements</dfn> for a {{ViewTransition}} |transition|:
10381038

10391039
1. Let |transitionRoot| be the result of creating a new ''::page-transition'' pseudo-element.
10401040

1041-
1. [=map/For each=] |transitionTag| → |capturedElement| of |transition|'s [=DOMTransition/tagged elements=]:
1041+
1. [=map/For each=] |transitionTag| → |capturedElement| of |transition|'s [=ViewTransition/tagged elements=]:
10421042

10431043
1. Let |container| be the result of creating a new ''::page-transition-container'' pseudo-element with the tag |transitionTag|.
10441044

@@ -1113,18 +1113,18 @@ The {{DOMTransition/domUpdated}} [=getter steps=] are to return [=this's=] [=DOM
11131113
</div>
11141114

11151115
<div algorithm>
1116-
To <dfn>call the DOM update callback</dfn> of a {{DOMTransition}} |transition|:
1116+
To <dfn>call the DOM update callback</dfn> of a {{ViewTransition}} |transition|:
11171117

1118-
1. [=Assert=]: |transition|'s [=DOMTransition/phase=] is [=phases/before=] "`dom-update-callback-called`".
1118+
1. [=Assert=]: |transition|'s [=ViewTransition/phase=] is [=phases/before=] "`dom-update-callback-called`".
11191119

1120-
1. Let |callbackPromise| be the result of [=/invoking=] |transition|'s [=DOMTransition/DOM update callback=].
1120+
1. Let |callbackPromise| be the result of [=/invoking=] |transition|'s [=ViewTransition/DOM update callback=].
11211121

1122-
1. Set |transition|'s [=DOMTransition/phase=] to "`dom-update-callback-called`".
1122+
1. Set |transition|'s [=ViewTransition/phase=] to "`dom-update-callback-called`".
11231123

11241124
1. [=promise/React=] to |callbackPromise|:
11251125

1126-
* If |callbackPromise| was fulfilled, then [=resolve=] |transition|'s [=DOMTransition/DOM updated promise=].
1126+
* If |callbackPromise| was fulfilled, then [=resolve=] |transition|'s [=ViewTransition/DOM updated promise=].
11271127

1128-
* If |callbackPromise| was rejected with reason |r|, then [=reject=] |transition|'s [=DOMTransition/DOM updated promise=] with |r|.
1128+
* If |callbackPromise| was rejected with reason |r|, then [=reject=] |transition|'s [=ViewTransition/DOM updated promise=] with |r|.
11291129

11301130
</div>

0 commit comments

Comments
 (0)