Skip to content

[css-view-transitions-1] Spec updates for resolved issues #9089

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 1 commit into from
Jul 19, 2023
Merged

[css-view-transitions-1] Spec updates for resolved issues #9089

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
46 changes: 42 additions & 4 deletions css-view-transitions-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,23 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
whereas others need to queue, or abort an earlier change.
This is best left to a feature or framework that has a more holistic view of the application.

## Rendering Model ## {#rendering-model}

View Transition works by replicating an element's rendered state using UA generated pseudo-elements.
Aspects of the element's rendering which apply to the element itself or its descendants,
for example visual effects like 'filter' or 'opacity' and clipping from 'overflow' or 'clip-path',
are applied when generating its image in [=Capture the image=].

However, properties like 'mix-blend-mode' which define how the element draws when it is embedded can't be applied to its image.
Such properties are applied to the element's corresponding ''::view-transition-group()'' pseudo-element,
which is meant to generate a box equivalent to the element.

If the ''::view-transition-group()'' has a corresponding element in the "new" states,
the browser keeps the properties copied over to the ''::view-transition-group()'' in sync with the DOM element in the "new" state.
If the ''::view-transition-group()'' has a corresponding both in the "old" and "new" state,
and the property being copied is interpolatable,
the browser also sets up a default animation to animate the property smoothly.

## Examples ## {#examples}

<div class=example>
Expand Down Expand Up @@ -929,8 +946,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
1. Set |document|'s [=active view transition=] to |transition|.

Note: The [=view transition=] process continues in [=setup view transition=],
via [=perform pending transition operations=],
which is called in [[#monkey-patch-to-rendering-algorithm]].
via [=perform pending transition operations=].

1. Return |transition|.
</div>
Expand Down Expand Up @@ -1140,6 +1156,12 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
: <dfn>old direction</dfn>
:: Null or a 'direction', initially null.

: <dfn>old text-orientation</dfn>
:: Null or a 'text-orientation', initially null.

: <dfn>old mix-blend-mode</dfn>
:: Null or a 'mix-blend-mode', initially null.

: <dfn>new element</dfn>
:: an [=/element=] or null. Initially null.
</dl>
Expand Down Expand Up @@ -1336,6 +1358,10 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

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

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

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

1. Set |namedElements|[|transitionName|] to |capture|.
</div>

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

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

1. Let |width|, |height|, |transform|, |writingMode|, and |direction| be null.
1. Let |width|, |height|, |transform|, |writingMode|, |direction|, |textOrientation| and |mixBlendMode| be null.

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

Expand All @@ -1728,6 +1754,10 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. Set |direction| to |capturedElement|'s [=captured element/old direction=].

1. Set |textOrientation| to |capturedElement|'s [=captured element/old text-orientation=].

1. Set |mixBlendMode| to |capturedElement|'s [=captured element/old mix-blend-mode=].

1. Otherwise:

1. Return failure if any of the following conditions is true:
Expand All @@ -1749,9 +1779,13 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. Set |direction| to the [=computed value=] of 'direction' on |capturedElement|'s [=new element=].

1. Set |textOrientation| to the [=computed value=] of 'text-orientation' on |capturedElement|'s [=new element=].

1. Set |mixBlendMode| to the [=computed value=] of 'mix-blend-mode' on |capturedElement|'s [=new element=].

1. If |capturedElement|'s [=captured element/group styles rule=] is null,
then set |capturedElement|'s [=captured element/group styles rule=] to a new {{CSSStyleRule}} representing the following CSS,
and append it to |document|'s [=document/dynamic view transition style sheet=].
and append it to |transition|'s [=relevant global object's=] [=associated document=]'s [=document/dynamic view transition style sheet=].

Otherwise, update |capturedElement|'s [=captured element/group styles rule=] to match the following CSS:

Expand All @@ -1763,6 +1797,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
transform: <var>transform</var>;
writing-mode: <var>writingMode</var>;
direction: <var>direction</var>;
text-orientation: <var>textOrientation</var>;
mix-blend-mode: <var>mixBlendMode</var>;
}
</pre>

Expand Down Expand Up @@ -1822,6 +1858,8 @@ This appendix is <em>informative</em>.
Changes from <a href="https://www.w3.org/TR/2023/WD-css-view-transitions-1-20230530/">2022-05-30 Working Draft</a>
</h3>
* Use a keyframe to add plus-lighter blending during cross-fade. See <a href="https://github.com/w3c/csswg-drafts/issues/8924">issue 8924</a>.
* Add mix-blend-mode to list of properties copied over to the ''::view-transition-group''. See <a href="https://github.com/w3c/csswg-drafts/issues/8962">issue 8962</a>.
* Add text-orientation to list of properties copied over to the ''::view-transition-group''. See <a href="https://github.com/w3c/csswg-drafts/issues/8230">issue 8230</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>
Expand Down