Skip to content

[css-view-transitions-1] Algorithms Section: various minor editorial fixes #8956

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 4 commits into from
Jun 13, 2023
Merged

[css-view-transitions-1] Algorithms Section: various minor editorial fixes #8956

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3d9610c
[css-view-transitions-1][editorial] Minor tweaks to API prose
fantasai Jun 13, 2023
f4b8216
[css-view-transitions-1][editorial] Rename rendering suppression vari…
fantasai Jun 13, 2023
0aa0965
[css-view-transitions-1][editorial] Rename show view transition pseud…
fantasai Jun 13, 2023
34966cd
[css-view-transitions-1][editorial] Minor wording tweaks and markup f…
fantasai Jun 13, 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
42 changes: 23 additions & 19 deletions css-view-transitions-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -953,7 +953,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
Note: The View Transition API wraps a DOM change and creates a visual transition.
However, sometimes you don't care about the success/failure of the transition animation,
you just want to know if and when the DOM change happens.
{{ViewTransition/updateCallbackDone}} is for that use-case.
{{ViewTransition/updateCallbackDone}} is for that use-case.)

: <code>{{ViewTransition|viewTransition}}.{{ViewTransition/ready}}</code>
:: A promise that fulfills once the pseudo-elements for the transition are created,
Expand Down Expand Up @@ -1073,10 +1073,10 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
: <dfn>active view transition</dfn>
:: a {{ViewTransition}} or null. Initially null.

: <dfn>transition suppressing rendering</dfn>
: <dfn>rendering suppression for view transitions</dfn>
:: a boolean. Initially false.

While a {{Document}}’s [=document/transition suppressing rendering=] is true,
While a {{Document}}’s [=document/rendering suppression for view transitions=] is true,
all pointer hit testing must target its [=document element=],
ignoring all other [=elements=].

Expand All @@ -1088,11 +1088,11 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

Note: This is used to hold dynamic styles relating to transitions.

: <dfn>show view-transition root pseudo-element</dfn>
: <dfn>show view transition tree</dfn>
:: A boolean. Initially false.

When this is true, [=this=]'s [=active view transition=]'s [=ViewTransition/transition root pseudo-element=] renders as a child of [=this=]'s [=document element=],
and [=this=]'s [=document element=] is its [=originating element=].
with [=this=]'s [=document element=] is its [=originating element=].
Copy link
Member

@khushalsagar khushalsagar Jun 13, 2023

Choose a reason for hiding this comment

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

Suggested change
with [=this=]'s [=document element=] is its [=originating element=].
with [=this=]'s [=document element=] as its [=originating element=].

Current sentence looks grammatically incorrect.


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=].
</dl>
Expand Down Expand Up @@ -1165,7 +1165,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
<div algorithm="suppress rendering">
In the definition for [=rendering opportunity=], add the following condition:

A navigable has no rendering opportunities if active document has [=document/transition suppressing rendering=] set to true.
A navigable has no rendering opportunities if active document has [=document/rendering suppression for view transitions=] set to true.

Note: These steps will be added to the [=update the rendering=] in the HTML spec.
See <a href="https://github.com/w3c/csswg-drafts/issues/7784">#7884</a> for more context.
Expand All @@ -1179,7 +1179,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
1. If |document|'s [=document/active view transition=] is not null, then:

1. If |document|'s [=document/active view transition=]'s [=ViewTransition/phase=] is "`pending-capture`",
then [=setup view transition=] with |document|'s [=document/active view transition=].
then [=setup view transition=] for |document|'s [=document/active view transition=].

1. Otherwise, if |document|'s [=document/active view transition=]'s [=ViewTransition/phase=] is "`animating`",
then [=handle transition frame=] for |document|'s [=document/active view transition=].
Expand All @@ -1188,7 +1188,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
## [=Setup view transition=] ## {#setup-view-transition-algorithm}

<div algorithm>
To <dfn>setup view transition</dfn> given a {{ViewTransition}} |transition|,
To <dfn>setup view transition</dfn> for a {{ViewTransition}} |transition|,
perform the following steps:

Note: This algorithm captures the current state of the document,
Expand All @@ -1202,7 +1202,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
If failure is returned, then [=skip the view transition=] for |transition| with an "{{InvalidStateError}}" {{DOMException}} in |transition|'s [=relevant Realm=],
and return.

