diff --git a/css-view-transitions-2/Overview.bs b/css-view-transitions-2/Overview.bs index 725bca51043..2f6aa0e79ac 100644 --- a/css-view-transitions-2/Overview.bs +++ b/css-view-transitions-2/Overview.bs @@ -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 {{ViewTransition/updateCallbackDone}} is already resolved, and its [=captured elements=] are populated from the old {{Document}}. @@ -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; } ``` @@ -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; } ``` @@ -259,59 +259,68 @@ document.startViewTransition({update: updateTheDOMSomehow}); # CSS rules # {#css-rules} -## The ''@auto-view-transition'' rule ## {#auto-view-transition-rule} +## The ''@view-transition'' 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: 
-	@auto-view-transition = @auto-view-transition { <> }
+	@view-transition same-origin {
+		<>
+	}
-## The [=@auto-view-transition/same-origin=] property ## {#view-transition-name-prop} +Note: currently same-origin 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} 
-	Name: same-origin
-	For: @auto-view-transition
-	Value: enabled | disabled
-	Initial: disabled
+	Name: trigger
+	For: @view-transition
+	Value: navigation | none
+	Initial: none
- The 'same-origin' property opts in to automatically performing a view transition when performing a [=same origin=] navigation. + The 'trigger' 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). -
- : disabled +
+ : none :: There will be no transition. - : enabled + : navigation :: The transition will be enabled if the navigation is same-origin, without cross-origin redirects.
+ + # API # {#api} -## The PageRevealEvent ## {#reveal-event} +## The RevealEvent ## {#ready-to-render-event} Note: this should go in the HTML spec. See [Issue 9315](https://github.com/whatwg/html/issues/9315). [Exposed=Window] - interface PageRevealEvent : Event { + interface RevealEvent : Event { readonly attribute ViewTransition? viewTransition; }; -Note: this event is fired when [=reveal document|revealing a document=]. +Note: this event is fired when the document is [=ready to render=]. -The viewTransition [=getter steps=] are to return the +The viewTransition [=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} @@ -342,6 +351,28 @@ The viewTransition [=getter steps=] are 1. Return |viewTransition|. +## Extensions to the CSSRule interface ## {#extensions-to-cssrule-interface} + +The CSSRule interface is extended as follows: + +
+partial interface CSSRule {
+    const unsigned short VIEW_TRANSITION_RULE = 15;
+};
+
+ +## The CSSViewTransitionRule interface ## {#navgation-behavior-rule-interface} + +The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule. + + + enum ViewTransitionTrigger { "navigation", "none" }; + [Exposed=Window] + interface CSSViewTransitionRule : CSSRule { + readonly attribute CSSOMString navigationConditionText; + attribute ViewTransitionTrigger trigger; + }; + # Algorithms # {#algorithms} @@ -352,10 +383,10 @@ The viewTransition [=getter steps=] are A {{Document}} additionally has:
- : is revealed + : ready to render fired :: a boolean, initially false. -### Additions to {{ViewTransition}} ## {#view-transitions-extension} +### Additions to {{ViewTransition}} ### {#view-transitions-extension} A {{ViewTransition}} additionally has:
@@ -380,29 +411,29 @@ The viewTransition [=getter steps=] are
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|.
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.
-
- To reveal {{Document}} |document|: - 1. If |document|'s [=document/is revealed=] is true, then return. +
+ When {{Document}} |document| is ready to render: + 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 reveal 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.
## Setting up and activating the cross-document view transition ## {#setting-up-and-activating-the-cross-document-view-transition} @@ -423,7 +454,7 @@ The viewTransition [=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=] @@ -475,15 +506,15 @@ The viewTransition [=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|.
A {{Document}} |document| is said to opt in to cross-document view transitions - if the [=computed value=] of same-origin - is enabled. + if the [=computed value=] of trigger + for |document| is navigation.