Skip to content
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

Jump to bottom

[css-view-transitions-1] A few clarifications and nits #9028

Merged
merged 5 commits into from Jul 12, 2023
Merged

[css-view-transitions-1] A few clarifications and nits #9028

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ab2eda9
Fix refs and split 'activate'
noamr Jul 4, 2023
5486e1c
[css-view-transitions-1] A few clarifications and nits
noamr Jul 4, 2023
9b48fe4
Update css-view-transitions-1/Overview.bs
noamr Jul 12, 2023
dc814cb
Flip order
noamr Jul 12, 2023
e1fa626
New line
khushalsagar Jul 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
65 changes: 35 additions & 30 deletions css-view-transitions-1/Overview.bs
View file
Open in desktop
Expand Up @@ -37,6 +37,8 @@ spec:css-display-3; type:dfn;
spec:css-cascade-5; type:dfn; text:computed value
spec:css22; type:dfn; text:element
spec:css-break-4; type:dfn; text:fragment
spec:css-viewport; type:dfn; text:interactive-widget;
spec:css-display-4; type: dfn; text:invisible;
</pre>

<pre class=anchors>
Expand Down Expand Up @@ -530,7 +532,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

If the element’s [=principal box=] is [=fragmented=],
[=skips its contents|skipped=],
or [=not rendered=],
or [=element-not-rendered|not rendered=],
this property has no effect.
See [[#algorithms]] for exact details.

Expand Down Expand Up @@ -776,7 +778,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
The ''::view-transition'' pseudo-element generates a new stacking context,
called the <dfn>view transition layer</dfn>,
which paints after all other content of the document
(including any content rendered in the [=top layer=] [[!FULLSCREEN]]),
(including any content rendered in the [=Document/top layer=]),
khushalsagar marked this conversation as resolved.
Show resolved Hide resolved
after any filters and effects that are applied to such content.
(It is not subject to such filters or effects,
except insofar as they affect the rendered contents
Expand All @@ -787,6 +789,9 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
since that results in a circular dependency.
Therefore, the [=view transition layer=] is a sibling of all other content.

When a {{Document}}'s [=document/active view transition=]'s [=ViewTransition/phase=] is "`animating`",
khushalsagar marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Collaborator

Choose a reason for hiding this comment

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

Should this have both <code> and quotes?

Copy link
Collaborator

Choose a reason for hiding this comment

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

(I'm not familiar with the conventions here, so just asking.)

Copy link
Member

Choose a reason for hiding this comment

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

I don't think so. This spec uses <code> for syntax which can be used by an author. phase is internal UA state.

any [=element=] in that {{Document}} that is [=captured in a view transition=] generates [=invisible=] boxes.
khushalsagar marked this conversation as resolved.
Show resolved Hide resolved

# User Agent Stylesheet # {#ua-styles}

The <dfn>global view transition user agent style sheet</dfn> is
Expand Down Expand Up @@ -1109,7 +1114,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

<dl dfn-for="captured element">
: <dfn>old image</dfn>
:: an {{ImageData}} or null. Initially null.
:: an 2D bitmap or null. Initially null.

: <dfn>old width</dfn>
: <dfn>old height</dfn>
Expand Down Expand Up @@ -1242,40 +1247,45 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. [=Skip the view transition=] |transition| with |reason|.

* If the promise was fulfilled, then:
* If the promise was fulfilled, then [=activate view transition|activate=] |transition|.
</div>

1. If |transition|'s [=ViewTransition/phase=] is "`done`", then return.
<div algorithm>
To <dfn>activate view transition</dfn> for a {{ViewTransition}} |transition|,
perform the following steps:

Note: This happens if |transition| was [=skip the view transition|skipped=] before this point.
1. If |transition|'s [=ViewTransition/phase=] is "`done`", then return.

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

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/rendering suppression for view transitions=] to false.

1. Set [=document/rendering suppression for view transitions=] to false.
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. [=Capture the new state=] for |transition|.
1. [=Capture the new state=] for |transition|.

If failure is returned, then [=skip the view transition=] for |transition| with an "{{InvalidStateError}}" {{DOMException}} in |transition|'s [=relevant Realm=],
and return.
If failure is returned, then [=skip the view transition=] for |transition| with an "{{InvalidStateError}}" {{DOMException}} in |transition|'s [=relevant Realm=],
and return.

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

1. If |capturedElement|'s [=captured element/new element=] is not null,
then set |capturedElement|'s [=captured element/new element=]'s [=captured in a view transition=] to true.
1. If |capturedElement|'s [=captured element/new element=] is not null,
then set |capturedElement|'s [=captured element/new element=]'s [=captured in a view transition=] to true.

1. [=Setup transition pseudo-elements=] for |transition|.
1. [=Setup transition pseudo-elements=] for |transition|.

1. [=Update pseudo-element styles=] for |transition|.
1. [=Update pseudo-element styles=] for |transition|.

If failure is returned, then [=skip the view transition=] for |transition| with an "{{InvalidStateError}}" {{DOMException}} in |transition|'s [=relevant Realm=],
and return.
If failure is returned, then [=skip the view transition=] for |transition| with an "{{InvalidStateError}}" {{DOMException}} in |transition|'s [=relevant Realm=],
and return.

Note: The above steps will require running document lifecycle phases,
to compute information calculated during style/layout.
Note: The above steps will require running document lifecycle phases,
to compute information calculated during style/layout.

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

1. [=Resolve=] |transition|'s [=ViewTransition/ready promise=].
1. [=Resolve=] |transition|'s [=ViewTransition/ready promise=].
</div>

### [=Capture the old state=] ### {#capture-old-state-algorithm}
Expand Down Expand Up @@ -1414,12 +1424,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. Append |new| to |imagePair|.

The [=new element=] and its contents
khushalsagar marked this conversation as resolved.
Show resolved Hide resolved
(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'')
and do not respond to hit-testing (as if they had pointer-events: none) until |new| exists.

1. If |capturedElement|'s [=captured element/old image=] is null, then:
1. [=Assert=]: |capturedElement|'s [=captured element/new element=] is not null.

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

Note: This transform is applied to the snapshot using the `transform` property of the associated ''::view-transition-group'' pseudo-element.

* Effects on the element, such as 'opacity' and 'filter' are applied to the capture.
* Effects applied on the element and its descendants, such as 'opacity' and 'filter', are applied to the capture.
Effects applied to the element from its ancestors are ignored.
Comment on lines +1656 to +1657
Copy link
Collaborator

Choose a reason for hiding this comment

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

Where is “Effects” as used here defined?

Copy link
Member

Choose a reason for hiding this comment

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

That is a good question. Is there a definition in CSS for visual effects on an element which affect its descendants? The list here is the closest I've seen in documentation. I can also just add all these properties explicitly but nicer if we can have one definition to cross-reference.


* Implementations may clip the rendered contents if the [=ink overflow rectangle=] exceeds some [=implementation-defined=] maximum.
However, the captured image should include, at the very least, the contents of |element| that intersect with the [=snapshot containing block=].
Expand Down