Skip to content

Commit

Permalink
[css-view-transitions-2] Apply renames based on TPAC discussion (#9382)
Browse files Browse the repository at this point in the history 
* [css-view-transitions-2] Rename reveal to readytorender, and auto-view-transition to navigation-behavior

* Add CSSOM definitions

* Rename to what was decided temporarily at TPAC

* PR nits
  • Loading branch information
@noamr
noamr authored Oct 12, 2023
1 parent 35e2d5e commit 7ebecab
Showing 1 changed file with 72 additions and 41 deletions.
113 changes: 72 additions & 41 deletions css-view-transitions-2/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
1. Once it's time to [=unload=] the old document, if the navigation is [=same origin=]
and the old {{Document}} has opted in to cross-document view-transitions, the old state is captured.

1. An event named {{PageRevealEvent|reveal}} is fired on the new {{Document}}, with a `viewTransition` property,
1. An event named {{RevealEvent|reveal}} is fired on the new {{Document}}, with a `viewTransition` property,
which is a {{ViewTransition}} object. This {{ViewTransition}}'s <code>{{ViewTransition/updateCallbackDone}}</code> is already resolved,
and its [=captured elements=] are populated from the old {{Document}}.

Expand All @@ -133,12 +133,12 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
To generate the same cross-fade as in the first example [[css-view-transitions-1#examples]],
but across documents, we don't need JavaScript.

Instead, we opt in to auto-view-transitions in both page 1 and page 2:
Instead, we opt in to triggering view-transitions on navigation in both page 1 and page 2:

```css
// in both documents:
@auto-view-transitions {
same-origin: enable;
@view-transition same-origin {
trigger: navigation;
}
```

Expand All @@ -151,14 +151,14 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
To achieve the effect in [[css-view-transitions-1#examples|example 5]], we have to do several
things:

- Opt-in to auto-view-transitions in both pages.
- Opt-in to navigation-triggered view-transitions in both pages.
- Pass the click location to the new document, e.g. via {{WindowSessionStorage/sessionStorage}}.
- Intercept the {{ViewTransition}} object in the new document, using the {{PageRevealEvent|reveal event}}.
- Intercept the {{ViewTransition}} object in the new document, using the {{RevealEvent}}.

In both pages:
```css
@auto-view-transitions {
same-origin: enable;
@view-transition same-origin {
trigger: navigation;
}

```
Expand Down Expand Up @@ -259,59 +259,68 @@ document.startViewTransition({update: updateTheDOMSomehow});

# CSS rules # {#css-rules}

## The <dfn id="at-auto-view-transition-rule">''@auto-view-transition''</dfn> rule ## {#auto-view-transition-rule}
## The <dfn id="at-view-transition-rule">''@view-transition''</dfn> rule ## {#view-transition-rule}

The ''@auto-view-transition'' rule is used by a document to indicate that cross-document navigations
The ''@view-transition'' rule is used by a document to indicate that cross-document navigations
should setup and activate a {{ViewTransition}}. To take effect, it must be present in the old document
when unloading, and in the new document when it is being [=reveal document|revealed=].
when unloading, and in the new document when it is [=ready to render=].


## @auto-view-transition rule grammar ## {#auto-view-transition-grammer}
## @view-transition rule grammar ## {#view-transition-grammar}

''@auto-view-transition'' rules are [=CSS/parsed=] according to the following grammar,
plus the additional rules noted below:
The ''@view-transition'' rule has the following syntax:

<pre class=prod>
@auto-view-transition = @auto-view-transition { <<declaration-rule-list>> }
@view-transition same-origin {
<<declaration-rule-list>>
}
</pre>

## The [=@auto-view-transition/same-origin=] property ## {#view-transition-name-prop}
Note: currently <code>same-origin</code> has to be present, as a future placeholder for customizing
the navigation behavior based on the URL.

Note: as per default behavior, the ''@view-transition'' rule can be nested inside a
[=conditional group rule=] such as ''@media'' or ''@supports''.

## The [=@view-transition/view-transition=] property ## {#view-transition-name-prop}

<pre class='descdef'>
Name: same-origin
For: @auto-view-transition
Value: enabled | disabled
Initial: disabled
Name: trigger
For: @view-transition
Value: navigation | none
Initial: none
</pre>

The '<dfn for="@auto-view-transition">same-origin</dfn>' property opts in to automatically performing a view transition when performing a [=same origin=] navigation.
The '<dfn for="@view-transition">trigger</dfn>' property opts in to automatically starting a view transition when performing a navigation.
It needs to be enabled both in the old document (when unloading) and in the new document (when ready to render).

<dl dfn-type=value dfn-for="same-origin">
: <dfn>disabled</dfn>
<dl dfn-type=value dfn-for="trigger">
: <dfn>none</dfn>
:: There will be no transition.

: <dfn>enabled</dfn>
: <dfn>navigation</dfn>
:: The transition will be enabled if the navigation is same-origin, without cross-origin
redirects.
</dl>



# API # {#api}

## The <dfn interface>PageRevealEvent</dfn> ## {#reveal-event}
## The <dfn interface>RevealEvent</dfn> ## {#ready-to-render-event}

Note: this should go in the HTML spec. See [Issue 9315](https://github.com/whatwg/html/issues/9315).

<xmp class=idl>
[Exposed=Window]
interface PageRevealEvent : Event {
interface RevealEvent : Event {
readonly attribute ViewTransition? viewTransition;
};
</xmp>

Note: this event is fired when [=reveal document|revealing a document=].
Note: this event is fired when the document is [=ready to render=].

The <dfn attribute for=PageRevealEvent>viewTransition</dfn> [=getter steps=] are to return the
The <dfn attribute for=RevealEvent>viewTransition</dfn> [=getter steps=] are to return the
[=inbound cross-document view-transition=] for [=this's=] [=relevant global object's=] [=associated document=].

## Additions to {{Document}} ## {#additions-to-document-api}
Expand Down Expand Up @@ -342,6 +351,28 @@ The <dfn attribute for=PageRevealEvent>viewTransition</dfn> [=getter steps=] are
1. Return |viewTransition|.
</div>

## Extensions to the <code>CSSRule</code> interface</h3> ## {#extensions-to-cssrule-interface}

The <code>CSSRule</code> interface is extended as follows:

<pre class='idl'>
partial interface CSSRule {
const unsigned short VIEW_TRANSITION_RULE = 15;
};
</pre>

## The <code>CSSViewTransitionRule</code> interface</h3> ## {#navgation-behavior-rule-interface}

The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule.

<xmp class=idl>
enum ViewTransitionTrigger { "navigation", "none" };
[Exposed=Window]
interface CSSViewTransitionRule : CSSRule {
readonly attribute CSSOMString navigationConditionText;
attribute ViewTransitionTrigger trigger;
};
</xmp>


# Algorithms # {#algorithms}
Expand All @@ -352,10 +383,10 @@ The <dfn attribute for=PageRevealEvent>viewTransition</dfn> [=getter steps=] are
A {{Document}} additionally has:

<dl dfn-for=document>
: <dfn>is revealed</dfn>
: <dfn>ready to render fired</dfn>
:: a boolean, initially false.

### Additions to {{ViewTransition}} ## {#view-transitions-extension}
### Additions to {{ViewTransition}} ### {#view-transitions-extension}

A {{ViewTransition}} additionally has:
<dl dfn-for=ViewTransition>
Expand All @@ -380,29 +411,29 @@ The <dfn attribute for=PageRevealEvent>viewTransition</dfn> [=getter steps=] are
<div algorithm="monkey patch to rendering">
Run the following step in [=update the rendering|updating the renedering=], before [=running the animation frame callbacks=]:

1. For each [=fully active=] {{Document}} |doc| in |docs|, [=reveal document|reveal=] |doc|.
1. For each [=fully active=] {{Document}} |doc| in |docs|, run the [=ready to render=] steps for |doc|.
</div>

<div algorithm="monkey patch to reactivation">
Run the following step at the end of [=Document/reactivate=]:

1. Set |document|'s [=is revealed=] to false.
1. Set |document|'s [=ready to render fired=] to false.
</div>

<div algorithm="page reveal">
To <dfn>reveal {{Document}}</dfn> |document|:
1. If |document|'s [=document/is revealed=] is true, then return.
<div algorithm="page ready to render">
When {{Document}} |document| is <dfn>ready to render</dfn>:
1. If |document|'s [=document/ready to render fired=] is true, then return.

1. Let |transition| be the result of getting the [=inbound cross-document view-transition=] for |document|.

1. If |transition| is not null and |document| does not [=opt in to cross-document view transitions=], then [=skip the view transition|skip=] |transition| and set |transition| to null.

1. Fire a new event named <code>reveal</code> on |document|'s [=relevant global object=],
using {{PageRevealEvent}}.
using {{RevealEvent}}.

1. If |transition| is not null, then [=activate view transition|activate=] |transition|.

1. Set |document|'s [=document/is revealed=] to true.
1. Set |document|'s [=document/ready to render fired=] to true.
</div>

## Setting up and activating the cross-document view transition ## {#setting-up-and-activating-the-cross-document-view-transition}
Expand All @@ -423,7 +454,7 @@ The <dfn attribute for=PageRevealEvent>viewTransition</dfn> [=getter steps=] are
1. If |oldDocument| does not [=opt in to cross-document view transitions=], then call |onReady| and return.

Note: We don't know yet if |newDocument| has opted in, as it might not be parsed yet.
We check the opt-in for |newDocument| when it is [=reveal document|revealed=].
We check the opt-in for |newDocument| when it is [=ready to render=].

1. If |oldDocument|'s [=active view transition=] is not null,
then [=skip the view transition|skip=] |oldDocument|'s [=active view transition=]
Expand Down Expand Up @@ -475,15 +506,15 @@ The <dfn attribute for=PageRevealEvent>viewTransition</dfn> [=getter steps=] are
then return null.

Note: |transition|'s [=ViewTransition/is inbound cross-document transition=] would be false if a same-document
transition was started before the page was revealed.
transition was started before the page was [=ready to render=].

1. Return |transition|.
</div>

<div algorithm>
A {{Document}} |document| is said to <dfn>opt in to cross-document view transitions</dfn>
if the [=computed value=] of <a data-xref-type="css-descriptor" data-xref-for="@auto-view-transition">same-origin</a>
is <code>enabled</code>.
if the [=computed value=] of <a data-xref-type="css-descriptor" data-xref-for="@view-transition">trigger</a>
for |document| is <code>navigation</code>.
</div>


Expand Down

0 comments on commit 7ebecab

Please sign in to comment.