Technical review: Document cross-document view transitions

[chrisdavidmills]

Note: This technical review is now completed and approved. For the follow-on editorial review, see #34118

---

Description

Chrome 123/124 includes features required for developers to create cross-document View Transitions. This includes:

• The PageRevealEvent interface
• The pagereveal event
• The PageSwapEvent interface
• The pageswap event
• The NavigationActivation interface
• The @view-transition at rule
• <link rel="expect">

This PR adds content for all of these. In addition, it:

• Updates the View Transitions API landing page to cover these new features.
• Moves the guide content to a separate "Using the View Transitions API" article.
• Makes some updates to existing view transitions pages, so that they work for SPA and MPA use cases.

Related ChromeStatus entries:

• https://chromestatus.com/feature/5118874666663936
• https://chromestatus.com/feature/5205586941837312
• https://chromestatus.com/feature/5113053598711808

Motivation

Additional details

Related issues and pull requests

• dom-examples demo: DO NOT MERGE YET: Add cross-document view transitions demo dom-examples#265
• BCD: Add data for cross-document view transitions features browser-compat-data#22638

[github-actions]

Preview URLs (32 pages)

• /en-US/docs/Web/API/Document/startViewTransition
• /en-US/docs/Web/API/HTML_DOM_API
• /en-US/docs/Web/API/NavigationActivation/entry
• /en-US/docs/Web/API/NavigationActivation/from
• /en-US/docs/Web/API/NavigationActivation/navigationType
• /en-US/docs/Web/API/NavigationActivation
• /en-US/docs/Web/API/Navigation_API
• /en-US/docs/Web/API/PageRevealEvent/PageRevealEvent
• /en-US/docs/Web/API/PageRevealEvent/viewTransition
• /en-US/docs/Web/API/PageRevealEvent
• /en-US/docs/Web/API/PageSwapEvent/PageSwapEvent
• /en-US/docs/Web/API/PageSwapEvent/activation
• /en-US/docs/Web/API/PageSwapEvent/viewTransition
• /en-US/docs/Web/API/PageSwapEvent
• /en-US/docs/Web/API/ViewTransition/finished
• /en-US/docs/Web/API/ViewTransition/ready
• /en-US/docs/Web/API/ViewTransition/skipTransition
• /en-US/docs/Web/API/ViewTransition/updateCallbackDone
• /en-US/docs/Web/API/ViewTransition
• /en-US/docs/Web/API/View_Transitions_API/Using
• /en-US/docs/Web/API/View_Transitions_API
• /en-US/docs/Web/API/Window/pagereveal_event
• /en-US/docs/Web/API/Window/pageswap_event
• /en-US/docs/Web/API/Window
• /en-US/docs/Web/CSS/::view-transition-group
• /en-US/docs/Web/CSS/::view-transition-image-pair
• /en-US/docs/Web/CSS/::view-transition-new
• /en-US/docs/Web/CSS/::view-transition-old
• /en-US/docs/Web/CSS/::view-transition
• /en-US/docs/Web/CSS/@view-transition
• /en-US/docs/Web/CSS/view-transition-name
• /en-US/docs/Web/HTML/Attributes/rel

Flaws (7)

Note! 29 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/API/HTML_DOM_API
Title: The HTML DOM API
Flaw count: 5

• macros:
  • /en-US/docs/Web/API/HTMLDirectoryElement does not exist
  • /en-US/docs/Web/API/HTMLFrameElement does not exist
  • /en-US/docs/Web/API/HTMLIsIndexElement does not exist
  • /en-US/docs/Web/API/External does not exist
  • /en-US/docs/Web/API/ApplicationCache does not exist

---

URL: /en-US/docs/Web/API/NavigationActivation
Title: NavigationActivation
Flaw count: 1

• macros:
  • /en-US/docs/Web/API/Navigation/activation does not exist

---

URL: /en-US/docs/Web/HTML/Attributes/rel
Title: HTML attribute: rel
Flaw count: 1

• broken_links:
  • No need for the pathname in anchor links if it's the same page

