Skip to content

Commit 28dfa43

Browse files
khushalsagarkhushalsagar
committed
Update Overview.bs
Update Overview.bs
1 parent f87ded4 commit 28dfa43

File tree

1 file changed

+70
-53
lines changed

1 file changed

+70
-53
lines changed

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

Lines changed: 70 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -93,12 +93,12 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
9393
Each of the groups is comprised of up to four pseudo elements:
9494

9595
: Group
96-
:: This element initially mirrors the size and position of the "old" state element that it represents
96+
:: This element initially mirrors the size and position of the "old" element that it represents
9797
(i.e. the transition-named element that caused this group to be created).
98-
The element is animated to the "new" state and position.
98+
The element is animated to the "new" size and position.
9999

100100
: Image-Pair
101-
:: This element is a child of the container element and provides ''isolation: isolate'' for its children.
101+
:: This element is a child of the group element and provides ''isolation: isolate'' for its children.
102102
It's needed so that its children can be blended with non-normal blend modes without affecting other visual outputs.
103103

104104
: Old image
@@ -563,16 +563,14 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
563563
</div>
564564

565565
<div algorithm="suppress rendering">
566-
Issue: Define where this sits within the [=update the rendering=] steps.
567-
568566
1. For each {{Document}} in <var ignore>docs</var> with a [=document/transition suppressing rendering=] of true:
569567

