Skip to content

Commit 2b72815

Browse files
committed
[css-view-transitions-1][editorial] Improve view-transition-name definition
* Give it a proper title * Give it a conceptual definition * State that it *will* get snapshotted, rather than it might * Make exclusion of 'none' from <custom-ident> normative * Various wording tweaks
1 parent 49babe2 commit 2b72815

File tree

1 file changed

+35
-20
lines changed

1 file changed

+35
-20
lines changed

css-view-transitions-1/Overview.bs

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ spec:css-display-3; type:dfn;
3434
text:replaced element
3535
spec:css-cascade-5; type:dfn; text:computed value
3636
spec:css22; type:dfn; text:element
37+
spec:css-break-4; type:dfn; text:fragment
3738
</pre>
3839

3940
<pre class=anchors>
@@ -483,7 +484,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
483484

484485
# CSS properties # {#css-properties}
485486

486-
## 'view-transition-name' ## {#view-transition-name-prop}
487+
## Tagging Individually Transitioning Subtrees: the 'view-transition-name' property ## {#view-transition-name-prop}
487488

488489
<pre class=propdef>
489490
Name: view-transition-name
@@ -495,27 +496,41 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
495496
Animation type: discrete
496497
</pre>
497498

498-
The 'view-transition-name' property "names" an element as participating in a view transition.
499+
The 'view-transition-name' property “tags” an element
500+
as potentially [=involved in a view transition=],
501+
capturing it independently in the [=view transition tree=]
502+
under the specified <dfn>view transition name</dfn>.
503+
An element so captured is animated independently of the rest of the page.
499504

500505
<dl dfn-type=value dfn-for=view-transition-name>
501506
: <dfn>none</dfn>
502-
:: The [=/element=] will not participate in a view transition.
507+
:: The [=/element=] will not participate independently in a view transition.
503508

504509
: <dfn><<custom-ident>></dfn>
505-
:: The [=/element=] can participate in a view transition,
506-
as either an old or new [=/element=],
507-
with a <dfn dfn for>view transition name</dfn> equal to the <<custom-ident>>'s value.
510+
:: The [=/element=] participates independently in a view transition--
511+
as either an old or new [=/element=]--
512+
with the specified [=view transition name=].
508513

509-
Note: The value <css>none</css> is invalid as a <<custom-ident>>.
514+
The value <css>none</css> is excluded from <<custom-ident>> here.
515+
516+
Note: If this name is not unique
517+
(i.e. if two elements simultaneously specify the same [=view transition name=])
518+
then the [=view transition=] will abort.
510519
</dl>
511520

512-
Note: This property causes the user-agent to both capture separate snapshots from the elements,
513-
as well as create separate pseudo-element sub-trees representing this element's “old” and “new” states.
514-
For the purposes of this API,
515-
if one element has a transition-name "foo" in the old state, and another element has a transition-name "foo" in the new state,
516-
they are treated as representing different visual state of the same element.
521+
Note: For the purposes of this API,
522+
if one element has [=view transition name=] ''foo'' in the old state,
523+
and another element has [=view transition name=] ''foo'' in the new state,
524+
they are treated as representing different visual state of the same element,
525+
and will be paired in the [=view transition tree=].
517526
This may be confusing, since the elements themselves are not necessarily referring to the same object,
518-
but it is a useful model to consider them to be visual states of the same conceptual page entity, that we happen to call "element".
527+
but it is a useful model to consider them to be visual states of the same conceptual page entity.
528+
529+
If the element’s [=principal box=] is [=fragmented=],
530+
[=skips its contents|skipped=],
531+
or [=not rendered=],
532+
this property has no effect.
533+
See [[#algorithms]] for exact details.
519534

520535
# Layout and rendering changes # {#layout-rendering-changes}
521536

@@ -602,14 +617,14 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
602617
<dfn>&lt;pt-name-selector></dfn> = '*' | <<custom-ident>>
603618
</pre>
604619

605-
The selector matches if the <<pt-name-selector>> is `*` or matches the [=named view-transition pseudo-element=]'s [=named view-transition pseudo-element/view-transition name=].
620+
The selector matches if the <<pt-name-selector>> is `*` or matches the [=named view-transition pseudo-element=]'s [=view transition name=].
606621

607622
The specificity of a view-transition selector with a <<custom-ident>> argument is the same as for other pseudo-elements,
608623
and is equivalent to a [=type selector=].
609624

610625
The specificity of a view-transition selector with a `*` argument is zero.
611626

612-
Note: The [=named view-transition pseudo-element/view-transition name=] is set to the 'view-transition-name' that triggered its creation.
627+
Note: The [=view transition name=] is set to the 'view-transition-name' that triggered its creation.
613628

614629
## View transition pseudo-elements ## {#view-transition-pseudos}
615630

@@ -1352,27 +1367,27 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
13521367
1. [=map/For each=] |transitionName| → |capturedElement| of |transition|'s [=ViewTransition/named elements=]:
13531368

13541369
1. Let |group| be a new ''::view-transition-group()'',
1355-
with its [=named view-transition pseudo-element/view-transition name=] set to |transitionName|.
1370+
with its [=view transition name=] set to |transitionName|.
13561371

13571372
1. Append |group| to |transition|'s [=ViewTransition/transition root pseudo-element=].
13581373

13591374
1. Let |imagePair| be a new ''::view-transition-image-pair()'',
1360-
with its [=named view-transition pseudo-element/view-transition name=] set to |transitionName|.
1375+
with its [=view transition name=] set to |transitionName|.
13611376

13621377
1. Append |imagePair| to |group|.
13631378

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

13661381
1. Let |old| be a new ''::view-transition-old()'',
1367-
with its [=named view-transition pseudo-element/view-transition name=] set to |transitionName|,
1382+
with its [=view transition name=] set to |transitionName|,
13681383
displaying |capturedElement|'s [=captured element/old image=].
13691384

13701385
1. Append |old| to |imagePair|.
13711386

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

13741389
1. Let |new| be a new ''::view-transition-new()'',
1375-
with its [=named view-transition pseudo-element/view-transition name=] set to |transitionName|.
1390+
with its [=view transition name=] set to |transitionName|.
13761391

13771392
Note: The styling of this pseudo is handled in [=update pseudo-element styles=].
13781393

@@ -1707,7 +1722,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
17071722

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

1710-
1. Let |new| be the ''::view-transition-new()'' with the [=view-transition name=] |transitionName|.
1725+
1. Let |new| be the ''::view-transition-new()'' with the [=view transition name=] |transitionName|.
17111726

17121727
1. Set |new|'s [=replaced element=] content to the result of [=capturing the image=] of |capturedElement|'s [=new element=].
17131728

0 commit comments

Comments
 (0)