External URLs (22)

URL: /en-US/docs/Web/API/View_Transitions_API
Title: View Transitions API

• https://developer.chrome.com/docs/web-platform/view-transitions/ (2 times) (Note! This may be a new URL 👀)
• https://http203-playlist.netlify.app/ (1 time) (Note! This may be a new URL 👀)
• https://mdn.github.io/dom-examples/view-transitions/mpa/ (1 time) (Note! This may be a new URL 👀)
• https://mdn.github.io/dom-examples/view-transitions/spa/ (1 time) (Note! This may be a new URL 👀)
• https://view-transitions.netlify.app/profiles/mpa/ (1 time) (Note! This may be a new URL 👀)
• https://web.dev/articles/bfcache (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/View_Transitions_API/Using
Title: Using the View Transitions API

• https://developer.chrome.com/docs/web-platform/view-transitions/ (1 time) (Note! This may be a new URL 👀)
• https://mdn.github.io/dom-examples/view-transitions/mpa/ (2 times) (Note! This may be a new URL 👀)
• https://mdn.github.io/dom-examples/view-transitions/spa/ (2 times) (Note! This may be a new URL 👀)
• https://view-transitions.netlify.app/profiles/mpa/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/PageSwapEvent
Title: PageSwapEvent

• https://view-transitions.netlify.app/profiles/mpa/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/Window
Title: Window

• https://web.dev/articles/bfcache (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/Window/pageswap_event
Title: Window: pageswap event

• https://view-transitions.netlify.app/profiles/mpa/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/Window/pagereveal_event
Title: Window: pagereveal event

• https://view-transitions.netlify.app/profiles/mpa/ (1 time) (Note! This may be a new URL 👀)
• https://web.dev/articles/bfcache (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/NavigationActivation
Title: NavigationActivation

• https://view-transitions.netlify.app/profiles/mpa/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/PageRevealEvent
Title: PageRevealEvent

• https://view-transitions.netlify.app/profiles/mpa/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/Document/startViewTransition
Title: Document: startViewTransition() method

• https://mdn.github.io/dom-examples/view-transitions/spa/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/@view-transition
Title: @view-transition

• https://mdn.github.io/dom-examples/view-transitions/mpa/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/::view-transition-group
Title: ::view-transition-group

• https://drafts.csswg.org/css-view-transitions-1/ (2 times) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/::view-transition-old
Title: ::view-transition-old

• https://drafts.csswg.org/css-view-transitions-1/ (2 times) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/::view-transition-new
Title: ::view-transition-new

• https://drafts.csswg.org/css-view-transitions-1/ (2 times) (Note! This may be a new URL 👀)

(comment last updated: 2024-06-13 14:41:53)

[bramus]

Apologies for the delay, but here’s a review :)

[bramus]

More code comments. For the one in pageswap I await e.viewTransition.finished, for the one in pagereveal it’s e.viewTransition.ready.

[chrisdavidmills]

Thanks again @bramus. I made a couple more updates in light of your further comments. Let me know if you spot anything else. If not, then we can probably move this forward to editorial review stage.

One thing (which is not a blocker) — I updated the comment about BFCache in the code to:

(this is to deal with BFCache)

Can you explain what this comment means? Because readers will wonder. I'd like to add an explanation. I think I know what this is getting at, but I want to make sure.

[bramus]

Approved.

[bramus]

One thing (which is not a blocker) — I updated the comment about BFCache in the code to:

(this is to deal with BFCache)

Can you explain what this comment means? Because readers will wonder. I'd like to add an explanation. I think I know what this is getting at, but I want to make sure.

On page1, in pageswap I am setting the v-t-name values on the fly on the page. This changed state is what gets persisted in BFCache. If I were to hit the back button from page2 back to page1, the pagereveal from page1 would try and set the same v-t-name values, resulting in a conflict because now to different elements would have the same v-t-name. Therefore I have to make sure the names are unset before the page goes into BFCache.

[chrisdavidmills]

OK, closing this PR. Next stage is to create a new PR based on the same branch to contain the editorial review.