Skip to content

Commit

Permalink
Spec updates for resolved issues
Browse files Browse the repository at this point in the history
This updates the spec based on resolutions for w3c#8230 and w3c#8962.

And a few other link fixes.
  • Loading branch information
khushalsagar committed Jul 18, 2023
1 parent 0dcb036 commit a662f4e
Showing 1 changed file with 42 additions and 4 deletions.
46 changes: 42 additions & 4 deletions css-view-transitions-1/Overview.bs
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

0 comments on commit a662f4e

Please sign in to comment.