1. Set |document|'s [=document/transition suppressing rendering=] to true.
1. Set |document|'s [=document/rendering suppression for view transitions=] to true.

1. [=Queue a global task=] on the [=DOM manipulation task source=],
given |transition|'s [=relevant global object=],
Expand Down Expand Up @@ -1251,7 +1251,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
1. If |transition|'s [=ViewTransition/initial snapshot containing block size=] is not equal to the [=snapshot containing block size=],
then [=skip the view transition=] for |transition|, and return.

1. Set [=document/transition suppressing rendering=] to false.
1. Set [=document/rendering suppression for view transitions=] to false.

1. [=Capture the new state=] for |transition|.

Expand Down Expand Up @@ -1330,9 +1330,9 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
|element|'s [=border box=] from the [=snapshot containing block origin=] to its
current visual position.

1. Set |capture|'s [=captured element/old writing-mode] to the [=computed value=] of 'writing-mode' on |element|.
1. Set |capture|'s [=captured element/old writing-mode=] to the [=computed value=] of 'writing-mode' on |element|.

1. Set |capture|'s [=captured element/old direction] to the [=computed value=] of 'direction' on |element|.
1. Set |capture|'s [=captured element/old direction=] to the [=computed value=] of 'direction' on |element|.

1. Set |namedElements|[|transitionName|] to |capture|.
</div>
Expand Down Expand Up @@ -1382,7 +1382,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

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

1. Set |document|'s [=show view-transition root pseudo-element=] to true.
1. Set |document|'s [=show view transition tree=] to true.

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

Expand All @@ -1400,7 +1400,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. Let |old| be a new ''::view-transition-old()'',
with its [=view transition name=] set to |transitionName|,
displaying |capturedElement|'s [=captured element/old image=].
displaying |capturedElement|'s [=captured element/old image=]
as its [=replaced element|replaced=] content.

1. Append |old| to |imagePair|.

Expand All @@ -1416,7 +1417,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
The [=new element=] and its contents
(the flat tree descendants of the element, including both text and elements, or the replaced content of a replaced element),
except the |transition|'s [=ViewTransition/transition root pseudo-element=]'s [=tree/inclusive descendants=],
are not painted (as if they had visibility: hidden)
are not painted (as if they had ''visibility: hidden'')
and do not respond to hit-testing (as if they had pointer-events: none) until |new| exists.

1. If both of |capturedElement|'s [=captured element/old image=] and [=captured element/new element=]
Expand Down Expand Up @@ -1481,7 +1482,10 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

Note: The above code example contains variables to be replaced.

Note: ''mix-blend-mode: plus-lighter'' ensures that the blending of identical pixels from the old and new images results in the same color value as those pixels, and achieves a "correct" cross-fade.
Note: ''mix-blend-mode: plus-lighter'' ensures
that the blending of identical pixels from the old and new images
results in the same color value as those pixels,
and achieves a “correct” cross-fade.
</div>

## [=Call the update callback=] ## {#call-dom-update-callback-algorithm}
Expand Down Expand Up @@ -1528,7 +1532,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
1. If |transition|'s [=ViewTransition/phase=] is before "`update-callback-called`", then [=queue a global task=] on the [=DOM manipulation task source=],
given |transition|'s [=relevant global object=], to [=call the update callback=] of |transition|.

1. Set [=document/transition suppressing rendering=] to false.
1. Set [=document/rendering suppression for view transitions=] to false.

1. [=Clear view transition=] |transition|.

Expand Down Expand Up @@ -1557,7 +1561,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. If |element| is the [=document element=], then:

1. Render the region of the |element| and the [/=document=]'s [=Document/top layer=] that intersects the [=snapshot containing block=],
1. Render the region of the |element| and the [=/document=]'s [=Document/top layer=] that intersects the [=snapshot containing block=],
on a transparent canvas the size of the [=snapshot containing block=],
following the [=capture rendering characteristics=], and these additional characteristics:

Expand Down Expand Up @@ -1766,7 +1770,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
and |style| is in |document|'s [=document/dynamic view transition style sheet=],
then remove |style| from |document|'s [=document/dynamic view transition style sheet=].

1. Set |document|'s [=document/show view-transition root pseudo-element=] to false.
1. Set |document|'s [=document/show view transition tree=] to false.

1. Set |document|'s [=document/active view transition=] to null.
</div>
Expand Down