Skip to content
Prev Previous commit
Next Next commit
Structure class algos as additional steps
  • Loading branch information
noamr committed Jan 25, 2024
commit 888977179214d4829fa165c5b75ee576c77becbf
6 changes: 6 additions & 0 deletions css-view-transitions-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -1225,6 +1225,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
Note: These are used to update, and later remove styles
from a [=/document=]'s [=document/dynamic view transition style sheet=].

Other specs can supply <dfn>additional capture steps</dfn>, which is an algorithm that acepts a [=captured element=] and an [=element=].

## [=Perform pending transition operations=] ## {#perform-pending-transition-operations-algorithm}

<div algorithm>
Expand Down Expand Up @@ -1398,6 +1400,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. Set |namedElements|[|transitionName|] to |capture|.

1. Perform [=additional capture steps=] given |capture| and |element|.

1. [=list/For each=] |element| in |captureElements|:

1. Set |element|'s [=captured in a view transition=] to false.
Expand Down Expand Up @@ -1439,6 +1443,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
This might not be the right layering for all cases. See <a href="https://github.com/w3c/csswg-drafts/issues/8941">issue 8941</a>.

1. Set |namedElements|[|transitionName|]'s [=new element=] to |element|.

1. Perform [=additional capture steps=] given |namedElements|[|transitionName|] and |element|.
</div>

### [=Setup transition pseudo-elements=] ### {#setup-transition-pseudo-elements-algorithm}
Expand Down
44 changes: 22 additions & 22 deletions css-view-transitions-2/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ spec:css-view-transitions-1;
text: call the update callback; type: dfn;
text: perform pending transition operations; type: dfn;
text: setup view transition; type: dfn;
text: additional capture steps; type: dfn;
text: named view transition pseudo-element; type: dfn;
spec:dom; type:dfn; text:document
spec:css22; type:dfn; text:element
spec:selectors-4; type:dfn;
Expand Down Expand Up @@ -125,6 +127,8 @@ spec:infra; type:dfn; text:list

## Examples ## {#examples}

### Cross-document view-transitions ### {#cross-doc-example}

<div class=example>
To generate the same cross-fade as in the first example [[css-view-transitions-1#examples]],
but across documents, we don't need JavaScript.
Expand Down Expand Up @@ -259,20 +263,21 @@ for multiple elements without having to replicate the corresponding pseudo-eleme
Animation type: discrete
</pre>

The 'view-transition-class' works alongside 'view-transition-name', and is read at the same time
'view-transition-name' is read. But unlike 'view-transition-name', 'view-transition-class' doesn't
have to be unique - an element can have several view-transition classes, and the same 'view-transition-class'
can apply to multiple elements. While 'view-transition-name' is used to match between the element
in the old state with its corresponding element in the new state, 'view-transition-class' is used
The 'view-transition-class' can be used to apply the same style rule to multiple [=named view transition pseudo-elements=] which may have a different 'view-transition-name'.
While 'view-transition-name' is used to match between the element in the old state with its corresponding element in the new state, 'view-transition-class' is used
only to apply styles using the view-transition pseudo-elements
(''::view-transition-group()'', ''::view-transition-image-pair()'', ''::view-transition-old()'', ''::view-transition-new()'').

Note that 'view-transition-class' by itself doesn't mark an element for capturing, it is only used as an additional
way to style an element that already has a 'view-transition-name'.

<dl dfn-type=value dfn-for=view-transition-class>
: <dfn>none</dfn>
:: No class would apply to the [=named view-transition pseudo-elements=] generated for this element.
:: No class would apply to the [=named view transition pseudo-elements=] generated for this element.

: <dfn><<custom-ident>>*</dfn>
:: All of the specified <<custom-ident>> values (apart from <css>none</css>) apply as classes for the [=/element=].
:: All of the specified <<custom-ident>> values (apart from <css>none</css>) are applied when used in [=named view transition pseudo-element=] selectors.
<css>none</css> is an invalid <<custom-ident>> for 'view-transition-class', even when combined with other <<custom-ident>>s.

Note: If the same 'view-transition-name' is specified for an element both in the old and new states of the transition,
only the 'view-transition-class' values from the new state apply. This also applies for cross-document view-transitions:
Expand Down Expand Up @@ -332,11 +337,11 @@ document.startViewTransition({update: updateTheDOMSomehow});
```
</div>

# Additions to view-transition pseudo-elements # {#pseudo-element-additions}
# Additions to named view-transition pseudo-elements # {#pseudo-element-additions}

The <dfn>named view transition pseudo-elements</dfn>
The [=named view transition pseudo-elements=]
(''view-transition-group()'', ''view-transition-image-pair()'', ''view-transition-old()'', ''view-transition-new()'')
are extended to support the following syntax for each |pseudo|:
are extended to support the following syntax:

<pre class=prod>
::view-transition-group(<<pt-name-selector>><<pt-class-selector>>)
Expand All @@ -353,8 +358,8 @@ document.startViewTransition({update: updateTheDOMSomehow});
</pre>

A [=named view transition pseudo-element=] [=selector=] which has one or more <<custom-ident>> values
in its <<pt-class-selector>> would only match an element if the element's [=captured element/class list=]
[=list/contains=] all of those values.
in its <<pt-class-selector>> would only match an element if the [=captured element/class list=] value in
[=ViewTransition/named elements=] for the pseudo-element's 'view-transition-name' [=list/contains=] all of those values.

The specificity of a [=named view transition pseudo-element=] [=selector=]
with a <<pt-class-selector>>
Expand Down Expand Up @@ -495,23 +500,18 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule.

## Additions to [=captured element=] struct ## {#additions-to-captured-element-struct}

The [=captured element=] struct should contain these fields, in addition to the existing ones:

<dl>
: <dfn for="captured element">class list</dfn>
:: a [=/list=] of strings, initially empty.
</dl>

## Additions to capture algorithms: ## {#additions-to-capture-algorithms}
<div algorithm="capture old classes">
When capturing the old state of the view transition, perform the following step when iterating on |captureElements| given |element| and |capture|:
## Algorithms to capture 'view-transition-class': ## {#vt-class-algorithms}
<div algorithm="additional capture steps">
This spec provides the following [=additional capture steps=] given a [=captured element=] |capture| and an [=element=] |element|:

1. Set |capture|'s [=captured element/class list=] to the [=computed value=] of |element|'s 'view-transition-class'.

</div>

<div algorithm="capture new classes">
When capturing the new state of the view transition, perform the following step when iterating on |captureElements| given |element| and |namedElements|:

1. Set |namedElement|[|transitionName|]'s [=captured element/class list=] to the [=computed value=] of |element|'s 'view-transition-class'.
</div>

## Monkey patches to HTML ## {#monkey-patch-to-html}
Expand Down