570-
Issue: Define this behavior.
571-
Lifecycle updates can still be triggered via script APIs which query style or layout information but no visual updates are presented to the user.
572-
Is this the same behavior as render-blocking?
568+
Issue: Move this to the html spec.
569+
See [html/8368](https://github.com/whatwg/html/pull/8368/files).
573570

574571
Issue: How should input be handled when in this state?
575572
The last frame presented to the user will not reflect the DOM state as it asynchronously switches to the new version.
573+
See [issue 7797](https://github.com/w3c/csswg-drafts/issues/7797).
576574

577575
Note: The aim is to prevent unintended DOM updates from being presented to the user after a cached snapshot for the elements has been captured.
578576
We wait for one [=rendering opportunity=] after prepare to present DOM mutations made by the author before prepare to be presented to the user.
@@ -739,13 +737,13 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
739737

740738
1. [=Create transition pseudo-elements=] for |transition|.
741739

740+
1. [=Style transition pseudo-elements=] for |transition|.
741+
742742
1. [=Animate a view transition=] |transition|.
743743

744-
Note: This will require running document lifecycle phases
744+
Note: The above steps will require running document lifecycle phases,
745745
to compute information calculated during style/layout.
746746

747-
Note: The frame-by-frame parts of the animation are handled in [=update transition DOM=].
748-
749747
1. [=Resolve=] [=ViewTransition/ready promise=].
750748

751749
* If the promise was rejected with reason |r|, then:
@@ -867,22 +865,14 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
867865

868866
1. Return.
869867

870-
1. [=map/For each=] |name| → |capturedElement| of |transition|'s [=ViewTransition/named elements=]:
868+
1. [=Style transition pseudo-elements=] for |transition|.
871869

872-
1. If |capturedElement| has an "new element", run [=capture the image=]
873-
on |capturedElement|'s "new element" and update the displayed
874-
image for ''::view-transition-new'' with the name |name|.
870+
1. [=Animate a view transition=] for |transition|.
875871

876-
At the [=user-agent origin=],
877-
set |new|'s 'object-view-box' property
878-
to a value that when applied to |new|,
879-
will cause the view box to coincide with "new element"'s [=border box=]
880-
in the image.
881-
882-
1. ...
883-
884-
Issue: Also clarify updating the animation based on new bounds/transform to
885-
get c0 continuity.
872+
Note: The above implies that a change in incoming element's size or position will cause a new keyframe to be generated.
873+
This can cause a visual jump.
874+
We could retarget smoothly but don't have a use-case to justify the complexity.
875+
See [issue 7813](https://github.com/w3c/csswg-drafts/issues/7813) for details.
886876
</div>
887877

888878
## [=Compute the interest rectangle=] ## {#compute-the-interest-rectangle-algorithm}
@@ -909,20 +899,20 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
909899
<div algorithm>
910900
To <dfn>animate a view transition</dfn> given a {{ViewTransition}} |transition|:
911901

912-
1. Generate a <<@keyframes>> named "view-transition-fade-out" in
902+
1. Generate a <<@keyframes>> named "-ua-view-transition-fade-out" in
913903
[=user-agent origin=] as follows:
914904

915905
```css
916-
@keyframes view-transition-fade-out {
906+
@keyframes -ua-view-transition-fade-out {
917907
to { opacity: 0; }
918908
}
919909
```
920910

921-
1. Generate a <<@keyframes>> named "view-transition-fade-in" in
911+
1. Generate a <<@keyframes>> named "-ua-view-transition-fade-in" in
922912
[=user-agent origin=] as follows:
923913

924914
```css
925-
@keyframes view-transition-fade-in {
915+
@keyframes -ua-view-transition-fade-in {
926916
from { opacity: 0; }
927917
}
928918
```
@@ -931,11 +921,11 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
931921

932922
```css
933923
html::view-transition-old(*) {
934-
animation-name: view-transition-fade-out;
924+
animation: -ua-view-transition-fade-out 0.25s both;
935925
}
936926

937927
html::view-transition-new(*) {
938-
animation-name: view-transition-fade-in;
928+
animation: -ua-view-transition-fade-in 0.25s both;
939929
}
940930
```
941931

@@ -949,12 +939,12 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
949939

950940
1. Let |height| be |capturedElement|'s [=old styles=]'s 'height' property.
951941

952-
1. Generate a <<@keyframes>> named "view-transition-group-anim-|name|" in
942+
1. Generate a <<@keyframes>> named "-ua-view-transition-group-anim-|name|" in
953943
[=user-agent origin=] as follows:
954944

955945
<!-- deliberately using <pre> so the example can contain <var> references -->
956946
<pre highlight="css">
957-
@keyframes view-transition-group-anim-<var>name</var> {
947+
@keyframes -ua-view-transition-group-anim-<var>name</var> {
958948
from {
959949
transform: <var>transform</var>;
960950
width: <var>width</var>;
@@ -968,7 +958,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
968958
<!-- deliberately using <pre> so the example can contain <var> references -->
969959
<pre highlight="css">
970960
html::view-transition-group(<var>name</var>) {
971-
animation-name: view-transition-group-anim-<var>name</var>;
961+
animation-name: -ua-view-transition-group-anim-<var>name</var>;
972962
}
973963
</pre>
974964

@@ -984,15 +974,51 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
984974

985975
1. [=map/For each=] |transitionName| → |capturedElement| of |transition|'s [=ViewTransition/named elements=]:
986976

987-
1. Let |container| be the result of creating a new ''::view-transition-group()'' pseudo-element with the name |transitionName|.
977+
1. Let |group| be the result of creating a new ''::view-transition-group()'' pseudo-element with the name |transitionName|.
988978

989979
Issue: "name" should be defined/linked.
990980

991-
1. Append |container| to |transitionRoot|.
981+
1. Append |group| to |transitionRoot|.
992982

993983
Issue: This should be better defined.
994984
I'm not sure if pseudo-elements have defined ways to modify their DOM.
995985

986+
1. Let |imagePair| be a new ''::view-transition-image-pair()'' pseudo-element with the name |transitionName|.
987+
988+
1. Append |imagePair| to |group|.
989+
990+
1. If |capturedElement|'s [=captured element/old image=] is not null, then:
991+
992+
1. Let |old| be a new ''::view-transition-old()'' [=replaced element=] pseudo-element,
993+
with the name |transitionName|,
994+
displaying |capturedElement|'s [=captured element/old image=].
995+
996+
1. Append |old| to |imagePair|.
997+
998+
1. If |capturedElement|'s [=new element=] is not null, then:
999+
1000+
1. Let |new| be a new ''::view-transition-new()'' [=replaced element=] pseudo-element, with the name |transitionName|, displaying the [=capture the image=] of |capturedElement|'s [=new element=].
1001+
1002+
1. Append |new| to |imagePair|.
1003+
1004+
The [=new element=] and its contents
1005+
(the flat tree descendants of the element, including both text and elements, or the replaced content of a replaced element),
1006+
except the [=view-transition pseudo-elements=],
1007+
are not painted (as if they had visibility: hidden)
1008+
and do not respond to hit-testing (as if they had pointer-events: none) until |new| exists.
1009+
</div>
1010+
1011+
## [=Style transition pseudo-elements=] ## {#style-transition-pseudo-elements-algorithm}
1012+
1013+
<div algorithm>
1014+
To <dfn>style transition pseudo-elements</dfn> for a {{ViewTransition}} |transition|:
1015+
1016+
1. [=map/For each=] |transitionName| → |capturedElement| of |transition|'s [=ViewTransition/named elements=]:
1017+
1018+
1. Let |group| be the ''::view-transition-group'' pseudo-element with the name |transitionName|.
1019+
1020+
Issue: "name" should be defined/linked.
1021+
9961022
1. Let |width|, |height|, |transform|, |writingMode|, and |direction| be null.
9971023

9981024
1. If |capturedElement|'s [=new element=] is null, then:
@@ -1020,41 +1046,33 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
10201046
1. Set |direction| to the [=computed value=] of 'direction' on |capturedElement|'s [=new element=].
10211047

10221048
1. At the [=user-agent origin=],
1023-
set |container|'s 'width', 'height', 'transform', 'writing-mode', and 'direction' properties
1049+
set |group|'s 'width', 'height', 'transform', 'writing-mode', and 'direction' properties
10241050
to |width|, |height|, |transform|, |writingMode|, and |direction|.
10251051

1026-
1. Let |imagePair| be a new ''::view-transition-image-pair()'' pseudo-element with the name |transitionName|.
1027-
1028-
1. Append |imagePair| to |container|.
1029-
10301052
1. If |capturedElement|'s [=captured element/old image=] is not null, then:
10311053

1032-
1. Let |old| be a new ''::view-transition-old()'' [=replaced element=] pseudo-element,
1054+
1. Let |old| be the ''::view-transition-old'' [=replaced element=] pseudo-element,
10331055
with the name |transitionName|,
10341056
displaying |capturedElement|'s [=captured element/old image=].
10351057

1036-
1. Append |old| to |imagePair|.
1037-
10381058
1. At the [=user-agent origin=],
10391059
set |old|'s 'object-view-box' property to |capturedElement|'s [=old styles=] 'object-view-box' property.
10401060

10411061
Issue: Which of ''xywh()''/''rect()''/''inset()'' should we use?
10421062

10431063
1. If |capturedElement|'s [=new element=] is not null, then:
10441064

1045-
1. Let |new| be a new ''::view-transition-new()'' [=replaced element=] pseudo-element, with the name |transitionName|, displaying the [=capture the image=] of |capturedElement|'s [=new element=].
1046-
1047-
1. Append |new| to |imagePair|.
1065+
1. Let |new| be the ''::view-transition-new'' [=replaced element=] pseudo-element, with the name |transitionName|,
1066+
displaying the [=capture the image=] of |capturedElement|'s [=new element=].
10481067

10491068
1. At the [=user-agent origin=],
10501069
set |new|'s 'object-view-box' property to a value that when applied to |new|,
10511070
will cause the view box to coincide with [=new element=]'s [=border box=] in the image.
10521071

1053-
The [=new element=] and its contents
1054-
(the flat tree descendants of the element, including both text and elements, or the replaced content of a replaced element),
1055-
except the [=view-transition pseudo-elements=],
1056-
are not painted (as if they had visibility: hidden)
1057-
and do not respond to hit-testing (as if they had pointer-events: none) until |new| exists.
1072+
The [=new element=] and its contents (the flat tree descendants of the element,
1073+
including both text and elements, or the replaced content of a replaced element), except the
1074+
[=view-transition pseudo-elements=], are not painted (as if they had visibility: hidden) and
1075+
do not respond to hit-testing (as if they had pointer-events: none) until |new| exists.
10581076
</div>
10591077

10601078
<div algorithm>
@@ -1075,7 +1093,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
10751093
* If |callbackPromise| was resolved, then [=resolve=] |transition|'s [=ViewTransition/DOM updated promise=].
10761094

10771095
* If |callbackPromise| was rejected with reason |r|, then [=reject=] |transition|'s [=ViewTransition/DOM updated promise=] with |r|.
1078-
10791096
</div>
10801097

10811098
<h2 id="priv" class="no-num">Privacy Considerations</h2>

0 commit comments

Comments
 (0)