From d6c50e9e8fff5636fde60438370e69dbb62d9475 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 26 Oct 2023 15:47:13 +0100 Subject: [PATCH] [css-view-transitions-2] Apply new @view-transition rule syntax (#9523) * [css-view-transitions-2] Apply new CSS rule syntax - Use the `@view-transition { navigation: auto | none; type: ... }` syntax as per the resolution - `type: none` means that type is unspecified, needs a resolution - reloads are ignored as per previous resolution - Renamed the JS param "type" instead of "types" - Currently types are resolved both at old and new document separately, this needs a resolution. Closes #9383 See resolution: https://github.com/w3c/csswg-drafts/issues/9383#issuecomment-1779644377 * Make resolving the inbound transition a separate algo * Extract algo that is to be used by HTML spec * Clean up spec, improve names --- css-view-transitions-2/Overview.bs | 142 +++++++++++++++++------------ 1 file changed, 86 insertions(+), 56 deletions(-) diff --git a/css-view-transitions-2/Overview.bs b/css-view-transitions-2/Overview.bs index d1d10f1530d..f8201e1488a 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 {{RevealEvent|reveal}} is fired on the new {{Document}}, with a `viewTransition` property, + 1. An event named {{PageRevealEvent|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}}. @@ -137,8 +137,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; ```css // in both documents: - @view-transition same-origin { - trigger: navigation; + @view-transition { + navigation: auto; } ``` @@ -153,12 +153,12 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; - 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 {{RevealEvent}}. + - Intercept the {{ViewTransition}} object in the new document, using the {{PageRevealEvent}}. In both pages: ```css - @view-transition same-origin { - trigger: navigation; + @view-transition { + navigation: auto; } ``` @@ -263,7 +263,7 @@ document.startViewTransition({update: updateTheDOMSomehow}); 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 [=ready to render=]. +when unloading, and in the new document when it is [=reveal=]. ## @view-transition rule grammar ## {#view-transition-grammar} @@ -271,64 +271,73 @@ when unloading, and in the new document when it is [=ready to render=]. The ''@view-transition'' rule has the following syntax: 
-	@view-transition same-origin {
+	@view-transition {
 		<>
 	}
-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/trigger=] property ## {#view-transition-trigger-descriptor} +## The [=@view-transition/navigation=] descriptor ## {#view-transition-navigation-descriptor} 
-	Name: trigger
+	Name: navigation
 	For: @view-transition
-	Value: navigation | none
+	Value: auto | none
 	Initial: none
- 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). + The 'navigation' descriptor opts in to automatically starting a view transition when performing a navigation of a certain type. + It needs to be enabled both in the old document (when unloading) and in the new document (when reveal). -
+
: none :: There will be no transition. - : navigation + : auto :: The transition will be enabled if the navigation is same-origin, without cross-origin - redirects. + redirects, and is not a {{NavigationType/reload}}.
+## The [=@view-transition/type=] descriptor ## {#view-transition-type-descriptor} + 
+	Name: type
+	For: @view-transition
+	Value: <>+
+	Initial: n/a
+
+ + The 'type' descriptor sets the [=ViewTransition/active types=] for the transition + when capturing and performing the transition, equivalent to calling {{Document/startViewTransition(callbackOptions)}} with that {{StartViewTransitionOptions/type}}. + Omitting the ''@view-transition/type'' descriptor is equivalent to calling {{Document/startViewTransition(callbackOptions)}} without a {{StartViewTransition/type}}. # API # {#api} -## The RevealEvent ## {#ready-to-render-event} +## The PageRevealEvent ## {#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 RevealEvent : Event { + interface PageRevealEvent : Event { readonly attribute ViewTransition? viewTransition; }; -Note: this event is fired when the document is [=ready to render=]. +A {{PageRevealEvent}} has a null-or-{{ViewTransition}} view transition, initially null. + +Note: this event is fired when the document is [=reveal=]. -The viewTransition [=getter steps=] are to return the -[=inbound cross-document view-transition=] for [=this's=] [=relevant global object's=] [=associated document=]. +The viewTransition [=getter steps=] are to return [=this=]'s [=PageRevealEvent/view transition=]. ## Additions to {{Document}} ## {#additions-to-document-api} dictionary StartViewTransitionOptions { UpdateCallback? update = null; - sequence<DOMString>? types = null; + sequence<DOMString>? type = null; }; partial interface Document { @@ -348,7 +357,7 @@ The <dfn attribute for=RevealEvent>viewTransition</dfn> [=getter steps=] are to 1. Let |viewTransition| be the result of running [=method steps=] for {{Document/startViewTransition(updateCallback)}} given |callbackOptions|'s {{StartViewTransitionOptions/update}}. - 1. Set |viewTransition|'s [=ViewTransition/active types=] to |callbackOptions|'s {{StartViewTransitionOptions/types}}. + 1. Set |viewTransition|'s [=ViewTransition/active types=] to |callbackOptions|'s {{StartViewTransitionOptions/type}}. 1. Return |viewTransition|. </div> @@ -368,11 +377,11 @@ partial interface CSSRule { The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule. <xmp class=idl> - enum ViewTransitionTrigger { "navigation", "none" }; + enum ViewTransitionNavigation { "auto", "none" }; [Exposed=Window] interface CSSViewTransitionRule : CSSRule { - readonly attribute CSSOMString navigationConditionText; - attribute ViewTransitionTrigger trigger; + attribute ViewTransitionNavigation navigation; + attribute DOMTokenList? type; }; @@ -385,7 +394,7 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule. A {{Document}} additionally has:
- : ready to render fired + : pagereveal fired :: a boolean, initially false. ### Additions to {{ViewTransition}} ### {#view-transitions-extension} @@ -395,6 +404,8 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule. : is inbound cross-document transition :: a boolean, initially false. + Issue: should a cross-document transition take precedent? See [#9512](https://github.com/w3c/csswg-drafts/issues/9512) + : active types :: Null or a [=list=] of strings, initially null.
@@ -405,7 +416,7 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule. Prepend a step at the beginning of the task [=queue a global task|queued=] on |navigable|'s [=active window=] when applying the history step (14.11.1, here): - If |changingNavigationContinuation| update-only is false, then [=setup outbound cross-document view transition=] given |oldDocument|, |newDocument| and the remaining steps and return from these steps. + If |changingNavigationContinuation| update-only is false, then [=setup cross-document view-transition=] given |oldDocument|, |newDocument|, |navigationType|, and the remaining steps and return from these steps. Note: This would wait until a transition is captured or skipped before proceeding to unloading the old document and activating the new one. @@ -413,36 +424,49 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule.
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|, run the [=ready to render=] steps for |doc|. + 1. For each [=fully active=] {{Document}} |doc| in |docs|, run the [=reveal=] steps for |doc|.
Run the following step at the end of [=Document/reactivate=]: - 1. Set |document|'s [=ready to render fired=] to false. + 1. Set |document|'s [=pagereveal fired=] to false.
-
- When {{Document}} |document| is ready to render: - 1. If |document|'s [=document/ready to render fired=] is true, then return. +
+ To reveal {{Document}} |document|: + 1. If |document|'s [=document/page pagereveal fired=] is false, then: + 1. Let |transition| be the result of [=activating cross-document view-transition=] for |document|. - 1. Let |transition| be the result of getting the [=inbound cross-document view-transition=] for |document|. + 1. [=Fire an event=] named pagereveal at |document|'s [=relevant global object=], + using {{PageRevealEvent}}, with [=PageRevealEvent/view transition=] initialized to . - 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. Set |document|'s [=document/page pagereveal fired=] to true. +
+ +## Setting up and activating the cross-document view transition ## {#setting-up-and-activating-the-cross-document-view-transition} + +### Resolving the ''@view-transition''' rule + +
+ To get the resolve @view-transition rule for a {{Document}} |document|: - 1. Fire a new event named reveal on |document|'s [=relevant global object=], - using {{RevealEvent}}. + 1. Let |matchingRule| be the last ''@view-transition'' rule in |document| which has a ''@view-transition/navigation'' descriptor whose [=computed value=] is ''@view-transition/navigation/auto''. - 1. If |transition| is not null, then [=activate view transition|activate=] |transition|. + 1. If |matchingRule| is not found, then return "not found". - 1. Set |document|'s [=document/ready to render fired=] to true. + 1. If |matchingRule| contains a ''@view-transition/type'' descriptor, then return a [=list=] of strings corresponding to that descriptor's [=computed value=]. + + 1. Return null.
-## Setting up and activating the cross-document view transition ## {#setting-up-and-activating-the-cross-document-view-transition} +### Setting up the view-transition in the old {{Document}}
- To setup outbound cross-document view transition given a {{Document}} |oldDocument|, - a {{Document}} |newDocument|, and |onReady|, which is an algorithm accepting nothing: + To setup cross-document view-transition given a {{Document}} |oldDocument|, + a {{Document}} |newDocument|, a {{NavigationType}} |navigationType|, and |onReady|, which is an algorithm accepting nothing: + + 1. If |navigationType| is {{NavigationType/reload}}, then return. 1. If |oldDocument|'s [=environment settings object/origin=] is not [=same origin=] as |newDocument|'s [=environment settings object/origin=] then call |onReady| and return. @@ -453,10 +477,12 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule. Note: A document with a non-null [=latest entry=] is being [=Document/reactivated=], in which case we don't need to check for cross-origin redirects. - 1. If |oldDocument| does not [=opt in to cross-document view transitions=], then call |onReady| and return. + 1. [=Resolve @view-transition rule=] for |oldDocument| and let |resolvedRule| be the result. + + 1. If |resolvedRule| is "not found", 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 [=ready to render=]. + We check the opt-in for |newDocument| when it is [=reveal=]. 1. If |oldDocument|'s [=active view transition=] is not null, then [=skip the view transition|skip=] |oldDocument|'s [=active view transition=] @@ -466,7 +492,7 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule. to unload. 1. Let |outboundTransition| be a new {{ViewTransition}} object in |oldDocument|'s [=relevant Realm=], - whose [=ViewTransition/process old state captured=] is set to the following steps: + whose [=ViewTransition/active types=] is |resolvedRule|, and whose [=ViewTransition/process old state captured=] is set to the following steps: Issue: should we check for the opt-in again, in case there was a CSSOM change in a requestAnimationFrame callback? @@ -499,8 +525,10 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule. Note: The process continues in [=setup view transition=], via [=perform pending transition operations=].
+### Activating the view-transition in the new {{Document}} +
- To get the inbound cross-document view-transition for a {{Document}} |document|: + To activate cross-document view-transition for {{Document}} |document|: 1. Let |transition| be |document|'s [=active view transition=]. @@ -508,15 +536,17 @@ The {{CSSViewTransitionRule}} represents a ''@view-transition'' rule. 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 [=ready to render=]. + transition was started before the page was [=reveal=]. - 1. Return |transition|. -
+ 1. [=Resolve @view-transition rule=] for |document| and let |resolvedRule| be the result. -
- A {{Document}} |document| is said to opt in to cross-document view transitions - if the [=computed value=] of trigger - for |document| is navigation. + 1. If |resolvedRule| is "not found", then [=skip the view transition|skip=] |transition| and return null. + + 1. Set |transition|'s [=ViewTransition/active types=] to |resolvedRule|. + + 1. [=activate view transition|Activate=] |transition|. + + 1. Return |transition|.