Skip to content

[css-view-transitions-1] Update spec for resolved issues #9575

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 2 commits into from
Nov 8, 2023
Merged

[css-view-transitions-1] Update spec for resolved issues #9575

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e81e524
Update spec for resolved issues
khushalsagar Nov 8, 2023
974b9ca
Export element contents definition
khushalsagar Nov 8, 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
2 changes: 1 addition & 1 deletion css-contain-2/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1581,7 +1581,7 @@ Suppressing An Element's Contents Entirely: the 'content-visibility' property {#
[=style containment=],
[=paint containment=],
and [=size containment=].
Further, its <dfn noexport id="element-contents">contents</dfn>
Further, its <dfn export lt="element contents" id="element-contents">contents</dfn>
(the [=flat tree=] descendants of the element,
including both text and elements,
or the replaced content of a [=replaced element=])
Expand Down
43 changes: 41 additions & 2 deletions css-view-transitions-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -595,6 +595,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
All of the [=view transition pseudo-elements=] are selected
from their [=ultimate originating element=], the [=document element=].

The [=view transition tree=] is not exposed to the accessibility tree.

<div class="example">
For example,
the ''::view-transition-group()'' pseudo-element is attached to the root element selector directly,
Expand Down Expand Up @@ -809,7 +811,17 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
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`",
the boxes generated by any element in that {{Document}} with [=captured in a view transition=] are [=invisible=].
the boxes generated by any element in that {{Document}} with [=captured in a view transition=]
and its [=element contents=],
except [=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'').

Note: Elements participating in a transition need to skip painting in their DOM location because
their image is painted in the corresponding ''::view-transition-new()'' pseudo-element instead.
Similarly, hit-testing is skipped because the element's DOM location does not correspond to where its contents are rendered.
However, there is no change in how these elements are accessed by assistive technologies or the accessibility tree.


# User Agent Stylesheet # {#ua-styles}

Expand Down Expand Up @@ -1165,6 +1177,12 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
: <dfn>old mix-blend-mode</dfn>
:: Null or a 'mix-blend-mode', initially null.

: <dfn>old backdrop-filter</dfn>
:: Null or a 'backdrop-filter', initially null.

: <dfn>old color-scheme</dfn>
:: Null or a 'color-scheme', initially null.

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

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

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

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

1. Let |transitionName| be the [=computed value=] of 'view-transition-name' for |element|.

1. Set |namedElements|[|transitionName|] to |capture|.
Expand Down Expand Up @@ -1503,6 +1525,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. Let |height| be |capturedElement|'s [=captured element/old height=].

1. Let |backdropFilter| be |capturedElement|'s [=captured element/old backdrop-filter=].

1. Set |capturedElement|'s [=captured element/group keyframes=] to a new {{CSSKeyframesRule}} representing the following CSS,
and append it to |document|'s [=document/dynamic view transition style sheet=]:

Expand All @@ -1513,6 +1537,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
transform: <var>transform</var>;
width: <var>width</var>;
height: <var>height</var>;
backdrop-filter: <var>backdropFilter</var>;
}
}
</pre>
Expand Down Expand Up @@ -1763,7 +1788,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|, |direction|, |textOrientation| and |mixBlendMode| be null.
1. Let |width|, |height|, |transform|, |writingMode|, |direction|, |textOrientation|, |mixBlendMode|, |backdropFilter| and |colorScheme| be null.

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

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

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

1. Set |backdropFilter| to |capturedElement|'s [=captured element/old backdrop-filter=].

1. Set |colorScheme| to |capturedElement|'s [=captured element/old color-scheme=].

1. Otherwise:

1. Return failure if any of the following conditions is true:
Expand All @@ -1806,6 +1835,10 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

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

1. Set |backdropFilter| to the [=computed value=] of 'backdrop-filter' on |capturedElement|'s [=new element=].

1. Set |colorScheme| to the [=computed value=] of 'color-scheme' 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 |transition|'s [=relevant global object's=] [=associated document=]'s [=document/dynamic view transition style sheet=].
Expand All @@ -1822,6 +1855,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
direction: <var>direction</var>;
text-orientation: <var>textOrientation</var>;
mix-blend-mode: <var>mixBlendMode</var>;
backdrop-filter: <var>backdropFilter</var>;
color-scheme: <var>colorScheme</var>;
}
</pre>

Expand Down Expand Up @@ -1885,6 +1920,10 @@ Changes from <a href="https://www.w3.org/TR/2023/WD-css-view-transitions-1-20230
* 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>.
* Refactor the old capture algorithm to properly set [=captured in a view transition=] before reading the value.
* Make the {{Document/startViewTransition()}} parameter non-nullable. See <a href="https://github.com/w3c/csswg-drafts/issues/9460">issue 9460</a>.
* Elements participating in a [=view transition=] are exposed to accessibility tree. See <a href="https://github.com/w3c/csswg-drafts/issues/9365">issue 9365</a>.
* The [=view transition tree=] is not exposed to accessibility tree. See <a href="https://github.com/w3c/csswg-drafts/issues/9365">issue 9365</a>.
* Animate back-drop filter similar to transform/size. See <a href="https://github.com/w3c/csswg-drafts/issues/9358">issue 9358</a>.
* Copy `color-scheme` from DOM element to ''::view-transition-group()''. See <a href="https://github.com/w3c/csswg-drafts/issues/9276">issue 9276</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